From 29572f56d12c5e0026d0eb6ee7a92930af655fa2 Mon Sep 17 00:00:00 2001
From: EvanLin3141 <Evan.lin.3141@gmail.com>
Date: Sun, 9 Feb 2025 15:53:07 +0000
Subject: [PATCH] Update: ForgotPassword button in AuthModal

---
 frontend/src/components/Auth/AuthModal.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Auth/AuthModal.tsx b/frontend/src/components/Auth/AuthModal.tsx
index 31da1fc..f794346 100644
--- a/frontend/src/components/Auth/AuthModal.tsx
+++ b/frontend/src/components/Auth/AuthModal.tsx
@@ -1,8 +1,9 @@
 import React, { useState } from "react";
 import { ToggleButton } from "../Layout/Button";
-import { LogIn as LogInIcon, User as UserIcon } from "lucide-react";
+import { LogIn as LogInIcon, User as UserIcon, CircleHelp as ForgotIcon} from "lucide-react";
 import LoginForm from "./LoginForm";
 import RegisterForm from "./RegisterForm";
+import ForgotPasswordForm from "./ForgotPasswordForm";
 import "../../assets/styles/auth.css";
 
 interface AuthModalProps {
@@ -55,6 +56,14 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
             <UserIcon className="h-[40px] w-[40px] mr-1" />
             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]