stephan
efd006276d
Replace Pico CSS with custom Watchtower theme (Sci-Fi Dark Mode): - Add backend/static/ directory with Watchtower CSS files - tokens_watchtower.css: Design tokens (colors, typography, spacing) - theme_watchtower.css: Theme overrides for components Features: - High-contrast dark mode (#0b0f14 background) - Neon accent color (#00e08f teal/cyan) - Glow effects on buttons and inputs - Radial gradient background - SVG noise texture overlay (bg-noise class) - Pill-shaped buttons (border-radius: 999px) - Uppercase labels with letter-spacing - Monospace font for logs UI Enhancements: - FastAPI static files mount added - Custom styling for all components (sections, buttons, inputs, forms) - Accent border-left on header and update status - Improved visual hierarchy with color coding - OIDC button gets secondary style (outline) Complete US_000024 and TASK_000024. Based on minecraft-watchtower UI design. All Pico CSS dependencies removed. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
430 lines
16 KiB
HTML
430 lines
16 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/tokens_watchtower.css" />
|
|
<link rel="stylesheet" href="/static/theme_watchtower.css" />
|
|
<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; }
|
|
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; }
|
|
label { display: block; margin-bottom: 0.5rem; color: var(--color-text-muted); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }
|
|
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); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="bg-noise"></div>
|
|
<header>
|
|
<h1>Safe Kiddo Control</h1>
|
|
<p>Steuere Nutzerkonten über die lokale API. Stelle sicher, dass der API-Token gesetzt ist.</p>
|
|
</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>
|
|
<form id="loginForm">
|
|
<div class="grid">
|
|
<div>
|
|
<label for="loginUser">Benutzer</label>
|
|
<input id="loginUser" name="loginUser" autocomplete="username" required />
|
|
</div>
|
|
<div>
|
|
<label for="loginPass">Passwort</label>
|
|
<input id="loginPass" name="loginPass" type="password" autocomplete="current-password" required />
|
|
</div>
|
|
</div>
|
|
<button type="submit">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>
|
|
</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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
</div>
|
|
|
|
<div id="updateResult" class="log" style="margin-top: 1rem;"></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>
|
|
</section>
|
|
|
|
<script>
|
|
const statusDiv = document.getElementById('status');
|
|
const resultDiv = document.getElementById('result');
|
|
const loginStatus = document.getElementById('loginStatus');
|
|
const tokenKey = 'skdToken';
|
|
let currentToken = sessionStorage.getItem(tokenKey) || '';
|
|
|
|
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);
|
|
|
|
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();
|
|
const error = new Error(text || `${res.status} ${res.statusText}`);
|
|
error.status = res.status;
|
|
throw error;
|
|
}
|
|
return res.json();
|
|
}
|
|
|
|
async function checkSession() {
|
|
try {
|
|
const data = await api('/me');
|
|
loginStatus.textContent = `Angemeldet als ${data.user} (${data.auth_mode})`;
|
|
return true;
|
|
} catch (err) {
|
|
if (err.status === 401) {
|
|
loginStatus.textContent = 'Nicht angemeldet';
|
|
} else {
|
|
loginStatus.textContent = `Session-Check fehlgeschlagen: ${err.message}`;
|
|
}
|
|
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';
|
|
}
|
|
} catch (err) {
|
|
button.disabled = true;
|
|
button.title = 'OIDC-Status nicht erreichbar';
|
|
}
|
|
}
|
|
|
|
async function refreshUsers() {
|
|
statusDiv.textContent = 'Lade...';
|
|
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);
|
|
});
|
|
} catch (err) {
|
|
statusDiv.textContent = `Fehler: ${err.message}`;
|
|
}
|
|
}
|
|
|
|
document.getElementById('loginForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
loginStatus.textContent = 'Anmeldung...';
|
|
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();
|
|
} catch (err) {
|
|
setToken('');
|
|
loginStatus.textContent = `Login fehlgeschlagen: ${err.message}`;
|
|
}
|
|
});
|
|
|
|
document.getElementById('oidcLogin').addEventListener('click', () => {
|
|
window.location.href = '/login/oidc/start';
|
|
});
|
|
|
|
document.getElementById('refreshBtn').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 countdown = document.getElementById('countdown').value;
|
|
const sound = document.getElementById('sound').value;
|
|
const message = document.getElementById('message').value.trim();
|
|
|
|
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('; ')}`;
|
|
} catch (err) {
|
|
resultDiv.textContent = `Fehler: ${err.message}`;
|
|
}
|
|
});
|
|
|
|
checkSession();
|
|
checkOidcStatus();
|
|
|
|
// ==================== 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;
|
|
} else {
|
|
updateResultDiv.textContent = `✓ Keine Updates verfügbar. Aktuelle Version ist aktuell.`;
|
|
applyUpdateBtn.disabled = true;
|
|
}
|
|
} catch (err) {
|
|
updateResultDiv.textContent = `❌ Fehler beim Update-Check: ${err.message}`;
|
|
applyUpdateBtn.disabled = true;
|
|
} finally {
|
|
checkUpdateBtn.disabled = false;
|
|
}
|
|
});
|
|
|
|
applyUpdateBtn.addEventListener('click', async () => {
|
|
if (!latestUpdateCheck || !latestUpdateCheck.available) {
|
|
updateResultDiv.textContent = '❌ Bitte zuerst nach Updates suchen.';
|
|
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 (!confirmed) return;
|
|
|
|
updateResultDiv.textContent = 'Update wird gestartet... (läuft im Hintergrund)';
|
|
applyUpdateBtn.disabled = true;
|
|
|
|
try {
|
|
const data = 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);
|
|
|
|
} 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}`;
|
|
} finally {
|
|
rollbackBtn.disabled = false;
|
|
}
|
|
});
|
|
|
|
async function refreshUpdateLogs() {
|
|
updateLogsDiv.textContent = 'Lade Logs...';
|
|
try {
|
|
const logs = await api('/update/logs');
|
|
if (!logs || logs.length === 0) {
|
|
updateLogsDiv.textContent = 'Keine Logs vorhanden.';
|
|
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}`;
|
|
});
|
|
|
|
updateLogsDiv.textContent = logEntries.join('\n\n');
|
|
} catch (err) {
|
|
updateLogsDiv.textContent = `Fehler beim Laden der Logs: ${err.message}`;
|
|
}
|
|
}
|
|
|
|
refreshLogsBtn.addEventListener('click', refreshUpdateLogs);
|
|
|
|
// Initial load
|
|
refreshUpdateStatus();
|
|
</script>
|
|
</body>
|
|
</html>
|