212 lines
10 KiB
TypeScript
212 lines
10 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { PawPrint, Eye, EyeOff, Mail, Lock, User, Calendar, MapPin } from 'lucide-react';
|
|
import { DISTRITOS } from '@/lib/validations/auth';
|
|
|
|
export default function RegisterPage() {
|
|
const [showPass, setShowPass] = useState(false);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [success, setSuccess] = useState(false);
|
|
|
|
const [form, setForm] = useState({
|
|
name: '',
|
|
email: '',
|
|
password: '',
|
|
confirmPassword: '',
|
|
birthdate: '',
|
|
district: '',
|
|
terms: false,
|
|
});
|
|
|
|
const set = (k: keyof typeof form) => (
|
|
e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
|
|
) => setForm((f) => ({ ...f, [k]: e.target.type === 'checkbox' ? (e.target as HTMLInputElement).checked : e.target.value }));
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setError(null);
|
|
setLoading(true);
|
|
|
|
try {
|
|
const res = await fetch('/api/auth/register', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(form),
|
|
});
|
|
|
|
const data = await res.json();
|
|
|
|
if (!res.ok) {
|
|
setError(data.error ?? 'Erro ao criar conta. Tenta de novo.');
|
|
} else {
|
|
setSuccess(true);
|
|
}
|
|
} catch {
|
|
setError('Erro de rede. Verifica a tua ligação.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const inputStyle: React.CSSProperties = {
|
|
width: '100%',
|
|
padding: '12px 16px 12px 40px',
|
|
background: 'var(--cream)',
|
|
border: '1.5px solid var(--parchment)',
|
|
borderRadius: '10px',
|
|
fontFamily: 'var(--font-body)',
|
|
fontSize: '15px',
|
|
color: 'var(--soil)',
|
|
outline: 'none',
|
|
transition: 'border-color 180ms ease',
|
|
minHeight: '48px',
|
|
};
|
|
|
|
const labelStyle: React.CSSProperties = {
|
|
fontFamily: 'var(--font-accent)',
|
|
fontSize: '11px',
|
|
fontWeight: 400,
|
|
letterSpacing: '0.08em',
|
|
textTransform: 'uppercase' as const,
|
|
color: 'var(--soil-faint)',
|
|
};
|
|
|
|
if (success) {
|
|
return (
|
|
<div style={{ textAlign: 'center', maxWidth: '420px', padding: '48px 24px' }}>
|
|
<div style={{ fontSize: '56px', marginBottom: '16px' }}>🐾</div>
|
|
<h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: '28px', color: 'var(--soil)', marginBottom: '12px' }}>
|
|
Conta criada!
|
|
</h1>
|
|
<p style={{ fontFamily: 'var(--font-body)', color: 'var(--soil-mid)', marginBottom: '24px', lineHeight: 1.6 }}>
|
|
Bem-vindo/a à PawLink. Já podes explorar animais e fazer adopções.
|
|
</p>
|
|
<Link href="/auth/login" className="btn btn-primary" style={{ justifyContent: 'center' }}>
|
|
Entrar na conta
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
maxWidth: '480px',
|
|
background: 'var(--linen)',
|
|
border: '1px solid var(--parchment)',
|
|
borderRadius: '20px',
|
|
padding: 'clamp(28px, 5vw, 44px)',
|
|
boxShadow: 'var(--shadow-warm-md)',
|
|
}}
|
|
>
|
|
{/* Marca */}
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '28px' }}>
|
|
<PawPrint size={20} style={{ color: 'var(--terra)' }} />
|
|
<span className="logo" style={{ fontSize: '18px' }}>PawLink</span>
|
|
</div>
|
|
|
|
<h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: '28px', color: 'var(--soil)', marginBottom: '6px', lineHeight: 1.15 }}>
|
|
Criar conta.
|
|
</h1>
|
|
<p style={{ fontFamily: 'var(--font-body)', fontSize: '14px', color: 'var(--soil-mid)', marginBottom: '28px' }}>
|
|
Já tens conta?{' '}
|
|
<Link href="/auth/login" style={{ color: 'var(--terra)', fontWeight: 500 }}>
|
|
Entrar
|
|
</Link>
|
|
</p>
|
|
|
|
{error && (
|
|
<div style={{ background: 'rgba(196,80,26,0.08)', border: '1px solid rgba(196,80,26,0.25)', borderRadius: '10px', padding: '12px 16px', marginBottom: '20px', fontFamily: 'var(--font-body)', fontSize: '14px', color: 'var(--terra)' }}>
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit} noValidate style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
|
|
{/* Nome */}
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
|
<label htmlFor="reg-name" style={labelStyle}>Nome completo</label>
|
|
<div style={{ position: 'relative' }}>
|
|
<User size={15} style={{ position: 'absolute', left: '14px', top: '50%', transform: 'translateY(-50%)', color: 'var(--soil-faint)', pointerEvents: 'none' }} />
|
|
<input id="reg-name" type="text" value={form.name} onChange={set('name')} placeholder="O teu nome" required autoComplete="name" style={inputStyle} onFocus={e => (e.target.style.borderColor = 'var(--terra)')} onBlur={e => (e.target.style.borderColor = 'var(--parchment)')} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Email */}
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
|
<label htmlFor="reg-email" style={labelStyle}>Email</label>
|
|
<div style={{ position: 'relative' }}>
|
|
<Mail size={15} style={{ position: 'absolute', left: '14px', top: '50%', transform: 'translateY(-50%)', color: 'var(--soil-faint)', pointerEvents: 'none' }} />
|
|
<input id="reg-email" type="email" value={form.email} onChange={set('email')} placeholder="o.teu@email.pt" required autoComplete="email" style={inputStyle} onFocus={e => (e.target.style.borderColor = 'var(--terra)')} onBlur={e => (e.target.style.borderColor = 'var(--parchment)')} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Password */}
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
|
<label htmlFor="reg-password" style={labelStyle}>Palavra-passe</label>
|
|
<div style={{ position: 'relative' }}>
|
|
<Lock size={15} style={{ position: 'absolute', left: '14px', top: '50%', transform: 'translateY(-50%)', color: 'var(--soil-faint)', pointerEvents: 'none' }} />
|
|
<input id="reg-password" type={showPass ? 'text' : 'password'} value={form.password} onChange={set('password')} placeholder="Mín. 8 caract., 1 maiúscula, 1 número" required autoComplete="new-password" style={{ ...inputStyle, paddingRight: '44px' }} onFocus={e => (e.target.style.borderColor = 'var(--terra)')} onBlur={e => (e.target.style.borderColor = 'var(--parchment)')} />
|
|
<button type="button" onClick={() => setShowPass(s => !s)} style={{ position: 'absolute', right: '12px', top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', cursor: 'pointer', color: 'var(--soil-faint)', padding: '4px', display: 'flex', alignItems: 'center' }} aria-label={showPass ? 'Ocultar' : 'Mostrar'}>
|
|
{showPass ? <EyeOff size={16} /> : <Eye size={16} />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Confirmar password */}
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
|
<label htmlFor="reg-confirm" style={labelStyle}>Confirmar palavra-passe</label>
|
|
<div style={{ position: 'relative' }}>
|
|
<Lock size={15} style={{ position: 'absolute', left: '14px', top: '50%', transform: 'translateY(-50%)', color: 'var(--soil-faint)', pointerEvents: 'none' }} />
|
|
<input id="reg-confirm" type="password" value={form.confirmPassword} onChange={set('confirmPassword')} placeholder="Repetir palavra-passe" required autoComplete="new-password" style={inputStyle} onFocus={e => (e.target.style.borderColor = 'var(--terra)')} onBlur={e => (e.target.style.borderColor = 'var(--parchment)')} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Data de nascimento */}
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
|
<label htmlFor="reg-birth" style={labelStyle}>Data de nascimento (mínimo 18 anos)</label>
|
|
<div style={{ position: 'relative' }}>
|
|
<Calendar size={15} style={{ position: 'absolute', left: '14px', top: '50%', transform: 'translateY(-50%)', color: 'var(--soil-faint)', pointerEvents: 'none' }} />
|
|
<input id="reg-birth" type="date" value={form.birthdate} onChange={set('birthdate')} required style={{ ...inputStyle, colorScheme: 'light' }} onFocus={e => (e.target.style.borderColor = 'var(--terra)')} onBlur={e => (e.target.style.borderColor = 'var(--parchment)')} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Distrito */}
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
|
<label htmlFor="reg-district" style={labelStyle}>Distrito</label>
|
|
<div style={{ position: 'relative' }}>
|
|
<MapPin size={15} style={{ position: 'absolute', left: '14px', top: '50%', transform: 'translateY(-50%)', color: 'var(--soil-faint)', pointerEvents: 'none', zIndex: 1 }} />
|
|
<select id="reg-district" value={form.district} onChange={set('district')} required style={{ ...inputStyle, appearance: 'none', paddingLeft: '40px', cursor: 'pointer' }} onFocus={e => (e.target.style.borderColor = 'var(--terra)')} onBlur={e => (e.target.style.borderColor = 'var(--parchment)')}>
|
|
<option value="">Selecciona o teu distrito</option>
|
|
{DISTRITOS.map(d => <option key={d} value={d}>{d}</option>)}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Termos */}
|
|
<label style={{ display: 'flex', alignItems: 'flex-start', gap: '10px', cursor: 'pointer', fontFamily: 'var(--font-body)', fontSize: '13px', color: 'var(--soil-mid)', lineHeight: 1.5 }}>
|
|
<input type="checkbox" checked={form.terms} onChange={set('terms')} required style={{ marginTop: '3px', width: '16px', height: '16px', accentColor: 'var(--terra)', flexShrink: 0 }} />
|
|
Aceito os{' '}
|
|
<Link href="/terms" target="_blank" style={{ color: 'var(--terra)' }}>Termos de Utilização</Link>
|
|
{' '}e a{' '}
|
|
<Link href="/privacy" target="_blank" style={{ color: 'var(--terra)' }}>Política de Privacidade</Link>.
|
|
</label>
|
|
|
|
<button
|
|
id="register-submit"
|
|
type="submit"
|
|
className="btn btn-primary"
|
|
disabled={loading}
|
|
style={{ width: '100%', justifyContent: 'center', marginTop: '8px', opacity: loading ? 0.75 : 1, cursor: loading ? 'not-allowed' : 'pointer' }}
|
|
aria-label="Criar conta PawLink"
|
|
>
|
|
{loading ? 'A criar conta…' : 'Criar conta'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|