From 3b088d5de2110050abc7c20c68323f4f8480d15f Mon Sep 17 00:00:00 2001
From: Meliora Ho <nho10@fordham.edu>
Date: Wed, 20 Mar 2024 21:44:10 +0000
Subject: [PATCH] Edited Error UI

---
 compass/app/auth/forgot_password/page.tsx | 35 ++++++++++++-----------
 compass/app/auth/login/page.tsx           |  4 +--
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/compass/app/auth/forgot_password/page.tsx b/compass/app/auth/forgot_password/page.tsx
index ed607b2..fcfafc2 100644
--- a/compass/app/auth/forgot_password/page.tsx
+++ b/compass/app/auth/forgot_password/page.tsx
@@ -8,26 +8,27 @@ import InlineLink from '@/components/InlineLink';
 import Paper from '@/components/auth/Paper';
 import ErrorBanner from '@/components/auth/ErrorBanner';
 
-function isValidEmail(email: string): string | null {
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    if (email.trim() === '') {
-        return 'Email cannot be empty';
-    } else if (!emailRegex.test(email)) {
-        return 'Invalid email format';
-    }
-    return null; // No error
-}
 
 export default function ForgotPasswordPage() {
     const [confirmEmail, setConfirmEmail] = useState("");
     const [emailError, setEmailError] = useState<string | null>(null);
-    const [isButtonDisabled, setIsButtonDisabled] = useState(true);
 
-    useEffect(() => {
-        const error = isValidEmail(confirmEmail);
-        setEmailError(error); // set the error message based on validation
-        setIsButtonDisabled(!!error); // disable button if there is an error
-    }, [confirmEmail]);
+
+    function isValidEmail(email: string): boolean {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (email.trim() === '') {
+            setEmailError('Email cannot be empty');
+            return false;
+        } else if (!emailRegex.test(email)) {
+            setEmailError('Invalid email format');
+            return false;
+        }
+        return true; // No error
+    }
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        isValidEmail(confirmEmail);
+        event.preventDefault();
+    }
 
     return (
         <>
@@ -45,7 +46,7 @@ export default function ForgotPasswordPage() {
                     <div className="mb-6">
                         <Input
                             type='email'
-                            valid={emailError !== null}
+                            valid={emailError == null}
                             title="Enter your email address"
                             placeholder="janedoe@gmail.com"
                             value={confirmEmail}
@@ -57,7 +58,7 @@ export default function ForgotPasswordPage() {
                         <InlineLink href="/auth/login">
                             Back to Sign In
                         </InlineLink>
-                        <Button type="submit" disabled={isButtonDisabled}>
+                        <Button type="submit" onClick={handleClick}>
                             Send
                         </Button>
                     </div>
diff --git a/compass/app/auth/login/page.tsx b/compass/app/auth/login/page.tsx
index 0439972..635205e 100644
--- a/compass/app/auth/login/page.tsx
+++ b/compass/app/auth/login/page.tsx
@@ -59,13 +59,13 @@ export default function Page() {
                     <h1 className='font-bold text-xl text-purple-800'>Login</h1>
 
                     <div className="mb-6">
-                        <Input type='email' valid={emailError !== null} title="Email" placeholder="janedoe@gmail.com" onChange={handleEmailChange} required />
+                        <Input type='email' valid={emailError == ""} title="Email" placeholder="janedoe@gmail.com" onChange={handleEmailChange} required />
                         
                     </div>
                     {emailError && <ErrorBanner heading={emailError} />}
 
                     <div className="mb-6">
-                        <PasswordInput title="Password" valid={passwordError !== null} onChange={handlePasswordChange} required />
+                        <PasswordInput title="Password" valid={passwordError == ""} onChange={handlePasswordChange} required />
                         
                     </div>
                     {passwordError && <ErrorBanner heading={passwordError} />}