ux: alinhar pagina de erro do handshake ao layout do portal

This commit is contained in:
Esdras Renan 2025-11-14 11:46:36 -03:00
parent 3ee072854f
commit b2de4b8480
2 changed files with 52 additions and 33 deletions

View file

@ -0,0 +1,48 @@
import type { Metadata } from "next"
import Link from "next/link"
import { Button } from "@/components/ui/button"
export const metadata: Metadata = {
title: "Falha na autenticação da dispositivo",
}
type AuthErrorPageProps = {
searchParams?: {
reason?: string
}
}
export default function MachinesAuthErrorPage({ searchParams }: AuthErrorPageProps) {
const reason = (searchParams?.reason ?? "invalid_token").toString()
const subtitle =
reason === "invalid_token"
? "O token informado é inválido, expirou ou não está mais associado a uma dispositivo ativa."
: "Não foi possível autenticar esta dispositivo no momento. Tente novamente em instantes."
return (
<div className="flex min-h-screen items-center justify-center bg-gradient-to-b from-slate-50 via-slate-50 to-white px-4 py-10">
<div className="w-full max-w-md rounded-2xl border border-slate-200 bg-white px-6 py-8 text-center shadow-sm">
<div className="mb-4 inline-flex size-12 items-center justify-center rounded-full border border-slate-200 bg-slate-50">
<span className="text-lg font-semibold text-neutral-900">R</span>
</div>
<h1 className="text-xl font-semibold text-neutral-900">
Não foi possível autenticar esta dispositivo
</h1>
<p className="mt-2 text-sm text-neutral-600">
{subtitle}
</p>
<p className="mt-3 text-xs text-neutral-500">
Volte ao Raven Desktop, reprovisione a dispositivo com um novo código ou tente novamente mais tarde.
</p>
<div className="mt-6 flex flex-col items-center gap-3">
<Button asChild className="w-full max-w-xs rounded-full bg-neutral-900 text-sm font-semibold text-white hover:bg-neutral-900/90">
<Link href="/">Voltar para o Raven</Link>
</Button>
</div>
</div>
</div>
)
}

View file

@ -3,33 +3,6 @@ import { NextRequest, NextResponse } from "next/server"
import { createMachineSession, MachineInactiveError } from "@/server/machines-session"
import { env } from "@/lib/env"
const ERROR_TEMPLATE = `
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Falha na autenticação da dispositivo</title>
<style>
body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background-color: #0f172a; color: #e2e8f0; margin: 0; display: grid; place-items: center; height: 100vh; }
main { max-width: 480px; padding: 32px; border-radius: 16px; background-color: rgba(15, 23, 42, 0.65); box-shadow: 0 18px 42px rgba(15, 23, 42, 0.45); text-align: center; backdrop-filter: blur(10px); }
h1 { margin: 0 0 12px; font-size: 1.6rem; }
p { margin: 6px 0; line-height: 1.5; }
a { display: inline-block; margin-top: 18px; padding: 10px 16px; border-radius: 10px; background-color: #2563eb; color: #fff; text-decoration: none; font-weight: 600; }
a:hover { background-color: #1d4ed8; }
</style>
</head>
<body>
<main>
<h1>Não foi possível autenticar esta dispositivo</h1>
<p>O token informado é inválido, expirou ou não está mais associado a uma dispositivo ativa.</p>
<p>Volte ao agente desktop, gere um novo token ou realize o provisionamento novamente.</p>
<a href="/">Voltar para o Raven</a>
</main>
</body>
</html>
`
const INACTIVE_TEMPLATE = `
<!doctype html>
<html lang="pt-BR">
@ -163,11 +136,9 @@ export async function GET(request: NextRequest) {
})
}
console.error("[machines.handshake] Falha ao autenticar dispositivo", error)
return new NextResponse(ERROR_TEMPLATE, {
status: 500,
headers: {
"Content-Type": "text/html; charset=utf-8",
},
})
const errorUrl = new URL("/machines/auth-error", request.nextUrl.origin)
errorUrl.searchParams.set("reason", "invalid_token")
return NextResponse.redirect(errorUrl)
}
}