FINISH: Register Page

Could do more design

frontend/src/components/Auth/AuthModal.tsx

@@ -83,7 +83,7 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
         
         <div
           className="container fixed inset-0 flex flex-col items-center justify-around z-[9999] 
-        h-auto max-h-[75vh] m-auto min-w-[31vw] w-fit py-[50px] rounded-[5rem]"
+        h-auto max-h-[75vh] m-auto max-w-[350px] min-w-[34vw]  py-[50px] rounded-[5rem]"
           style={{ "--spin-duration": spinDuration } as React.CSSProperties}
         >
           {/*Border Container*/}

frontend/src/components/Auth/LoginForm.tsx

@@ -104,33 +104,33 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
       <div className="h-[100%] flex flex-col items-center p-10">
         <h1 className="flex flex-col text-white text-[2.5em] font-[800]"> Login </h1>
         <div className="mt-10 bg-white/10 backdrop-blur-md p-6 md:p-16 rounded-xl shadow-lg w-full 
-       md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] h-[26em] border border-white/10">
+       md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] h-[27.5em] border border-white/10">
 
           <form
             onSubmit={handleSubmit}
             id="login-form"
-            className="flex flex-col space-y-8"
+            className="flex flex-col"
           >
             {errors.general && (
-              <p className="text-red-500 text-sm text-center">{errors.general}</p>
+              <p className="text-red-500 text-sm text-center text-[0.75em]">{errors.general}</p>
             )}
 
             {errors.username && (
-              <p className="text-red-500 text-center">{errors.username}</p>
+              <p className="text-red-500 text-center text-[0.75em]">{errors.username}</p>
             )}
             <Input
               name="username"
               placeholder="Username"
               value={formData.username}
               onChange={handleInputChange}
-              extraClasses={`w-full p-3 ${errors.username ? "border-red-500" : ""}`}
+              extraClasses={`w-full mb-[2em] p-3 ${errors.username ? "border-red-500" : ""}`}
             />
 
             {errors.password && (
-              <p className="text-red-500 mt-3 text-sm">{errors.password}</p>
+              <p className="text-red-500 text-center text-[0.75em]">{errors.password}</p>
             )}
 
-            <div className="">
+            <div className="mb-[2em]">
               <Input
                 name="password"
                 type="password"

frontend/src/components/Auth/RegisterForm.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import Input from "../Layout/Input";
 import Button from "../Layout/Button";
 import { useAuth } from "../../context/AuthContext";
+import GoogleLogin from "./OAuth";
 
 interface RegisterFormData {
   username: string;
@@ -107,64 +108,88 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
   };
 
   return (
-    <form
+    <>
-      onSubmit={handleSubmit}
+      <div className="mb-2">
-      id="register-form"
+        <div className="h-[100%] flex flex-col items-center p-10">
-      className="h-[100%] flex flex-col justify-evenly items-center"
+          <h1 className="flex flex-col text-white text-[2.5em] font-[800]"> Register </h1>
-    >
+          <div className="mt-5 bg-white/10 backdrop-blur-md p-10 md:px-16 rounded-xl shadow-lg w-full 
-      {errors.general && (
+          md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] h-[31em] border border-white/10">
-        <p className="text-red-500 text-sm text-center">{errors.general}</p>
-      )}
 
-      {errors.username && (
+            <form
-        <p className="text-red-500 mt-3 text-sm">{errors.username}</p>
+              onSubmit={handleSubmit}
-      )}
+              id="register-form"
-      <Input
+              className="flex flex-col"
-        name="username"
+            >
-        placeholder="Username"
+              <div className="relative w-full">
-        value={formData.username}
+                {errors.general && (
-        onChange={handleInputChange}
+                  <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.general}</p>
-        extraClasses={`${errors.username ? "border-red-500" : ""}`}
+                )}
-      />
 
-      {errors.email && (
+                {errors.username && (
-        <p className="text-red-500 mt-3 text-sm">{errors.email}</p>
+                  <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.username}</p>
-      )}
+                )}
-      <Input
+                <Input
-        name="email"
+                  name="username"
-        type="email"
+                  placeholder="Username"
-        placeholder="Email"
+                  value={formData.username}
-        value={formData.email}
+                  onChange={handleInputChange}
-        onChange={handleInputChange}
+                  extraClasses={`w-full mb-[2em] p-3 ${errors.username ? "border-red-500" : ""}`}
-        extraClasses={`${errors.email ? "border-red-500" : ""}`}
+                />
-      />
+              </div>
 
-      {errors.password && (
+              <div className="relative w-full">
-        <p className="text-red-500 mt-3 text-sm">{errors.password}</p>
+                {errors.email && (
-      )}
+                  <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.email}</p>
-      <Input
+                )}
-        name="password"
+                <Input
-        type="password"
+                  name="email"
-        placeholder="Password"
+                  type="email"
-        value={formData.password}
+                  placeholder="Email"
-        onChange={handleInputChange}
+                  value={formData.email}
-        extraClasses={`${errors.password ? "border-red-500" : ""}`}
+                  onChange={handleInputChange}
-      />
+                  extraClasses={`w-full mb-[2em] p-3 ${errors.email ? "border-red-500" : ""}`}
+                />
+              </div>
 
-      {errors.confirmPassword && (
+              <div className="relative w-full">
-        <p className="text-red-500 mt-3 text-sm">{errors.confirmPassword}</p>
+                {errors.password && (
-      )}
+                  <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.password}</p>
-      <Input
+                )}
-        name="confirmPassword"
+                <Input
-        type="password"
+                  name="password"
-        placeholder="Confirm Password"
+                  type="password"
-        value={formData.confirmPassword}
+                  placeholder="Password"
-        onChange={handleInputChange}
+                  value={formData.password}
-        extraClasses={`${errors.confirmPassword ? "border-red-500" : ""}`}
+                  onChange={handleInputChange}
-      />
+                  extraClasses={`w-full mb-[2em] p-3 ${errors.password ? "border-red-500" : ""}`}
+                />
+              </div>
+              <div className="relative w-full">
 
-      <Button type="submit">Register</Button>
+                {errors.confirmPassword && (
-    </form>
+                  <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.confirmPassword}</p>
+                )}
+                <Input
+                  name="confirmPassword"
+                  type="password"
+                  placeholder="Confirm Password"
+                  value={formData.confirmPassword}
+                  onChange={handleInputChange}
+                  extraClasses={`w-full mb-[2em] p-3 ${errors.confirmPassword ? "border-red-500" : ""}`}
+                />
+              </div>
+
+              <Button type="submit">Register</Button>
+            </form>
+          </div>
+          <div className="flex flex-col flex-items justify-evenly items-center w-full h-[5em]">
+                  <GoogleLogin />
+                </div>
+        </div>
+        
+      </div>
+
+    </>
   );
 };