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

ui/ux login optimization

Browse Source
This commit is contained in:
Felix Schneider
2026-03-07 14:10:36 +01:00
parent 90a5126221
commit e3a0c0eb37
12 changed files with 165 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.php-cs-fixer.cache
View File

File diff suppressed because one or more lines are too long

1
i18n/default_de.json
View File

@@ -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",

1
i18n/default_en.json
View File

@@ -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",

4
pages/auth/forgot(login).phtml
View File

@@ -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>

25
pages/auth/login(login).phtml
View File

@@ -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'); ?>

4
pages/auth/register(login).phtml
View File

@@ -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>

4
pages/auth/reset(login).phtml
View File

@@ -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>

4
pages/auth/verify(login).phtml
View File

@@ -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>

4
pages/auth/verify-email(login).phtml
View File

@@ -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>

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

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

57
tests/Architecture/AuthHelpLinksContractTest.php Normal file
View File

@@ -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);
}
}
}

68
web/css/pages/app-login.css
View File

@@ -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;
height: 2.25rem;
border-radius: calc(var(--app-border-radius) * 0.7);
width: 7.5rem;
height: 3.25rem;
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;
padding-top: 0.35rem;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
column-gap: 0.95rem;
row-gap: 0.45rem;
margin: 1.4rem 0 0.35rem;
padding-top: 0.2rem;
}
.login-help-links-list {
list-style: none;
margin: 0;
padding: 0;
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;
text-align: center;
font-size: 0.72rem;
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"],