Inital Commit

This commit is contained in:
Carsten Graf
2026-02-11 23:13:25 +01:00
commit 2376cf16c7
7 changed files with 2314 additions and 0 deletions

690
public/admin.html Normal file
View File

@@ -0,0 +1,690 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin - Obi-WLANKenobi Portal</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Orbitron', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #000000;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
position: relative;
}
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse at top, rgba(13, 110, 253, 0.15) 0%, transparent 50%),
radial-gradient(ellipse at bottom, rgba(13, 110, 253, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.container {
background: rgba(10, 25, 47, 0.95);
border: 2px solid rgba(13, 110, 253, 0.5);
border-radius: 20px;
box-shadow:
0 0 60px rgba(13, 110, 253, 0.4),
inset 0 0 60px rgba(13, 110, 253, 0.1);
padding: 40px;
max-width: 700px;
width: 100%;
position: relative;
z-index: 10;
}
h1 {
color: #0d6efd;
font-size: 28px;
margin-bottom: 24px;
font-weight: 900;
text-shadow: 0 0 20px rgba(13, 110, 253, 0.8);
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
color: #6ea8fe;
font-size: 14px;
margin-bottom: 8px;
}
input, select {
width: 100%;
padding: 12px 16px;
background: rgba(13, 110, 253, 0.1);
border: 2px solid rgba(13, 110, 253, 0.5);
border-radius: 8px;
color: #fff;
font-family: 'Orbitron', sans-serif;
font-size: 16px;
}
input::placeholder {
color: rgba(163, 207, 255, 0.5);
}
input:focus, select:focus {
outline: none;
border-color: #0d6efd;
box-shadow: 0 0 15px rgba(13, 110, 253, 0.5);
}
select option {
background: #0a192f;
color: #fff;
}
.btn {
padding: 14px 28px;
border-radius: 8px;
font-family: 'Orbitron', sans-serif;
font-weight: 700;
font-size: 14px;
cursor: pointer;
border: 2px solid;
transition: all 0.3s ease;
}
.btn-primary {
background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
color: white;
border-color: #0d6efd;
width: 100%;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(13, 110, 253, 0.6);
}
.btn-secondary {
background: transparent;
color: #6ea8fe;
border-color: rgba(13, 110, 253, 0.5);
}
.btn-secondary:hover {
background: rgba(13, 110, 253, 0.2);
}
.btn-danger {
background: transparent;
color: #ea868f;
border-color: rgba(220, 53, 69, 0.5);
padding: 8px 14px;
font-size: 12px;
}
.btn-danger:hover {
background: rgba(220, 53, 69, 0.2);
}
.message {
padding: 12px;
border-radius: 8px;
margin-bottom: 20px;
font-size: 14px;
display: none;
}
.message.error {
background: rgba(220, 53, 69, 0.2);
color: #ea868f;
border: 1px solid rgba(220, 53, 69, 0.5);
}
.message.success {
background: rgba(13, 110, 253, 0.2);
color: #6ea8fe;
border: 1px solid rgba(13, 110, 253, 0.5);
}
.code-display {
background: rgba(13, 110, 253, 0.15);
border: 2px solid rgba(13, 110, 253, 0.5);
border-radius: 8px;
padding: 20px;
margin: 20px 0;
text-align: center;
}
.code-display .code-value {
font-size: 32px;
font-weight: 900;
color: #0d6efd;
letter-spacing: 4px;
margin-bottom: 12px;
}
.code-display .hint {
font-size: 12px;
color: #6ea8fe;
}
.codes-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.codes-table th,
.codes-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid rgba(13, 110, 253, 0.2);
color: #a3cfff;
}
.codes-table th {
color: #0d6efd;
font-size: 12px;
text-transform: uppercase;
}
.codes-table .code-cell {
font-family: monospace;
font-weight: 700;
letter-spacing: 1px;
}
.codes-table .expired {
color: #ea868f;
}
.header-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.header-row h1 {
margin-bottom: 0;
}
#loginView, #dashboardView {
display: none;
}
#loginView.visible, #dashboardView.visible {
display: block;
}
.section-title {
color: #6ea8fe;
font-size: 16px;
margin: 24px 0 12px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(13, 110, 253, 0.3);
}
.section-title:first-of-type {
margin-top: 0;
}
.empty-state {
color: #6ea8fe;
font-size: 14px;
padding: 24px;
text-align: center;
}
.form-row {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.form-row .form-group {
flex: 1;
min-width: 120px;
}
input[type="checkbox"] {
width: auto;
margin-right: 8px;
}
.packages-table {
width: 100%;
border-collapse: collapse;
margin-top: 12px;
}
.packages-table th,
.packages-table td {
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid rgba(13, 110, 253, 0.2);
color: #a3cfff;
}
.packages-table th {
color: #0d6efd;
font-size: 12px;
text-transform: uppercase;
}
.btn-small {
padding: 6px 12px;
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<div id="loginView" class="visible">
<h1>Admin Login</h1>
<div class="message" id="loginError"></div>
<form id="loginForm" onsubmit="return handleLogin(event)">
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter admin password" required autocomplete="current-password">
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
<div id="dashboardView">
<div class="header-row">
<h1>Portal Admin</h1>
<button type="button" class="btn btn-secondary" onclick="handleLogout()">Logout</button>
</div>
<div class="section-title">Generate New Code</div>
<div class="message" id="genMessage"></div>
<form id="generateForm" onsubmit="return handleGenerate(event)">
<div class="form-group">
<label for="expiry">Expiration</label>
<select id="expiry" name="expiry">
<option value="60">1 hour</option>
<option value="360">6 hours</option>
<option value="720">12 hours</option>
<option value="1440" selected>24 hours</option>
<option value="2880">48 hours</option>
<option value="10080">7 days</option>
<option value="">No expiry</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Generate Code</button>
</form>
<div id="newCodeDisplay" class="code-display" style="display: none;">
<div class="code-value" id="newCodeValue"></div>
<button type="button" class="btn btn-secondary" onclick="copyNewCode()">Copy to clipboard</button>
<div class="hint" style="margin-top: 8px;">Share this code with WiFi guests. They enter it on the portal to connect.</div>
</div>
<div class="section-title">Pakete & Preise</div>
<div class="message" id="pkgMessage"></div>
<form id="packageForm" onsubmit="return handlePackageSubmit(event)">
<input type="hidden" id="packageId" name="packageId" value="">
<div class="form-row">
<div class="form-group">
<label for="pkgName">Name</label>
<input type="text" id="pkgName" name="pkgName" placeholder="z.B. 24 Stunden" required>
</div>
<div class="form-group">
<label for="pkgDuration">Dauer</label>
<select id="pkgDuration" name="pkgDuration">
<option value="60">1 Stunde</option>
<option value="360">6 Stunden</option>
<option value="720">12 Stunden</option>
<option value="1440" selected>24 Stunden</option>
<option value="2880">48 Stunden</option>
<option value="10080">7 Tage</option>
<option value="43200">30 Tage</option>
</select>
</div>
<div class="form-group">
<label for="pkgPrice">Preis</label>
<input type="number" id="pkgPrice" name="pkgPrice" placeholder="2.99" step="0.01" min="0" required>
</div>
<div class="form-group">
<label for="pkgCurrency">Währung</label>
<select id="pkgCurrency" name="pkgCurrency">
<option value="EUR" selected>EUR</option>
<option value="CHF">CHF</option>
<option value="USD">USD</option>
</select>
</div>
</div>
<div class="form-group">
<label><input type="checkbox" id="pkgActive" name="pkgActive" checked> Aktiv (im Portal sichtbar)</label>
</div>
<button type="submit" class="btn btn-primary" id="packageSubmitBtn">Paket hinzufügen</button>
<button type="button" class="btn btn-secondary" id="packageCancelBtn" style="display: none; margin-left: 8px;" onclick="cancelPackageEdit()">Abbrechen</button>
</form>
<table class="packages-table">
<thead>
<tr>
<th>Name</th>
<th>Dauer</th>
<th>Preis</th>
<th>Aktiv</th>
<th></th>
</tr>
</thead>
<tbody id="packagesTableBody">
</tbody>
</table>
<div id="emptyPackages" class="empty-state">Keine Pakete. Erstelle eines oben.</div>
<div class="section-title">Active Codes</div>
<div id="codesList">
<table class="codes-table">
<thead>
<tr>
<th>Code</th>
<th>Uses</th>
<th>Expires</th>
<th></th>
</tr>
</thead>
<tbody id="codesTableBody">
</tbody>
</table>
<div id="emptyCodes" class="empty-state">No codes yet. Generate one above.</div>
</div>
</div>
</div>
<script>
let lastGeneratedCode = '';
async function checkAuth() {
try {
const r = await fetch('/admin/check');
const data = await r.json();
if (data.authenticated) {
document.getElementById('loginView').classList.remove('visible');
document.getElementById('dashboardView').classList.add('visible');
loadCodes();
loadPackages();
} else {
document.getElementById('loginView').classList.add('visible');
document.getElementById('dashboardView').classList.remove('visible');
}
} catch (e) {
document.getElementById('loginView').classList.add('visible');
document.getElementById('dashboardView').classList.remove('visible');
}
}
async function handleLogin(e) {
e.preventDefault();
const password = document.getElementById('password').value;
const errEl = document.getElementById('loginError');
errEl.style.display = 'none';
try {
const r = await fetch('/admin/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ password })
});
const data = await r.json();
if (data.success) {
document.getElementById('password').value = '';
checkAuth();
} else {
errEl.textContent = 'Invalid password.';
errEl.className = 'message error';
errEl.style.display = 'block';
}
} catch (e) {
errEl.textContent = 'Login failed. Try again.';
errEl.className = 'message error';
errEl.style.display = 'block';
}
return false;
}
async function handleLogout() {
await fetch('/admin/logout', { method: 'POST' });
checkAuth();
}
async function handleGenerate(e) {
e.preventDefault();
const expiry = document.getElementById('expiry').value;
const msgEl = document.getElementById('genMessage');
msgEl.style.display = 'none';
try {
const r = await fetch('/admin/codes', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
expiresInMinutes: expiry ? parseInt(expiry, 10) : null
})
});
const data = await r.json();
if (data.success) {
lastGeneratedCode = data.code;
document.getElementById('newCodeValue').textContent = data.code;
document.getElementById('newCodeDisplay').style.display = 'block';
loadCodes();
msgEl.textContent = 'Code generated successfully.';
msgEl.className = 'message success';
msgEl.style.display = 'block';
}
} catch (e) {
msgEl.textContent = 'Failed to generate code.';
msgEl.className = 'message error';
msgEl.style.display = 'block';
}
return false;
}
function copyNewCode() {
if (!lastGeneratedCode) return;
navigator.clipboard.writeText(lastGeneratedCode).then(() => {
const btn = document.querySelector('#newCodeDisplay .btn-secondary');
const orig = btn.textContent;
btn.textContent = 'Copied!';
setTimeout(() => { btn.textContent = orig; }, 1500);
});
}
async function loadCodes() {
try {
const r = await fetch('/admin/codes');
const data = await r.json();
const tbody = document.getElementById('codesTableBody');
const emptyEl = document.getElementById('emptyCodes');
tbody.innerHTML = '';
if (!data.codes || data.codes.length === 0) {
emptyEl.style.display = 'block';
return;
}
emptyEl.style.display = 'none';
const now = new Date();
data.codes.forEach((c) => {
const tr = document.createElement('tr');
const expiresAt = c.expiresAt ? new Date(c.expiresAt) : null;
const expired = c.expired || (expiresAt && expiresAt < now);
const expiresText = expiresAt
? (expired ? 'Expired' : formatDate(expiresAt))
: 'Never';
tr.innerHTML = `
<td class="code-cell ${expired ? 'expired' : ''}">${c.code}</td>
<td>${c.useCount || 0}</td>
<td class="${expired ? 'expired' : ''}">${expiresText}</td>
<td>
<button type="button" class="btn btn-danger" onclick="revokeCode('${c.code}')">Revoke</button>
</td>
`;
tbody.appendChild(tr);
});
} catch (e) {
console.error('Failed to load codes', e);
}
}
function formatDate(d) {
return new Date(d).toLocaleString();
}
async function revokeCode(code) {
if (!confirm('Revoke this code? It will no longer work for new connections.')) return;
try {
const r = await fetch('/admin/codes/' + encodeURIComponent(code), {
method: 'DELETE'
});
const data = await r.json();
if (data.success) {
loadCodes();
}
} catch (e) {
console.error('Failed to revoke', e);
}
}
function formatDuration(min) {
if (min >= 43200) return (min / 1440) + ' Tage';
if (min >= 1440) return (min / 1440) + ' Tage';
if (min >= 60) return (min / 60) + ' Stunden';
return min + ' Min';
}
async function loadPackages() {
try {
const r = await fetch('/admin/packages');
const data = await r.json();
const tbody = document.getElementById('packagesTableBody');
const emptyEl = document.getElementById('emptyPackages');
tbody.innerHTML = '';
if (!data.packages || data.packages.length === 0) {
emptyEl.style.display = 'block';
return;
}
emptyEl.style.display = 'none';
data.packages.forEach((p) => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${p.name}</td>
<td>${formatDuration(p.durationMinutes)}</td>
<td>${p.price} ${p.currency}</td>
<td>${p.active ? 'Ja' : 'Nein'}</td>
<td>
<button type="button" class="btn btn-secondary btn-small" onclick="editPackage('${p.id}')">Bearbeiten</button>
<button type="button" class="btn btn-danger btn-small" onclick="deletePackage('${p.id}')">Löschen</button>
</td>
`;
tbody.appendChild(tr);
});
} catch (e) {
console.error('Failed to load packages', e);
}
}
async function handlePackageSubmit(e) {
e.preventDefault();
const id = document.getElementById('packageId').value;
const msgEl = document.getElementById('pkgMessage');
msgEl.style.display = 'none';
const body = {
name: document.getElementById('pkgName').value.trim(),
durationMinutes: parseInt(document.getElementById('pkgDuration').value, 10),
price: parseFloat(document.getElementById('pkgPrice').value),
currency: document.getElementById('pkgCurrency').value,
active: document.getElementById('pkgActive').checked
};
try {
const url = id ? '/admin/packages/' + encodeURIComponent(id) : '/admin/packages';
const method = id ? 'PUT' : 'POST';
const r = await fetch(url, {
method,
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body)
});
const data = await r.json();
if (data.success) {
document.getElementById('packageForm').reset();
document.getElementById('packageId').value = '';
document.getElementById('pkgActive').checked = true;
document.getElementById('packageSubmitBtn').textContent = 'Paket hinzufügen';
document.getElementById('packageCancelBtn').style.display = 'none';
loadPackages();
msgEl.textContent = id ? 'Paket aktualisiert.' : 'Paket hinzugefügt.';
msgEl.className = 'message success';
msgEl.style.display = 'block';
} else {
msgEl.textContent = data.error || 'Fehler.';
msgEl.className = 'message error';
msgEl.style.display = 'block';
}
} catch (e) {
msgEl.textContent = 'Fehler beim Speichern.';
msgEl.className = 'message error';
msgEl.style.display = 'block';
}
return false;
}
function editPackage(id) {
fetch('/admin/packages')
.then(r => r.json())
.then(data => {
const p = data.packages.find(x => x.id === id);
if (!p) return;
document.getElementById('packageId').value = p.id;
document.getElementById('pkgName').value = p.name;
document.getElementById('pkgDuration').value = String(p.durationMinutes);
document.getElementById('pkgPrice').value = p.price;
document.getElementById('pkgCurrency').value = p.currency;
document.getElementById('pkgActive').checked = p.active;
document.getElementById('packageSubmitBtn').textContent = 'Paket speichern';
document.getElementById('packageCancelBtn').style.display = 'inline-block';
})
.catch(e => console.error(e));
}
function cancelPackageEdit() {
document.getElementById('packageForm').reset();
document.getElementById('packageId').value = '';
document.getElementById('pkgActive').checked = true;
document.getElementById('packageSubmitBtn').textContent = 'Paket hinzufügen';
document.getElementById('packageCancelBtn').style.display = 'none';
}
async function deletePackage(id) {
if (!confirm('Paket wirklich löschen?')) return;
try {
const r = await fetch('/admin/packages/' + encodeURIComponent(id), {
method: 'DELETE'
});
const data = await r.json();
if (data.success) {
loadPackages();
}
} catch (e) {
console.error('Failed to delete package', e);
}
}
checkAuth();
</script>
</body>
</html>