80 lines
2.6 KiB
TypeScript
80 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { signIn } from "next-auth/react";
|
|
import { useTranslations, useLocale } from "next-intl";
|
|
import { Link, getPathname } from "@/i18n/navigation";
|
|
|
|
export default function LoginPage() {
|
|
const t = useTranslations("login");
|
|
const locale = useLocale();
|
|
|
|
return (
|
|
<div className="fixed inset-0 flex items-center justify-center bg-surface-0">
|
|
{/* Background grid pattern */}
|
|
<div
|
|
className="absolute inset-0 opacity-[0.04]"
|
|
style={{
|
|
backgroundImage: `
|
|
linear-gradient(var(--color-accent) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--color-accent) 1px, transparent 1px)
|
|
`,
|
|
backgroundSize: "60px 60px",
|
|
}}
|
|
/>
|
|
|
|
<div className="relative z-10 w-full max-w-sm px-5 animate-in">
|
|
{/* Logo mark */}
|
|
<div className="flex justify-center mb-8">
|
|
<div className="relative h-12 w-12">
|
|
<div className="absolute inset-0 rounded-lg bg-accent/15" />
|
|
<div className="absolute inset-[5px] rounded-md bg-accent" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-surface-1 rounded-2xl border border-border p-8 shadow-2xl shadow-black/40">
|
|
<h1 className="font-display text-xl font-semibold text-center mb-1">
|
|
{t("title")}
|
|
</h1>
|
|
<p className="text-text-secondary text-sm text-center mb-8">
|
|
{t("subtitle")}
|
|
</p>
|
|
|
|
<button
|
|
onClick={() =>
|
|
signIn("zitadel", {
|
|
// Preserve the active locale across the OIDC round-trip.
|
|
// A bare "/dashboard" would resolve to the default (de)
|
|
// locale on return; getPathname prefixes it as needed.
|
|
callbackUrl: getPathname({ href: "/dashboard", locale }),
|
|
})
|
|
}
|
|
className="
|
|
w-full py-3 px-4 rounded-lg font-medium text-sm
|
|
bg-accent text-surface-0 cursor-pointer
|
|
hover:bg-accent-dim active:scale-[0.98]
|
|
transition-all duration-150
|
|
shadow-lg shadow-accent/20
|
|
"
|
|
>
|
|
{t("button")}
|
|
</button>
|
|
|
|
<p className="text-xs text-text-muted text-center mt-5">
|
|
{t("noAccount")}{" "}
|
|
<Link
|
|
href="/register"
|
|
className="text-accent hover:text-accent-dim transition-colors"
|
|
>
|
|
{t("register")}
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
|
|
<p className="text-center text-text-muted text-[11px] mt-6 tracking-wide uppercase">
|
|
{t("footer")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|