fix(frontend): add error message display on login page
- Show error alert when login fails instead of console-only logging - Display user-friendly error message: "Invalid email or password" - Clear error state before new login attempt - Use existing Alert component for consistency with RegisterPage
This commit is contained in:
@@ -4,22 +4,26 @@ import { useAuth } from '../contexts/AuthContext';
|
||||
import { Video, Mail, Lock } from 'lucide-react';
|
||||
import FormInput from '../components/common/FormInput';
|
||||
import LoadingButton from '../components/common/LoadingButton';
|
||||
import Alert from '../components/common/Alert';
|
||||
|
||||
const LoginPage = () => {
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const { login } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setLoading(true);
|
||||
try {
|
||||
await login(email, password);
|
||||
navigate('/events');
|
||||
} catch (error) {
|
||||
console.error('Login failed:', error);
|
||||
setError(error.message || 'Invalid email or password');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -34,6 +38,8 @@ const LoginPage = () => {
|
||||
<p className="text-gray-600 mt-2">Sign in to your account</p>
|
||||
</div>
|
||||
|
||||
<Alert type="error" message={error} />
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<FormInput
|
||||
label="Email"
|
||||
|
||||
Reference in New Issue
Block a user