658 lines
25 KiB
HTML
658 lines
25 KiB
HTML
<!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/styles.css" />
|
|
<link rel="icon" type="image/svg+xml" href="/assets/branding/favicon.svg" />
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
</head>
|
|
<body>
|
|
<!-- Dark Mode Toggle -->
|
|
<button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle dark mode">
|
|
<svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
|
|
</svg>
|
|
<svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<section id="loginSection">
|
|
<h3><i data-lucide="log-in"></i> Anmeldung</h3>
|
|
|
|
<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>
|
|
<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>
|
|
</div>
|
|
|
|
<div id="appContainer" class="container hidden">
|
|
<!-- Header -->
|
|
<header>
|
|
<div class="header-main">
|
|
<h1>
|
|
<i data-lucide="shield-check"></i>
|
|
Safe Kiddo Control
|
|
</h1>
|
|
<img class="header-logo" src="/assets/branding/logo.svg" alt="Safe Kiddo Logo" />
|
|
</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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- User Management Section -->
|
|
<section id="userSection" class="panel-section 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="panel-section 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
|
|
function setPath(path) {
|
|
if (window.location.pathname !== path) {
|
|
history.replaceState(null, '', path);
|
|
}
|
|
}
|
|
|
|
function showLanding() {
|
|
document.getElementById('loginLanding').classList.remove('hidden');
|
|
document.getElementById('appContainer').classList.add('hidden');
|
|
document.getElementById('headerVersion').textContent = 'v-';
|
|
if (window.location.pathname !== '/login') {
|
|
setPath('/login');
|
|
}
|
|
}
|
|
|
|
function showApp() {
|
|
document.getElementById('loginLanding').classList.add('hidden');
|
|
document.getElementById('appContainer').classList.remove('hidden');
|
|
setPath('/dashboard');
|
|
}
|
|
|
|
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})`;
|
|
showApp();
|
|
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';
|
|
showLanding();
|
|
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');
|
|
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) {
|
|
const button = document.getElementById('oidcLogin');
|
|
button.disabled = true;
|
|
button.title = 'OIDC nicht erreichbar';
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
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>'
|
|
: 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();
|
|
|
|
// Dark Mode Toggle
|
|
function toggleTheme() {
|
|
document.body.classList.toggle('dark-mode');
|
|
localStorage.setItem('darkMode', document.body.classList.contains('dark-mode'));
|
|
}
|
|
|
|
// Load dark mode preference
|
|
if (localStorage.getItem('darkMode') === 'true') {
|
|
document.body.classList.add('dark-mode');
|
|
}
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html>
|