[#6] Add admin panel at /admin
- Password-protected (cabo2026) admin page - View/approve/reject pending options - Delete any option - Toggle polls open/closed - Live stats: voters, options, votes, pending count - Add DELETE /api/options/:id endpoint - Add option_deleted WebSocket broadcast
This commit is contained in:
372
public/admin.html
Normal file
372
public/admin.html
Normal file
@@ -0,0 +1,372 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Cabo Voting — Admin</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0b0d14;
|
||||
--surface: #13161f;
|
||||
--surface2: #1a1e2a;
|
||||
--border: #252a38;
|
||||
--accent: #00d4ff;
|
||||
--text: #e0e6f0;
|
||||
--text-muted: #7a8499;
|
||||
--green: #34d399;
|
||||
--red: #f87171;
|
||||
--amber: #fbbf24;
|
||||
}
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; padding: 20px; }
|
||||
a { color: var(--accent); }
|
||||
h1 { font-size: 1.3rem; color: var(--accent); margin-bottom: 6px; }
|
||||
h2 { font-size: 1rem; color: var(--text-muted); margin-bottom: 16px; font-weight: 500; }
|
||||
|
||||
.container { max-width: 900px; margin: 0 auto; }
|
||||
|
||||
/* Password gate */
|
||||
#passwordGate {
|
||||
position: fixed; inset: 0; background: var(--bg);
|
||||
display: flex; align-items: center; justify-content: center; z-index: 1000;
|
||||
}
|
||||
#passwordGate.hidden { display: none; }
|
||||
#passwordGate .box {
|
||||
background: var(--surface); border: 1px solid var(--border);
|
||||
border-radius: 16px; padding: 32px; width: 320px; text-align: center;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
|
||||
}
|
||||
#passwordGate .box h2 { font-size: 1.2rem; color: var(--accent); margin-bottom: 8px; }
|
||||
#passwordGate .box p { color: var(--text-muted); font-size: 0.8rem; margin-bottom: 20px; }
|
||||
#passwordGate input {
|
||||
width: 100%; padding: 10px 14px; background: var(--surface2);
|
||||
border: 1px solid var(--border); border-radius: 8px; color: var(--text);
|
||||
font-size: 1rem; outline: none; margin-bottom: 12px; text-align: center;
|
||||
}
|
||||
#passwordGate input:focus { border-color: var(--accent); }
|
||||
#passwordGate button {
|
||||
width: 100%; padding: 10px; background: var(--accent); color: var(--bg);
|
||||
border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
#passwordGate button:hover { opacity: 0.85; }
|
||||
#passwordGate .error { color: var(--red); font-size: 0.78rem; margin-top: 8px; }
|
||||
|
||||
/* Header */
|
||||
.header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
|
||||
.header-links { display: flex; gap: 12px; font-size: 0.8rem; }
|
||||
.header-links a { color: var(--text-muted); }
|
||||
.header-links a:hover { color: var(--text); }
|
||||
|
||||
/* Stat cards */
|
||||
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 24px; }
|
||||
.stat-card {
|
||||
background: var(--surface); border: 1px solid var(--border);
|
||||
border-radius: 12px; padding: 14px 16px; text-align: center;
|
||||
}
|
||||
.stat-card .val { font-size: 1.8rem; font-weight: 700; color: var(--accent); }
|
||||
.stat-card .label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }
|
||||
|
||||
/* Polls toggle */
|
||||
.polls-toggle {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
background: var(--surface); border: 1px solid var(--border);
|
||||
border-radius: 12px; padding: 16px 20px; margin-bottom: 24px;
|
||||
}
|
||||
.polls-toggle .label { font-size: 0.85rem; font-weight: 600; }
|
||||
.polls-toggle .sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
|
||||
.btn-toggle {
|
||||
padding: 8px 20px; border: none; border-radius: 8px;
|
||||
font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: opacity 0.2s;
|
||||
}
|
||||
.btn-toggle:hover { opacity: 0.85; }
|
||||
.btn-toggle.open { background: var(--red); color: #fff; }
|
||||
.btn-toggle.closed { background: var(--green); color: #000; }
|
||||
|
||||
/* Sections */
|
||||
.section { margin-bottom: 32px; }
|
||||
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
|
||||
.section-title { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.badge {
|
||||
background: var(--surface2); border-radius: 10px; padding: 2px 8px;
|
||||
font-size: 0.65rem; color: var(--text-muted);
|
||||
}
|
||||
.badge.pending { background: rgba(251,191,36,0.15); color: var(--amber); }
|
||||
|
||||
/* Option rows */
|
||||
.option-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.option-row {
|
||||
background: var(--surface); border: 1px solid var(--border);
|
||||
border-radius: 10px; padding: 12px 14px;
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
}
|
||||
.option-row.pending { border-color: rgba(251,191,36,0.4); }
|
||||
.option-row .cat-tag {
|
||||
font-size: 0.65rem; padding: 2px 7px; border-radius: 4px;
|
||||
background: var(--surface2); color: var(--text-muted); flex-shrink: 0;
|
||||
}
|
||||
.option-row .name { flex: 1; font-size: 0.85rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.option-row .meta { font-size: 0.7rem; color: var(--text-muted); flex-shrink: 0; }
|
||||
.option-row .votes-badge {
|
||||
background: rgba(0,212,255,0.1); color: var(--accent);
|
||||
border-radius: 6px; padding: 2px 8px; font-size: 0.7rem; font-weight: 700; flex-shrink: 0;
|
||||
}
|
||||
.btn {
|
||||
padding: 6px 14px; border: none; border-radius: 6px;
|
||||
font-size: 0.75rem; font-weight: 700; cursor: pointer; flex-shrink: 0; transition: opacity 0.2s;
|
||||
}
|
||||
.btn:hover { opacity: 0.85; }
|
||||
.btn-approve { background: var(--green); color: #000; }
|
||||
.btn-reject { background: var(--red); color: #fff; }
|
||||
.btn-delete { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }
|
||||
.btn-delete:hover { border-color: var(--red); color: var(--red); }
|
||||
.btn-row { display: flex; gap: 6px; flex-shrink: 0; }
|
||||
|
||||
/* Toast */
|
||||
.toast {
|
||||
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
|
||||
background: var(--surface2); border: 1px solid var(--border);
|
||||
border-radius: 10px; padding: 10px 20px; font-size: 0.82rem; z-index: 500;
|
||||
transition: transform 0.3s; color: var(--text);
|
||||
}
|
||||
.toast.show { transform: translateX(-50%) translateY(0); }
|
||||
.toast.success { border-color: var(--green); color: var(--green); }
|
||||
.toast.error { border-color: var(--red); color: var(--red); }
|
||||
|
||||
/* Loading */
|
||||
.loading { text-align: center; padding: 40px; color: var(--text-muted); font-size: 0.85rem; }
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 600px) {
|
||||
.option-row { flex-wrap: wrap; }
|
||||
.btn-row { width: 100%; justify-content: flex-end; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Password Gate -->
|
||||
<div id="passwordGate">
|
||||
<div class="box">
|
||||
<h2>🔐 Admin Access</h2>
|
||||
<p>Enter the admin password to manage the voting app.</p>
|
||||
<input type="password" id="pwdInput" placeholder="Password" onkeydown="if(event.key==='Enter')tryLogin()" />
|
||||
<button onclick="tryLogin()">Unlock →</button>
|
||||
<div class="error" id="pwdError"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="adminPanel" style="display:none">
|
||||
<div class="header">
|
||||
<div>
|
||||
<h1>🏄 Cabo Voting — Admin</h1>
|
||||
<h2 id="appStatus">Connecting…</h2>
|
||||
</div>
|
||||
<div class="header-links">
|
||||
<a href="/">← Back to Voting</a>
|
||||
<a href="/?view=results" target="_blank">View Results ↗</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="stats">
|
||||
<div class="stat-card"><div class="val" id="statVoters">—</div><div class="label">Voters</div></div>
|
||||
<div class="stat-card"><div class="val" id="statOptions">—</div><div class="label">Options</div></div>
|
||||
<div class="stat-card"><div class="val" id="statVotes">—</div><div class="label">Total Votes</div></div>
|
||||
<div class="stat-card"><div class="val" id="statPending">—</div><div class="label">Pending</div></div>
|
||||
</div>
|
||||
|
||||
<!-- Polls Toggle -->
|
||||
<div class="polls-toggle">
|
||||
<div>
|
||||
<div class="label" id="pollsLabel">Polls: OPEN</div>
|
||||
<div class="sub">Click to toggle open/closed state</div>
|
||||
</div>
|
||||
<button class="btn-toggle open" id="pollsBtn" onclick="togglePolls()">Close Polls</button>
|
||||
</div>
|
||||
|
||||
<!-- Pending Options -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">⏳ Pending Approvals</span>
|
||||
<span class="badge pending" id="pendingBadge">0</span>
|
||||
</div>
|
||||
<div class="option-list" id="pendingList"><div class="loading">Loading…</div></div>
|
||||
</div>
|
||||
|
||||
<!-- All Options -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">📋 All Options</span>
|
||||
<span class="badge" id="allBadge">0</span>
|
||||
</div>
|
||||
<div class="option-list" id="allList"><div class="loading">Loading…</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<script>
|
||||
const API = '';
|
||||
const PWD_KEY = 'cabo_admin_pwd';
|
||||
const CORRECT_PWD = 'cabo2026';
|
||||
let allData = null;
|
||||
|
||||
function toast(msg, type='') {
|
||||
const t = document.getElementById('toast');
|
||||
t.textContent = msg;
|
||||
t.className = 'toast' + (type ? ' ' + type : '');
|
||||
t.classList.add('show');
|
||||
setTimeout(() => t.classList.remove('show'), 3000);
|
||||
}
|
||||
|
||||
function tryLogin() {
|
||||
const pwd = document.getElementById('pwdInput').value;
|
||||
const err = document.getElementById('pwdError');
|
||||
if (pwd === CORRECT_PWD) {
|
||||
sessionStorage.setItem(PWD_KEY, pwd);
|
||||
document.getElementById('passwordGate').classList.add('hidden');
|
||||
document.getElementById('adminPanel').style.display = 'block';
|
||||
loadData();
|
||||
} else {
|
||||
err.textContent = 'Incorrect password — try "cabo2026"';
|
||||
}
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
try {
|
||||
const [cats, opts] = await Promise.all([
|
||||
fetch(API + '/api/categories').then(r => r.json()),
|
||||
fetch(API + '/api/options?includeUnapproved=true').then(r => r.json()),
|
||||
]);
|
||||
allData = { categories: cats, options: opts };
|
||||
renderStats();
|
||||
renderPending();
|
||||
renderAll();
|
||||
document.getElementById('appStatus').textContent = 'Connected';
|
||||
} catch(e) {
|
||||
document.getElementById('appStatus').textContent = 'Connection error — is the server running?';
|
||||
}
|
||||
}
|
||||
|
||||
function renderStats() {
|
||||
const voters = new Set();
|
||||
let totalVotes = 0;
|
||||
let pending = 0;
|
||||
allData.options.forEach(o => {
|
||||
if (!o.approved) { pending++; return; }
|
||||
o.votes.forEach(v => voters.add(v.name));
|
||||
totalVotes += o.votes.length;
|
||||
});
|
||||
document.getElementById('statVoters').textContent = voters.size;
|
||||
document.getElementById('statOptions').textContent = allData.options.length - pending;
|
||||
document.getElementById('statVotes').textContent = totalVotes;
|
||||
document.getElementById('statPending').textContent = pending;
|
||||
}
|
||||
|
||||
function renderPending() {
|
||||
const pending = allData.options.filter(o => !o.approved);
|
||||
const list = document.getElementById('pendingList');
|
||||
document.getElementById('pendingBadge').textContent = pending.length;
|
||||
if (pending.length === 0) {
|
||||
list.innerHTML = '<div style="text-align:center;padding:20px;color:var(--text-muted);font-size:0.8rem">No pending options ✓</div>';
|
||||
return;
|
||||
}
|
||||
list.innerHTML = pending.map(o => `
|
||||
<div class="option-row pending">
|
||||
<span class="cat-tag">${o.categoryId}</span>
|
||||
<div class="name">${o.name}</div>
|
||||
<div class="meta">by ${o.addedBy || 'unknown'}</div>
|
||||
<div class="btn-row">
|
||||
<button class="btn btn-approve" onclick="approve('${o.id}')">✓ Approve</button>
|
||||
<button class="btn btn-reject" onclick="reject('${o.id}')">✕ Reject</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function renderAll() {
|
||||
const approved = allData.options.filter(o => o.approved);
|
||||
document.getElementById('allBadge').textContent = approved.length;
|
||||
document.getElementById('allList').innerHTML = approved.map(o => `
|
||||
<div class="option-row">
|
||||
<span class="cat-tag">${o.categoryId}</span>
|
||||
<div class="name">${o.name}</div>
|
||||
<div class="votes-badge">${o.votes.length} vote${o.votes.length !== 1 ? 's' : ''}</div>
|
||||
<div class="meta">${o.addedBy !== 'system' ? 'by ' + o.addedBy : 'system'}</div>
|
||||
<div class="btn-row">
|
||||
<button class="btn btn-delete" onclick="deleteOption('${o.id}')" title="Delete option">🗑</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
async function togglePolls() {
|
||||
try {
|
||||
// Get current state first
|
||||
const res = await fetch(API + '/api/results');
|
||||
const data = await res.json();
|
||||
const newState = !data.pollsOpen;
|
||||
await fetch(API + '/api/polls', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ open: newState })
|
||||
});
|
||||
updatePollsUI(newState);
|
||||
toast(newState ? 'Polls are now OPEN' : 'Polls are now CLOSED', 'success');
|
||||
} catch(e) {
|
||||
toast('Failed to toggle polls', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function loadPollsState() {
|
||||
try {
|
||||
const res = await fetch(API + '/api/results');
|
||||
const data = await res.json();
|
||||
updatePollsUI(data.pollsOpen);
|
||||
} catch(e) {}
|
||||
}
|
||||
|
||||
function updatePollsUI(open) {
|
||||
document.getElementById('pollsLabel').textContent = 'Polls: ' + (open ? 'OPEN' : 'CLOSED');
|
||||
const btn = document.getElementById('pollsBtn');
|
||||
btn.textContent = open ? 'Close Polls' : 'Open Polls';
|
||||
btn.className = 'btn-toggle ' + (open ? 'open' : 'closed');
|
||||
}
|
||||
|
||||
async function approve(id) {
|
||||
try {
|
||||
await fetch(API + '/api/options/' + id + '/approve', { method: 'POST' });
|
||||
toast('Option approved!', 'success');
|
||||
await loadData();
|
||||
} catch(e) { toast('Failed to approve', 'error'); }
|
||||
}
|
||||
|
||||
async function reject(id) {
|
||||
if (!confirm('Remove this option permanently?')) return;
|
||||
try {
|
||||
await fetch(API + '/api/options/' + id, { method: 'DELETE' });
|
||||
toast('Option removed', 'success');
|
||||
await loadData();
|
||||
} catch(e) { toast('Failed to remove option', 'error'); }
|
||||
}
|
||||
|
||||
async function deleteOption(id) {
|
||||
if (!confirm('Delete this option permanently?')) return;
|
||||
try {
|
||||
await fetch(API + '/api/options/' + id, { method: 'DELETE' });
|
||||
toast('Option deleted', 'success');
|
||||
await loadData();
|
||||
} catch(e) { toast('Failed to delete', 'error'); }
|
||||
}
|
||||
|
||||
// Check session password on load
|
||||
if (sessionStorage.getItem(PWD_KEY) === CORRECT_PWD) {
|
||||
document.getElementById('passwordGate').classList.add('hidden');
|
||||
document.getElementById('adminPanel').style.display = 'block';
|
||||
loadData();
|
||||
}
|
||||
loadPollsState();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user