stephan/kiddo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
73ade70f16e2a08e57470bba006b649f8e6a0f06
kiddo/backend/templates/index.html
stephan 73ade70f16 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>
2025-12-30 12:25:38 +01:00

684 lines
30 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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>
* { 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); }
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; 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>
<i data-lucide="shield-check"></i>
Safe Kiddo Control
</h1>
<div class="user-info" id="headerStatus">
<span id="currentUser">Nicht angemeldet</span>
</div>
</header>
<!-- 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 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>
<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>
<!-- Update Management Section -->
<section id="updateSection" class="hidden">
<h3><i data-lucide="download"></i> Update-Verwaltung</h3>
<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">
<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="mt-1"></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>
// Initialize Lucide icons
lucide.createIcons();
// 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}`;
return headers;
}
async function api(path, options = {}) {
const headers = { ...authHeaders(), ...(options.headers || {}) };
const res = await fetch(path, { ...options, headers, credentials: 'same-origin' });
if (!res.ok) {
const text = await res.text();
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');
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) {
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() {
try {
const data = await api('/login/oidc/status');
if (!data.enabled) {
document.getElementById('oidcLogin').disabled = true;
document.getElementById('oidcLogin').title = 'OIDC nicht konfiguriert';
}
} catch (err) {
document.getElementById('oidcLogin').disabled = true;
}
}
// User management
async function refreshUsers() {
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');
// 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) {
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();
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;
const data = await api('/login', {
method: 'POST',
body: JSON.stringify({ username, password })
});
currentToken = data.token;
sessionStorage.setItem('skdToken', data.token);
showToast('Anmeldung erfolgreich', 'success');
await checkSession();
} catch (err) {
showToast('Login fehlgeschlagen: ' + err.message, 'error');
} finally {
btn.innerHTML = originalHTML;
btn.disabled = false;
lucide.createIcons();
}
});
document.getElementById('oidcLogin').addEventListener('click', () => {
window.location.href = '/login/oidc/start';
});
document.getElementById('refreshUsersBtn').addEventListener('click', refreshUsers);
document.getElementById('actionForm').addEventListener('submit', async (e) => {
e.preventDefault();
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;
const data = await api(`/users/${encodeURIComponent(username)}/${action}`, {
method: 'POST',
body: Object.keys(body).length ? JSON.stringify(body) : '{}'
});
showToast(`${action === 'disable' ? 'Deaktivierung' : 'Aktivierung'} von ${username} erfolgreich`, 'success');
closeActionModal();
await refreshUsers();
} catch (err) {
showToast('Fehler: ' + err.message, 'error');
} finally {
btn.innerHTML = originalHTML;
btn.disabled = false;
lucide.createIcons();
}
});
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;
try {
const data = await api('/update/check', { method: 'POST' });
latestUpdateCheck = data;
if (data.available) {
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 {
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) {
resultDiv.innerHTML = `<span class="badge error"><i data-lucide="alert-circle"></i> Fehler: ${err.message}</span>`;
lucide.createIcons();
showToast('Update-Check fehlgeschlagen', 'error');
} finally {
btn.innerHTML = originalHTML;
btn.disabled = false;
lucide.createIcons();
}
});
document.getElementById('applyUpdateBtn').addEventListener('click', async () => {
if (!latestUpdateCheck || !latestUpdateCheck.available) {
showToast('Bitte zuerst nach Updates suchen', 'warning');
return;
}
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;
}
const btn = document.getElementById('applyUpdateBtn');
const originalHTML = btn.innerHTML;
btn.innerHTML = '<div class="spinner"></div> Starte...';
btn.disabled = true;
try {
await api('/update/apply', {
method: 'POST',
body: JSON.stringify({ version: latestUpdateCheck.latest_version })
});
showToast('Update gestartet (läuft im Hintergrund)', 'success');
setTimeout(() => refreshUpdateStatus(), 5000);
} catch (err) {
showToast('Fehler beim Starten des Updates: ' + err.message, 'error');
} finally {
btn.innerHTML = originalHTML;
btn.disabled = false;
lucide.createIcons();
}
});
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;
}
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();
}
});
document.getElementById('refreshLogsBtn').addEventListener('click', refreshUpdateLogs);
// Initialize
checkSession();
checkOidcStatus();
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink