feat: modernize web UI with dashboard and enhanced UX
- Add Lucide Icons library integration - Implement metrics dashboard with 4 cards (users count, active, locked, version) - Replace text-based user list with proper table including status badges - Add toast notification system with slide-in animation - Implement loading states with spinners for async operations - Add action modal for user disable/enable operations - Add status badges (success/warning/error/neutral) throughout - Enhance CSS with hover effects, transitions, and modern styling - Improve visual hierarchy with card-based layout - Add icon-based actions for better UX 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@ -40,6 +40,7 @@ By: Codex (GPT-5)
|
||||
| 30.12.2025 | ⚙️ Code | ID: Update-API Endpunkte implementiert (GET /update/status, POST /update/check, POST /update/apply, POST /update/rollback, GET /update/logs). By: Claude Sonnet 4.5 |
|
||||
| 30.12.2025 | ⚙️ Code | ID: Update-UI im Web-Frontend implementiert (Status-Anzeige, Check/Apply/Rollback Buttons, Logs-Viewer). By: Claude Sonnet 4.5 |
|
||||
| 30.12.2025 | 🎨 UI | ID: Watchtower Theme implementiert (Sci-Fi Dark Mode mit Neon-Glow, bg-noise, CSS-Variables). By: Claude Sonnet 4.5 |
|
||||
| 30.12.2025 | 🎨 UI | ID: Web-UI modernisiert (Lucide Icons, Metrics Dashboard, User Table mit Badges, Toast Notifications, Loading States, Action Modals). By: Claude Sonnet 4.5 |
|
||||
|
||||
---
|
||||
## Legende
|
||||
|
||||
@ -6,143 +6,284 @@
|
||||
<title>Safe Kiddo Control</title>
|
||||
<link rel="stylesheet" href="/static/tokens_watchtower.css" />
|
||||
<link rel="stylesheet" href="/static/theme_watchtower.css" />
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
body { max-width: 1200px; margin: auto; padding: 2rem; }
|
||||
.log { white-space: pre-line; font-family: var(--font-mono); background: rgba(10, 14, 20, 0.4); padding: 1rem; border-radius: var(--radius-sm); }
|
||||
form { margin-bottom: 1rem; }
|
||||
header { background: var(--color-surface); padding: 2rem; border-radius: var(--radius-md); margin-bottom: 2rem; border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); }
|
||||
header h1 { color: var(--color-accent); margin: 0 0 0.5rem 0; font-size: 2rem; text-transform: uppercase; letter-spacing: 0.05em; }
|
||||
header p { color: var(--color-text-muted); margin: 0; }
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { max-width: 1400px; margin: auto; padding: 2rem; font-family: var(--font-ui); }
|
||||
|
||||
/* Header */
|
||||
header { background: var(--color-surface); padding: 2rem; border-radius: var(--radius-md); margin-bottom: 2rem; border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); display: flex; justify-content: space-between; align-items: center; }
|
||||
header h1 { color: var(--color-accent); margin: 0; font-size: 1.75rem; text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 0.75rem; }
|
||||
header .user-info { color: var(--color-text-muted); font-size: 0.875rem; }
|
||||
|
||||
/* Metrics Dashboard */
|
||||
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
|
||||
.metric-card { background: var(--color-surface); padding: 1.5rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); transition: all 0.2s; }
|
||||
.metric-card:hover { transform: translateY(-2px); box-shadow: 0 0 20px rgba(0, 224, 143, 0.15); }
|
||||
.metric-card .label { color: var(--color-text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
|
||||
.metric-card .value { color: var(--color-accent); font-size: 2rem; font-weight: 700; }
|
||||
.metric-card.warning { border-left-color: var(--color-warning); }
|
||||
.metric-card.warning .value { color: var(--color-warning); }
|
||||
.metric-card.error { border-left-color: var(--color-error); }
|
||||
.metric-card.error .value { color: var(--color-error); }
|
||||
|
||||
/* Sections */
|
||||
section { background: var(--color-surface); padding: 1.5rem; border-radius: var(--radius-md); margin-bottom: 1.5rem; border: 1px solid var(--color-border); }
|
||||
h3 { color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.875rem; margin-bottom: 1rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem; }
|
||||
button { padding: 0.75rem 1.5rem; background: var(--color-accent); color: #081015; border: none; border-radius: 999px; cursor: pointer; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.2s; }
|
||||
button:hover { box-shadow: 0 0 20px var(--wt-glow); transform: translateY(-2px); }
|
||||
button:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
|
||||
button#oidcLogin { background: transparent; border: 1px solid var(--color-accent); color: var(--color-accent); }
|
||||
button#oidcLogin:hover { background: rgba(0, 224, 143, 0.1); }
|
||||
input, select { background: rgba(10, 14, 20, 0.6); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--color-text); padding: 0.75rem; border-radius: var(--radius-sm); width: 100%; }
|
||||
input:focus, select:focus { border-color: var(--color-accent); box-shadow: 0 0 15px var(--wt-glow); outline: none; }
|
||||
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
|
||||
section h3 { color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.875rem; margin-bottom: 1rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
|
||||
|
||||
/* User Table */
|
||||
.user-table { width: 100%; border-collapse: separate; border-spacing: 0 0.5rem; }
|
||||
.user-table thead th { text-align: left; color: var(--color-text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.5rem 1rem; border-bottom: 1px solid var(--color-border); }
|
||||
.user-table tbody tr { background: rgba(10, 14, 20, 0.4); transition: all 0.2s; }
|
||||
.user-table tbody tr:hover { background: rgba(10, 14, 20, 0.6); transform: scale(1.01); }
|
||||
.user-table tbody td { padding: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.05); }
|
||||
.user-table tbody td:first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
|
||||
.user-table tbody td:last-child { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
|
||||
|
||||
/* Status Badges */
|
||||
.badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
|
||||
.badge.success { background: rgba(0, 224, 143, 0.15); color: var(--color-success); border: 1px solid var(--color-success); }
|
||||
.badge.warning { background: rgba(255, 180, 84, 0.15); color: var(--color-warning); border: 1px solid var(--color-warning); }
|
||||
.badge.error { background: rgba(255, 94, 94, 0.15); color: var(--color-error); border: 1px solid var(--color-error); }
|
||||
.badge.neutral { background: rgba(255, 255, 255, 0.05); color: var(--color-text-muted); border: 1px solid rgba(255, 255, 255, 0.1); }
|
||||
|
||||
/* Buttons */
|
||||
button { padding: 0.75rem 1.5rem; background: var(--color-accent); color: #081015; border: none; border-radius: 999px; cursor: pointer; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
|
||||
button:hover:not(:disabled) { box-shadow: 0 0 20px var(--wt-glow); transform: translateY(-2px); }
|
||||
button:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
button.secondary { background: transparent; border: 1px solid var(--color-accent); color: var(--color-accent); }
|
||||
button.secondary:hover:not(:disabled) { background: rgba(0, 224, 143, 0.1); }
|
||||
button.danger { background: var(--color-error); color: #1b0d0d; }
|
||||
button.small { padding: 0.5rem 1rem; font-size: 0.75rem; }
|
||||
|
||||
/* Forms */
|
||||
.form-group { margin-bottom: 1rem; }
|
||||
label { display: block; margin-bottom: 0.5rem; color: var(--color-text-muted); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }
|
||||
input, select, textarea { background: rgba(10, 14, 20, 0.6); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--color-text); padding: 0.75rem; border-radius: var(--radius-sm); width: 100%; font-family: inherit; transition: all 0.2s; }
|
||||
input:focus, select:focus, textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 15px var(--wt-glow); outline: none; }
|
||||
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
|
||||
|
||||
/* Toast Notifications */
|
||||
.toast-container { position: fixed; top: 2rem; right: 2rem; z-index: 1000; display: flex; flex-direction: column; gap: 1rem; max-width: 400px; }
|
||||
.toast { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem 1.5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); animation: slideIn 0.3s ease; display: flex; align-items: center; gap: 1rem; }
|
||||
.toast.success { border-left: 4px solid var(--color-success); }
|
||||
.toast.error { border-left: 4px solid var(--color-error); }
|
||||
.toast.warning { border-left: 4px solid var(--color-warning); }
|
||||
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
|
||||
|
||||
/* Loading Spinner */
|
||||
.spinner { border: 3px solid rgba(255, 255, 255, 0.1); border-top-color: var(--color-accent); border-radius: 50%; width: 20px; height: 20px; animation: spin 0.8s linear infinite; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
/* Modal */
|
||||
.modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(4px); align-items: center; justify-content: center; z-index: 999; }
|
||||
.modal.active { display: flex; }
|
||||
.modal-content { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 2rem; max-width: 500px; width: 90%; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7); }
|
||||
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
|
||||
.modal-header h3 { color: var(--color-accent); margin: 0; }
|
||||
.modal-actions { display: flex; gap: 1rem; justify-content: flex-end; margin-top: 1.5rem; }
|
||||
|
||||
/* Details/Accordion */
|
||||
details { margin-top: 1rem; background: rgba(10, 14, 20, 0.3); padding: 1rem; border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, 0.05); }
|
||||
summary { cursor: pointer; color: var(--color-accent); font-weight: 600; user-select: none; }
|
||||
#updateStatus { background: rgba(10, 14, 20, 0.6); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); }
|
||||
summary { cursor: pointer; color: var(--color-accent); font-weight: 600; user-select: none; display: flex; align-items: center; gap: 0.5rem; }
|
||||
|
||||
/* Utility */
|
||||
.hidden { display: none; }
|
||||
.text-muted { color: var(--color-text-muted); }
|
||||
.text-center { text-align: center; }
|
||||
.mt-1 { margin-top: 1rem; }
|
||||
.mb-1 { margin-bottom: 1rem; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-noise"></div>
|
||||
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<h1>Safe Kiddo Control</h1>
|
||||
<p>Steuere Nutzerkonten über die lokale API. Stelle sicher, dass der API-Token gesetzt ist.</p>
|
||||
<h1>
|
||||
<i data-lucide="shield-check"></i>
|
||||
Safe Kiddo Control
|
||||
</h1>
|
||||
<div class="user-info" id="headerStatus">
|
||||
<span id="currentUser">Nicht angemeldet</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<h3>Login</h3>
|
||||
<p>Bevorzugt OIDC nutzen, falls konfiguriert. Die Anmeldung öffnet den Identity Provider und setzt eine Session-Cookie.</p>
|
||||
<button id="oidcLogin" type="button">Login via OIDC</button>
|
||||
<hr />
|
||||
<p>Lokale Anmeldung (PAM) ist immer moeglich:</p>
|
||||
<!-- Metrics Dashboard -->
|
||||
<div class="metrics">
|
||||
<div class="metric-card" id="metricUsers">
|
||||
<div class="label"><i data-lucide="users"></i> Verwaltbare Nutzer</div>
|
||||
<div class="value">-</div>
|
||||
</div>
|
||||
<div class="metric-card" id="metricActive">
|
||||
<div class="label"><i data-lucide="user-check"></i> Aktive Konten</div>
|
||||
<div class="value">-</div>
|
||||
</div>
|
||||
<div class="metric-card warning" id="metricLocked">
|
||||
<div class="label"><i data-lucide="lock"></i> Gesperrte Konten</div>
|
||||
<div class="value">-</div>
|
||||
</div>
|
||||
<div class="metric-card" id="metricVersion">
|
||||
<div class="label"><i data-lucide="package"></i> Version</div>
|
||||
<div class="value text-muted" style="font-size: 1.25rem;">-</div>
|
||||
</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>
|
||||
<div class="form-group">
|
||||
<label for="loginUser">Benutzer</label>
|
||||
<input id="loginUser" name="loginUser" autocomplete="username" required />
|
||||
</div>
|
||||
<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">Anmelden</button>
|
||||
<button type="submit">
|
||||
<i data-lucide="log-in"></i>
|
||||
Anmelden
|
||||
</button>
|
||||
</form>
|
||||
<div id="loginStatus" class="log"></div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Status abrufen</h3>
|
||||
<button id="refreshBtn">Status laden</button>
|
||||
<div id="status" class="log"></div>
|
||||
<!-- User Management Section -->
|
||||
<section id="userSection" class="hidden">
|
||||
<h3><i data-lucide="users"></i> Nutzerverwaltung</h3>
|
||||
|
||||
<button id="refreshUsersBtn" class="secondary small">
|
||||
<i data-lucide="refresh-cw"></i>
|
||||
Aktualisieren
|
||||
</button>
|
||||
|
||||
<table class="user-table mt-1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Benutzer</th>
|
||||
<th>Status</th>
|
||||
<th>Eingeloggt</th>
|
||||
<th>Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="userTableBody">
|
||||
<tr>
|
||||
<td colspan="4" class="text-center text-muted">
|
||||
<div class="spinner" style="margin: 1rem auto;"></div>
|
||||
Lade Benutzer...
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Aktion ausführen</h3>
|
||||
<form id="actionForm">
|
||||
<div class="grid">
|
||||
<div>
|
||||
<label for="username">Benutzer</label>
|
||||
<select id="username" name="username" required>
|
||||
<option value="">-- wählen --</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="action">Aktion</label>
|
||||
<select id="action" name="action">
|
||||
<option value="disable">Disable</option>
|
||||
<option value="enable">Enable</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div>
|
||||
<label for="countdown">Countdown (Sekunden, optional)</label>
|
||||
<input id="countdown" name="countdown" type="number" min="0" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="sound">Sound</label>
|
||||
<select id="sound" name="sound">
|
||||
<option value="">Default</option>
|
||||
<option value="true">An</option>
|
||||
<option value="false">Aus</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<label for="message">Nachricht (optional)</label>
|
||||
<input id="message" name="message" />
|
||||
<button type="submit">Senden</button>
|
||||
</form>
|
||||
<div id="result" class="log"></div>
|
||||
</section>
|
||||
<!-- Update Management Section -->
|
||||
<section id="updateSection" class="hidden">
|
||||
<h3><i data-lucide="download"></i> Update-Verwaltung</h3>
|
||||
|
||||
<section>
|
||||
<h3>Update-Verwaltung</h3>
|
||||
<div id="updateStatus" class="log" style="margin-bottom: 1rem; padding: 1rem; background: var(--pico-card-background-color); border-radius: var(--pico-border-radius);">
|
||||
Lade Update-Status...
|
||||
<div id="updateStatus" style="background: rgba(10, 14, 20, 0.6); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); padding: 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem;">
|
||||
<div class="spinner" style="margin: 0 auto;"></div>
|
||||
<p class="text-center text-muted mt-1">Lade Update-Status...</p>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<button id="checkUpdateBtn" type="button">Nach Updates suchen</button>
|
||||
<button id="applyUpdateBtn" type="button" disabled>Update installieren</button>
|
||||
<button id="rollbackBtn" type="button">Rollback durchführen</button>
|
||||
<button id="checkUpdateBtn" type="button">
|
||||
<i data-lucide="search"></i>
|
||||
Nach Updates suchen
|
||||
</button>
|
||||
<button id="applyUpdateBtn" type="button" disabled>
|
||||
<i data-lucide="download-cloud"></i>
|
||||
Update installieren
|
||||
</button>
|
||||
<button id="rollbackBtn" type="button" class="secondary">
|
||||
<i data-lucide="undo-2"></i>
|
||||
Rollback durchführen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="updateResult" class="log" style="margin-top: 1rem;"></div>
|
||||
<div id="updateResult" class="mt-1"></div>
|
||||
|
||||
<details style="margin-top: 1.5rem;">
|
||||
<summary>Update-Logs anzeigen</summary>
|
||||
<button id="refreshLogsBtn" type="button" style="margin-top: 0.5rem;">Logs neu laden</button>
|
||||
<div id="updateLogs" class="log" style="margin-top: 1rem; max-height: 400px; overflow-y: auto;"></div>
|
||||
<details class="mt-1">
|
||||
<summary><i data-lucide="file-text"></i> Update-Logs anzeigen</summary>
|
||||
<button id="refreshLogsBtn" type="button" class="secondary small mt-1">
|
||||
<i data-lucide="refresh-cw"></i>
|
||||
Logs neu laden
|
||||
</button>
|
||||
<div id="updateLogs" class="mt-1" style="max-height: 400px; overflow-y: auto; background: rgba(10, 14, 20, 0.4); padding: 1rem; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.875rem;">
|
||||
Keine Logs verfügbar.
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<!-- Toast Container -->
|
||||
<div class="toast-container" id="toastContainer"></div>
|
||||
|
||||
<!-- Action Modal -->
|
||||
<div class="modal" id="actionModal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>Aktion ausführen</h3>
|
||||
<button class="secondary small" onclick="closeActionModal()">
|
||||
<i data-lucide="x"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form id="actionForm">
|
||||
<input type="hidden" id="modalUsername" />
|
||||
<input type="hidden" id="modalAction" />
|
||||
|
||||
<div class="form-group">
|
||||
<label for="countdown">Countdown (Sekunden)</label>
|
||||
<input id="countdown" name="countdown" type="number" min="0" value="60" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="sound">Sound abspielen</label>
|
||||
<select id="sound" name="sound">
|
||||
<option value="">Standard</option>
|
||||
<option value="true">Ja</option>
|
||||
<option value="false">Nein</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="message">Nachricht (optional)</label>
|
||||
<input id="message" name="message" placeholder="z.B. Speichere deine Arbeit!" />
|
||||
</div>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="secondary" onclick="closeActionModal()">Abbrechen</button>
|
||||
<button type="submit" id="actionSubmitBtn">
|
||||
<i data-lucide="play"></i>
|
||||
Ausführen
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const statusDiv = document.getElementById('status');
|
||||
const resultDiv = document.getElementById('result');
|
||||
const loginStatus = document.getElementById('loginStatus');
|
||||
const tokenKey = 'skdToken';
|
||||
let currentToken = sessionStorage.getItem(tokenKey) || '';
|
||||
// Initialize Lucide icons
|
||||
lucide.createIcons();
|
||||
|
||||
function setToken(token) {
|
||||
currentToken = token;
|
||||
if (token) {
|
||||
sessionStorage.setItem(tokenKey, token);
|
||||
loginStatus.textContent = 'Angemeldet (Token gespeichert)';
|
||||
} else {
|
||||
sessionStorage.removeItem(tokenKey);
|
||||
loginStatus.textContent = 'Nicht angemeldet';
|
||||
}
|
||||
}
|
||||
setToken(currentToken);
|
||||
// Global state
|
||||
let currentToken = sessionStorage.getItem('skdToken') || '';
|
||||
let latestUpdateCheck = null;
|
||||
|
||||
// Helper functions
|
||||
function authHeaders() {
|
||||
const headers = { 'Content-Type': 'application/json' };
|
||||
if (currentToken) headers['Authorization'] = `Bearer ${currentToken}`;
|
||||
@ -154,76 +295,237 @@
|
||||
const res = await fetch(path, { ...options, headers, credentials: 'same-origin' });
|
||||
if (!res.ok) {
|
||||
const text = await res.text();
|
||||
const error = new Error(text || `${res.status} ${res.statusText}`);
|
||||
error.status = res.status;
|
||||
throw error;
|
||||
throw new Error(text || `${res.status} ${res.statusText}`);
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
|
||||
// Toast notifications
|
||||
function showToast(message, type = 'success') {
|
||||
const container = document.getElementById('toastContainer');
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `toast ${type}`;
|
||||
toast.innerHTML = `
|
||||
<i data-lucide="${type === 'success' ? 'check-circle' : type === 'error' ? 'alert-circle' : 'alert-triangle'}"></i>
|
||||
<span>${message}</span>
|
||||
`;
|
||||
container.appendChild(toast);
|
||||
lucide.createIcons();
|
||||
|
||||
setTimeout(() => {
|
||||
toast.style.animation = 'slideIn 0.3s ease reverse';
|
||||
setTimeout(() => toast.remove(), 300);
|
||||
}, 4000);
|
||||
}
|
||||
|
||||
// Modal functions
|
||||
function openActionModal(username, action) {
|
||||
document.getElementById('modalUsername').value = username;
|
||||
document.getElementById('modalAction').value = action;
|
||||
document.getElementById('actionModal').classList.add('active');
|
||||
|
||||
const title = document.querySelector('#actionModal h3');
|
||||
title.textContent = action === 'disable' ? `${username} deaktivieren` : `${username} aktivieren`;
|
||||
|
||||
// Hide countdown/sound options for enable action
|
||||
const countdownGroup = document.getElementById('countdown').closest('.form-group');
|
||||
const soundGroup = document.getElementById('sound').closest('.form-group');
|
||||
const messageGroup = document.getElementById('message').closest('.form-group');
|
||||
|
||||
if (action === 'enable') {
|
||||
countdownGroup.style.display = 'none';
|
||||
soundGroup.style.display = 'none';
|
||||
messageGroup.style.display = 'none';
|
||||
} else {
|
||||
countdownGroup.style.display = 'block';
|
||||
soundGroup.style.display = 'block';
|
||||
messageGroup.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
function closeActionModal() {
|
||||
document.getElementById('actionModal').classList.remove('active');
|
||||
document.getElementById('actionForm').reset();
|
||||
}
|
||||
|
||||
// Authentication
|
||||
async function checkSession() {
|
||||
try {
|
||||
const data = await api('/me');
|
||||
loginStatus.textContent = `Angemeldet als ${data.user} (${data.auth_mode})`;
|
||||
currentToken = sessionStorage.getItem('skdToken') || currentToken;
|
||||
document.getElementById('currentUser').textContent = `Angemeldet als ${data.user} (${data.auth_mode})`;
|
||||
document.getElementById('loginSection').classList.add('hidden');
|
||||
document.getElementById('userSection').classList.remove('hidden');
|
||||
document.getElementById('updateSection').classList.remove('hidden');
|
||||
await refreshUsers();
|
||||
await refreshUpdateStatus();
|
||||
return true;
|
||||
} catch (err) {
|
||||
if (err.status === 401) {
|
||||
loginStatus.textContent = 'Nicht angemeldet';
|
||||
} else {
|
||||
loginStatus.textContent = `Session-Check fehlgeschlagen: ${err.message}`;
|
||||
}
|
||||
document.getElementById('currentUser').textContent = 'Nicht angemeldet';
|
||||
document.getElementById('loginSection').classList.remove('hidden');
|
||||
document.getElementById('userSection').classList.add('hidden');
|
||||
document.getElementById('updateSection').classList.add('hidden');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
async function checkOidcStatus() {
|
||||
const button = document.getElementById('oidcLogin');
|
||||
try {
|
||||
const data = await api('/login/oidc/status');
|
||||
if (!data.enabled) {
|
||||
button.disabled = true;
|
||||
button.title = 'OIDC nicht konfiguriert';
|
||||
document.getElementById('oidcLogin').disabled = true;
|
||||
document.getElementById('oidcLogin').title = 'OIDC nicht konfiguriert';
|
||||
}
|
||||
} catch (err) {
|
||||
button.disabled = true;
|
||||
button.title = 'OIDC-Status nicht erreichbar';
|
||||
document.getElementById('oidcLogin').disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
// User management
|
||||
async function refreshUsers() {
|
||||
statusDiv.textContent = 'Lade...';
|
||||
const tbody = document.getElementById('userTableBody');
|
||||
tbody.innerHTML = '<tr><td colspan="4" class="text-center"><div class="spinner" style="margin: 1rem auto;"></div></td></tr>';
|
||||
|
||||
try {
|
||||
const data = await api('/users');
|
||||
statusDiv.textContent = data.map(u => `${u.user}: ${u.account_locked ? 'deaktiviert' : 'aktiv'}, ${u.logged_in ? 'eingeloggt' : 'aus'}`).join('\n') || 'Keine Daten';
|
||||
const select = document.getElementById('username');
|
||||
select.innerHTML = '<option value="">-- wählen --</option>';
|
||||
data.forEach(u => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = u.user;
|
||||
opt.textContent = u.user;
|
||||
select.appendChild(opt);
|
||||
});
|
||||
|
||||
// Update metrics
|
||||
document.querySelector('#metricUsers .value').textContent = data.length;
|
||||
document.querySelector('#metricActive .value').textContent = data.filter(u => !u.account_locked).length;
|
||||
document.querySelector('#metricLocked .value').textContent = data.filter(u => u.account_locked).length;
|
||||
|
||||
if (data.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="4" class="text-center text-muted">Keine verwaltbaren Benutzer gefunden.</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = data.map(u => `
|
||||
<tr>
|
||||
<td><strong>${u.user}</strong></td>
|
||||
<td>
|
||||
<span class="badge ${u.account_locked ? 'error' : 'success'}">
|
||||
<i data-lucide="${u.account_locked ? 'lock' : 'unlock'}"></i>
|
||||
${u.account_locked ? 'Gesperrt' : 'Aktiv'}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge ${u.logged_in ? 'success' : 'neutral'}">
|
||||
<i data-lucide="${u.logged_in ? 'monitor' : 'monitor-off'}"></i>
|
||||
${u.logged_in ? 'Online' : 'Offline'}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
${u.account_locked
|
||||
? `<button class="small secondary" onclick="openActionModal('${u.user}', 'enable')"><i data-lucide="unlock"></i> Entsperren</button>`
|
||||
: `<button class="small danger" onclick="openActionModal('${u.user}', 'disable')"><i data-lucide="lock"></i> Sperren</button>`
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
|
||||
lucide.createIcons();
|
||||
} catch (err) {
|
||||
statusDiv.textContent = `Fehler: ${err.message}`;
|
||||
tbody.innerHTML = `<tr><td colspan="4" class="text-center"><span class="badge error"><i data-lucide="alert-circle"></i> Fehler: ${err.message}</span></td></tr>`;
|
||||
lucide.createIcons();
|
||||
showToast('Fehler beim Laden der Benutzer: ' + err.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Update management
|
||||
async function refreshUpdateStatus() {
|
||||
const statusDiv = document.getElementById('updateStatus');
|
||||
statusDiv.innerHTML = '<div class="spinner" style="margin: 0 auto;"></div><p class="text-center text-muted mt-1">Lade Update-Status...</p>';
|
||||
|
||||
try {
|
||||
const data = await api('/update/status');
|
||||
document.querySelector('#metricVersion .value').textContent = data.current_version;
|
||||
|
||||
const statusBadge = data.last_status === 'success'
|
||||
? '<span class="badge success"><i data-lucide="check-circle"></i> Erfolgreich</span>'
|
||||
: data.last_status === 'failed'
|
||||
? '<span class="badge error"><i data-lucide="x-circle"></i> Fehlgeschlagen</span>'
|
||||
: '<span class="badge neutral"><i data-lucide="minus-circle"></i> Unbekannt</span>';
|
||||
|
||||
statusDiv.innerHTML = `
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
|
||||
<div>
|
||||
<div class="text-muted" style="font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.25rem;">Version</div>
|
||||
<div style="color: var(--color-accent); font-weight: 600;">${data.current_version}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-muted" style="font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.25rem;">Letzter Status</div>
|
||||
<div>${statusBadge}</div>
|
||||
</div>
|
||||
${data.last_timestamp ? `
|
||||
<div>
|
||||
<div class="text-muted" style="font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.25rem;">Zeitstempel</div>
|
||||
<div class="text-muted" style="font-size: 0.875rem;">${new Date(data.last_timestamp).toLocaleString('de-DE')}</div>
|
||||
</div>
|
||||
` : ''}
|
||||
${data.last_error ? `
|
||||
<div>
|
||||
<div class="text-muted" style="font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.25rem;">Fehler</div>
|
||||
<div style="color: var(--color-error); font-size: 0.875rem;">${data.last_error}</div>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
`;
|
||||
lucide.createIcons();
|
||||
} catch (err) {
|
||||
statusDiv.innerHTML = `<span class="badge error"><i data-lucide="alert-circle"></i> Fehler: ${err.message}</span>`;
|
||||
lucide.createIcons();
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshUpdateLogs() {
|
||||
const logsDiv = document.getElementById('updateLogs');
|
||||
logsDiv.innerHTML = '<div class="spinner" style="margin: 1rem auto;"></div>';
|
||||
|
||||
try {
|
||||
const logs = await api('/update/logs');
|
||||
if (!logs || logs.length === 0) {
|
||||
logsDiv.textContent = 'Keine Logs verfügbar.';
|
||||
return;
|
||||
}
|
||||
|
||||
logsDiv.innerHTML = logs.reverse().map(entry => {
|
||||
const timestamp = entry.timestamp ? new Date(entry.timestamp).toLocaleString('de-DE') : 'unbekannt';
|
||||
const status = entry.status || 'unknown';
|
||||
const version = entry.version || '-';
|
||||
const error = entry.error ? `\n Fehler: ${entry.error}` : '';
|
||||
return `[${timestamp}] ${status} - Version: ${version}${error}`;
|
||||
}).join('\n\n');
|
||||
} catch (err) {
|
||||
logsDiv.textContent = `Fehler: ${err.message}`;
|
||||
}
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
document.getElementById('loginForm').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
loginStatus.textContent = 'Anmeldung...';
|
||||
const btn = e.target.querySelector('button[type="submit"]');
|
||||
const originalHTML = btn.innerHTML;
|
||||
btn.innerHTML = '<div class="spinner"></div> Anmeldung...';
|
||||
btn.disabled = true;
|
||||
|
||||
try {
|
||||
const username = document.getElementById('loginUser').value.trim();
|
||||
const password = document.getElementById('loginPass').value;
|
||||
try {
|
||||
const data = await api('/login', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ username, password })
|
||||
});
|
||||
setToken(data.token);
|
||||
loginStatus.textContent = 'Anmeldung erfolgreich';
|
||||
await refreshUsers();
|
||||
|
||||
currentToken = data.token;
|
||||
sessionStorage.setItem('skdToken', data.token);
|
||||
showToast('Anmeldung erfolgreich', 'success');
|
||||
await checkSession();
|
||||
} catch (err) {
|
||||
setToken('');
|
||||
loginStatus.textContent = `Login fehlgeschlagen: ${err.message}`;
|
||||
showToast('Login fehlgeschlagen: ' + err.message, 'error');
|
||||
} finally {
|
||||
btn.innerHTML = originalHTML;
|
||||
btn.disabled = false;
|
||||
lucide.createIcons();
|
||||
}
|
||||
});
|
||||
|
||||
@ -231,199 +533,151 @@
|
||||
window.location.href = '/login/oidc/start';
|
||||
});
|
||||
|
||||
document.getElementById('refreshBtn').addEventListener('click', refreshUsers);
|
||||
document.getElementById('refreshUsersBtn').addEventListener('click', refreshUsers);
|
||||
|
||||
document.getElementById('actionForm').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
resultDiv.textContent = 'Sende...';
|
||||
const username = document.getElementById('username').value;
|
||||
const action = document.getElementById('action').value;
|
||||
const username = document.getElementById('modalUsername').value;
|
||||
const action = document.getElementById('modalAction').value;
|
||||
const countdown = document.getElementById('countdown').value;
|
||||
const sound = document.getElementById('sound').value;
|
||||
const message = document.getElementById('message').value.trim();
|
||||
|
||||
const btn = document.getElementById('actionSubmitBtn');
|
||||
const originalHTML = btn.innerHTML;
|
||||
btn.innerHTML = '<div class="spinner"></div> Sende...';
|
||||
btn.disabled = true;
|
||||
|
||||
try {
|
||||
const body = {};
|
||||
if (countdown) body.countdown = Number(countdown);
|
||||
if (sound === 'true') body.sound = true;
|
||||
if (sound === 'false') body.sound = false;
|
||||
if (message) body.message = message;
|
||||
|
||||
try {
|
||||
const data = await api(`/users/${encodeURIComponent(username)}/${action}`, {
|
||||
method: 'POST',
|
||||
body: Object.keys(body).length ? JSON.stringify(body) : '{}'
|
||||
});
|
||||
resultDiv.textContent = `${data.action} ${data.user}: ${data.steps.join('; ')}`;
|
||||
|
||||
showToast(`${action === 'disable' ? 'Deaktivierung' : 'Aktivierung'} von ${username} erfolgreich`, 'success');
|
||||
closeActionModal();
|
||||
await refreshUsers();
|
||||
} catch (err) {
|
||||
resultDiv.textContent = `Fehler: ${err.message}`;
|
||||
showToast('Fehler: ' + err.message, 'error');
|
||||
} finally {
|
||||
btn.innerHTML = originalHTML;
|
||||
btn.disabled = false;
|
||||
lucide.createIcons();
|
||||
}
|
||||
});
|
||||
|
||||
checkSession();
|
||||
checkOidcStatus();
|
||||
document.getElementById('checkUpdateBtn').addEventListener('click', async () => {
|
||||
const btn = document.getElementById('checkUpdateBtn');
|
||||
const resultDiv = document.getElementById('updateResult');
|
||||
const originalHTML = btn.innerHTML;
|
||||
btn.innerHTML = '<div class="spinner"></div> Prüfe...';
|
||||
btn.disabled = true;
|
||||
|
||||
// ==================== Update Management ====================
|
||||
const updateStatusDiv = document.getElementById('updateStatus');
|
||||
const updateResultDiv = document.getElementById('updateResult');
|
||||
const updateLogsDiv = document.getElementById('updateLogs');
|
||||
const checkUpdateBtn = document.getElementById('checkUpdateBtn');
|
||||
const applyUpdateBtn = document.getElementById('applyUpdateBtn');
|
||||
const rollbackBtn = document.getElementById('rollbackBtn');
|
||||
const refreshLogsBtn = document.getElementById('refreshLogsBtn');
|
||||
|
||||
let latestUpdateCheck = null;
|
||||
|
||||
async function refreshUpdateStatus() {
|
||||
try {
|
||||
const data = await api('/update/status');
|
||||
const statusText = `
|
||||
Version: ${data.current_version}
|
||||
Letzter Status: ${data.last_status || 'unbekannt'}
|
||||
${data.last_error ? `Fehler: ${data.last_error}` : ''}
|
||||
${data.last_timestamp ? `Zeitstempel: ${new Date(data.last_timestamp).toLocaleString('de-DE')}` : ''}
|
||||
`.trim();
|
||||
updateStatusDiv.textContent = statusText;
|
||||
} catch (err) {
|
||||
updateStatusDiv.textContent = `Fehler beim Laden des Update-Status: ${err.message}`;
|
||||
}
|
||||
}
|
||||
|
||||
checkUpdateBtn.addEventListener('click', async () => {
|
||||
updateResultDiv.textContent = 'Prüfe auf Updates...';
|
||||
checkUpdateBtn.disabled = true;
|
||||
try {
|
||||
const data = await api('/update/check', { method: 'POST' });
|
||||
latestUpdateCheck = data;
|
||||
|
||||
if (data.available) {
|
||||
updateResultDiv.textContent = `
|
||||
✅ Update verfügbar!
|
||||
Version: ${data.latest_version}
|
||||
${data.message ? `Info: ${data.message}` : ''}
|
||||
|
||||
Klicke auf "Update installieren" um fortzufahren.
|
||||
`.trim();
|
||||
applyUpdateBtn.disabled = false;
|
||||
resultDiv.innerHTML = `
|
||||
<div style="background: rgba(0, 224, 143, 0.1); border: 1px solid var(--color-success); border-radius: var(--radius-sm); padding: 1rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
|
||||
<i data-lucide="info"></i>
|
||||
<strong style="color: var(--color-success);">Update verfügbar!</strong>
|
||||
</div>
|
||||
<p class="text-muted">Version: ${data.latest_version}</p>
|
||||
${data.message ? `<p class="text-muted">${data.message}</p>` : ''}
|
||||
</div>
|
||||
`;
|
||||
document.getElementById('applyUpdateBtn').disabled = false;
|
||||
} else {
|
||||
updateResultDiv.textContent = `✓ Keine Updates verfügbar. Aktuelle Version ist aktuell.`;
|
||||
applyUpdateBtn.disabled = true;
|
||||
resultDiv.innerHTML = `
|
||||
<div style="background: rgba(255, 255, 255, 0.05); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<i data-lucide="check"></i>
|
||||
<span class="text-muted">Keine Updates verfügbar. Aktuelle Version ist aktuell.</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
document.getElementById('applyUpdateBtn').disabled = true;
|
||||
}
|
||||
lucide.createIcons();
|
||||
} catch (err) {
|
||||
updateResultDiv.textContent = `❌ Fehler beim Update-Check: ${err.message}`;
|
||||
applyUpdateBtn.disabled = true;
|
||||
resultDiv.innerHTML = `<span class="badge error"><i data-lucide="alert-circle"></i> Fehler: ${err.message}</span>`;
|
||||
lucide.createIcons();
|
||||
showToast('Update-Check fehlgeschlagen', 'error');
|
||||
} finally {
|
||||
checkUpdateBtn.disabled = false;
|
||||
btn.innerHTML = originalHTML;
|
||||
btn.disabled = false;
|
||||
lucide.createIcons();
|
||||
}
|
||||
});
|
||||
|
||||
applyUpdateBtn.addEventListener('click', async () => {
|
||||
document.getElementById('applyUpdateBtn').addEventListener('click', async () => {
|
||||
if (!latestUpdateCheck || !latestUpdateCheck.available) {
|
||||
updateResultDiv.textContent = '❌ Bitte zuerst nach Updates suchen.';
|
||||
showToast('Bitte zuerst nach Updates suchen', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
const confirmed = confirm(
|
||||
`Update auf Version ${latestUpdateCheck.latest_version} installieren?\n\n` +
|
||||
`⚠️ WICHTIG:\n` +
|
||||
`- Ein Backup wird automatisch erstellt\n` +
|
||||
`- Der Service wird neu gestartet\n` +
|
||||
`- Bei Fehlern erfolgt automatischer Rollback\n\n` +
|
||||
`Fortfahren?`
|
||||
);
|
||||
if (!confirm(`Update auf Version ${latestUpdateCheck.latest_version} installieren?\n\n⚠️ WICHTIG:\n- Ein Backup wird automatisch erstellt\n- Der Service wird neu gestartet\n- Bei Fehlern erfolgt automatischer Rollback\n\nFortfahren?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirmed) return;
|
||||
|
||||
updateResultDiv.textContent = 'Update wird gestartet... (läuft im Hintergrund)';
|
||||
applyUpdateBtn.disabled = true;
|
||||
const btn = document.getElementById('applyUpdateBtn');
|
||||
const originalHTML = btn.innerHTML;
|
||||
btn.innerHTML = '<div class="spinner"></div> Starte...';
|
||||
btn.disabled = true;
|
||||
|
||||
try {
|
||||
const data = await api('/update/apply', {
|
||||
await api('/update/apply', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ version: latestUpdateCheck.latest_version })
|
||||
});
|
||||
updateResultDiv.textContent = `
|
||||
✓ ${data.message}
|
||||
|
||||
Das Update läuft jetzt im Hintergrund.
|
||||
Aktualisiere den Status in wenigen Sekunden, um den Fortschritt zu sehen.
|
||||
`.trim();
|
||||
|
||||
// Auto-refresh nach 5 Sekunden
|
||||
setTimeout(() => {
|
||||
refreshUpdateStatus();
|
||||
applyUpdateBtn.disabled = true;
|
||||
}, 5000);
|
||||
|
||||
showToast('Update gestartet (läuft im Hintergrund)', 'success');
|
||||
setTimeout(() => refreshUpdateStatus(), 5000);
|
||||
} catch (err) {
|
||||
updateResultDiv.textContent = `❌ Fehler beim Starten des Updates: ${err.message}`;
|
||||
applyUpdateBtn.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
rollbackBtn.addEventListener('click', async () => {
|
||||
const confirmed = confirm(
|
||||
`Rollback zum letzten Backup durchführen?\n\n` +
|
||||
`⚠️ WICHTIG:\n` +
|
||||
`- Dies stellt die vorherige Version wieder her\n` +
|
||||
`- Der Service wird neu gestartet\n` +
|
||||
`- Ein Backup muss vorhanden sein\n\n` +
|
||||
`Fortfahren?`
|
||||
);
|
||||
|
||||
if (!confirmed) return;
|
||||
|
||||
updateResultDiv.textContent = 'Rollback wird gestartet... (läuft im Hintergrund)';
|
||||
rollbackBtn.disabled = true;
|
||||
|
||||
try {
|
||||
const data = await api('/update/rollback', { method: 'POST' });
|
||||
updateResultDiv.textContent = `
|
||||
✓ ${data.message}
|
||||
|
||||
Der Rollback läuft jetzt im Hintergrund.
|
||||
Aktualisiere den Status in wenigen Sekunden.
|
||||
`.trim();
|
||||
|
||||
// Auto-refresh nach 5 Sekunden
|
||||
setTimeout(() => {
|
||||
refreshUpdateStatus();
|
||||
}, 5000);
|
||||
|
||||
} catch (err) {
|
||||
updateResultDiv.textContent = `❌ Fehler beim Rollback: ${err.message}`;
|
||||
showToast('Fehler beim Starten des Updates: ' + err.message, 'error');
|
||||
} finally {
|
||||
rollbackBtn.disabled = false;
|
||||
btn.innerHTML = originalHTML;
|
||||
btn.disabled = false;
|
||||
lucide.createIcons();
|
||||
}
|
||||
});
|
||||
|
||||
async function refreshUpdateLogs() {
|
||||
updateLogsDiv.textContent = 'Lade Logs...';
|
||||
try {
|
||||
const logs = await api('/update/logs');
|
||||
if (!logs || logs.length === 0) {
|
||||
updateLogsDiv.textContent = 'Keine Logs vorhanden.';
|
||||
document.getElementById('rollbackBtn').addEventListener('click', async () => {
|
||||
if (!confirm(`Rollback zum letzten Backup durchführen?\n\n⚠️ WICHTIG:\n- Dies stellt die vorherige Version wieder her\n- Der Service wird neu gestartet\n- Ein Backup muss vorhanden sein\n\nFortfahren?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Reverse chronological (newest first)
|
||||
const logEntries = logs.reverse().map(entry => {
|
||||
const timestamp = entry.timestamp ? new Date(entry.timestamp).toLocaleString('de-DE') : 'unbekannt';
|
||||
const status = entry.status || 'unknown';
|
||||
const version = entry.version || '-';
|
||||
const error = entry.error ? `\n Fehler: ${entry.error}` : '';
|
||||
return `[${timestamp}] ${status} - Version: ${version}${error}`;
|
||||
const btn = document.getElementById('rollbackBtn');
|
||||
const originalHTML = btn.innerHTML;
|
||||
btn.innerHTML = '<div class="spinner"></div> Starte...';
|
||||
btn.disabled = true;
|
||||
|
||||
try {
|
||||
await api('/update/rollback', { method: 'POST' });
|
||||
showToast('Rollback gestartet (läuft im Hintergrund)', 'success');
|
||||
setTimeout(() => refreshUpdateStatus(), 5000);
|
||||
} catch (err) {
|
||||
showToast('Fehler beim Rollback: ' + err.message, 'error');
|
||||
} finally {
|
||||
btn.innerHTML = originalHTML;
|
||||
btn.disabled = false;
|
||||
lucide.createIcons();
|
||||
}
|
||||
});
|
||||
|
||||
updateLogsDiv.textContent = logEntries.join('\n\n');
|
||||
} catch (err) {
|
||||
updateLogsDiv.textContent = `Fehler beim Laden der Logs: ${err.message}`;
|
||||
}
|
||||
}
|
||||
document.getElementById('refreshLogsBtn').addEventListener('click', refreshUpdateLogs);
|
||||
|
||||
refreshLogsBtn.addEventListener('click', refreshUpdateLogs);
|
||||
|
||||
// Initial load
|
||||
refreshUpdateStatus();
|
||||
// Initialize
|
||||
checkSession();
|
||||
checkOidcStatus();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user