import React, { useState } from 'react'; type Errors = { email?: string; password?: string; form?: string; }; const Login: React.FC = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [errors, setErrors] = useState({}); const validateEmail = (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim()); const validate = (): Errors => { const next: Errors = {}; const trimmedEmail = email.trim(); if (!trimmedEmail) next.email = 'Email is required.'; else if (!validateEmail(trimmedEmail)) next.email = 'Enter a valid email.'; if (!password) next.password = 'Password is required.'; else if (password.length < 6) next.password = 'Minimum 6 characters.'; return next; }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); const nextErrors = validate(); setErrors(nextErrors); if (Object.keys(nextErrors).length > 0) return; console.log('Login:', { email: email.trim(), password }); }; const handleForgotPassword = () => { console.log('Redirect to forgot password page'); }; const onEmailChange = (v: string) => { setEmail(v); if (errors.email) setErrors((prev) => ({ ...prev, email: undefined, form: undefined })); }; const onPasswordChange = (v: string) => { setPassword(v); if (errors.password) setErrors((prev) => ({ ...prev, password: undefined, form: undefined })); }; return (

Login to your account

Email onEmailChange(e.target.value)} aria-invalid={!!errors.email} aria-describedby={errors.email ? 'email-error' : undefined} /> {errors.email && (

{errors.email}

)}

Password onPasswordChange(e.target.value)} aria-invalid={!!errors.password} aria-describedby={errors.password ? 'password-error' : undefined} /> {errors.password && (

{errors.password}

)}

{errors.form &&

{errors.form}

}

); }; export default Login;