rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-10 06:10: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 Paper from '@/components/auth/Paper';
import ErrorBanner from '@/components/auth/ErrorBanner'; 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() { export default function ForgotPasswordPage() {
const [confirmEmail, setConfirmEmail] = useState(""); const [confirmEmail, setConfirmEmail] = useState("");
const [emailError, setEmailError] = useState<string | null>(null); const [emailError, setEmailError] = useState<string | null>(null);
const [isButtonDisabled, setIsButtonDisabled] = useState(true);
useEffect(() => {
const error = isValidEmail(confirmEmail); function isValidEmail(email: string): boolean {
setEmailError(error); // set the error message based on validation const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
setIsButtonDisabled(!!error); // disable button if there is an error if (email.trim() === '') {
}, [confirmEmail]); 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 ( return (
<> <>
@ -45,7 +46,7 @@ export default function ForgotPasswordPage() {
<div className="mb-6"> <div className="mb-6">
<Input <Input
type='email' type='email'
valid={emailError !== null} valid={emailError == null}
title="Enter your email address" title="Enter your email address"
placeholder="janedoe@gmail.com" placeholder="janedoe@gmail.com"
value={confirmEmail} value={confirmEmail}
@ -57,7 +58,7 @@ export default function ForgotPasswordPage() {
<InlineLink href="/auth/login"> <InlineLink href="/auth/login">
Back to Sign In Back to Sign In
</InlineLink> </InlineLink>
<Button type="submit" disabled={isButtonDisabled}> <Button type="submit" onClick={handleClick}>
Send Send
</Button> </Button>
</div> </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> <h1 className='font-bold text-xl text-purple-800'>Login</h1>
<div className="mb-6"> <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> </div>
{emailError && <ErrorBanner heading={emailError} />} {emailError && <ErrorBanner heading={emailError} />}
<div className="mb-6"> <div className="mb-6">
<PasswordInput title="Password" valid={passwordError !== null} onChange={handlePasswordChange} required /> <PasswordInput title="Password" valid={passwordError == ""} onChange={handlePasswordChange} required />
</div> </div>
{passwordError && <ErrorBanner heading={passwordError} />} {passwordError && <ErrorBanner heading={passwordError} />}