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:
Radosław Gierwiało
2025-11-29 15:22:47 +01:00
parent 634cd97032
commit 420209c037

View File

@@ -4,22 +4,26 @@ import { useAuth } from '../contexts/AuthContext';
import { Video, Mail, Lock } from 'lucide-react'; import { Video, Mail, Lock } from 'lucide-react';
import FormInput from '../components/common/FormInput'; import FormInput from '../components/common/FormInput';
import LoadingButton from '../components/common/LoadingButton'; import LoadingButton from '../components/common/LoadingButton';
import Alert from '../components/common/Alert';
const LoginPage = () => { const LoginPage = () => {
const [email, setEmail] = useState(''); const [email, setEmail] = useState('');
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const { login } = useAuth(); const { login } = useAuth();
const navigate = useNavigate(); const navigate = useNavigate();
const handleSubmit = async (e) => { const handleSubmit = async (e) => {
e.preventDefault(); e.preventDefault();
setError('');
setLoading(true); setLoading(true);
try { try {
await login(email, password); await login(email, password);
navigate('/events'); navigate('/events');
} catch (error) { } catch (error) {
console.error('Login failed:', error); console.error('Login failed:', error);
setError(error.message || 'Invalid email or password');
} finally { } finally {
setLoading(false); setLoading(false);
} }
@@ -34,6 +38,8 @@ const LoginPage = () => {
<p className="text-gray-600 mt-2">Sign in to your account</p> <p className="text-gray-600 mt-2">Sign in to your account</p>
</div> </div>
<Alert type="error" message={error} />
<form onSubmit={handleSubmit} className="space-y-6"> <form onSubmit={handleSubmit} className="space-y-6">
<FormInput <FormInput
label="Email" label="Email"