0fb7920db5
- branded-auth-shell: split the background image into a separate
fixed-positioned layer behind the layout. Previously the bg was on
a min-h-screen container and iOS Safari left visible whitespace at
the top/bottom when the URL bar showed/hid (the container's height
didn't match the visual viewport). Now the bg pins to the actual
visible viewport via `fixed inset-0`. min-h-[100dvh] also added
so the layout layer matches.
- auth client: derive baseURL from window.location.origin instead of
NEXT_PUBLIC_APP_URL. Same dev build now works whether opened on
localhost (Mac) or the LAN IP (iPhone on Wi-Fi).
- auth server: dynamic trustedOrigins function that allows
localhost / 127.x / 192.168.x / 10.x in dev (function form
inspects the incoming request's Origin). Production stays locked
to NEXT_PUBLIC_APP_URL.
- new dev helper: scripts/dev-set-password.ts to set a user's
better-auth password directly (bypasses the email-reset flow);
used to bootstrap matt@letsbe.solutions for mobile testing.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
42 lines
1.6 KiB
TypeScript
42 lines
1.6 KiB
TypeScript
const BG_URL = 'https://s3.portnimara.com/images/Overhead_1_blur.png';
|
|
const LOGO_URL =
|
|
'https://s3.portnimara.com/images/Port%20Nimara%20New%20Logo-Circular%20Frame_250px.png';
|
|
|
|
/**
|
|
* Branded shell shared by every auth/form surface — CRM login, portal login,
|
|
* password set/reset/activate, forgot-password. Renders the blurred Port
|
|
* Nimara overhead background, the circular logo, and a centered white card
|
|
* that consumers populate with their own form/content.
|
|
*/
|
|
export function BrandedAuthShell({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<div className="relative min-h-screen min-h-[100dvh] flex items-center justify-center px-4 py-8">
|
|
{/*
|
|
Full-viewport background layer — pinned to the visible viewport via
|
|
`fixed inset-0` so the marina image always reaches the actual screen
|
|
edges regardless of the iOS Safari URL bar showing/hiding. The shell's
|
|
layout layer above sits on top via z-index.
|
|
*/}
|
|
<div
|
|
aria-hidden
|
|
className="fixed inset-0 -z-10"
|
|
style={{
|
|
backgroundImage: `url('${BG_URL}')`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
backgroundColor: '#f2f2f2',
|
|
}}
|
|
/>
|
|
<div className="w-full max-w-md">
|
|
<div className="bg-white rounded-lg shadow-lg p-8">
|
|
<div className="flex justify-center mb-6">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img src={LOGO_URL} alt="Port Nimara" className="w-24 h-auto" />
|
|
</div>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|