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.
This commit is contained in:
@@ -0,0 +1,25 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect } from 'react';
|
||||
|
||||
export default function ErrorPage({
|
||||
error,
|
||||
reset,
|
||||
}: {
|
||||
error: Error & { digest?: string };
|
||||
reset: () => void;
|
||||
}) {
|
||||
useEffect(() => {
|
||||
console.error(error);
|
||||
}, [error]);
|
||||
|
||||
return (
|
||||
<main className="flex min-h-screen flex-col items-center justify-center gap-4 p-6 text-center">
|
||||
<h1 className="text-4xl font-bold">500</h1>
|
||||
<p className="text-muted-foreground">Ocorreu um erro inesperado.</p>
|
||||
<button onClick={reset} className="text-sm underline underline-offset-4">
|
||||
Tentar novamente
|
||||
</button>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<main className="flex min-h-screen flex-col items-center justify-center gap-4 p-6 text-center">
|
||||
<h1 className="text-4xl font-bold">404</h1>
|
||||
<p className="text-muted-foreground">Página não encontrada.</p>
|
||||
<a href="/" className="text-sm underline underline-offset-4">
|
||||
Voltar ao início
|
||||
</a>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -3,18 +3,13 @@ import { CheckCircle2, AlertCircle } from 'lucide-react';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@repo/ui';
|
||||
import { Alert, AlertDescription, AlertTitle } from '@repo/ui';
|
||||
import { api } from '@/lib/trpc/server';
|
||||
import { resolveUser } from '@/lib/auth';
|
||||
import { PingClient } from './ping-client';
|
||||
import { SignOutButton } from './sign-out-button';
|
||||
|
||||
/**
|
||||
* Smoke-test home page. Uses the RSC tRPC caller (server-side) to invoke the
|
||||
* ping procedure end-to-end:
|
||||
*
|
||||
* RSC → tRPC caller → protectedProcedure → Prisma → Postgres → Tenant row
|
||||
*
|
||||
* If the call throws (e.g. UNAUTHORIZED because no session), the error is
|
||||
* caught and rendered as a legible failure card.
|
||||
*/
|
||||
export default async function HomePage() {
|
||||
const user = await resolveUser();
|
||||
|
||||
let result:
|
||||
| { ok: true; payload: Awaited<ReturnType<typeof api.ping.ping>> }
|
||||
| { ok: false; message: string; code: string } = {
|
||||
@@ -38,6 +33,13 @@ export default async function HomePage() {
|
||||
|
||||
return (
|
||||
<main className="mx-auto flex min-h-screen max-w-2xl flex-col items-stretch justify-center gap-6 p-6">
|
||||
{user && (
|
||||
<div className="flex items-center justify-between rounded-lg border border-border bg-card px-4 py-2 text-sm">
|
||||
<span data-testid="current-user">{user.email}</span>
|
||||
<SignOutButton />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<header className="text-center">
|
||||
<h1 className="text-3xl font-bold tracking-tight">FieldOps Operator</h1>
|
||||
<p className="text-sm text-muted-foreground">Scaffold smoke test</p>
|
||||
@@ -76,7 +78,7 @@ export default async function HomePage() {
|
||||
<p className="text-xs">
|
||||
If this says <code>UNAUTHORIZED</code>, set{' '}
|
||||
<code>AUTH_DEV_AUTOLOGIN=true</code> in <code>.env</code> for local dev,
|
||||
or sign in via Auth.js.
|
||||
or sign in via the operator picker.
|
||||
</p>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
'use client';
|
||||
|
||||
import { signOut } from 'next-auth/react';
|
||||
|
||||
export function SignOutButton() {
|
||||
return (
|
||||
<button
|
||||
onClick={() => signOut({ callbackUrl: '/select-operator' })}
|
||||
className="text-xs text-muted-foreground underline-offset-2 hover:underline"
|
||||
>
|
||||
Trocar
|
||||
</button>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user