first commit
This commit is contained in:
181
backend/templates/index.html
Normal file
181
backend/templates/index.html
Normal file
@ -0,0 +1,181 @@
|
||||
<!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="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" />
|
||||
<style>
|
||||
body { max-width: 960px; margin: auto; padding: 1.5rem; }
|
||||
.log { white-space: pre-line; }
|
||||
form { margin-bottom: 1rem; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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 (nur Root-User)</h3>
|
||||
<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>
|
||||
|
||||
<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';
|
||||
} 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 });
|
||||
if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
async function refreshUsers() {
|
||||
statusDiv.textContent = 'Lade...';
|
||||
try {
|
||||
const data = await api('/users');
|
||||
statusDiv.textContent = data.map(u => `${u.user}: ${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('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}`;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user