UPDATE: Forgot Password Set in Login Page

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] 

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>({
@@ -134,6 +136,14 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit }) => {
           />
 
           <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>