| 1 | import Image from "next/image"; |
| 2 | import Link from "next/link"; |
| 3 | import { getTranslations } from "next-intl/server"; |
| 4 | import { getInstanceSettings } from "@/lib/instance-settings"; |
| 5 | |
| 6 | const KNOWN_ERROR_KEYS = new Set([ |
| 7 | "email_doesnt_match", |
| 8 | "email_doesn't_match", |
| 9 | "account_not_linked", |
| 10 | "account_already_linked_to_different_user", |
| 11 | "signup_disabled", |
| 12 | "oauth_provider_not_found", |
| 13 | "unable_to_create_user", |
| 14 | "unable_to_create_session", |
| 15 | "unable_to_link_account", |
| 16 | "state_mismatch", |
| 17 | "state_not_found", |
| 18 | "invalid_code", |
| 19 | "please_restart_the_process", |
| 20 | ]); |
| 21 | |
| 22 | type Props = { |
| 23 | searchParams: Promise<{ error?: string }>; |
| 24 | }; |
| 25 | |
| 26 | export default async function AuthErrorPage({ searchParams }: Props) { |
| 27 | const t = await getTranslations("auth.errors"); |
| 28 | const { error } = await searchParams; |
| 29 | const { appName, logoUrl } = await getInstanceSettings(); |
| 30 | |
| 31 | const normalizedKey = error?.replace(/'/g, "") ?? null; |
| 32 | const knownKey = normalizedKey && KNOWN_ERROR_KEYS.has(normalizedKey) ? normalizedKey : null; |
| 33 | const lookupKey = knownKey === "email_doesn't_match" ? "email_doesnt_match" : knownKey; |
| 34 | |
| 35 | const title = lookupKey ? t(`${lookupKey}.title` as never) : t("fallbackTitle"); |
| 36 | const description = lookupKey ? t(`${lookupKey}.description` as never) : t("fallbackDescription"); |
| 37 | |
| 38 | return ( |
| 39 | <main className="min-h-svh bg-background"> |
| 40 | <div className="mx-auto flex min-h-svh max-w-xl items-center justify-center px-4 py-8"> |
| 41 | <div className="flex w-full max-w-sm flex-col items-center gap-6"> |
| 42 | <div className="flex flex-col items-center gap-2 text-center"> |
| 43 | <div className="mb-1"> |
| 44 | {logoUrl ? ( |
| 45 | // eslint-disable-next-line @next/next/no-img-element |
| 46 | <img src={logoUrl} alt={appName} className="h-7 w-auto" /> |
| 47 | ) : ( |
| 48 | <> |
| 49 | <Image src="/logo-dark.svg" alt="Struxa" width={96} height={28} priority className="h-7 w-auto dark:hidden" /> |
| 50 | <Image src="/logo-white.svg" alt="Struxa" width={96} height={28} priority className="hidden h-7 w-auto dark:block" /> |
| 51 | </> |
| 52 | )} |
| 53 | </div> |
| 54 | </div> |
| 55 | |
| 56 | <div className="flex w-full flex-col items-center gap-4 rounded-2xl border bg-card p-6 text-center"> |
| 57 | <div className="flex h-10 w-10 items-center justify-center rounded-full bg-destructive/10"> |
| 58 | <svg className="h-5 w-5 text-destructive" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}> |
| 59 | <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" /> |
| 60 | </svg> |
| 61 | </div> |
| 62 | <div className="flex flex-col gap-1"> |
| 63 | <h2 className="text-base font-semibold text-foreground">{title}</h2> |
| 64 | <p className="text-sm text-muted-foreground">{description}</p> |
| 65 | </div> |
| 66 | {error && ( |
| 67 | <code className="rounded-md bg-muted px-2 py-1 font-mono text-xs text-muted-foreground">{error}</code> |
| 68 | )} |
| 69 | <div className="flex gap-2"> |
| 70 | <Link |
| 71 | href="/login" |
| 72 | className="rounded-lg bg-foreground px-4 py-1.5 text-sm font-medium text-background transition-opacity hover:opacity-80" |
| 73 | > |
| 74 | {t("backToLogin")} |
| 75 | </Link> |
| 76 | </div> |
| 77 | </div> |
| 78 | </div> |
| 79 | </div> |
| 80 | </main> |
| 81 | ); |
| 82 | } |