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 { 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"
|
||||||
|
|||||||
Reference in New Issue
Block a user