Dave
2594dead84
Add PocketBase login, first-sign-in password changes, account settings, and user activation, reactivation and deletion with self-removal guards. Protect application pages and APIs and keep private pages out of PWA caches. Resolve plant locations from site assignments and improve map controls, profit chart views, navigation and mobile table layouts. Validation: production build and TypeScript passed; 28 unit tests passed. Backend access integration tests and mobile verification are documented.
41 lines
3 KiB
TypeScript
41 lines
3 KiB
TypeScript
import { ThemeToggle } from "@/components/ThemeToggle";
|
|
import { ShieldCheck } from "lucide-react";
|
|
|
|
export function AuthFrame({ children, title, description, firstLogin = false }: {
|
|
children: React.ReactNode; title: string; description: string; firstLogin?: boolean;
|
|
}) {
|
|
return <main className="flex min-h-[100svh] items-center justify-center px-4 py-6 sm:px-8 sm:py-12">
|
|
<div className="grid w-full max-w-5xl overflow-hidden rounded-3xl border border-gray-200 bg-white shadow-xl shadow-[#003D5B]/5 dark:border-border dark:bg-surface lg:grid-cols-[0.9fr_1fr]">
|
|
<aside className="relative hidden flex-col justify-between overflow-hidden bg-[#003D5B] p-10 text-white lg:flex">
|
|
<div className="relative z-10 flex items-center gap-3">
|
|
<img src="/brand/logo.png" alt="Mega Plant" className="h-14 w-14 rounded-2xl bg-white object-contain p-1" />
|
|
<div><p className="text-xl font-semibold">Mega Plant</p><p className="mt-0.5 text-xs uppercase tracking-[0.16em] text-white/60">Mega Infrastructure</p></div>
|
|
</div>
|
|
<div className="relative z-10 my-20">
|
|
<div className="mb-6 h-1 w-12 rounded-full bg-[#EDAE49]" />
|
|
<h2 className="max-w-xs text-4xl font-semibold leading-tight tracking-tight">Your plant.<br />One clear view.</h2>
|
|
<p className="mt-5 max-w-xs text-sm leading-relaxed text-white/65">Fleet, income and running costs, together in one place.</p>
|
|
</div>
|
|
<div className="relative z-10 flex items-center gap-2 text-xs text-white/65"><ShieldCheck className="h-4 w-4" />Your team's workspace</div>
|
|
<svg className="pointer-events-none absolute -bottom-8 -right-12 h-80 w-80 text-white/5" viewBox="0 0 300 300" fill="none" aria-hidden="true">
|
|
<path d="M30 265H290M90 265V75M105 265V75M55 75H270L95 25L55 75ZM230 75V160M220 160H240V180H220Z" stroke="currentColor" strokeWidth="8" />
|
|
<path d="M90 125L105 150L90 175L105 200L90 225L105 250M55 75L95 25L130 75L165 42L195 75L225 59L270 75" stroke="currentColor" strokeWidth="3" />
|
|
</svg>
|
|
</aside>
|
|
<section className="min-w-0 px-6 py-7 sm:px-10 sm:py-10 lg:px-12 lg:py-12">
|
|
<div className="mb-10 flex items-center justify-between gap-4">
|
|
<div className="flex items-center gap-3 lg:hidden">
|
|
<img src="/brand/logo.png" alt="Mega Plant" className="h-12 w-12 rounded-xl bg-white object-contain" />
|
|
<span className="text-base font-semibold">Mega Plant</span>
|
|
</div>
|
|
<p className="hidden text-xs font-medium uppercase tracking-[0.16em] text-gray-400 lg:block">{firstLogin ? "First sign-in" : "Team access"}</p>
|
|
<ThemeToggle />
|
|
</div>
|
|
<h1 className="text-3xl font-semibold tracking-tight text-[#003D5B] dark:text-white">{title}</h1>
|
|
<p className="mb-7 mt-3 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{description}</p>
|
|
{children}
|
|
<p className="mt-10 text-xs text-gray-400 dark:text-gray-500">Mega Infrastructure · Plant operations</p>
|
|
</section>
|
|
</div>
|
|
</main>;
|
|
}
|