50afbd7686
The login page is the operator's entry point — it should look the same every time, not flip between light and dark depending on what the previous session left in localStorage. Adds the `dark` class to the login wrapper div instead of documentElement, so: - Skyrise's .dark tokens cascade into all descendants (CSS vars defined under .dark apply to the subtree). - After sign-in and navigation, the user's saved light/dark preference takes back over for the rest of the app. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
61 lines
2.2 KiB
TypeScript
61 lines
2.2 KiB
TypeScript
import { useEffect } from "react"
|
|
import { useNavigate, useSearchParams } from "react-router"
|
|
|
|
import { LoginForm } from "@crema/arcadia-auth-ui"
|
|
import { useBrand } from "~/lib/identity"
|
|
import { pageTitle } from "~/lib/page-meta"
|
|
import { useSession, persistFromArcadiaLogin } from "~/lib/session"
|
|
|
|
export const meta = () => pageTitle("Sign in")
|
|
|
|
export default function LoginRoute() {
|
|
const navigate = useNavigate()
|
|
const [params] = useSearchParams()
|
|
const session = useSession()
|
|
const brand = useBrand()
|
|
const BrandIcon = brand.icon
|
|
|
|
const next = params.get("next") || "/"
|
|
|
|
// Already signed in? Bounce.
|
|
useEffect(() => {
|
|
if (session) navigate(next, { replace: true })
|
|
}, [session, next, navigate])
|
|
|
|
return (
|
|
<div
|
|
// Force dark mode on the login page regardless of the operator's
|
|
// saved theme preference. Scoped to this wrapper (not documentElement)
|
|
// so navigating away after sign-in restores their preferred mode.
|
|
className="dark relative isolate flex min-h-svh items-center justify-center p-4"
|
|
style={{ background: "var(--background)" }}
|
|
>
|
|
<LoginForm
|
|
brand={
|
|
<div className="flex items-center gap-2">
|
|
<span
|
|
className="flex size-8 items-center justify-center rounded-lg"
|
|
style={{ background: "var(--primary)", color: "var(--primary-foreground)" }}
|
|
>
|
|
<BrandIcon className="size-4" />
|
|
</span>
|
|
<span className="text-sm font-semibold">{brand.name}</span>
|
|
</div>
|
|
}
|
|
heading={`Sign in to ${brand.name}`}
|
|
subhead="Use your arcadia credentials. In dev seeds: admin@example.com / AdminP@ssw0rd."
|
|
onSuccess={async ({ tokens, user, twoFactorRequired, twoFactorChallenge }) => {
|
|
if (twoFactorRequired && twoFactorChallenge) {
|
|
navigate(`/login/2fa?challenge=${encodeURIComponent(twoFactorChallenge)}&next=${encodeURIComponent(next)}`)
|
|
return
|
|
}
|
|
persistFromArcadiaLogin(tokens, user)
|
|
navigate(next, { replace: true })
|
|
}}
|
|
onForgotPassword={() => navigate("/login/forgot")}
|
|
onSignup={() => navigate("/signup")}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|