ui/ux login optimization

i18n/default_de.json

@@ -52,6 +52,7 @@
   "Choose how you want to sign in": "Anmeldeart auswählen",
   "Continue": "Weiter",
   "Use different email": "Andere E-Mail verwenden",
+  "Back to login": "Zurück zum Login",
   "Encrypted connection": "Verschlüsselt",
   "HTTPS/TLS 1.2+ in transit": "HTTPS/TLS 1.2+ bei der Übertragung",
   "Problems logging in": "Probleme beim Login",

i18n/default_en.json

@@ -52,6 +52,7 @@
   "Choose how you want to sign in": "Choose how you want to sign in",
   "Continue": "Continue",
   "Use different email": "Use different email",
+  "Back to login": "Back to login",
   "Encrypted connection": "Encrypted",
   "HTTPS/TLS 1.2+ in transit": "HTTPS/TLS 1.2+ in transit",
   "Problems logging in": "Problems logging in",

pages/auth/forgot(login).phtml

@@ -10,6 +10,10 @@ use MintyPHP\Session;
 
 Buffer::set('title', t('Forgot password'));
 $errorNoticeId = !empty($errors) ? 'auth-forgot-error-notice' : '';
+$authHelpContext = [
+  'show_back_to_login' => true,
+  'show_support' => true,
+];
 ?>
 
 <article>

pages/auth/login(login).phtml

@@ -37,15 +37,27 @@ $errors = is_array($errors ?? null) ? $errors : [];
 $errorNoticeId = $errors ? 'auth-login-error-notice' : '';
 $loginHeading = t('Login');
 $loginSubheading = t('Please enter your credentials');
+$authHelpContext = ['show_support' => true];
 if ($stage === 'resolve_email') {
     $loginHeading = t('Login');
     $loginSubheading = t('Enter your email to continue');
+    $authHelpContext = [
+        'show_register' => true,
+        'show_support' => true,
+    ];
 } elseif ($stage === 'choose_tenant') {
     $loginHeading = t('Select tenant');
     $loginSubheading = t('Select your tenant to continue');
+    $authHelpContext = [
+        'show_support' => true,
+    ];
 } else {
     $loginHeading = t('Login options');
     $loginSubheading = t('Choose how you want to sign in');
+    $authHelpContext = [
+        'show_forgot' => !empty($selectedTenantMethods['local']),
+        'show_support' => true,
+    ];
 }
 
 ?>
@@ -87,7 +99,6 @@ if ($stage === 'resolve_email') {
             <input type="hidden" name="email" value="<?php e($email); ?>">
             <input type="hidden" name="tenant_hint" value="<?php e($tenantHint); ?>">
             <fieldset class="login-tenant-fieldset">
-                <!-- <legend class="login-tenant-select-label"><?php e(t('Which tenant do you want to sign in to?')); ?></legend> -->
                 <div class="login-tenant-choice-grid">
                     <?php foreach ($tenantCandidates as $tenantCandidate): ?>
                         <?php
@@ -147,7 +158,7 @@ if ($stage === 'resolve_email') {
                 <input type="hidden" name="stage" value="resolve_email">
                 <input type="hidden" name="email" value="<?php e($email); ?>">
                 <input type="hidden" name="tenant_hint" value="<?php e($tenantHint); ?>">
-                <button type="submit" class="secondary outline"><?php e(t('Switch tenant')); ?></button>
+                <button type="submit" class="secondary outline small"><?php e(t('Switch tenant')); ?></button>
                 <?php Session::getCsrfInput(); ?>
             </form>
         </section>
@@ -195,16 +206,6 @@ if ($stage === 'resolve_email') {
                 <?php e(t('No login method is available for this tenant')); ?>
             </div>
         <?php endif; ?>
-        <hr>
-        <form method="post">
-            <input type="hidden" name="stage" value="resolve_email">
-            <input type="hidden" name="email" value="<?php e($email); ?>">
-            <input type="hidden" name="tenant_hint" value="<?php e($tenantHint); ?>">
-            <p>
-                <button type="submit" class="secondary outline"><?php e(t('Use different email')); ?></button>
-            </p>
-            <?php Session::getCsrfInput(); ?>
-        </form>
     <?php endif; ?>
 
     <?php require templatePath('partials/auth-help-links.phtml'); ?>

pages/auth/register(login).phtml

@@ -17,6 +17,10 @@ $passwordMinLength = (int) ($passwordMinLength ?? 0);
 $passwordHints = is_array($passwordHints ?? null) ? $passwordHints : [];
 $errorNoticeId = !empty($error) ? 'auth-register-error-notice' : '';
 $passwordHintId = 'auth-register-password-hints';
+$authHelpContext = [
+    'show_back_to_login' => true,
+    'show_support' => true,
+];
 ?>
 <article>
     <header>

pages/auth/reset(login).phtml

@@ -12,6 +12,10 @@ use MintyPHP\Session;
 Buffer::set('title', t('Reset password'));
 $errorNoticeId = !empty($errors) ? 'auth-reset-error-notice' : '';
 $passwordHintId = 'auth-reset-password-hints';
+$authHelpContext = [
+  'show_back_to_login' => true,
+  'show_support' => true,
+];
 ?>
 
 <article>

pages/auth/verify(login).phtml

@@ -11,6 +11,10 @@ use MintyPHP\Session;
 
 Buffer::set('title', t('Verify code'));
 $errorNoticeId = !empty($errors) ? 'auth-verify-error-notice' : '';
+$authHelpContext = [
+  'show_back_to_login' => true,
+  'show_support' => true,
+];
 ?>
 
 <article>

pages/auth/verify-email(login).phtml

@@ -11,6 +11,10 @@ use MintyPHP\Session;
 
 Buffer::set('title', t('Verify email'));
 $errorNoticeId = !empty($errors) ? 'auth-verify-email-error-notice' : '';
+$authHelpContext = [
+  'show_back_to_login' => true,
+  'show_support' => true,
+];
 ?>
 
 <article>

templates/partials/auth-help-links.phtml

@@ -1,7 +1,35 @@
+<?php
+
+$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) {
+    $links[] = ['href' => lurl('password/forgot'), 'label' => t('Forgot password')];
+}
+if ($showRegister) {
+    $links[] = ['href' => lurl('register'), 'label' => t('Register')];
+}
+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;
+}
+?>
 <nav class="login-help-links" aria-label="<?php e(t('Support')); ?>">
-  <a href="<?php e(lurl('password/forgot')); ?>"><?php e(t('Forgot password')); ?></a>
+  <ul class="login-help-links-list">
-  <?php if (allowRegistration()): ?>
+    <?php foreach ($links as $link): ?>
-    <a href="<?php e(lurl('register')); ?>"><?php e(t('Register')); ?></a>
+      <li class="login-help-links-item">
-  <?php endif; ?>
+        <a href="<?php e((string) ($link['href'] ?? '')); ?>"><?php e((string) ($link['label'] ?? '')); ?></a>
-  <a href="<?php e(lurl('imprint')); ?>"><?php e(t('Problems logging in')); ?></a>
+      </li>
+    <?php endforeach; ?>
+  </ul>
 </nav>

tests/Architecture/AuthHelpLinksContractTest.php

@@ -0,0 +1,57 @@
+<?php
+
+namespace MintyPHP\Tests\Architecture;
+
+use PHPUnit\Framework\TestCase;
+
+class AuthHelpLinksContractTest extends TestCase
+{
+    use ProjectFileAssertionSupport;
+
+    public function testAuthHelpLinksPartialSupportsContextFlags(): void
+    {
+        $content = $this->readProjectFile('templates/partials/auth-help-links.phtml');
+
+        $this->assertStringContainsString('$authHelpContext', $content);
+        $this->assertStringContainsString("'show_forgot'", $content);
+        $this->assertStringContainsString("'show_register'", $content);
+        $this->assertStringContainsString("'show_back_to_login'", $content);
+        $this->assertStringContainsString("'show_support'", $content);
+    }
+
+    public function testRegisterLinkRemainsGuardedByRegistrationFlag(): void
+    {
+        $content = $this->readProjectFile('templates/partials/auth-help-links.phtml');
+
+        $this->assertStringContainsString('allowRegistration()', $content);
+        $this->assertStringContainsString("lurl('register')", $content);
+    }
+
+    public function testLoginTemplateDefinesStageSpecificLinkMatrix(): void
+    {
+        $content = $this->readProjectFile('pages/auth/login(login).phtml');
+
+        $this->assertStringContainsString("'show_register' => true", $content);
+        $this->assertStringContainsString("'show_support' => true", $content);
+        $this->assertStringContainsString('\'show_forgot\' => !empty($selectedTenantMethods[\'local\'])', $content);
+        $this->assertStringContainsString('$stage === \'choose_tenant\'', $content);
+    }
+
+    public function testSecondaryAuthPagesProvideBackToLoginAndSupportLinks(): void
+    {
+        $files = [
+            'pages/auth/register(login).phtml',
+            'pages/auth/forgot(login).phtml',
+            'pages/auth/verify(login).phtml',
+            'pages/auth/reset(login).phtml',
+            'pages/auth/verify-email(login).phtml',
+        ];
+
+        foreach ($files as $file) {
+            $content = $this->readProjectFile($file);
+            $this->assertStringContainsString("'show_back_to_login' => true", $content, $file);
+            $this->assertStringContainsString("'show_support' => true", $content, $file);
+            $this->assertStringContainsString("templatePath('partials/auth-help-links.phtml')", $content, $file);
+        }
+    }
+}

web/css/pages/app-login.css

@@ -705,7 +705,8 @@
 
   .login-methods-stack {
     display: grid;
-    gap: 0.625rem;
+    gap: 0.7rem;
+    margin-block: 0.2rem 0.45rem;
   }
 
   .login-password-form {
@@ -717,17 +718,12 @@
   }
 
   .login-tenant-context {
-    border: 1px solid color-mix(in srgb, var(--app-border) 80%, transparent);
-    border-radius: var(--app-border-radius);
-    background: color-mix(
-      in srgb,
-      var(--app-primary) 6%,
-      var(--app-card-background-color)
-    );
-    padding: 0.75rem;
     margin-bottom: 1rem;
     display: grid;
     gap: 0.75rem;
+    border: 1px solid var(--app-border);
+    border-radius: var(--app-border-radius);
+    padding: calc(var(--app-spacing) * 0.5);
   }
 
   .login-tenant-context-main {
@@ -738,16 +734,10 @@
 
   .login-tenant-context-avatar,
   .login-tenant-context-avatar-placeholder {
-    width: 3.5rem;
+    width: 7.5rem;
-    height: 2.25rem;
+    height: 3.25rem;
-    border-radius: calc(var(--app-border-radius) * 0.7);
     object-fit: contain;
     object-position: left center;
-    background: color-mix(
-      in srgb,
-      var(--app-card-background-color) 80%,
-      var(--app-primary) 20%
-    );
   }
 
   .login-tenant-context-avatar-placeholder {
@@ -775,6 +765,11 @@
   .login-tenant-context-name {
     margin: 0;
     font-size: 11px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 130px;
+    display: block;
+    overflow: hidden;
   }
 
   .login-tenant-context-form {
@@ -786,22 +781,37 @@
   }
 
   .login-help-links {
-    margin: 1.75rem 0 0.25rem;
+    margin: 1.4rem 0 0.35rem;
-    padding-top: 0.35rem;
+    padding-top: 0.2rem;
-    display: flex;
+  }
-    align-items: center;
+  .login-help-links-list {
-    justify-content: center;
+    list-style: none;
-    flex-wrap: wrap;
+    margin: 0;
-    column-gap: 0.95rem;
+    padding: 0;
-    row-gap: 0.45rem;
     font-size: 0.72rem;
-    line-height: 1.25;
+  }
+
+  .login-help-links-item {
+    display: inline-flex;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+  }
+
+  .login-help-links-item + .login-help-links-item::before {
+    content: "";
+    display: inline-block;
+    width: 1px;
+    height: 0.85em;
+    margin-right: 0.8rem;
+    background: color-mix(in srgb, var(--app-muted) 55%, transparent);
+    transform: translateY(1px);
   }
 
   .login-security-note {
-    font-size: 0.74rem;
+    font-size: 0.72rem;
-    text-align: center;
     margin-bottom: 1px;
+    color: color-mix(in srgb, var(--app-contrast) 78%, var(--app-muted));
   }
 
   .login-security-note i {
@@ -811,9 +821,9 @@
 
   .login-security-note-detail {
     width: 100%;
-    text-align: center;
     display: block;
     font-size: 9px;
+    color: color-mix(in srgb, var(--app-muted) 75%, transparent);
   }
 
   form[aria-busy="true"] button[type="submit"],