194 lines
7.5 KiB
TypeScript
194 lines
7.5 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { Lock, User, Key, ArrowRight, ShieldCheck, Loader2 } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
|
|
export default function LoginPage() {
|
|
const router = useRouter();
|
|
const [step, setStep] = useState<'credentials' | 'otp'>('credentials');
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState('');
|
|
|
|
const [formData, setFormData] = useState({
|
|
username: '',
|
|
password: '',
|
|
otp: ''
|
|
});
|
|
|
|
const handleLogin = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
setError('');
|
|
|
|
try {
|
|
const res = await fetch('/api/auth/login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username: formData.username, password: formData.password })
|
|
});
|
|
|
|
const data = await res.json();
|
|
|
|
if (!res.ok) throw new Error(data.error || 'Error al iniciar sesión');
|
|
|
|
if (data.requireOtp) {
|
|
setStep('otp');
|
|
} else {
|
|
router.push('/');
|
|
router.refresh();
|
|
}
|
|
} catch (err: any) {
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleVerifyOtp = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
setError('');
|
|
|
|
try {
|
|
const res = await fetch('/api/auth/verify-otp', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username: formData.username, otp: formData.otp })
|
|
});
|
|
|
|
const data = await res.json();
|
|
|
|
if (!res.ok) throw new Error(data.error || 'Código incorrecto');
|
|
|
|
router.push('/');
|
|
router.refresh();
|
|
} catch (err: any) {
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-950 flex items-center justify-center p-4">
|
|
<div className="w-full max-w-md bg-slate-900 border border-slate-800 rounded-2xl shadow-xl overflow-hidden">
|
|
{/* Header */}
|
|
<div className="bg-slate-950/50 p-6 text-center border-b border-slate-800">
|
|
<div className="mx-auto w-12 h-12 bg-emerald-500/10 rounded-xl flex items-center justify-center mb-4">
|
|
<Lock className="w-6 h-6 text-emerald-500" />
|
|
</div>
|
|
<h1 className="text-2xl font-bold text-white mb-1">Bienvenido</h1>
|
|
<p className="text-slate-400 text-sm">Sistema de Finanzas Personales</p>
|
|
</div>
|
|
|
|
<div className="p-6">
|
|
{error && (
|
|
<div className="mb-6 p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm text-center">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{step === 'credentials' ? (
|
|
<form onSubmit={handleLogin} className="space-y-4">
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Usuario</label>
|
|
<div className="relative">
|
|
<User className="absolute left-3 top-2.5 w-5 h-5 text-slate-500" />
|
|
<input
|
|
type="text"
|
|
required
|
|
value={formData.username}
|
|
onChange={e => setFormData({...formData, username: e.target.value})}
|
|
className="w-full pl-10 pr-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg text-white focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition-all placeholder:text-slate-600"
|
|
placeholder="Ingresa tu usuario"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Contraseña</label>
|
|
<div className="relative">
|
|
<Key className="absolute left-3 top-2.5 w-5 h-5 text-slate-500" />
|
|
<input
|
|
type="password"
|
|
required
|
|
value={formData.password}
|
|
onChange={e => setFormData({...formData, password: e.target.value})}
|
|
className="w-full pl-10 pr-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg text-white focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition-all placeholder:text-slate-600"
|
|
placeholder="••••••••"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-medium py-2.5 rounded-lg transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed mt-2"
|
|
>
|
|
{loading ? <Loader2 className="animate-spin w-5 h-5" /> : (
|
|
<>
|
|
Ingresar <ArrowRight className="w-4 h-4" />
|
|
</>
|
|
)}
|
|
</button>
|
|
</form>
|
|
) : (
|
|
<form onSubmit={handleVerifyOtp} className="space-y-4 animate-in slide-in-from-right-8 fade-in duration-300">
|
|
<div className="text-center mb-6">
|
|
<div className="inline-flex items-center justify-center w-16 h-16 bg-blue-500/10 rounded-full mb-4">
|
|
<ShieldCheck className="w-8 h-8 text-blue-500" />
|
|
</div>
|
|
<h3 className="text-lg font-medium text-white">Verificación de Identidad</h3>
|
|
<p className="text-slate-400 text-sm mt-1">
|
|
Hemos enviado un código a tu Telegram.
|
|
<br />Ingrésalo para continuar.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<input
|
|
type="text"
|
|
required
|
|
autoFocus
|
|
maxLength={6}
|
|
value={formData.otp}
|
|
onChange={e => setFormData({...formData, otp: e.target.value.replace(/\D/g, '')})}
|
|
className="w-full text-center text-2xl tracking-[0.5em] font-mono py-3 bg-slate-950 border border-slate-800 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
|
|
placeholder="000000"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading || formData.otp.length !== 6}
|
|
className="w-full bg-blue-600 hover:bg-blue-500 text-white font-medium py-2.5 rounded-lg transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{loading ? <Loader2 className="animate-spin w-5 h-5" /> : 'Verificar Código'}
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => setStep('credentials')}
|
|
className="w-full text-slate-500 text-sm hover:text-slate-300 transition-colors"
|
|
>
|
|
Volver atrás
|
|
</button>
|
|
</form>
|
|
)}
|
|
</div>
|
|
|
|
<div className="bg-slate-950/50 p-4 text-center border-t border-slate-800">
|
|
<p className="text-slate-500 text-sm">
|
|
¿No tienes cuenta?{' '}
|
|
<Link href="/register" className="text-emerald-500 hover:text-emerald-400 font-medium hover:underline">
|
|
Regístrate aquí
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|