Show the configured logo above the login and setup screens

Adds setup/login auth-logo elements that share applyLogo's existence
check, so the brand image appears on the unauthenticated screens too
when one is configured and quietly stays hidden otherwise.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Stefan Hacker 2026-04-16 15:42:43 +02:00
parent 82782c4f92
commit 5713d6dbc9
1 changed files with 17 additions and 4 deletions

View File

@ -166,7 +166,9 @@
.muted { color: var(--text-muted); }
/* Login/Setup center view */
.center { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.center { min-height: 100vh; display: flex; flex-direction: column; align-items: center;
justify-content: center; padding: 1.5rem; gap: 1.5rem; }
.auth-logo { max-width: 240px; max-height: 80px; object-fit: contain; display: block; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card h2 { margin: 0 0 .25rem; font-size: 1.4rem; }
.auth-card p.small { margin: 0 0 1.25rem; }
@ -215,6 +217,7 @@
<!-- SETUP VIEW -->
<div id="view-setup" class="center" style="display:none">
<img id="setupLogo" class="auth-logo" alt="" style="display:none" />
<div class="card auth-card">
<h2>Willkommen 👋</h2>
<p class="small">Lege den ersten Admin-Account an. Dieser kann später weitere Benutzer verwalten.</p>
@ -231,6 +234,7 @@
<!-- LOGIN VIEW -->
<div id="view-login" class="center" style="display:none">
<img id="loginLogo" class="auth-logo" alt="" style="display:none" />
<div class="card auth-card">
<h2>Login</h2>
<p class="small">Melde dich mit deinem Account an.</p>
@ -542,11 +546,20 @@ function applySizeStyle(el, w, h) {
}
async function applyLogo(width, height) {
const img = document.getElementById('navLogo');
const navImg = document.getElementById('navLogo');
const setupImg = document.getElementById('setupLogo');
const loginImg = document.getElementById('loginLogo');
const src = '/logo?t=' + Date.now();
const r = await fetch(src, { method: 'HEAD' });
if (r.ok) { img.src = src; img.style.display = ''; applySizeStyle(img, width, height); }
else img.style.display = 'none';
if (r.ok) {
navImg.src = src; navImg.style.display = ''; applySizeStyle(navImg, width, height);
if (setupImg) { setupImg.src = src; setupImg.style.display = ''; }
if (loginImg) { loginImg.src = src; loginImg.style.display = ''; }
} else {
navImg.style.display = 'none';
if (setupImg) setupImg.style.display = 'none';
if (loginImg) loginImg.style.display = 'none';
}
}
function measureNatural() {