From 8942298b38bfb6e781b0f1566c655f734c2d3714 Mon Sep 17 00:00:00 2001
From: EvanLin3141 <Evan.lin.3141@gmail.com>
Date: Sun, 9 Feb 2025 16:04:48 +0000
Subject: [PATCH] UPDATE: Forgot Password in AuthModal

now uses AuthSwitch to switch between different forms by using MAP instead if if-elseif-else
---
 frontend/src/components/Auth/AuthModal.tsx    | 32 ++++++++++++++++---
 .../components/Auth/ForgotPasswordForm.tsx    |  6 +++-
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Auth/AuthModal.tsx b/frontend/src/components/Auth/AuthModal.tsx
index f794346..0453d17 100644
--- a/frontend/src/components/Auth/AuthModal.tsx
+++ b/frontend/src/components/Auth/AuthModal.tsx
@@ -22,6 +22,27 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
     }, 3500);
   };
 
+  const authSwitch = () => {
+    
+    const formMap: { [key: string]: JSX.Element} = {
+      Login: <LoginForm onSubmit={(handleSubmit)}/>,
+      Register: <RegisterForm onSubmit={(handleSubmit)}/>,
+      Forgot: <ForgotPasswordForm onSubmit={(handleSubmit)}/>
+    };
+    return formMap[selectedTab] || <div>Please select a valid option</div>;
+    {/*
+    if (selectedTab === "Login") {
+      return  <LoginForm onSubmit={(handleSubmit)}/>
+    } else if (selectedTab === "Register") {
+      return  <RegisterForm onSubmit={(handleSubmit)}/>
+    } else if (selectedTab === "Forgot") {
+      return  <ForgotPasswordForm onSubmit={(handleSubmit)}/>
+    } else
+      return <div> Please select a valid icon</div>
+      */}
+
+  }
+
   return (
     <>
       {/*Background Blur*/}
@@ -87,11 +108,12 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
                 ✕
               </button>
             </div>
-            {selectedTab === "Login" ? (
-              <LoginForm onSubmit={handleSubmit} />
-            ) : (
-              <RegisterForm onSubmit={handleSubmit} />
-            )}
+            <>
+            {authSwitch()}
+            </>
+
+          
+    
           </div>
         </div>
       </div>
diff --git a/frontend/src/components/Auth/ForgotPasswordForm.tsx b/frontend/src/components/Auth/ForgotPasswordForm.tsx
index 0656307..ce0a739 100644
--- a/frontend/src/components/Auth/ForgotPasswordForm.tsx
+++ b/frontend/src/components/Auth/ForgotPasswordForm.tsx
@@ -6,7 +6,11 @@ interface ForgotPasswordProps {
     email?: string;
 }
 
-const ForgotPasswordForm: React.FC = () => {
+interface SubmitProps {
+    onSubmit: () => void;
+  }
+
+const ForgotPasswordForm: React.FC<SubmitProps> = ( {onSubmit} ) => {
     const [email, setEmail] = useState<string>("");
     const [errors, setErrors] = useState<ForgotPasswordProps>({});