From 3b9fef6a4d0c4cde1b686dc83de9d79b4acfa390 Mon Sep 17 00:00:00 2001
From: EvanLin3141 <evan.lin.3.141@gmail.com>
Date: Tue, 11 Feb 2025 09:20:15 +0000
Subject: [PATCH] UPDATE: Forgot Password Set in Login Page

---
 frontend/src/components/Auth/AuthModal.tsx | 10 +--
 frontend/src/components/Auth/LoginForm.tsx | 86 ++++++++++++----------
 2 files changed, 50 insertions(+), 46 deletions(-)

diff --git a/frontend/src/components/Auth/AuthModal.tsx b/frontend/src/components/Auth/AuthModal.tsx
index 0453d17..74023f9 100644
--- a/frontend/src/components/Auth/AuthModal.tsx
+++ b/frontend/src/components/Auth/AuthModal.tsx
@@ -25,7 +25,7 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
   const authSwitch = () => {
     
     const formMap: { [key: string]: JSX.Element} = {
-      Login: <LoginForm onSubmit={(handleSubmit)}/>,
+      Login: <LoginForm onSubmit={(handleSubmit)} onForgotPassword={() => setSelectedTab("Forgot")}/>,
       Register: <RegisterForm onSubmit={(handleSubmit)}/>,
       Forgot: <ForgotPasswordForm onSubmit={(handleSubmit)}/>
     };
@@ -78,13 +78,7 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
             Register
           </ToggleButton>
 
-          <ToggleButton 
-            toggled={selectedTab==="Forgot"}
-            extraClasses="flex flex-col items-center px-8 duration-250 transition-transform hover:translate-y-[-50px] z-[9001]"
-            onClick={() => setSelectedTab("Forgot")}>
-            <ForgotIcon />
-            Forgot Password
-            </ToggleButton>
+
         </div>
         <div
           className="container fixed inset-0 flex flex-col items-center justify-around z-[9999] 
diff --git a/frontend/src/components/Auth/LoginForm.tsx b/frontend/src/components/Auth/LoginForm.tsx
index eb04d24..e520b80 100644
--- a/frontend/src/components/Auth/LoginForm.tsx
+++ b/frontend/src/components/Auth/LoginForm.tsx
@@ -1,8 +1,9 @@
 import React, { useState } from "react";
 import Input from "../Layout/Input";
-import Button from "../Layout/Button";
+import Button, { ToggleButton } from "../Layout/Button";
 import { useAuth } from "../../context/AuthContext";
 import GoogleLogin from "./OAuth";
+import { CircleHelp as ForgotIcon} from "lucide-react";
 
 interface LoginFormData {
   username: string;
@@ -18,9 +19,10 @@ interface FormErrors {
 //Speed up border animation
 interface SubmitProps {
   onSubmit: () => void;
+  onForgotPassword: () => void;
 }
 
-const LoginForm: React.FC<SubmitProps> = ({ onSubmit }) => {
+const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
   const { setIsLoggedIn } = useAuth();
 
   const [formData, setFormData] = useState<LoginFormData>({
@@ -98,45 +100,53 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit }) => {
   };
 
   return (
-    <> 
-    <div className="h-[100%] flex flex-col justify-evenly items-center">
-    <h1 className="text-white text-lg"> Login </h1>
-    <form
-      onSubmit={handleSubmit}
-      id="login-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="h-[100%] flex flex-col justify-evenly items-center">
+        <h1 className="text-white text-lg"> Login </h1>
+        <form
+          onSubmit={handleSubmit}
+          id="login-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>
+          )}
 
-      {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" : ""}`}
-      />
+          {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" : ""}`}
+          />
 
-      {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" : ""}`}
-      />
+          {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="submit">Login</Button>
-      <GoogleLogin />
-    </form>
-    </div>
+          <Button type="submit">Login</Button>
+          
+          <Button
+            type="button"
+            extraClasses="flex flex-row items-center px-3"
+            onClick={onForgotPassword}>
+            <ForgotIcon />
+            Forgot Password
+          </Button>
+          <GoogleLogin />
+        </form>
+      </div>
     </>
   );
 };