import { Link, usePage } from "@inertiajs/react"; import { ClipboardList, Package, ShieldCheck } from "lucide-react"; import AppLogoIcon from "@/components/app-logo-icon"; import { cn } from "@/lib/utils"; import { home } from "@/routes"; import type { AuthLayoutProps, Branding } from "@/types"; /** * The frame every staff authentication screen sits in. * * One half is the company's own: the picture they chose in Settings -> Company * profile, or — when they have not chosen one — the colour they chose instead, * plus their name, their logo and the words they wrote for this screen. The * other half is the form, on plain ground in a card so the fields are the only * thing competing for attention. * * Every word on the panel is a setting, including the three lines it lists, so * a client can say what this system does in their own language rather than the * language it shipped with. */ /** The icons the panel cycles through, whatever the words beside them say. */ const featureIcons = [ClipboardList, Package, ShieldCheck]; function Backdrop({ background, branding, }: { background: string | null; branding?: Branding; }) { const panel = branding?.login_panel; if (background) { return (
{/* The veil is built from the chosen colour server-side, so a client's palette keeps the words on their photo readable. */}
); } return (
); } function BrandLockup({ branding, compact = false, }: { branding?: Branding; compact?: boolean; }) { return ( {branding?.logo_url ? ( ) : ( )} {branding?.name ?? ""} {branding?.login_eyebrow ?? "Staff workspace"} ); } export default function AuthSplitLayout({ children, title, description, }: AuthLayoutProps) { const { branding } = usePage().props as unknown as { branding?: Branding }; const background = branding?.login_background_url ?? null; const support = branding?.support_email ?? null; const year = new Date().getFullYear(); const contact = [ branding?.support_phone, branding?.support_email, branding?.website?.replace(/^https?:\/\//, ""), ].filter((item): item is string => Boolean(item)); // The words on the card come from the page that is being shown — "Create an // account", "Reset your password" — and fall back to the sign-in screen's // own words only when the page supplies none, which is the sign-in page. const cardTitle = title?.trim() || branding?.login_card_title || "Log in to your account"; const cardDescription = description?.trim() || branding?.login_card_description || ""; const features = branding?.login_features?.length ? branding.login_features : []; return (
{branding?.login_headline ? (

{branding.login_headline}

) : null}

{cardTitle}

{cardDescription ? (

{cardDescription}

) : null}
{children}
{branding?.login_footer_note || support ? (

{branding?.login_footer_note} {support ? ( <> {" "} Trouble signing in?{" "} {support} ) : null}

) : null}
); }