106 lines
3.4 KiB
TypeScript
106 lines
3.4 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { login } from '@/lib/api/auth';
|
|
import { useAuthStore } from '@/stores/auth-store';
|
|
|
|
export default function LoginPage() {
|
|
const router = useRouter();
|
|
const { setUser, setTokens } = useAuthStore();
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [error, setError] = useState('');
|
|
|
|
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
|
e.preventDefault();
|
|
setIsLoading(true);
|
|
setError('');
|
|
|
|
const formData = new FormData(e.currentTarget);
|
|
const email = formData.get('email') as string;
|
|
const password = formData.get('password') as string;
|
|
|
|
try {
|
|
const response = await login({ email, password });
|
|
setTokens(response.accessToken, response.refreshToken);
|
|
setUser(response.user);
|
|
|
|
const STORAGE_KEY = 'horux360:onboarding_seen_v1';
|
|
const seen = typeof window !== 'undefined' && localStorage.getItem(STORAGE_KEY) === '1';
|
|
|
|
router.push(seen ? '/dashboard' : '/onboarding');
|
|
} catch (err: any) {
|
|
setError(err.response?.data?.message || 'Error al iniciar sesión');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader className="text-center">
|
|
<div className="flex justify-center mb-4">
|
|
<Image
|
|
src="/logo.jpg"
|
|
alt="Horux360"
|
|
width={80}
|
|
height={80}
|
|
className="rounded-full"
|
|
priority
|
|
/>
|
|
</div>
|
|
<CardTitle className="text-2xl">Iniciar Sesión</CardTitle>
|
|
<CardDescription>
|
|
Ingresa tus credenciales para acceder a tu cuenta
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<form onSubmit={handleSubmit}>
|
|
<CardContent className="space-y-4">
|
|
{error && (
|
|
<div className="p-3 text-sm text-destructive bg-destructive/10 rounded-md">
|
|
{error}
|
|
</div>
|
|
)}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">Email</Label>
|
|
<Input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
placeholder="tu@email.com"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="password">Contraseña</Label>
|
|
<Input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
placeholder="••••••••"
|
|
required
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter className="flex flex-col gap-4">
|
|
<Button type="submit" className="w-full" disabled={isLoading}>
|
|
{isLoading ? 'Iniciando sesión...' : 'Iniciar Sesión'}
|
|
</Button>
|
|
<p className="text-sm text-muted-foreground text-center">
|
|
¿No tienes cuenta?{' '}
|
|
<Link href="/register" className="text-primary hover:underline">
|
|
Regístrate
|
|
</Link>
|
|
</p>
|
|
</CardFooter>
|
|
</form>
|
|
</Card>
|
|
);
|
|
}
|