feat: sessão #3 — lib (db/auth/email/validations), API routes, NextAuth v5, middleware, páginas account/shelters/shelter-dashboard, Prisma v7 fix
This commit is contained in:
226
app/auth/login/page.tsx
Normal file
226
app/auth/login/page.tsx
Normal file
@@ -0,0 +1,226 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { PawPrint, Eye, EyeOff, Mail, Lock } from 'lucide-react';
|
||||
import type { Metadata } from 'next';
|
||||
|
||||
export default function LoginPage() {
|
||||
const [showPass, setShowPass] = useState(false);
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
// TODO: substituir por NextAuth signIn quando NEXTAUTH_SECRET estiver configurado
|
||||
setTimeout(() => setLoading(false), 1200);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
maxWidth: '420px',
|
||||
background: 'var(--color-surface)',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '20px',
|
||||
padding: 'clamp(28px, 5vw, 44px)',
|
||||
boxShadow: '0 8px 40px rgba(45,27,14,0.08)',
|
||||
}}
|
||||
>
|
||||
{/* Brand mark */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '28px' }}>
|
||||
<PawPrint size={20} style={{ color: 'var(--color-terra)' }} />
|
||||
<span
|
||||
style={{
|
||||
fontFamily: 'var(--font-playfair, Georgia, serif)',
|
||||
fontStyle: 'italic',
|
||||
fontWeight: 700,
|
||||
fontSize: '18px',
|
||||
color: 'var(--color-terra)',
|
||||
}}
|
||||
>
|
||||
PawLink
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1
|
||||
style={{
|
||||
fontFamily: 'var(--font-playfair, Georgia, serif)',
|
||||
fontWeight: 900,
|
||||
fontSize: '28px',
|
||||
color: 'var(--color-text)',
|
||||
marginBottom: '6px',
|
||||
lineHeight: 1.15,
|
||||
}}
|
||||
>
|
||||
Bem-vindo de volta.
|
||||
</h1>
|
||||
<p style={{ fontFamily: 'var(--font-body)', fontSize: '14px', color: 'var(--color-muted)', marginBottom: '28px' }}>
|
||||
Não tens conta?{' '}
|
||||
<Link
|
||||
href="/auth/register"
|
||||
style={{ color: 'var(--color-terra)', fontWeight: 500, textDecoration: 'underline', textDecorationColor: 'transparent', transition: 'text-decoration-color 180ms ease' }}
|
||||
onMouseEnter={e => ((e.target as HTMLElement).style.textDecorationColor = 'var(--color-terra)')}
|
||||
onMouseLeave={e => ((e.target as HTMLElement).style.textDecorationColor = 'transparent')}
|
||||
>
|
||||
Criar conta grátis
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleSubmit} noValidate style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
|
||||
{/* Email field */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
||||
<label
|
||||
htmlFor="login-email"
|
||||
style={{ fontFamily: 'var(--font-mono, monospace)', fontSize: '11px', fontWeight: 500, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--color-muted)' }}
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<Mail size={15} style={{ position: 'absolute', left: '14px', top: '50%', transform: 'translateY(-50%)', color: 'var(--color-muted)', pointerEvents: 'none' }} />
|
||||
<input
|
||||
id="login-email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={e => setEmail(e.target.value)}
|
||||
placeholder="o.teu@email.pt"
|
||||
required
|
||||
autoComplete="email"
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px 16px 12px 40px',
|
||||
background: 'var(--color-bg)',
|
||||
border: '1.5px solid var(--color-border)',
|
||||
borderRadius: '10px',
|
||||
fontFamily: 'var(--font-body)',
|
||||
fontSize: '15px',
|
||||
color: 'var(--color-text)',
|
||||
outline: 'none',
|
||||
transition: 'border-color 180ms ease',
|
||||
minHeight: '48px',
|
||||
}}
|
||||
onFocus={e => (e.target.style.borderColor = 'var(--color-terra)')}
|
||||
onBlur={e => (e.target.style.borderColor = 'var(--color-border)')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Password field */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<label
|
||||
htmlFor="login-password"
|
||||
style={{ fontFamily: 'var(--font-mono, monospace)', fontSize: '11px', fontWeight: 500, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--color-muted)' }}
|
||||
>
|
||||
Palavra-passe
|
||||
</label>
|
||||
<Link
|
||||
href="/auth/forgot-password"
|
||||
style={{ fontFamily: 'var(--font-body)', fontSize: '12px', color: 'var(--color-terra)', textDecoration: 'none' }}
|
||||
>
|
||||
Esqueceste-a?
|
||||
</Link>
|
||||
</div>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<Lock size={15} style={{ position: 'absolute', left: '14px', top: '50%', transform: 'translateY(-50%)', color: 'var(--color-muted)', pointerEvents: 'none' }} />
|
||||
<input
|
||||
id="login-password"
|
||||
type={showPass ? 'text' : 'password'}
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
placeholder="••••••••"
|
||||
required
|
||||
autoComplete="current-password"
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px 44px 12px 40px',
|
||||
background: 'var(--color-bg)',
|
||||
border: '1.5px solid var(--color-border)',
|
||||
borderRadius: '10px',
|
||||
fontFamily: 'var(--font-body)',
|
||||
fontSize: '15px',
|
||||
color: 'var(--color-text)',
|
||||
outline: 'none',
|
||||
transition: 'border-color 180ms ease',
|
||||
minHeight: '48px',
|
||||
}}
|
||||
onFocus={e => (e.target.style.borderColor = 'var(--color-terra)')}
|
||||
onBlur={e => (e.target.style.borderColor = 'var(--color-border)')}
|
||||
/>
|
||||
<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(--color-muted)',
|
||||
padding: '4px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
aria-label={showPass ? 'Ocultar palavra-passe' : 'Mostrar palavra-passe'}
|
||||
>
|
||||
{showPass ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit */}
|
||||
<button
|
||||
id="login-submit"
|
||||
type="submit"
|
||||
className="btn-primary"
|
||||
disabled={loading}
|
||||
style={{
|
||||
width: '100%',
|
||||
justifyContent: 'center',
|
||||
marginTop: '8px',
|
||||
opacity: loading ? 0.75 : 1,
|
||||
cursor: loading ? 'not-allowed' : 'pointer',
|
||||
}}
|
||||
aria-label="Entrar na conta PawLink"
|
||||
>
|
||||
{loading ? (
|
||||
<span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<span style={{
|
||||
width: '14px', height: '14px',
|
||||
border: '2px solid rgba(255,255,255,0.3)',
|
||||
borderTopColor: 'white',
|
||||
borderRadius: '50%',
|
||||
display: 'inline-block',
|
||||
animation: 'spin 0.7s linear infinite',
|
||||
}} />
|
||||
A entrar…
|
||||
</span>
|
||||
) : (
|
||||
'Entrar'
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Divider */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '12px', margin: '20px 0' }}>
|
||||
<div style={{ flex: 1, height: '1px', background: 'var(--color-border)' }} />
|
||||
<span style={{ fontFamily: 'var(--font-mono, monospace)', fontSize: '10px', color: 'var(--color-muted)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>ou</span>
|
||||
<div style={{ flex: 1, height: '1px', background: 'var(--color-border)' }} />
|
||||
</div>
|
||||
|
||||
<p style={{ textAlign: 'center', fontFamily: 'var(--font-body)', fontSize: '12px', color: 'var(--color-muted)', lineHeight: 1.5 }}>
|
||||
Ao entrar, aceitas os nossos{' '}
|
||||
<Link href="/terms" style={{ color: 'var(--color-terra)', textDecoration: 'none' }}>Termos de Utilização</Link>
|
||||
{' '}e a nossa{' '}
|
||||
<Link href="/privacy" style={{ color: 'var(--color-terra)', textDecoration: 'none' }}>Política de Privacidade</Link>.
|
||||
</p>
|
||||
|
||||
<style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user