fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor(login): Stripe-style split layout + multi-step polish

Browse Source 
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:
Felix Schneider
2026-04-25 21:16:26 +02:00
parent 4890a280fb
commit e775ed2800
15 changed files with 242 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
templates/error.phtml
View File

@@ -4,12 +4,12 @@ use MintyPHP\Buffer;
$defaultTitle = appTitle();
$primaryVars = appPrimaryCssVars();
$theme = appDefaultTheme();
$theme = appExplicitTheme();
$statusCode = http_response_code() ?: 500;
?>
<!DOCTYPE html>
<html data-theme="<?php e($theme); ?>" <?php if ($primaryVars !== ''): ?>style="<?php e($primaryVars); ?>"<?php endif; ?>>
<html <?php if ($theme !== ''): ?>data-theme="<?php e($theme); ?>"<?php endif; ?> <?php if ($primaryVars !== ''): ?>style="<?php e($primaryVars); ?>"<?php endif; ?>>
<head>
<meta charset="utf-8">

15
templates/login.phtml
View File

@@ -4,7 +4,7 @@ use MintyPHP\Buffer;
$defaultTitle = appTitle();
$primaryVars = appPrimaryCssVars();
$theme = appDefaultTheme();
$theme = appExplicitTheme();
$pageTitle = $defaultTitle;
ob_start();
Buffer::get('title');
@@ -35,7 +35,7 @@ $loginComponentConfig = [
?>
<!DOCTYPE html>
<html
data-theme="<?php e($theme); ?>"
<?php if ($theme !== ''): ?>data-theme="<?php e($theme); ?>"<?php endif; ?>
data-asset-base="<?php e(asset('')); ?>"
data-password-toggle-show-label="<?php e(t('Show password')); ?>"
data-password-toggle-hide-label="<?php e(t('Hide password')); ?>"
@@ -58,9 +58,14 @@ $loginComponentConfig = [
<body>
<main class="login-main">
<div class="container-small login-content-container">
<?php Buffer::get('html'); ?>
</div>
<section class="login-form-pane">
<div class="login-content-container">
<?php Buffer::get('html'); ?>
</div>
</section>
<aside class="login-brand-pane" aria-hidden="true">
<?php require __DIR__ . '/partials/auth-logo.phtml'; ?>
</aside>
</main>
<?php require __DIR__ . '/partials/app-footer.phtml'; ?>

4
templates/partials/auth-help-links.phtml
View File

@@ -4,7 +4,6 @@ $authHelpContext = is_array($authHelpContext ?? null) ? $authHelpContext : [];
$showForgot = !empty($authHelpContext['show_forgot']);
$showRegister = !empty($authHelpContext['show_register']) && allowRegistration();
$showBackToLogin = !empty($authHelpContext['show_back_to_login']);
$showSupport = array_key_exists('show_support', $authHelpContext) ? !empty($authHelpContext['show_support']) : true;
$links = [];
if ($showForgot) {
@@ -16,9 +15,6 @@ if ($showRegister) {
if ($showBackToLogin) {
$links[] = ['href' => lurl('login'), 'label' => t('Back to login')];
}
if ($showSupport) {
$links[] = ['href' => lurl('imprint'), 'label' => t('Problems logging in')];
}
if (!$links) {
return;