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} />}