stephan/kiddo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: login landing and header version

Browse Source
This commit is contained in:
Stephan Wilkens
2025-12-30 13:15:25 +01:00
parent 49adf77808
commit 5e7eb6a6e7
3 changed files with 156 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
backend/templates/index.html
View File

@ -18,16 +18,63 @@
</svg>
</button>
<div class="container">
<div id="loginLanding" class="login-landing">
<div class="login-card">
<div class="login-brand">
<i data-lucide="shield-check"></i>
<div>
<h1>Safe Kiddo Control</h1>
<p class="text-muted">Anmeldung erforderlich</p>
</div>
</div>
<section id="loginSection">
<h3><i data-lucide="log-in"></i> Anmeldung</h3>
<p class="text-muted mb-1">Melde dich an um Nutzerkonten zu verwalten</p>
<button id="oidcLogin" type="button" class="secondary">
<i data-lucide="key-round"></i>
Login via OIDC
</button>
<div style="margin: 1.5rem 0; border-top: 1px solid var(--color-border); position: relative;">
<span style="position: absolute; top: -0.6rem; left: 50%; transform: translateX(-50%); background: var(--color-surface); padding: 0 1rem; color: var(--color-text-muted); font-size: 0.75rem;">ODER</span>
</div>
<form id="loginForm">
<div class="grid">
<div class="form-group">
<label for="loginUser">Benutzer</label>
<input id="loginUser" name="loginUser" autocomplete="username" required />
</div>
<div class="form-group">
<label for="loginPass">Passwort</label>
<input id="loginPass" name="loginPass" type="password" autocomplete="current-password" required />
</div>
</div>
<button type="submit">
<i data-lucide="log-in"></i>
Anmelden
</button>
</form>
</section>
</div>
</div>
<div id="appContainer" class="container hidden">
<!-- Header -->
<header>
<h1>
<i data-lucide="shield-check"></i>
Safe Kiddo Control
</h1>
<div class="user-info" id="headerStatus">
<span id="currentUser">Nicht angemeldet</span>
<div class="header-main">
<h1>
<i data-lucide="shield-check"></i>
Safe Kiddo Control
</h1>
</div>
<div class="header-meta">
<div class="header-version" id="headerVersion">v-</div>
<div class="user-info" id="headerStatus">
<span id="currentUser">Nicht angemeldet</span>
</div>
</div>
</header>
@ -51,38 +98,6 @@
</div>
</div>
<!-- Login Section -->
<section id="loginSection">
<h3><i data-lucide="log-in"></i> Anmeldung</h3>
<p class="text-muted mb-1">Melde dich an um Nutzerkonten zu verwalten</p>
<button id="oidcLogin" type="button" class="secondary">
<i data-lucide="key-round"></i>
Login via OIDC
</button>
<div style="margin: 1.5rem 0; border-top: 1px solid var(--color-border); position: relative;">
<span style="position: absolute; top: -0.6rem; left: 50%; transform: translateX(-50%); background: var(--color-surface); padding: 0 1rem; color: var(--color-text-muted); font-size: 0.75rem;">ODER</span>
</div>
<form id="loginForm">
<div class="grid">
<div class="form-group">
<label for="loginUser">Benutzer</label>
<input id="loginUser" name="loginUser" autocomplete="username" required />
</div>
<div class="form-group">
<label for="loginPass">Passwort</label>
<input id="loginPass" name="loginPass" type="password" autocomplete="current-password" required />
</div>
</div>
<button type="submit">
<i data-lucide="log-in"></i>
Anmelden
</button>
</form>
</section>
<!-- User Management Section -->
<section id="userSection" class="hidden">
<h3><i data-lucide="users"></i> Nutzerverwaltung</h3>
@ -271,12 +286,27 @@
}
// Authentication
function showLanding() {
document.getElementById('loginLanding').classList.remove('hidden');
document.getElementById('appContainer').classList.add('hidden');
document.getElementById('headerVersion').textContent = 'v-';
history.replaceState(null, '', '#login');
}
function showApp() {
document.getElementById('loginLanding').classList.add('hidden');
document.getElementById('appContainer').classList.remove('hidden');
if (window.location.hash !== '#app') {
history.replaceState(null, '', '#app');
}
}
async function checkSession() {
try {
const data = await api('/me');
currentToken = sessionStorage.getItem('skdToken') || currentToken;
document.getElementById('currentUser').textContent = `Angemeldet als ${data.user} (${data.auth_mode})`;
document.getElementById('loginSection').classList.add('hidden');
showApp();
document.getElementById('userSection').classList.remove('hidden');
document.getElementById('updateSection').classList.remove('hidden');
await refreshUsers();
@ -284,7 +314,7 @@
return true;
} catch (err) {
document.getElementById('currentUser').textContent = 'Nicht angemeldet';
document.getElementById('loginSection').classList.remove('hidden');
showLanding();
document.getElementById('userSection').classList.add('hidden');
document.getElementById('updateSection').classList.add('hidden');
return false;
@ -361,6 +391,7 @@
try {
const data = await api('/update/status');
document.querySelector('#metricVersion .value').textContent = data.current_version;
document.getElementById('headerVersion').textContent = `v${data.current_version}`;
const statusBadge = data.last_status === 'success'
? '<span class="badge success"><i data-lucide="check-circle"></i> Erfolgreich</span>'