fix: login/registo funcional — signIn NextAuth, SessionProvider, NEXTAUTH_SECRET real, error handling

2026-05-27 11:18:16 +01:00
parent 7be9d5131f
commit 2571137bec
4 changed files with 215 additions and 173 deletions
--- a/app/api/auth/register/route.ts
+++ b/app/api/auth/register/route.ts
@@ -6,6 +6,7 @@ import { validateAge } from '@/lib/auth/age-validation';
 import { sendEmail, buildWelcomeHtml } from '@/lib/email';

 export async function POST(request: Request) {
+  try {
    const body = await request.json();
    const parsed = registerSchema.safeParse(body);

@@ -42,7 +43,7 @@ export async function POST(request: Request) {
      select: { id: true, name: true, email: true },
    });

-  // Email de boas-vindas (não bloqueia)
+    // Email de boas-vindas (não bloqueia a resposta)
    sendEmail({
      to:      user.email,
      subject: 'Bem-vindo à PetLink 🐾',
@@ -53,4 +54,18 @@ export async function POST(request: Request) {
      { message: 'Conta criada com sucesso.', userId: user.id },
      { status: 201 }
    );
+  } catch (err: unknown) {
+    console.error('[POST /api/auth/register]', err);
+
+    // Erro de ligação à base de dados — mensagem clara ao utilizador
+    const msg = err instanceof Error ? err.message : '';
+    if (msg.includes('P1001') || msg.includes('connect') || msg.includes('ECONNREFUSED')) {
+      return NextResponse.json(
+        { error: 'Base de dados temporariamente indisponível. Tenta mais tarde.' },
+        { status: 503 }
+      );
+    }
+
+    return NextResponse.json({ error: 'Erro interno. Tenta de novo.' }, { status: 500 });
+  }
 }
--- a/app/auth/login/page.tsx
+++ b/app/auth/login/page.tsx
@@ -2,20 +2,65 @@

 import { useState } from 'react';
 import Link from 'next/link';
-import { PawPrint, Eye, EyeOff, Mail, Lock } from 'lucide-react';
-import type { Metadata } from 'next';
+import { useRouter } from 'next/navigation';
+import { signIn } from 'next-auth/react';
+import { PawPrint, Eye, EyeOff, Mail, Lock, AlertCircle } from 'lucide-react';

 export default function LoginPage() {
+  const router = useRouter();
  const [showPass, setShowPass] = useState(false);
  const [email,    setEmail]    = useState('');
  const [password, setPassword] = useState('');
  const [loading,  setLoading]  = useState(false);
+  const [error,    setError]    = useState('');

-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
+    setError('');
    setLoading(true);
-    // TODO: substituir por NextAuth signIn quando NEXTAUTH_SECRET estiver configurado
-    setTimeout(() => setLoading(false), 1200);
+
+    try {
+      const result = await signIn('credentials', {
+        email,
+        password,
+        redirect: false,
+      });
+
+      if (result?.error) {
+        setError('Email ou palavra-passe incorrectos. Tenta de novo.');
+      } else {
+        router.push('/');
+        router.refresh();
+      }
+    } catch {
+      setError('Erro de rede. Verifica a tua ligação e tenta de novo.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const inputStyle: React.CSSProperties = {
+    width:        '100%',
+    padding:      '12px 16px 12px 40px',
+    background:   'var(--color-bg, var(--cream))',
+    border:       '1.5px solid var(--color-border, var(--parchment))',
+    borderRadius: '10px',
+    fontFamily:   'var(--font-body)',
+    fontSize:     '15px',
+    color:        'var(--color-text, var(--soil))',
+    outline:      'none',
+    transition:   'border-color 180ms ease',
+    minHeight:    '48px',
+    boxSizing:    'border-box',
+  };
+
+  const labelStyle: React.CSSProperties = {
+    fontFamily:    'var(--font-accent, monospace)',
+    fontSize:      '11px',
+    fontWeight:    400,
+    letterSpacing: '0.08em',
+    textTransform: 'uppercase',
+    color:         'var(--color-muted, var(--soil-faint))',
  };

  return (
@@ -23,23 +68,23 @@ export default function LoginPage() {
      style={{
        width:        '100%',
        maxWidth:     '420px',
-        background: 'var(--color-surface)',
-        border: '1px solid var(--color-border)',
+        background:   'var(--color-surface, var(--linen))',
+        border:       '1px solid var(--color-border, var(--parchment))',
        borderRadius: '20px',
        padding:      'clamp(28px, 5vw, 44px)',
        boxShadow:    '0 8px 40px rgba(45,27,14,0.08)',
      }}
    >
-      {/* Brand mark */}
+      {/* Marca */}
      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '28px' }}>
-        <PawPrint size={20} style={{ color: 'var(--color-terra)' }} />
+        <PawPrint size={20} style={{ color: 'var(--color-terra, var(--terra))' }} />
        <span
          style={{
            fontFamily: 'var(--font-playfair, Georgia, serif)',
            fontStyle:  'italic',
            fontWeight: 700,
-            fontSize: '18px',
-            color: 'var(--color-terra)',
+            fontSize:   '20px',
+            color:      'var(--color-terra, var(--terra))',
          }}
        >
          PetLink
@@ -51,36 +96,56 @@ export default function LoginPage() {
          fontFamily:   'var(--font-playfair, Georgia, serif)',
          fontWeight:   900,
          fontSize:     '28px',
-          color: 'var(--color-text)',
+          color:        'var(--color-text, var(--soil))',
          marginBottom: '6px',
          lineHeight:   1.15,
        }}
      >
-        Bem-vindo de volta.
+        Iniciar sessão.
      </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')}
+      <p
+        style={{
+          fontFamily:   'var(--font-body)',
+          fontSize:     '14px',
+          color:        'var(--color-muted, var(--soil-mid))',
+          marginBottom: '28px',
+        }}
      >
-          Criar conta grátis
+        Ainda não tens conta?{' '}
+        <Link href="/auth/register" style={{ color: 'var(--color-terra, var(--terra))', fontWeight: 500 }}>
+          Registar
        </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)' }}
+      {/* Erro */}
+      {error && (
+        <div
+          role="alert"
+          style={{
+            display:      'flex',
+            alignItems:   'center',
+            gap:          '10px',
+            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(--color-terra, var(--terra))',
+          }}
        >
-            Email
-          </label>
+          <AlertCircle size={16} style={{ flexShrink: 0 }} />
+          {error}
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit} noValidate style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+        {/* Email */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+          <label htmlFor="login-email" style={labelStyle}>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' }} />
+            <Mail size={15} style={{ position: 'absolute', left: '14px', top: '50%', transform: 'translateY(-50%)', color: 'var(--color-muted, var(--soil-faint))', pointerEvents: 'none' }} />
            <input
              id="login-email"
              type="email"
@@ -89,83 +154,42 @@ export default function LoginPage() {
              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)')}
+              style={inputStyle}
+              onFocus={e => (e.target.style.borderColor = 'var(--color-terra, var(--terra))')}
+              onBlur={e  => (e.target.style.borderColor = 'var(--color-border, var(--parchment))')}
            />
          </div>
        </div>

-        {/* Password field */}
+        {/* Password */}
        <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>
+            <label htmlFor="login-password" style={labelStyle}>Palavra-passe</label>
            <Link
              href="/auth/forgot-password"
-              style={{ fontFamily: 'var(--font-body)', fontSize: '12px', color: 'var(--color-terra)', textDecoration: 'none' }}
+              style={{ fontFamily: 'var(--font-body)', fontSize: '12px', color: 'var(--color-terra, var(--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' }} />
+            <Lock size={15} style={{ position: 'absolute', left: '14px', top: '50%', transform: 'translateY(-50%)', color: 'var(--color-muted, var(--soil-faint))', pointerEvents: 'none' }} />
            <input
              id="login-password"
              type={showPass ? 'text' : 'password'}
              value={password}
              onChange={e => setPassword(e.target.value)}
-              placeholder="••••••••"
+              placeholder="A tua palavra-passe"
              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)')}
+              style={{ ...inputStyle, paddingRight: '44px' }}
+              onFocus={e => (e.target.style.borderColor = 'var(--color-terra, var(--terra))')}
+              onBlur={e  => (e.target.style.borderColor = 'var(--color-border, 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(--color-muted)',
-                padding: '4px',
-                display: 'flex',
-                alignItems: 'center',
-              }}
+              style={{ position: 'absolute', right: '12px', top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', cursor: 'pointer', color: 'var(--color-muted, var(--soil-faint))', padding: '4px', display: 'flex', alignItems: 'center' }}
              aria-label={showPass ? 'Ocultar palavra-passe' : 'Mostrar palavra-passe'}
            >
              {showPass ? <EyeOff size={16} /> : <Eye size={16} />}
@@ -177,48 +201,43 @@ export default function LoginPage() {
        <button
          id="login-submit"
          type="submit"
-          className="btn-primary"
          disabled={loading}
          style={{
            width:           '100%',
-            justifyContent: 'center',
-            marginTop: '8px',
-            opacity: loading ? 0.75 : 1,
+            padding:         '14px 24px',
+            background:      loading ? 'var(--color-muted, var(--soil-faint))' : 'var(--color-terra, var(--terra))',
+            color:           'white',
+            border:          'none',
+            borderRadius:    '100px',
+            fontFamily:      'var(--font-body)',
+            fontWeight:      600,
+            fontSize:        '15px',
            cursor:          loading ? 'not-allowed' : 'pointer',
+            transition:      'all 200ms ease',
+            marginTop:       '8px',
+            display:         'flex',
+            alignItems:      'center',
+            justifyContent:  'center',
+            gap:             '8px',
          }}
          aria-label="Entrar na conta PetLink"
        >
          {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',
-              }} />
+            <>
+              <span style={{ display: 'inline-block', width: '16px', height: '16px', border: '2px solid rgba(255,255,255,0.4)', borderTopColor: 'white', borderRadius: '50%', animation: 'spin 0.7s linear infinite' }} />
              A entrar…
-            </span>
-          ) : (
-            'Entrar'
-          )}
+            </>
+          ) : 'Iniciar sessão'}
        </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>.
+        {/* Registar */}
+        <p style={{ textAlign: 'center', fontFamily: 'var(--font-body)', fontSize: '13px', color: 'var(--color-muted, var(--soil-mid))', marginTop: '4px' }}>
+          Não tens conta?{' '}
+          <Link href="/auth/register" style={{ color: 'var(--color-terra, var(--terra))', fontWeight: 500 }}>
+            Criar conta grátis
+          </Link>
        </p>
+      </form>

      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
    </div>
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';
 import { Playfair_Display, Lora, Fragment_Mono } from 'next/font/google';
 import Script from 'next/script';
+import Providers from './providers';
 import './globals.css';

 const playfair = Playfair_Display({
@@ -73,7 +74,7 @@ export default function RootLayout({
          fontFamily: 'var(--font-lora, var(--font-body, Lora, Georgia, serif))',
        }}
      >
-        {children}
+        <Providers>{children}</Providers>
      </body>
    </html>
  );
--- a/app/providers.tsx
+++ b/app/providers.tsx
@@ -0,0 +1,7 @@
+'use client';
+
+import { SessionProvider } from 'next-auth/react';
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+  return <SessionProvider>{children}</SessionProvider>;
+}