refactor(login): Stripe-style split layout + multi-step polish
Reworks the auth flow from a single centered card into a two-pane
layout — form on the left, tenant brand on the right — and tightens the
multi-step login UX along the way. Major changes:
LAYOUT
- templates/login.phtml splits into a flex-column body so the footer
spans both panes at the bottom instead of getting clipped under main.
- New .login-form-pane and .login-brand-pane on a 1fr/1fr grid above
768px; mobile stacks brand on top as a slim band, form below.
- Brand pane carries a soft halo + dot grid + tinted base, all derived
from --app-primary so it tracks the tenant accent automatically.
- Login card gets a Stripe-style hairline border + soft shadow, no
Pico article > header sectioning band, h1 in semibold + tracking-tight.
- The "body > main" global padding is overridden for login so the brand
panel reaches the very top + bottom edges of its column.
OS THEME FALLBACK
- New appExplicitTheme() returns the user/tenant theme or empty string,
used by login.phtml + error.phtml to OMIT data-theme entirely when no
preference exists. CSS prefers-color-scheme media query then drives
the theme — DB stays the source of truth, no browser-side persistence.
MULTI-STEP UX
- Heading is stage-aware: "Login" / "Select tenant" / "Login to {tenant}".
Drops the redundant "Login credentials" subtitle.
- Stage 3 gets an identity pill (icon + email + compact "use different
email" button) replacing the old tenant-context block, so the user
always sees which account they're signing in with regardless of
multi-tenant status.
- Stage 2 tenant selection drops avatars + initials — just radio + name
with text-overflow ellipsis for long tenant names.
- Tightens primary CTA: full-width on every stage incl. <p>-wrapped
buttons. autofocus moves to the right input per stage (ldap_username
/ password).
NOTICE / HELP LINKS
- The placeholder "Problems logging in" link is gone (it used to point
at the imprint route — misleading). show_support wired through 6
auth pages and the partial removed; architecture tests adjusted.
- Help-links centered with bullet separators between items, hairline
border-top so they read as secondary navigation under the main CTA.
- The "Encrypted / HTTPS/TLS 1.2+" trust badge at the card bottom is
removed — modern users assume HTTPS, and the badge added noise.
DEAD CODE
- $authLogoHref, $selectedTenantAvatarUrl, $selectedTenantInitial,
$hasSelectedTenantAvatar, $canSwitchTenant — unused after the
identity-pill / brand-pane move, removed from all 6 auth pages.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -53,6 +53,35 @@ function currentTheme(): string
|
||||
return $theme;
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolve the theme value to set on the html data-theme attribute.
|
||||
*
|
||||
* Returns an empty string when no explicit preference has been set by either
|
||||
* the user or the tenant — callers should then OMIT data-theme entirely so
|
||||
* the browser's prefers-color-scheme media query can drive the theme. Use
|
||||
* this only for the html element. Internal consumers (theme toggle,
|
||||
* logo URL resolution) keep using currentTheme() / appDefaultTheme() which
|
||||
* always return a concrete theme string.
|
||||
*/
|
||||
function appExplicitTheme(): string
|
||||
{
|
||||
$themes = appThemes();
|
||||
|
||||
if (allowUserTheme()) {
|
||||
$userTheme = strtolower(trim((string) ($_SESSION['user']['theme'] ?? '')));
|
||||
if ($userTheme !== '' && isset($themes[$userTheme])) {
|
||||
return $userTheme;
|
||||
}
|
||||
}
|
||||
|
||||
$tenantTheme = strtolower(trim((string) ($_SESSION['current_tenant']['default_theme'] ?? '')));
|
||||
if ($tenantTheme !== '' && isset($themes[$tenantTheme])) {
|
||||
return $tenantTheme;
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolve active primary color from the current tenant.
|
||||
*
|
||||
|
||||
Reference in New Issue
Block a user