@col/auth-shell
Versie: 1.0.0 Toegevoegd: 2026-08-03
Herkomst
Geëxtraheerd uit het "full-bleed achtergrond + donkere overlay + gecentreerde
kaart"-patroon dat in supplier-onboarding-vercel 14 keer gedupliceerd
voorkomt, over 7 bestanden (login, activate, forgot-password, reset-password,
supplier-form, customer-form, passcode-gate). De kopieën waren al uit elkaar
gelopen: de authenticatiepagina's gebruikten bg-black/30, de formulieren
bg-black/40 — niemands besluit, gewoon drift.
Meting en analyse staan in docs/specs/2026-08-03-v2-branding-en-auth-ontwerp.md.
Waarvoor
Een min-h-screen scherm met een achtergrondfoto, een donkere laag daaroverheen
en inhoud die gecentreerd of vanaf boven staat. Dekt drie bestaande varianten in
de onboarding-portal: authenticatiepagina's (gecentreerd), formulier-kaarten
(gecentreerd, andere overlay-sterkte) en de lange supplier-/customerformulieren
zelf (vanaf boven, vaste achtergrond tijdens scrollen).
Gebruik het voor elk scherm dat "foto op de achtergrond, kaart erbovenop" nodig
heeft. Gebruik het niet als generieke pagina-wrapper zonder achtergrondfoto —
daarvoor is het te specifiek (verplichte backgroundImage, absolute overlay-laag).
Er is een tweede inlogscherm
Voor inloggen kun je ook @col/auth-split kiezen: dat zet het
formulier naast de foto in plaats van erop, zonder kaart en zonder donkere laag.
Rustiger en beter leesbaar; AuthShell geeft juist meer sfeer omdat het beeld
het hele scherm vult.
Het is een keuze per app, geen rangorde. Voor de overige auth-schermen
(activeren, wachtwoord vergeten) is AuthShell meestal de betere: een halve foto
naast drie regels tekst voelt leeg.
Wat je app moet leveren
<AuthShell>
| Prop | Type | Betekenis |
|---|---|---|
backgroundImage |
string |
Pad of URL van de achtergrondafbeelding. Verplicht. |
overlay |
'none' | 'light' | 'medium' | 'strong' |
Donkerte van de laag over de foto. Default 'medium'. light = bg-black/30, medium = bg-black/40, strong = bg-black/60. |
align |
'center' | 'top' |
'center' voor een kaart midden op het scherm, 'top' voor een lange, scrollende pagina. Default 'center'. |
backgroundAttachment |
'scroll' | 'fixed' |
'fixed' laat de achtergrond staan tijdens scrollen. Default 'scroll'. |
maxWidth |
string? |
Tailwind max-width class voor de inhoud. Default 'max-w-md'. |
className |
string? |
Extra classes op de buitenste container, voor app-eigen scopes (bv. form-page-inputs). |
children |
ReactNode? |
De inhoud, gecentreerd of vanaf boven binnen maxWidth. |
Geen backend-contract; puur presentatie.
Migratietabel
Voor het overzetten van de drie bestaande varianten in de onboarding-portal (referentie, niet bindend voor andere consumers):
| Authpagina's (8×) | Formulier-kaarten (5×) | Formulier-pagina's (2×) | |
|---|---|---|---|
overlay |
light |
medium |
medium |
align |
center |
center |
top |
backgroundAttachment |
scroll |
scroll |
fixed |
maxWidth |
max-w-md |
max-w-md (passcode: max-w-sm) |
eigen breedte binnen het formulier |
Bestanden
| Bestand | Landt in | Soort |
|---|---|---|
auth-shell.tsx |
components/auth/ |
beheerd |
Geen upstream shadcn-afhankelijkheden, geen cssVars.
Gebruikt door
| App | Sinds versie | Opmerkingen |
|---|---|---|
supplier-onboarding-vercel (Onboarding Portal) |
1.0.0 | Consumer #1, sinds 3 aug 2026. Vervangt 14 gedupliceerde overlay-blokken op 7 pagina's: 8× overlay="light" (auth), 5× overlay="medium" (formulierkaarten), 2× align="top" met backgroundAttachment="fixed" (de formulieren zelf). |
floriday-app (Floriday middleware) |
1.0.0 | Consumer #2, sinds 3 aug 2026. Twee pagina's (/login, /uitnodiging/[token]), beide overlay="light" op backgrounds/default.jpg. Losstaand overgenomen, niet via auth-pages-starter — die app heeft een ander auth-model. Bevestigt de keuze voor een absolute overlay: de app toont @col/demo-mode erboven, en een fixed laag zou die testbalk mee verduisteren. |
Bewuste keuzes
- De overlay is
absolutebinnen deze container, nietfixed. Anders verduistert hij ook wat er bóven dit scherm staat, zoals een demobalk — dat is in het origineel eerder een bug geweest. backgroundRepeatstaat altijd op'no-repeat', niet als prop. MetbackgroundSize: 'cover'vult de afbeelding altijd het vlak, dus herhaling treedt sowieso nooit op; een prop ervoor zou een nooit-gebruikte keuze aanbieden.py-8staat altijd aan, ook bijalign="top". In het origineel stond dat alleen op de authenticatiepagina's; de shell zet het overal, zodat een hoge kaart op een klein scherm niet tegen de vensterrand plakt. Dit is het enige zichtbare verschil bij de migratie van de formulierpagina's en moet daar apart gecontroleerd worden op mobiel formaat.overlay/align/backgroundAttachmentzijn losse enums, geen losse booleans. Voorkomt combinaties die niet bedoeld zijn (bv.fixed+align="center"op een korte pagina is geldig maar ongebruikelijk) terwijl de API klein blijft.
Bekende beperkingen
- Geen ingebouwde
Suspense- of loading-state voor de achtergrondafbeelding; een trage afbeelding toont eerst de overlay op een lege achtergrond. maxWidthis een losse Tailwind-class-string, geen enum — een typefout (max-w-ld) faalt stil.