Matt
221ae5784e
Bundles the prior autonomous-session output that was sitting unstaged: - Em-dash sweep across src/ + tests/ (en-dash/em-dash to hyphen, ~2280 instances) - country-flag-icons rollout (CountryFlag component, replaces emoji glyphs that never rendered on Windows; lazy-loads the 3x2 SVG index as a single chunk after the per-subpath dynamic-import approach silently failed in webpack) - Admin IA Phase 1+2: 7-domain regroup, 41 to 38 pages, /admin/berths index, redirects (ocr to ai, reports to dashboard, invitations to users), docs/admin-ia-proposal.md - Per-template email tester (registry + endpoint + UI on Email admin page) - Cancel-document mode picker (delete-from-Documenso vs keep-for-audit) - Dashboard PDF report: 25 widgets, SVG charts, date-range picker, 11 resolvers - Customize-widgets per-region sortables at xl+ (charts/rails/feed); single flat sortable below xl when the layout stacks; per-viewport saved orders - Audit doc updates capturing each shipped item - Lint fixes: react-compiler immutability in DonutChart (reduce instead of let-reassign), set-state-in-effect disables in CountryFlag and UploadForSigning preview-bytes effect, unused 'confirm' destructures in interest contract + reservation tabs, unescaped apostrophe in test-template card copy
71 lines
2.8 KiB
TypeScript
71 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { useAuthBranding } from '@/components/shared/auth-branding-provider';
|
|
|
|
interface BrandedAuthShellProps {
|
|
children: React.ReactNode;
|
|
/** Per-port branding override. When omitted, the shell picks up
|
|
* branding from the surrounding `<AuthBrandingProvider>` (mounted at
|
|
* the route-group layout). When neither is present, falls back to
|
|
* neutral defaults (no logo, plain background). */
|
|
branding?: {
|
|
logoUrl?: string | null;
|
|
backgroundUrl?: string | null;
|
|
appName?: string | null;
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Branded shell shared by every auth/form surface - CRM login, portal login,
|
|
* password set/reset/activate, forgot-password. Renders the background,
|
|
* the port logo, and a centered white card that consumers populate with
|
|
* their own form/content.
|
|
*
|
|
* Pages that know their portId at render time can pass `branding` as an
|
|
* explicit prop; otherwise the surrounding `<AuthBrandingProvider>` is
|
|
* the source of truth.
|
|
*/
|
|
export function BrandedAuthShell({ children, branding }: BrandedAuthShellProps) {
|
|
const ctx = useAuthBranding();
|
|
const logoUrl = branding?.logoUrl ?? ctx?.logoUrl ?? null;
|
|
const backgroundUrl = branding?.backgroundUrl ?? ctx?.backgroundUrl ?? null;
|
|
// When no port name is known, treat the logo as decorative - "Sign in"
|
|
// as alt text was being read on every auth page even when the page
|
|
// itself isn't a sign-in surface (e.g. password reset, set-password).
|
|
const appName = branding?.appName ?? ctx?.appName ?? null;
|
|
const altText = appName ?? '';
|
|
// fixed inset-0 anchors the auth surface to the viewport directly -
|
|
// iOS Safari ignores overflow-hidden on inner divs for body-level
|
|
// scrolling, so a regular `h-dvh overflow-hidden` wrapper doesn't
|
|
// stop the rubber-band bounce. Pinning to the viewport via position
|
|
// fixed does. The fixed-position shell then uses flex to center the
|
|
// card within the visible area.
|
|
return (
|
|
<div className="fixed inset-0 flex items-center justify-center px-4 py-8 overscroll-none">
|
|
<div
|
|
aria-hidden
|
|
className="absolute inset-0 -z-10"
|
|
style={{
|
|
backgroundImage: backgroundUrl ? `url('${backgroundUrl}')` : undefined,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
// Neutral slate fallback so we never leak any one port's brand
|
|
// imagery when branding hasn't been configured.
|
|
backgroundColor: '#f2f2f2',
|
|
}}
|
|
/>
|
|
<div className="w-full max-w-md">
|
|
<div className="bg-white rounded-lg shadow-lg p-8">
|
|
{logoUrl ? (
|
|
<div className="flex justify-center mb-6">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img src={logoUrl} alt={altText} className="w-24 h-auto" />
|
|
</div>
|
|
) : null}
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|