152 lines
4.3 KiB
TypeScript
152 lines
4.3 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 SignupPage() {
|
|
const router = useRouter();
|
|
const { signup, isLoading, error } = useAuth();
|
|
|
|
const [formData, setFormData] = useState({
|
|
email: '',
|
|
password: '',
|
|
confirmPassword: '',
|
|
});
|
|
const [validationErrors, setValidationErrors] = useState<{
|
|
email: string;
|
|
password: string;
|
|
confirmPassword: string;
|
|
}>({
|
|
email: '',
|
|
password: '',
|
|
confirmPassword: '',
|
|
});
|
|
|
|
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: '', confirmPassword: '' });
|
|
|
|
// Validação
|
|
const errors: typeof validationErrors = { email: '', password: '', confirmPassword: '' };
|
|
|
|
if (!formData.email) {
|
|
errors.email = 'Email é obrigatório';
|
|
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
|
|
errors.email = 'Email inválido';
|
|
}
|
|
|
|
if (!formData.password) {
|
|
errors.password = 'Senha é obrigatória';
|
|
} else if (formData.password.length < 6) {
|
|
errors.password = 'Senha deve ter no mínimo 6 caracteres';
|
|
}
|
|
|
|
if (!formData.confirmPassword) {
|
|
errors.confirmPassword = 'Confirmação de senha é obrigatória';
|
|
} else if (formData.password !== formData.confirmPassword) {
|
|
errors.confirmPassword = 'Senhas não correspondem';
|
|
}
|
|
|
|
if (Object.values(errors).some((e) => e)) {
|
|
setValidationErrors(errors);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await signup({
|
|
email: formData.email,
|
|
password: formData.password,
|
|
});
|
|
router.push('/dashboard/tasks');
|
|
} catch (err) {
|
|
console.error('Signup 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">
|
|
Crie sua conta para começar
|
|
</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="Mínimo 6 caracteres"
|
|
required
|
|
/>
|
|
|
|
<Input
|
|
label="Confirmar Senha"
|
|
type="password"
|
|
name="confirmPassword"
|
|
value={formData.confirmPassword}
|
|
onChange={handleChange}
|
|
error={validationErrors.confirmPassword}
|
|
placeholder="Repita 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 ? 'Criando conta...' : 'Criar Conta'}
|
|
</Button>
|
|
</form>
|
|
|
|
<div className="mt-6 text-center">
|
|
<p className="text-gray-600 text-sm">
|
|
Já tem conta?{' '}
|
|
<Link
|
|
href="/auth/login"
|
|
className="text-blue-600 hover:text-blue-700 font-medium"
|
|
>
|
|
Faça login
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|