120 lines
3.4 KiB
TypeScript
120 lines
3.4 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { useRouter } from 'next/navigation';
|
|
import { useAuth } from '@/lib/stores';
|
|
import { Button, Input, Card, CardContent, CardHeader, CardTitle } from '@/components';
|
|
|
|
export default function LoginPage() {
|
|
const router = useRouter();
|
|
const { login, isLoading, error } = useAuth();
|
|
|
|
const [formData, setFormData] = useState({
|
|
email: '',
|
|
password: '',
|
|
});
|
|
const [validationErrors, setValidationErrors] = useState<{
|
|
email: string;
|
|
password: string;
|
|
}>({
|
|
email: '',
|
|
password: '',
|
|
});
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const { name, value } = e.target;
|
|
setFormData((prev) => ({ ...prev, [name]: value }));
|
|
setValidationErrors((prev) => ({ ...prev, [name]: '' }));
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setValidationErrors({ email: '', password: '' });
|
|
|
|
// Validação básica
|
|
const errors: { email: string; password: string } = { email: '', password: '' };
|
|
if (!formData.email) errors.email = 'Email é obrigatório';
|
|
if (!formData.password) errors.password = 'Senha é obrigatória';
|
|
|
|
if (Object.keys(errors).length > 0) {
|
|
setValidationErrors(errors);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await login(formData);
|
|
router.push('/dashboard/tasks');
|
|
} catch (err) {
|
|
// Erro já está no store
|
|
console.error('Login error:', err);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
|
|
<Card className="w-full max-w-md">
|
|
<CardHeader>
|
|
<CardTitle className="text-center">📋 Task Manager</CardTitle>
|
|
<p className="text-center text-gray-600 text-sm mt-2">
|
|
Faça login para gerenciar suas tarefas
|
|
</p>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<Input
|
|
label="Email"
|
|
type="email"
|
|
name="email"
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
error={validationErrors.email}
|
|
placeholder="seu@email.com"
|
|
required
|
|
/>
|
|
|
|
<Input
|
|
label="Senha"
|
|
type="password"
|
|
name="password"
|
|
value={formData.password}
|
|
onChange={handleChange}
|
|
error={validationErrors.password}
|
|
placeholder="Sua senha"
|
|
required
|
|
/>
|
|
|
|
{error && (
|
|
<div className="bg-red-50 border border-red-200 rounded-lg p-3 text-red-700 text-sm">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<Button
|
|
type="submit"
|
|
variant="primary"
|
|
fullWidth
|
|
isLoading={isLoading}
|
|
>
|
|
{isLoading ? 'Entrando...' : 'Entrar'}
|
|
</Button>
|
|
</form>
|
|
|
|
<div className="mt-6 text-center">
|
|
<p className="text-gray-600 text-sm">
|
|
Não tem conta?{' '}
|
|
<Link
|
|
href="/auth/signup"
|
|
className="text-blue-600 hover:text-blue-700 font-medium"
|
|
>
|
|
Criar conta
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|