ux: alinhar pagina de erro do handshake ao layout do portal
This commit is contained in:
parent
3ee072854f
commit
b2de4b8480
2 changed files with 52 additions and 33 deletions
48
src/app/machines/auth-error/page.tsx
Normal file
48
src/app/machines/auth-error/page.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -3,33 +3,6 @@ import { NextRequest, NextResponse } from "next/server"
|
||||||
import { createMachineSession, MachineInactiveError } from "@/server/machines-session"
|
import { createMachineSession, MachineInactiveError } from "@/server/machines-session"
|
||||||
import { env } from "@/lib/env"
|
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 = `
|
const INACTIVE_TEMPLATE = `
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="pt-BR">
|
<html lang="pt-BR">
|
||||||
|
|
@ -163,11 +136,9 @@ export async function GET(request: NextRequest) {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
console.error("[machines.handshake] Falha ao autenticar dispositivo", error)
|
console.error("[machines.handshake] Falha ao autenticar dispositivo", error)
|
||||||
return new NextResponse(ERROR_TEMPLATE, {
|
|
||||||
status: 500,
|
const errorUrl = new URL("/machines/auth-error", request.nextUrl.origin)
|
||||||
headers: {
|
errorUrl.searchParams.set("reason", "invalid_token")
|
||||||
"Content-Type": "text/html; charset=utf-8",
|
return NextResponse.redirect(errorUrl)
|
||||||
},
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue