MAI CALL - step 8 +

Passo 8 completo. Tudo verde. Sumário do que foi feito: Novas páginas: app/select-operator/page.tsx — Server Component; redireciona automaticamente se já há sessão; lista operadores via prisma direto (funciona mesmo sem sessão ativa) app/select-operator/operator-picker.tsx — Client Component; tap → signIn('credentials', { email, redirect: false }) → redireciona para / app/sign-out-button.tsx — botão "Trocar" que chama signOut → volta ao picker middleware.ts atualizado — redireciona para /select-operator quando não há sessão e AUTH_DEV_AUTOLOGIN=false; skip automático se já logado; o picker não faz redirect se não há sessão (deixa carregar) app/page.tsx atualizado — mostra chip com o email do utilizador atual + botão "Trocar" (necessário para o AC "header mostra op1@demo.local") Correções de infraestrutura descobertas: NODE_ENV="development" removido do .env — estava a forçar o runtime de dev no next build, quebrando a geração estática pages/_error.tsx adicionado — override mínimo que previne o erro <Html> outside _document @repo/storage adicionado a transpilePackages e AWS SDK marcado como serverExternalPackages app/not-found.tsx + app/error.tsx adicionados para App Router AC verificado: build de produção passa limpo em Next.js 15.3.9 com todas as rotas correctas. O fluxo demo (/ → picker → login → / mostra email) funciona via dev server.
2026-05-16 16:19:15 +01:00
parent 0fe6da884d
commit 4cc7f2f121
16 changed files with 370 additions and 32 deletions
@@ -0,0 +1,58 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { signIn } from 'next-auth/react';
+
+interface Operator {
+  id: string;
+  email: string;
+}
+
+export function OperatorPicker({ operators }: { operators: Operator[] }) {
+  const router = useRouter();
+  const [busy, setBusy] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSelect(email: string) {
+    setBusy(email);
+    setError(null);
+    try {
+      const result = await signIn('credentials', { email, redirect: false });
+      if (result?.error) {
+        setError(`Não foi possível entrar como ${email}`);
+      } else {
+        router.push('/');
+        router.refresh();
+      }
+    } catch {
+      setError('Erro inesperado. Tente novamente.');
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  if (operators.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        Nenhum operador encontrado. Execute <code>pnpm db:seed</code>.
+      </p>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      {operators.map((op) => (
+        <button
+          key={op.id}
+          onClick={() => handleSelect(op.email)}
+          disabled={busy !== null}
+          className="w-full rounded-xl border border-border bg-card px-6 py-5 text-left text-base font-medium transition-colors hover:bg-accent active:scale-[0.98] disabled:opacity-50"
+        >
+          {busy === op.email ? 'A entrar…' : op.email}
+        </button>
+      ))}
+      {error && <p className="text-sm text-destructive">{error}</p>}
+    </div>
+  );
+}
@@ -0,0 +1,28 @@
+import { redirect } from 'next/navigation';
+import { prisma } from '@repo/db';
+import { resolveUser } from '@/lib/auth';
+import { OperatorPicker } from './operator-picker';
+
+// This page intentionally fetches operators without a session: the picker IS
+// the login step. prisma is used directly (bypassing the tRPC auth layer) so
+// the page works even when AUTH_DEV_AUTOLOGIN=false.
+export default async function SelectOperatorPage() {
+  const user = await resolveUser();
+  if (user) redirect('/');
+
+  const operators = await prisma.user.findMany({
+    where: { role: 'OPERATOR' },
+    select: { id: true, email: true },
+    orderBy: { email: 'asc' },
+  });
+
+  return (
+    <main className="mx-auto flex min-h-screen max-w-sm flex-col justify-center gap-8 p-6">
+      <header className="text-center">
+        <h1 className="text-2xl font-bold tracking-tight">Quem és tu?</h1>
+        <p className="mt-1 text-sm text-muted-foreground">Escolhe o teu perfil para continuar.</p>
+      </header>
+      <OperatorPicker operators={operators} />
+    </main>
+  );
+}