added base cards for auth in home

encryptedge · Jan 3, 2024 · e7ceb59 · e7ceb59
1 parent fd5a8c1
commit e7ceb59
Show file tree

Hide file tree

Showing 4 changed files with 277 additions and 2 deletions.
diff --git a/apps/web/src/components/cards/login-card.tsx b/apps/web/src/components/cards/login-card.tsx
@@ -0,0 +1,108 @@
+import { useState } from "react";
+import apiClient from "../../libs/api.client";
+import { toast } from "react-toastify";
+import { Link } from "react-router-dom";
+
+export const LoginCard = () => {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  let token = localStorage.getItem("token");
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+
+    apiClient
+      .post(
+        "/user/login",
+        {
+          email,
+          password,
+        },
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      )
+      .then((response) => {
+        if (response.data.message === "Login successful") {
+          token = response.data.token;
+          localStorage.setItem("token", token);
+          toast.success("Login Successful!", {
+            position: "bottom-right",
+            autoClose: 3000,
+            hideProgressBar: true,
+            closeOnClick: true,
+            draggable: true,
+          });
+          setTimeout(() => {
+            window.location.href = "/app";
+          }, 3000);
+        } else {
+          toast.error("Login Failed!", {
+            position: "bottom-right",
+            autoClose: 3000,
+            hideProgressBar: true,
+            closeOnClick: true,
+            draggable: true,
+          });
+        }
+      })
+      .catch(() => {
+        toast.error("Login Failed!", {
+          position: "bottom-right",
+          autoClose: 3000,
+          hideProgressBar: true,
+          closeOnClick: true,
+          draggable: true,
+        });
+      });
+  };
+  return (
+    <div>
+      <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>
+            <div className='form-el-container'>
+              <input
+                className='forminput'
+                type='text'
+                id='email'
+                value={email}
+                onChange={(event) => setEmail(event.target.value)}
+                placeholder='Enter your email'
+              />
+            </div>
+          </div>
+          <div className='form-control'>
+            <div className='form-el-container'>
+              <label htmlFor='password'>Password</label>
+            </div>
+            <div className='form-el-container'>
+              <input
+                className='forminput'
+                type='password'
+                id='password'
+                value={password}
+                onChange={(event) => setPassword(event.target.value)}
+                placeholder='Enter your password'
+              />
+            </div>
+          </div>
+          <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
@@ -0,0 +1,140 @@
+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 = () => {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+
+    apiClient
+      .post(
+        "/user/register",
+        {
+          email,
+          password,
+          firstName,
+          lastName,
+        },
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      )
+      .then((response) => {
+        if (response.data.email === email) {
+          toast.success("Register Successful!", {
+            position: "bottom-right",
+            autoClose: 3000,
+            hideProgressBar: true,
+            closeOnClick: true,
+            draggable: true,
+          });
+          setTimeout(() => {
+            window.location.href = "/verify";
+          }, 3000);
+        } else {
+          toast.error("Register Failed!", {
+            position: "bottom-right",
+            autoClose: 3000,
+            hideProgressBar: true,
+            closeOnClick: true,
+            draggable: true,
+          });
+        }
+      })
+      .catch(() => {
+        toast.error("Register Failed!", {
+          position: "bottom-right",
+          autoClose: 3000,
+          hideProgressBar: true,
+          closeOnClick: true,
+          draggable: true,
+        });
+      });
+  };
+
+  return (
+    <div>
+      <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>
+            <div className='form-el-container'>
+              <input
+                className='forminput'
+                type='text'
+                id='email'
+                value={email}
+                onChange={(event) => setEmail(event.target.value)}
+                placeholder='Enter your email'
+              />
+            </div>
+          </div>
+          <div className='form-control'>
+            <div className='form-el-container'>
+              <label htmlFor='password'>Password</label>
+            </div>
+            <div className='form-el-container'>
+              <input
+                className='forminput'
+                type='password'
+                id='password'
+                value={password}
+                onChange={(event) => setPassword(event.target.value)}
+                placeholder='Enter your password'
+              />
+            </div>
+          </div>
+          <div className='form-control'>
+            <div className='form-el-container'>
+              <label htmlFor='firstName'>First Name</label>
+            </div>
+            <div className='form-el-container'>
+              <input
+                className='forminput'
+                type='firstName'
+                id='firstName'
+                value={firstName}
+                onChange={(event) => setFirstName(event.target.value)}
+                placeholder='Enter your firstName'
+              />
+            </div>
+          </div>
+          <div className='form-control'>
+            <div className='form-el-container'>
+              <label htmlFor='lastName'>Last Name</label>
+            </div>
+            <div className='form-el-container'>
+              <input
+                className='forminput'
+                type='lastName'
+                id='lastName'
+                value={lastName}
+                onChange={(event) => setLastName(event.target.value)}
+                placeholder='Enter your lastName'
+              />
+            </div>
+          </div>
+          <button className='btn' type='submit'>
+            Sign Up
+          </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/pages/home.jsx b/apps/web/src/pages/home.jsx
@@ -1,8 +1,10 @@
-import "../styles/App.css";
+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 { RegisterCard } from "../components/cards/register-card";
 
 function Home() {
   const [user, setUser] = useState(null);
@@ -32,7 +34,23 @@ function Home() {
           user ? "Welcome back, " + user.last_name : "Welcome to eeCTF"
         }
       />
-      <p>hello</p>
+      <div>
+        {user === null ? (
+          <div className='auht-grid'>
+            <LoginCard />
+            <RegisterCard />
+          </div>
+        ) : (
+          <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>
     </div>
   );
 }

diff --git a/apps/web/src/styles/home.styles.css b/apps/web/src/styles/home.styles.css
@@ -0,0 +1,9 @@
+.auht-grid {
+  display: flex;
+  flex-direction: row;
+  gap: 3rem;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin: auto;
+}