rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-06 20:50:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Edited Error UI

Browse Source
This commit is contained in:
Meliora Ho 2024-03-20 21:44:10 +00:00
parent 1bc2f2e5c7
commit 3b088d5de2
2 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
compass/app/auth/forgot_password/page.tsx
View File

@ -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>

4
compass/app/auth/login/page.tsx
View File

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