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

ui: place oidc button near login

Browse Source
This commit is contained in:
Stephan Wilkens
2025-12-30 13:36:01 +01:00
parent f27e423ef3
commit 725b67d734
5 changed files with 53 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
backend/static/styles.css
View File

@ -139,6 +139,13 @@ body.dark-mode .theme-toggle .sun-icon {
margin-bottom: 4px;
}
.login-actions {
display: flex;
gap: 12px;
align-items: center;
justify-content: flex-end;
}
/* Header - Keep the gradient but more professional */
header {
background: var(--bg-header);
@ -730,6 +737,11 @@ textarea:focus {
.header-meta {
align-items: flex-start;
}
.login-actions {
flex-direction: column;
align-items: stretch;
}
}
/* NEW STYLES FOR ENHANCED UI */

33
backend/templates/index.html
View File

@ -32,11 +32,6 @@
<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>
@ -52,10 +47,16 @@
<input id="loginPass" name="loginPass" type="password" autocomplete="current-password" required />
</div>
</div>
<button type="submit">
<i data-lucide="log-in"></i>
Anmelden
</button>
<div class="login-actions">
<button type="submit">
<i data-lucide="log-in"></i>
Anmelden
</button>
<button id="oidcLogin" type="button" class="secondary" disabled>
<i data-lucide="key-round"></i>
OIDC Login
</button>
</div>
</form>
</section>
</div>
@ -330,12 +331,18 @@
async function checkOidcStatus() {
try {
const data = await api('/login/oidc/status');
if (!data.enabled) {
document.getElementById('oidcLogin').disabled = true;
document.getElementById('oidcLogin').title = 'OIDC nicht konfiguriert';
const button = document.getElementById('oidcLogin');
if (data.enabled) {
button.disabled = false;
button.title = 'Login via OIDC';
} else {
button.disabled = true;
button.title = 'OIDC nicht konfiguriert oder nicht erreichbar';
}
} catch (err) {
document.getElementById('oidcLogin').disabled = true;
const button = document.getElementById('oidcLogin');
button.disabled = true;
button.title = 'OIDC nicht erreichbar';
}
}