Merge branch 'main' of https://github.com/john-david3/cs3305-team11

frontend/src/components/Auth/AuthModal.tsx

@@ -54,7 +54,7 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
       {/*Container*/}
       <div id="auth-modal"
         className="fixed inset-0 flex flex-col items-center justify-around z-[9000] 
-        h-[95vh] m-auto min-w-[65vw] w-fit py-[80px] rounded-[5rem]  transition-all animate-floating"
+        h-[95vh] m-auto min-w-[65vw] w-fit py-[80px] rounded-[5rem]  transition-all animate-floating "
       >
         {/* Login/Register Buttons Container */}
         <div className="absolute top-[60px] left-1/2 transform -translate-x-1/2 w-[300px] flex justify-center gap-8 transition-transform overflow-visible ">
@@ -80,16 +80,17 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
 
 
         </div>
+        
         <div
           className="container fixed inset-0 flex flex-col items-center justify-around z-[9999] 
-        h-[75vh] m-auto min-w-[45vw] 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*/}
           <div
             id="border-container"
-            className="front-content fixed inset-0 bg-gradient-to-br from-blue-950 via-purple-500 to-violet-800 flex flex-col justify-center
-          z-50 h-[70vh] mr-0.5 mb-0.5 m-auto min-w-[40vw] w-fit py-[50px] rounded-[2rem] transition-all"
+            className="front-content fixed ml-[1px] mt-[0.5px] inset-0 bg-authForm flex flex-col justify-center
+          z-50 h-[70vh] min-w-[30vw] w-fit py-[50px] rounded-[2rem] transition-all"
           >
             <div
               id="login-methods"
@@ -105,12 +106,15 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
             <>
             {authSwitch()}
             </>
+            
 
           
     
           </div>
         </div>
       </div>
+
+      
     </>
   );
 };

frontend/src/components/Auth/LoginForm.tsx

@@ -3,7 +3,7 @@ import Input from "../Layout/Input";
 import Button, { ToggleButton } from "../Layout/Button";
 import { useAuth } from "../../context/AuthContext";
 import GoogleLogin from "./OAuth";
-import { CircleHelp as ForgotIcon} from "lucide-react";
+import { CircleHelp as ForgotIcon } from "lucide-react";
 
 interface LoginFormData {
   username: string;
@@ -101,52 +101,70 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
 
   return (
     <>
-      <div className="h-[100%] flex flex-col justify-evenly items-center">
-        <h1 className="text-white text-[2.5em] font-[800]"> Login </h1>
-        <form
-          onSubmit={handleSubmit}
-          id="login-form"
-          className="h-[100%] flex flex-col items-center"
-        >
-          {errors.general && (
-            <p className="text-red-500 text-sm text-center">{errors.general}</p>
-          )}
+      <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-[27.5em] border border-white/10">
 
-          {errors.username && (
-            <p className="text-red-500 mt-3 text-sm">{errors.username}</p>
-          )}
-          <Input
-            name="username"
-            placeholder="Username"
-            value={formData.username}
-            onChange={handleInputChange}
-            extraClasses={`${errors.username ? "border-red-500" : ""}`}
-          />
+          <form
+            onSubmit={handleSubmit}
+            id="login-form"
+            className="flex flex-col"
+          >
+            {errors.general && (
+              <p className="text-red-500 text-sm text-center text-[0.75em]">{errors.general}</p>
+            )}
 
-          {errors.password && (
-            <p className="text-red-500 mt-3 text-sm">{errors.password}</p>
-          )}
-          <Input
-            name="password"
-            type="password"
-            placeholder="Password"
-            value={formData.password}
-            onChange={handleInputChange}
-            extraClasses={`${errors.password ? "border-red-500" : ""}`}
-          />
-          <button
-            type="button"
-            className="flex items-center justify-start bg-white text-gray-600 font-semibold py-1 px-2 rounded shadow-md w-[220px] hover:bg-gray-100 active:bg-gray-200"
-            onClick={onForgotPassword}>
-            <ForgotIcon className="flex flex-row justify-content "/>
-            Forgot Password
-          </button>
+            {errors.username && (
+              <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 mb-[2em] p-3 ${errors.username ? "border-red-500" : ""}`}
+            />
 
-          <Button type="submit">Login</Button>
-        </form>
-        <div className="flex flex-col flex-items justify-evenly items-center w-full h-[5em]">
-          <GoogleLogin />
+            {errors.password && (
+              <p className="text-red-500 text-center text-[0.75em]">{errors.password}</p>
+            )}
+
+            <div className="mb-[2em]">
+              <Input
+                name="password"
+                type="password"
+                placeholder="Password"
+                value={formData.password}
+                onChange={handleInputChange}
+                extraClasses={`w-full p-3 ${errors.password ? "border-red-500" : ""}`}
+              >
+
+              </Input>
+              <div className="flex flex-row">
+              <label className="flex w-full items-center justify-start cursor-pointer w-10px">
+                <input
+                  type="checkbox"
+                  className="accent-purple-600 w-3 h-3 mr-1"
+                />
+                <span className="sm:text-[0.5em] md:text-[0.8em]">Remember me</span>
+              </label>
+              <button
+                type="button"
+                className="flex w-full justify-end items-center justify-items-end sm:text-[0.5em] md:text-[0.8em] text-white font-semibold hover:scale-[1.05] transition-all ease-in"
+                onClick={onForgotPassword}>
+                <ForgotIcon size={16} className="flex flex-row mr-1" />
+                <span> Forgot Password </span>
+              </button>
+              </div>
+            </div>
+            <Button type="submit">Login</Button>
+          </form>
+
+          <div className="flex flex-col flex-items justify-evenly items-center w-full h-[5em]">
+            <GoogleLogin />
           </div>
+        </div>
       </div>
     </>
   );

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}
-      id="register-form"
-      className="h-[100%] flex flex-col justify-evenly items-center"
-    >
-      {errors.general && (
-        <p className="text-red-500 text-sm text-center">{errors.general}</p>
-      )}
+    <>
+      <div className="mb-2">
+        <div className="h-[100%] flex flex-col items-center p-10">
+          <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 
+          md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] h-[31em] border border-white/10">
 
-      {errors.username && (
-        <p className="text-red-500 mt-3 text-sm">{errors.username}</p>
-      )}
-      <Input
-        name="username"
-        placeholder="Username"
-        value={formData.username}
-        onChange={handleInputChange}
-        extraClasses={`${errors.username ? "border-red-500" : ""}`}
-      />
+            <form
+              onSubmit={handleSubmit}
+              id="register-form"
+              className="flex flex-col"
+            >
+              <div className="relative w-full">
+                {errors.general && (
+                  <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.general}</p>
+                )}
 
-      {errors.email && (
-        <p className="text-red-500 mt-3 text-sm">{errors.email}</p>
-      )}
-      <Input
-        name="email"
-        type="email"
-        placeholder="Email"
-        value={formData.email}
-        onChange={handleInputChange}
-        extraClasses={`${errors.email ? "border-red-500" : ""}`}
-      />
+                {errors.username && (
+                  <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.username}</p>
+                )}
+                <Input
+                  name="username"
+                  placeholder="Username"
+                  value={formData.username}
+                  onChange={handleInputChange}
+                  extraClasses={`w-full mb-[2em] p-3 ${errors.username ? "border-red-500" : ""}`}
+                />
+              </div>
 
-      {errors.password && (
-        <p className="text-red-500 mt-3 text-sm">{errors.password}</p>
-      )}
-      <Input
-        name="password"
-        type="password"
-        placeholder="Password"
-        value={formData.password}
-        onChange={handleInputChange}
-        extraClasses={`${errors.password ? "border-red-500" : ""}`}
-      />
+              <div className="relative w-full">
+                {errors.email && (
+                  <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.email}</p>
+                )}
+                <Input
+                  name="email"
+                  type="email"
+                  placeholder="Email"
+                  value={formData.email}
+                  onChange={handleInputChange}
+                  extraClasses={`w-full mb-[2em] p-3 ${errors.email ? "border-red-500" : ""}`}
+                />
+              </div>
 
-      {errors.confirmPassword && (
-        <p className="text-red-500 mt-3 text-sm">{errors.confirmPassword}</p>
-      )}
-      <Input
-        name="confirmPassword"
-        type="password"
-        placeholder="Confirm Password"
-        value={formData.confirmPassword}
-        onChange={handleInputChange}
-        extraClasses={`${errors.confirmPassword ? "border-red-500" : ""}`}
-      />
+              <div className="relative w-full">
+                {errors.password && (
+                  <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.password}</p>
+                )}
+                <Input
+                  name="password"
+                  type="password"
+                  placeholder="Password"
+                  value={formData.password}
+                  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>
-    </form>
+                {errors.confirmPassword && (
+                  <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>
+
+    </>
   );
 };
 

frontend/src/components/Layout/Input.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   extraClasses?: string;
+  children?: React.ReactNode;
 }
 
 const Input: React.FC<InputProps> = ({
@@ -10,19 +11,26 @@ const Input: React.FC<InputProps> = ({
   placeholder = "",
   value = "",
   extraClasses = "",
-  onChange = () => {},
+  onChange = () => { },
+  children,
   ...props // all other HTML input props
 }) => {
   return (
-    <input
-      name={name}
-      type={type}
-      placeholder={placeholder}
-      value={value}
-      onChange={onChange}
-      {...props}
-      className={`${extraClasses} p-2 rounded-[1rem] w-[20vw] focus:w-[30vw] bg-black/40 border border-gray-300 focus:border-purple-500 focus:outline-purple-500 text-center text-white text-xl transition-all`}
-    />
+    <>
+    <div className="flex flex-col items-center">
+      <input
+        name={name}
+        type={type}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        {...props}
+        className={`${extraClasses} relative p-2 rounded-[1rem] w-[20vw] focus:w-[21vw] bg-black/40 border border-gray-300 focus:border-purple-500 focus:outline-purple-500 text-center text-white text-xl transition-all`}
+      />
+
+    </div>
+    </>
+    
   );
 };
 

frontend/src/components/Layout/Theme.tsx

@@ -20,7 +20,7 @@ const Theme: React.FC = () => {
     const nextIndex = (currentIndex + 1) % themes.length;
     const nextTheme = themes[nextIndex];
     setTheme(nextTheme);
-    document.body.setAttribute("data-theme", nextTheme); // Update globally
+    document.body.setAttribute("data-theme", nextTheme); 
   };
 
   return (

frontend/tailwind.config.js

@@ -21,6 +21,8 @@ export default {
       backgroundImage: {
         logo: "linear-gradient(45deg, #60A5FA, #8B5CF6, #EC4899, #FACC15,#60A5FA, #8B5CF6, #EC4899, #FACC15)",
         'gradient-radial': 'radial-gradient(circle, var(--tw-gradient-stops))',
+        authForm:  "linear-gradient(45deg, #1A0B33, #240046, #3C096C, #5A189A)",
+        authFormBorder:   "linear-gradient(45deg, #3A0CA3, #7209B7, #B5179E, #F72585)",
       },
 
       keyframes: {
@@ -56,6 +58,10 @@ export default {
           '50%' : { opacity: '0.8'},
           '100%' : { opacity: '1'},
         },
+
+        fontSize: {
+          forgotPasswordResponsive: "clamp(0.3em, 3vw, 5em)",
+        }
       },
     },
     plugins: [