ui: place oidc button near login

CHANGELOG.md

@@ -1,4 +1,4 @@
-ID: DOC_000001 | Version: 0.1.2 | Status: Final
+ID: DOC_000001 | Version: 0.1.3 | Status: Final
 By: Codex (GPT-5)
 
 # Projekt-Logbuch (Changelog)
@@ -44,6 +44,7 @@ By: Codex (GPT-5)
 | 30.12.2025 | 🎨 UI | ID: Watchtower Theme ersetzt durch OIDC Theme (Professional Design mit Dark Mode Toggle, Light/Dark Theme). By: Claude Sonnet 4.5 |
 | 30.12.2025 | 🎨 UI | ID: TASK_000035 Login-Landing und Versionsanzeige im Header der Web-UI. By: Codex (GPT-5) |
 | 30.12.2025 | 🎨 UI | ID: TASK_000036 Login-/Dashboard-URLs und Redirect nach Login. By: Codex (GPT-5) |
+| 30.12.2025 | 🎨 UI | ID: TASK_000037 OIDC-Button neben Anmelden und nur aktiv bei erreichbarem Server. By: Codex (GPT-5) |
 
 ---
 ## Legende

VERSION

@@ -1 +1 @@
-0.1.2
+0.1.3

backend/static/styles.css

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

backend/templates/index.html

@@ -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>
+          <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) {
+        const button = document.getElementById('oidcLogin');
-          document.getElementById('oidcLogin').disabled = true;
+        if (data.enabled) {
-          document.getElementById('oidcLogin').title = 'OIDC nicht konfiguriert';
+          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';
       }
     }
 

project-management/requirements/tasks/TASK_000037.md

@@ -0,0 +1,18 @@
+ID: TASK_000037 | Version: 0.1.3 | Status: Done
+By: Codex (GPT-5)
+
+# TASK_000037: OIDC-Button neben Anmelden
+
+## Outcome
+Der OIDC-Login-Button sitzt neben dem Anmelde-Button und ist nur aktiv, wenn der OIDC-Server erreichbar ist.
+
+## Story-Bezug
+US_000022
+
+## Beschreibung
+- OIDC-Button unterhalb der Login-Felder neben dem Anmelde-Button platzieren.
+- Button deaktivieren, wenn `/login/oidc/status` keinen aktiven Server meldet oder nicht erreichbar ist.
+
+## Definition of Done (DoD)
+- OIDC-Button ist neben dem Anmelde-Button sichtbar.
+- OIDC-Button ist standardmaessig deaktiviert und wird nur bei erreichbarem OIDC aktiviert.