95 lines
3.5 KiB
TypeScript
95 lines
3.5 KiB
TypeScript
'use client';
|
|
import { Suspense, useState } from 'react';
|
|
import { useRouter, useSearchParams } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import { useAuth } from '@/contexts/AuthContext';
|
|
|
|
function LoginForm() {
|
|
const { login } = useAuth();
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const returnTo = searchParams.get('returnTo') ?? '/';
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [error, setError] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setError('');
|
|
setLoading(true);
|
|
const result = await login(email, password);
|
|
setLoading(false);
|
|
if (result.ok) {
|
|
router.push(returnTo);
|
|
} else {
|
|
setError(result.error || 'Credenciales inválidas');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-md mx-auto px-4 py-16">
|
|
<div className="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm">
|
|
<h1 className="text-2xl font-bold text-gray-900 mb-6 text-center" style={{ fontFamily: 'var(--font-heading)' }}>
|
|
Iniciar sesión
|
|
</h1>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
{error && (
|
|
<div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-lg px-4 py-3">
|
|
{error}
|
|
{error.includes('no confirmado') && (
|
|
<div className="mt-2">
|
|
<Link href="/auth/recuperar" className="underline font-medium hover:no-underline">
|
|
Solicitar nuevo enlace de confirmación
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
|
|
<input
|
|
type="email"
|
|
required
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
placeholder="tu@email.com"
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-[#70ad47] focus:border-transparent outline-none"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Contraseña</label>
|
|
<input
|
|
type="password"
|
|
required
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
placeholder="••••••••"
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-[#70ad47] focus:border-transparent outline-none"
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="w-full py-3 bg-[#70ad47] hover:bg-[#5a9040] disabled:opacity-60 text-white font-semibold rounded-xl transition-colors"
|
|
>
|
|
{loading ? 'Entrando...' : 'Iniciar sesión'}
|
|
</button>
|
|
<div className="flex items-center justify-between text-sm text-gray-500">
|
|
<Link href="/auth/recuperar" className="text-[#70ad47] hover:underline">¿Olvidaste tu contraseña?</Link>
|
|
<span>¿No tienes cuenta? <Link href="/auth/register" className="text-[#70ad47] hover:underline font-medium">Créala aquí</Link></span>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function LoginPage() {
|
|
return (
|
|
<Suspense>
|
|
<LoginForm />
|
|
</Suspense>
|
|
);
|
|
}
|