Merge pull request #18 from encryptedge/patch/fixes

Patch/fixes
encryptedge · Jan 22, 2024 · e64bb7a · e64bb7a
2 parents 6103e61 + 6340125
commit e64bb7a
Show file tree

Hide file tree

Showing 17 changed files with 156 additions and 50 deletions.
diff --git a/apps/web/src/components/cards/create-team-card.tsx b/apps/web/src/components/cards/create-team-card.tsx
@@ -0,0 +1,65 @@
+import React from "react";
+import apiClient from "../../libs/api.client";
+import { useState } from "react";
+import { toast } from "react-toastify";
+
+function CreateTeamCard() {
+  const [teamName, setTeamName] = useState("");
+  const [teamCode, setTeamCode] = useState("");
+
+  async function submitData(evt) {
+    evt.preventDefault();
+    try {
+      const res = await apiClient.post("/team", {
+        team_name: teamName,
+        join_code: teamCode,
+      });
+      window.location.href = "/whoami";
+    } catch (err) {
+      console.error("errr");
+      toast.error("Error creating team");
+    }
+  }
+  return (
+    <div className="login-card">
+      <h2>Create A Team</h2>
+      <form onSubmit={submitData}>
+        <div className="form-control">
+          <div className="form-el-container">
+            <label htmlFor="team_name">Team Name</label>
+          </div>
+          <div className="form-el-container">
+            <input
+              className="forminput"
+              type="text"
+              id="team_name"
+              value={teamName}
+              onChange={(event) => setTeamName(event.target.value)}
+              placeholder="Enter your Team Name"
+            />
+          </div>
+        </div>
+        <div className="form-control">
+          <div className="form-el-container">
+            <label htmlFor="team_code">Team Code</label>
+          </div>
+          <div className="form-el-container">
+            <input
+              className="forminput"
+              type="text"
+              id="team_code"
+              value={teamCode}
+              onChange={(event) => setTeamCode(event.target.value)}
+              placeholder="Enter your Team Code"
+            />
+          </div>
+        </div>
+        <button className="btn" type="submit">
+          Create Team
+        </button>
+      </form>
+    </div>
+  );
+}
+
+export default CreateTeamCard;
diff --git a/apps/web/src/components/cards/join-team-card.tsx b/apps/web/src/components/cards/join-team-card.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import apiClient from "../../libs/api.client";
+import { useState } from "react";
+
+function JoinTeamCard() {
+  const [teamCode, setTeamCode] = useState("");
+
+  return (
+    <div className="signup-card login-card">
+      <h2>Join a Team</h2>
+      <form onSubmit={() => {}}>
+        <div className="form-control">
+          <div className="form-el-container">
+            <label htmlFor="team_code">Team Code</label>
+          </div>
+          <div className="form-el-container">
+            <input
+              className="forminput"
+              type="text"
+              id="team_code"
+              value={teamCode}
+              onChange={(event) => setTeamCode(event.target.value)}
+              placeholder="Enter your Team Code"
+            />
+          </div>
+        </div>
+        <button className="btn" type="submit">
+          Join Team
+        </button>
+      </form>
+    </div>
+  );
+}
+
+export default JoinTeamCard;
diff --git a/apps/web/src/components/cards/login-card.tsx b/apps/web/src/components/cards/login-card.tsx
@@ -26,8 +26,8 @@ export const LoginCard = () => {
         }
       )
       .then((response) => {
-        if (response.data.message === "Login successful") {
-          token = response.data.token;
+        if (response.data.status === 200) {
+          token = response.data.message.token;
           localStorage.setItem("token", token);
           toast.success("Login Successful!", {
             position: "bottom-right",
@@ -61,48 +61,44 @@ export const LoginCard = () => {
   };
   return (
     <div>
-      <div className='login-card'>
+      <div className="login-card">
         <h2>Sign In</h2>
         <form onSubmit={handleSubmit}>
-          <div className='form-control'>
-            <div className='form-el-container'>
-              <label htmlFor='email'>Email</label>
+          <div className="form-control">
+            <div className="form-el-container">
+              <label htmlFor="email">Email</label>
             </div>
-            <div className='form-el-container'>
+            <div className="form-el-container">
               <input
-                className='forminput'
-                type='text'
-                id='email'
+                className="forminput"
+                type="text"
+                id="email"
                 value={email}
                 onChange={(event) => setEmail(event.target.value)}
-                placeholder='Enter your email'
+                placeholder="Enter your email"
               />
             </div>
           </div>
-          <div className='form-control'>
-            <div className='form-el-container'>
-              <label htmlFor='password'>Password</label>
+          <div className="form-control">
+            <div className="form-el-container">
+              <label htmlFor="password">Password</label>
             </div>
-            <div className='form-el-container'>
+            <div className="form-el-container">
               <input
-                className='forminput'
-                type='password'
-                id='password'
+                className="forminput"
+                type="password"
+                id="password"
                 value={password}
                 onChange={(event) => setPassword(event.target.value)}
-                placeholder='Enter your password'
+                placeholder="Enter your password"
               />
             </div>
           </div>
-          <button className='btn' type='submit'>
+          <button className="btn" type="submit">
             Sign In
           </button>
         </form>
       </div>
-      <p className='read-the-docs'>
-        Don&apos;t have a account, register from{" "}
-        <Link to='/register'>here</Link>.
-      </p>
     </div>
   );
 };
diff --git a/apps/web/src/components/cards/register-card.tsx b/apps/web/src/components/cards/register-card.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { ToastContainer, toast } from "react-toastify";
 import { Link } from "react-router-dom";
 
-import "react-toastify/dist/ReactToastify.css";
+
 import apiClient from "../../libs/api.client";
 
 export const RegisterCard = () => {
@@ -64,8 +64,8 @@ export const RegisterCard = () => {
 
   return (
     <div>
-      <div className='login-card'>
-        <h2>Sign In</h2>
+      <div className='signup-card login-card'>
+        <h2>Sign Up</h2>
         <form onSubmit={handleSubmit}>
           <div className='form-control'>
             <div className='form-el-container'>
@@ -132,9 +132,6 @@ export const RegisterCard = () => {
           </button>
         </form>
       </div>
-      <p className='read-the-docs'>
-        Already have a account? Login from <Link to='/login'>here</Link>.
-      </p>
     </div>
   );
 };
diff --git a/apps/web/src/components/challenge.jsx b/apps/web/src/components/challenge.jsx
@@ -38,7 +38,7 @@ const Challenge = ({ id, name, madeby, tags, desp, point, setMachines, solved })
                         }
                     }).then(res => {
                         if(res.data.message === 'Invalid token') return window.location.href = '/login';
-                        setMachines(res.data);
+                        setMachines(res.data.message);
                     })
                 } else {
                     toast.error('Wrong Flag!', {

diff --git a/apps/web/src/main.jsx b/apps/web/src/main.jsx
@@ -4,12 +4,15 @@ import App from "./App.jsx";
 import { BrowserRouter } from "react-router-dom";
 import "./index.css";
 import "./styles/logo.styles.css";
+import "react-toastify/dist/ReactToastify.css";
+import { ToastContainer } from "react-toastify";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <BrowserRouter>
       <App />
+      <ToastContainer />
     </BrowserRouter>
   </React.StrictMode>
 );
diff --git a/apps/web/src/pages/about.jsx b/apps/web/src/pages/about.jsx
@@ -1,5 +1,5 @@
 
-import "react-toastify/dist/ReactToastify.css";
+
 import Navbar from "../components/navbar";
 import { url } from '../libs/api.client';
 

diff --git a/apps/web/src/pages/app.jsx b/apps/web/src/pages/app.jsx
@@ -1,4 +1,4 @@
-import "react-toastify/dist/ReactToastify.css";
+
 import { useEffect, useState } from "react";
 import Machines from "../components/machine";
 import Challenge from "../components/challenge";
@@ -24,10 +24,10 @@ function Player() {
         },
       })
       .then((res) => {
-        if (!Array.isArray(res.data)) return (window.location.href = "/");
+        if (!Array.isArray(res.data.message)) return (window.location.href = "/");
         if (res.data.message === "Invalid token")
           return (window.location.href = "/");
-        setMachines(res.data);
+        setMachines(res.data.message);
       });
   }, [token]);
 

diff --git a/apps/web/src/pages/home.jsx b/apps/web/src/pages/home.jsx
@@ -1,9 +1,11 @@
 import "../styles/home.styles.css";
-import "react-toastify/dist/ReactToastify.css";
+
 import apiClient from "../libs/api.client";
 import Navbar from "../components/navbar";
 import { useEffect, useState } from "react";
 import { LoginCard } from "../components/cards/login-card";
+import CreateTeamCard from "../components/cards/create-team-card";
+import JoinTeamCard from "../components/cards/join-team-card";
 import { RegisterCard } from "../components/cards/register-card";
 
 function Home() {
@@ -23,7 +25,7 @@ function Home() {
         if (res.data.error) return;
 
         if (res.data.message === "Invalid token") return;
-        setUser(res.data);
+        setUser(res.data.message);
       });
   }, []);
 
@@ -36,19 +38,24 @@ function Home() {
       />
       <div>
         {user === null ? (
-          <div className='auht-grid'>
+          <div className="auht-grid">
             <LoginCard />
             <RegisterCard />
           </div>
-        ) : (
-          <div className='home-card'>
-            <div className='home-card-content'>
+        ) : user.team ? (
+          <div className="home-card">
+            <div className="home-card-content">
               {/* <p>
                 You are currently in {user.team_name} team. Your team has{" "}
                 {user.team_score} points.
               </p> */}
             </div>
           </div>
+        ) : (
+          <div style={{ width: "max-content" }} className="auht-grid">
+            <CreateTeamCard />
+            <JoinTeamCard />
+          </div>
         )}
       </div>
     </div>

diff --git a/apps/web/src/pages/leaderboard.jsx b/apps/web/src/pages/leaderboard.jsx
@@ -1,4 +1,4 @@
-import "react-toastify/dist/ReactToastify.css";
+
 import { useEffect, useState } from "react";
 import apiClient from "../libs/api.client";
 import Navbar from "../components/navbar";

diff --git a/apps/web/src/pages/login.jsx b/apps/web/src/pages/login.jsx
@@ -3,7 +3,7 @@ import apiClient from "../libs/api.client";
 import { ToastContainer, toast } from "react-toastify";
 import { Link } from "react-router-dom";
 
-import "react-toastify/dist/ReactToastify.css";
+
 import Navbar from "../components/navbar";
 
 function Home() {

diff --git a/apps/web/src/pages/news.jsx b/apps/web/src/pages/news.jsx
@@ -1,4 +1,4 @@
-import "react-toastify/dist/ReactToastify.css";
+
 import Navbar from "../components/navbar";
 
 function News() {

diff --git a/apps/web/src/pages/register.jsx b/apps/web/src/pages/register.jsx
@@ -3,7 +3,7 @@ import apiClient from "../libs/api.client";
 import { ToastContainer, toast } from "react-toastify";
 import { Link } from "react-router-dom";
 
-import "react-toastify/dist/ReactToastify.css";
+
 
 function Home() {
   const [email, setEmail] = useState("");

diff --git a/apps/web/src/pages/verify.jsx b/apps/web/src/pages/verify.jsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import apiClient from "../libs/api.client";
 import { ToastContainer, toast } from "react-toastify";
 
-import "react-toastify/dist/ReactToastify.css";
+
 
 function Home() {
   const [otp, setOtp] = useState("");

diff --git a/apps/web/src/pages/whoami.jsx b/apps/web/src/pages/whoami.jsx
@@ -1,5 +1,5 @@
 import "../styles/App.css";
-import "react-toastify/dist/ReactToastify.css";
+
 import { useState, useEffect } from "react";
 import apiClient from "../libs/api.client";
 import Navbar from "../components/navbar";
@@ -27,7 +27,7 @@ function WhoAmI() {
 
         if (res.data.message === "Invalid token")
           return (window.location.href = "/");
-        setUserWhoami(res.data);
+        setUserWhoami(res.data.message);
       });
 
     apiClient
@@ -41,7 +41,7 @@ function WhoAmI() {
 
         if (res.data.message === "Invalid token")
           return (window.location.href = "/");
-        setTeamWhoami(res.data);
+        setTeamWhoami(res.data.message);
       });
         apiClient.get("/stats/team", {
             headers: {
@@ -50,7 +50,7 @@ function WhoAmI() {
         }).then(res => {
             if(res.data.error) return window.location.href = '/login'
             if(res.data.message === 'Invalid token') return window.location.href = '/login';
-            setTeamStats(res.data);
+            setTeamStats(res.data.message);
         })
     }, [])
 

diff --git a/apps/web/src/styles/App.css b/apps/web/src/styles/App.css
@@ -39,6 +39,9 @@
   max-width: 30em;
   margin: 0 auto;
 }
+.signup-card{
+  border-left: 1px solid #FFF;
+}
 
 .form-control {
   display: block;

diff --git a/bootstrap.sh b/bootstrap.sh