81 lines
3.0 KiB
React
81 lines
3.0 KiB
React
import { useMemo, useState } from 'react';
|
|
import { useNavigate, Link } from 'react-router-dom';
|
|
import { useAuth } from '../../contexts/AuthContext';
|
|
import { Download, PenTool } from 'lucide-react';
|
|
import toast from 'react-hot-toast';
|
|
|
|
export default function LoginPage() {
|
|
const { login } = useAuth();
|
|
const navigate = useNavigate();
|
|
const [form, setForm] = useState({ email: '', password: '' });
|
|
const [loading, setLoading] = useState(false);
|
|
const apiBaseUrl = (import.meta.env.VITE_API_URL || 'http://localhost:4000').replace(/\/$/, '');
|
|
const androidApkUrl = `${apiBaseUrl}/downloads/android-apk`;
|
|
const showAndroidDownload = useMemo(() => {
|
|
if (typeof navigator === 'undefined') return false;
|
|
return /Android/i.test(navigator.userAgent || '');
|
|
}, []);
|
|
|
|
const handleChange = (e) => setForm((f) => ({ ...f, [e.target.name]: e.target.value }));
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
try {
|
|
await login(form.email, form.password);
|
|
navigate('/dashboard');
|
|
} catch (err) {
|
|
const code = err.response?.data?.code;
|
|
const message = err.response?.data?.error || 'Error al iniciar sesión';
|
|
|
|
if (code === 'EMAIL_NOT_VERIFIED') {
|
|
toast.success('Tu cuenta aún no está validada. Te enviamos un nuevo correo de confirmación.');
|
|
} else if (code === 'ACCOUNT_LOCKED') {
|
|
toast.error('Tu cuenta fue bloqueada temporalmente. Revisa tu correo para desbloquear el sistema.');
|
|
} else if (code === 'MAIL_SEND_FAILED') {
|
|
toast.error(message);
|
|
} else if (code === 'UNLOCK_MAIL_SEND_FAILED') {
|
|
toast.error(message);
|
|
} else {
|
|
toast.error(message);
|
|
}
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="auth-page">
|
|
<div className="auth-card">
|
|
<div className="auth-logo">
|
|
<PenTool size={32} />
|
|
<h1>LinkedSign</h1>
|
|
<p>Firma digital segura</p>
|
|
</div>
|
|
<form onSubmit={handleSubmit} className="auth-form">
|
|
<div className="field">
|
|
<label>Correo electrónico</label>
|
|
<input type="email" name="email" value={form.email} onChange={handleChange} required autoFocus />
|
|
</div>
|
|
<div className="field">
|
|
<label>Contraseña</label>
|
|
<input type="password" name="password" value={form.password} onChange={handleChange} required />
|
|
</div>
|
|
<button type="submit" className="btn btn-primary btn-full" disabled={loading}>
|
|
{loading ? 'Ingresando...' : 'Iniciar sesión'}
|
|
</button>
|
|
{showAndroidDownload && (
|
|
<a className="btn btn-secondary btn-full auth-download-btn" href={androidApkUrl}>
|
|
<Download size={14} />
|
|
Descargar app Android
|
|
</a>
|
|
)}
|
|
</form>
|
|
<p className="auth-link">
|
|
¿No tienes cuenta? <Link to="/register">Registrarse</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|