Gate the admin panel behind a real login screen
/admin now shows only a token field + "Accedi" button on first load — config and users are structurally in the page but empty/hidden, no data requested until the token is verified. On successful login (a GET /admin/config that doesn't 403) it reveals the dashboard and loads config + users automatically; no more separate "Carica configurazione"/ "Carica utenti" buttons. Token is kept in sessionStorage (cleared on tab close) so a reload during the same session skips straight back to the dashboard. Added a Logout button and Enter-to-submit on the token field. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5
+106
-64
@@ -124,55 +124,65 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>PLM Lottery — Admin</h1>
|
||||
<p>Configurazione operativa del round</p>
|
||||
</header>
|
||||
<section id="login-section">
|
||||
<header>
|
||||
<h1>PLM Lottery — Admin</h1>
|
||||
<p>Accesso riservato</p>
|
||||
</header>
|
||||
|
||||
<div class="card">
|
||||
<p class="hint">
|
||||
Salvata nel database, modificabile in qualsiasi momento senza riavviare il server.
|
||||
Serve il token admin (<code>ADMIN_TOKEN</code> nel <code>.env</code> del server).
|
||||
</p>
|
||||
<div class="card">
|
||||
<label for="admin-token">Admin token</label>
|
||||
<input id="admin-token" type="password" placeholder="valore di ADMIN_TOKEN" autofocus>
|
||||
<button onclick="adminLogin()" id="login-btn">Accedi</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<label for="admin-token">Admin token</label>
|
||||
<input id="admin-token" type="password" placeholder="valore di ADMIN_TOKEN">
|
||||
<section id="dashboard-section" class="hidden">
|
||||
<header>
|
||||
<div class="row-between" style="display:flex;align-items:center;justify-content:space-between">
|
||||
<h1 style="margin:0">PLM Lottery — Admin</h1>
|
||||
<button class="secondary" style="width:auto;margin-top:0;min-height:36px" onclick="adminLogout()">Esci</button>
|
||||
</div>
|
||||
<p>Configurazione operativa del round</p>
|
||||
</header>
|
||||
|
||||
<button class="secondary" onclick="adminLoad()" id="load-btn">Carica configurazione attuale</button>
|
||||
<div class="card">
|
||||
<h2 style="font-size:1rem;font-weight:600;margin:0 0 4px">Configurazione</h2>
|
||||
<p class="hint">
|
||||
Salvata nel database, modificabile in qualsiasi momento senza riavviare il server.
|
||||
</p>
|
||||
|
||||
<div id="admin-form" class="hidden">
|
||||
<label for="admin-fee-address">Fee address (dove finisce il 30% di ogni round)</label>
|
||||
<input id="admin-fee-address" class="mono" placeholder="plm1q...">
|
||||
<label for="admin-bet-amount">Bet amount (PLM)</label>
|
||||
<input id="admin-bet-amount" inputmode="decimal" placeholder="es. 10">
|
||||
<button onclick="adminSave()" id="save-btn">Salva</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2 style="font-size:1rem;font-weight:600;margin:0 0 4px">Utenti</h2>
|
||||
<p class="hint">Elenco utenti registrati, con saldo interno e accesso alla chiave privata per interventi manuali (es. restituire fondi bloccati).</p>
|
||||
<div class="card">
|
||||
<h2 style="font-size:1rem;font-weight:600;margin:0 0 4px">Utenti</h2>
|
||||
<p class="hint">Elenco utenti registrati, con saldo interno e accesso alla chiave privata per interventi manuali (es. restituire fondi bloccati).</p>
|
||||
|
||||
<div class="warning-banner">
|
||||
⚠ La chiave privata dà accesso completo ai fondi dell'utente. Ogni volta che la visualizzi viene registrata nell'audit log del server. Non condividerla, non salvarla altrove.
|
||||
<div class="warning-banner">
|
||||
⚠ La chiave privata dà accesso completo ai fondi dell'utente. Ogni volta che la visualizzi viene registrata nell'audit log del server. Non condividerla, non salvarla altrove.
|
||||
</div>
|
||||
|
||||
<div id="users-table-wrap" style="overflow-x:auto">
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>ID</th><th>Username</th><th>Indirizzo</th><th>Saldo (PLM)</th><th>Chiave</th></tr>
|
||||
</thead>
|
||||
<tbody id="users-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="secondary" onclick="loadUsers()" id="users-load-btn">Carica utenti</button>
|
||||
|
||||
<div id="users-table-wrap" class="hidden" style="overflow-x:auto;margin-top:14px">
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>ID</th><th>Username</th><th>Indirizzo</th><th>Saldo (PLM)</th><th>Chiave</th></tr>
|
||||
</thead>
|
||||
<tbody id="users-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="toast-container" aria-live="polite"></div>
|
||||
|
||||
<script>
|
||||
const SATS_PER_PLM = 100000000;
|
||||
let adminToken = sessionStorage.getItem('plm_admin_token');
|
||||
|
||||
function toast(message, type) {
|
||||
const container = document.getElementById('toast-container');
|
||||
@@ -196,7 +206,6 @@ async function withLoading(button, label, fn) {
|
||||
}
|
||||
|
||||
async function callAdmin(method, path, body) {
|
||||
const adminToken = document.getElementById('admin-token').value;
|
||||
const headers = { 'Content-Type': 'application/json', 'X-Admin-Token': adminToken };
|
||||
const res = await fetch(path, { method, headers, body: body ? JSON.stringify(body) : undefined });
|
||||
const data = await res.json().catch(() => ({}));
|
||||
@@ -204,21 +213,49 @@ async function callAdmin(method, path, body) {
|
||||
return data;
|
||||
}
|
||||
|
||||
async function adminLoad() {
|
||||
const btn = document.getElementById('load-btn');
|
||||
await withLoading(btn, 'Caricamento…', async () => {
|
||||
function showDashboard() {
|
||||
document.getElementById('login-section').classList.add('hidden');
|
||||
document.getElementById('dashboard-section').classList.remove('hidden');
|
||||
}
|
||||
|
||||
async function loadDashboard() {
|
||||
await Promise.all([adminLoadConfig(), loadUsers()]);
|
||||
}
|
||||
|
||||
async function adminLogin() {
|
||||
const btn = document.getElementById('login-btn');
|
||||
adminToken = document.getElementById('admin-token').value;
|
||||
await withLoading(btn, 'Verifica…', async () => {
|
||||
try {
|
||||
const data = await callAdmin('GET', '/admin/config');
|
||||
document.getElementById('admin-fee-address').value = data.fee_address;
|
||||
document.getElementById('admin-bet-amount').value = data.bet_amount_sats / SATS_PER_PLM;
|
||||
document.getElementById('admin-form').classList.remove('hidden');
|
||||
toast('Configurazione caricata.', 'success');
|
||||
await callAdmin('GET', '/admin/config');
|
||||
sessionStorage.setItem('plm_admin_token', adminToken);
|
||||
showDashboard();
|
||||
await loadDashboard();
|
||||
} catch (e) {
|
||||
toast('Errore: ' + e.message, 'error');
|
||||
adminToken = null;
|
||||
toast('Token non valido.', 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function adminLogout() {
|
||||
sessionStorage.removeItem('plm_admin_token');
|
||||
adminToken = null;
|
||||
document.getElementById('admin-token').value = '';
|
||||
document.getElementById('dashboard-section').classList.add('hidden');
|
||||
document.getElementById('login-section').classList.remove('hidden');
|
||||
}
|
||||
|
||||
async function adminLoadConfig() {
|
||||
try {
|
||||
const data = await callAdmin('GET', '/admin/config');
|
||||
document.getElementById('admin-fee-address').value = data.fee_address;
|
||||
document.getElementById('admin-bet-amount').value = data.bet_amount_sats / SATS_PER_PLM;
|
||||
} catch (e) {
|
||||
toast('Errore nel caricamento configurazione: ' + e.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function adminSave() {
|
||||
const btn = document.getElementById('save-btn');
|
||||
const feeAddress = document.getElementById('admin-fee-address').value;
|
||||
@@ -239,29 +276,24 @@ function escapeHtml(s) {
|
||||
}
|
||||
|
||||
async function loadUsers() {
|
||||
const btn = document.getElementById('users-load-btn');
|
||||
await withLoading(btn, 'Caricamento…', async () => {
|
||||
try {
|
||||
const users = await callAdmin('GET', '/admin/users');
|
||||
const tbody = document.getElementById('users-tbody');
|
||||
tbody.innerHTML = users.map((u) => `
|
||||
<tr>
|
||||
<td>${u.id}</td>
|
||||
<td>${escapeHtml(u.username)}</td>
|
||||
<td class="addr">${escapeHtml(u.address)}</td>
|
||||
<td>${u.balance_sats / SATS_PER_PLM}</td>
|
||||
<td>
|
||||
<button class="reveal" onclick="revealPrivkey(${u.id}, this)">Mostra</button>
|
||||
<div class="privkey-box hidden" id="privkey-${u.id}"></div>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
document.getElementById('users-table-wrap').classList.remove('hidden');
|
||||
toast('Utenti caricati (' + users.length + ').', 'success');
|
||||
} catch (e) {
|
||||
toast('Errore: ' + e.message, 'error');
|
||||
}
|
||||
});
|
||||
try {
|
||||
const users = await callAdmin('GET', '/admin/users');
|
||||
const tbody = document.getElementById('users-tbody');
|
||||
tbody.innerHTML = users.map((u) => `
|
||||
<tr>
|
||||
<td>${u.id}</td>
|
||||
<td>${escapeHtml(u.username)}</td>
|
||||
<td class="addr">${escapeHtml(u.address)}</td>
|
||||
<td>${u.balance_sats / SATS_PER_PLM}</td>
|
||||
<td>
|
||||
<button class="reveal" onclick="revealPrivkey(${u.id}, this)">Mostra</button>
|
||||
<div class="privkey-box hidden" id="privkey-${u.id}"></div>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
} catch (e) {
|
||||
toast('Errore nel caricamento utenti: ' + e.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function revealPrivkey(userId, button) {
|
||||
@@ -286,6 +318,16 @@ async function revealPrivkey(userId, button) {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('admin-token').addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') adminLogin();
|
||||
});
|
||||
|
||||
if (adminToken) {
|
||||
callAdmin('GET', '/admin/config')
|
||||
.then(() => { showDashboard(); return loadDashboard(); })
|
||||
.catch(() => { sessionStorage.removeItem('plm_admin_token'); adminToken = null; });
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user