926 lines
42 KiB
JavaScript
926 lines
42 KiB
JavaScript
/* admin.js - Lagomare Gates admin panel */
|
|
|
|
// ── Token helpers ─────────────────────────────────────────────────────────────
|
|
const TOKEN_KEY = "lg_admin_token";
|
|
const saveToken = t => localStorage.setItem(TOKEN_KEY, t);
|
|
const clearToken = () => localStorage.removeItem(TOKEN_KEY);
|
|
const getToken = () => localStorage.getItem(TOKEN_KEY);
|
|
|
|
function tokenValid(t) {
|
|
if (!t) return false;
|
|
try {
|
|
const p = JSON.parse(atob(t.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")));
|
|
return p.exp * 1000 > Date.now();
|
|
} catch { return false; }
|
|
}
|
|
|
|
// ── API helper ────────────────────────────────────────────────────────────────
|
|
async function api(method, path, body) {
|
|
const token = getToken();
|
|
const headers = { "Content-Type": "application/json" };
|
|
if (token) headers["Authorization"] = `Bearer ${token}`;
|
|
const res = await fetch(path, {
|
|
method,
|
|
headers,
|
|
body: body !== undefined ? JSON.stringify(body) : undefined,
|
|
});
|
|
if (res.status === 401) {
|
|
clearToken();
|
|
showLogin();
|
|
throw new Error("Session expired or invalid credentials");
|
|
}
|
|
if (!res.ok) {
|
|
const j = await res.json().catch(() => null);
|
|
throw new Error((j && j.detail) || `Error ${res.status}`);
|
|
}
|
|
if (res.status === 204) return null;
|
|
return res.json();
|
|
}
|
|
|
|
// ── Views ─────────────────────────────────────────────────────────────────────
|
|
function _tokenPayload() {
|
|
try {
|
|
const t = getToken();
|
|
return JSON.parse(atob(t.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")));
|
|
} catch { return {}; }
|
|
}
|
|
|
|
function showLogin() {
|
|
document.getElementById("login-view").classList.remove("hidden");
|
|
document.getElementById("admin-view").classList.add("hidden");
|
|
}
|
|
|
|
function showAdmin() {
|
|
document.getElementById("login-view").classList.add("hidden");
|
|
document.getElementById("admin-view").classList.remove("hidden");
|
|
const payload = _tokenPayload();
|
|
const isAdmin = payload.scope === "admin";
|
|
document.getElementById("header-username").textContent = payload.sub || "";
|
|
document.querySelectorAll(".admin-only").forEach(el => {
|
|
el.style.display = isAdmin ? "" : "none";
|
|
});
|
|
loadAllData();
|
|
}
|
|
|
|
// ── Login ─────────────────────────────────────────────────────────────────────
|
|
let _pendingCredentials = null; // { username, password } while OTP step is shown
|
|
|
|
document.getElementById("login-form").addEventListener("submit", async e => {
|
|
e.preventDefault();
|
|
const errEl = document.getElementById("login-error");
|
|
const btn = e.target.querySelector("button[type=submit]");
|
|
const otpField = document.getElementById("otp-field");
|
|
btn.disabled = true;
|
|
errEl.classList.add("hidden");
|
|
try {
|
|
const body = _pendingCredentials
|
|
? { ..._pendingCredentials, otp_code: document.getElementById("admin-otp").value.trim() }
|
|
: { username: document.getElementById("admin-username").value.trim(),
|
|
password: document.getElementById("admin-password").value };
|
|
const data = await api("POST", "/api/auth/admin", body);
|
|
if (data.otp_required) {
|
|
_pendingCredentials = {
|
|
username: document.getElementById("admin-username").value.trim(),
|
|
password: document.getElementById("admin-password").value,
|
|
};
|
|
otpField.classList.remove("hidden");
|
|
document.getElementById("admin-otp").focus();
|
|
errEl.textContent = "Enter the 6-digit code from your authenticator app.";
|
|
errEl.classList.remove("hidden");
|
|
} else {
|
|
_pendingCredentials = null;
|
|
otpField.classList.add("hidden");
|
|
document.getElementById("admin-otp").value = "";
|
|
saveToken(data.token);
|
|
showAdmin();
|
|
}
|
|
} catch (err) {
|
|
_pendingCredentials = null;
|
|
otpField.classList.add("hidden");
|
|
document.getElementById("admin-otp").value = "";
|
|
errEl.textContent = err.message;
|
|
errEl.classList.remove("hidden");
|
|
} finally {
|
|
btn.disabled = false;
|
|
}
|
|
});
|
|
|
|
document.getElementById("logout-btn").addEventListener("click", () => {
|
|
clearToken();
|
|
showLogin();
|
|
});
|
|
|
|
// ── Tabs ──────────────────────────────────────────────────────────────────────
|
|
document.querySelectorAll(".tab-btn").forEach(btn => {
|
|
btn.addEventListener("click", () => {
|
|
document.querySelectorAll(".tab-btn").forEach(b => b.classList.remove("active"));
|
|
document.querySelectorAll(".tab-pane").forEach(p => p.classList.remove("active"));
|
|
btn.classList.add("active");
|
|
document.getElementById(`tab-${btn.dataset.tab}`).classList.add("active");
|
|
});
|
|
});
|
|
|
|
// ── Toast ─────────────────────────────────────────────────────────────────────
|
|
let _timer;
|
|
function showToast(msg, isError = false) {
|
|
const el = document.getElementById("toast");
|
|
clearTimeout(_timer);
|
|
el.textContent = msg;
|
|
el.className = `toast ${isError ? "error" : "success"}`;
|
|
_timer = setTimeout(() => el.classList.add("fade"), 2600);
|
|
setTimeout(() => { el.className = "toast hidden"; }, 3000);
|
|
}
|
|
|
|
// ── Keypasses ─────────────────────────────────────────────────────────────────
|
|
async function loadKeypasses() {
|
|
const rows = await api("GET", "/api/admin/keypasses");
|
|
const tbody = document.getElementById("keypasses-body");
|
|
tbody.innerHTML = "";
|
|
if (!rows.length) {
|
|
tbody.innerHTML = '<tr><td colspan="5" style="color:var(--text-muted);text-align:center;padding:2rem">No keypasses yet</td></tr>';
|
|
return;
|
|
}
|
|
for (const kp of rows) {
|
|
const now = Date.now();
|
|
const expMs = kp.expires_at ? new Date(kp.expires_at + "Z").getTime() : Infinity;
|
|
let badge;
|
|
if (kp.revoked) badge = '<span class="badge badge-red">Revoked</span>';
|
|
else if (expMs < now) badge = '<span class="badge badge-muted">Expired</span>';
|
|
else badge = '<span class="badge badge-green">Active</span>';
|
|
|
|
const gatesCell = kp.allowed_gate_ids && kp.allowed_gate_ids.length
|
|
? `${kp.allowed_gate_ids.length} gate${kp.allowed_gate_ids.length > 1 ? "s" : ""}`
|
|
: '<span style="color:var(--text-muted)">All</span>';
|
|
|
|
const expiresCell = kp.expires_at
|
|
? `<span style="white-space:nowrap">${fmtDate(kp.expires_at)}</span>`
|
|
: '<span style="color:var(--text-muted)">Never</span>';
|
|
|
|
const tr = document.createElement("tr");
|
|
tr.innerHTML = `
|
|
<td><code style="font-size:.95em;letter-spacing:.06em">${esc(kp.code)}</code></td>
|
|
<td>${esc(kp.description)}</td>
|
|
<td>${gatesCell}</td>
|
|
<td>${expiresCell}</td>
|
|
<td>${badge}</td>
|
|
<td><div style="display:flex;gap:.5rem;justify-content:flex-end;white-space:nowrap">
|
|
${!kp.revoked && expMs >= now ? `<button class="btn btn-ghost" style="font-size:.8rem;padding:.35rem .9rem"
|
|
data-qr-kp-id="${kp.id}" data-qr-kp-desc="${esc(kp.description)}">QR</button>` : ""}
|
|
${!kp.revoked ? `<button class="btn btn-ghost" style="font-size:.8rem;padding:.35rem .9rem"
|
|
data-edit-kp='${JSON.stringify({id:kp.id, description:kp.description, expires_at:kp.expires_at, allowed_gate_ids:kp.allowed_gate_ids})}'>Edit</button>` : ""}
|
|
${!kp.revoked && expMs >= now ? `<button class="btn btn-danger" style="font-size:.8rem;padding:.35rem .9rem"
|
|
data-kp-id="${kp.id}">Revoke</button>` : ""}
|
|
</div></td>`;
|
|
tbody.appendChild(tr);
|
|
}
|
|
|
|
tbody.querySelectorAll("[data-edit-kp]").forEach(btn => {
|
|
btn.addEventListener("click", () => {
|
|
const kp = JSON.parse(btn.dataset.editKp);
|
|
document.getElementById("kp-edit-id").value = kp.id;
|
|
document.getElementById("kp-edit-desc").value = kp.description;
|
|
// Expiry
|
|
const neverCb = document.getElementById("kp-edit-never");
|
|
const expInput = document.getElementById("kp-edit-expires");
|
|
if (kp.expires_at) {
|
|
neverCb.checked = false;
|
|
expInput.disabled = false;
|
|
expInput.style.opacity = "";
|
|
expInput.value = toLocalDatetimeInput(new Date(kp.expires_at + "Z"));
|
|
} else {
|
|
neverCb.checked = true;
|
|
expInput.disabled = true;
|
|
expInput.style.opacity = ".4";
|
|
expInput.value = "";
|
|
}
|
|
// Gates
|
|
const checksContainer = document.getElementById("kp-edit-gate-checks");
|
|
checksContainer.innerHTML = _allGates.length
|
|
? ""
|
|
: '<span style="color:var(--text-muted);font-size:.85em;padding:.25rem .75rem">No gates configured yet</span>';
|
|
const allowedIds = kp.allowed_gate_ids && kp.allowed_gate_ids.length ? kp.allowed_gate_ids : null;
|
|
for (const g of _allGates) {
|
|
const lbl = document.createElement("label");
|
|
lbl.style.cssText = "display:flex;align-items:center;gap:.75rem;cursor:pointer;padding:.5rem .75rem;background:var(--surface2);border-radius:6px;border:1px solid var(--border);margin:0";
|
|
const checked = allowedIds && allowedIds.includes(g.id) ? "checked" : "";
|
|
lbl.innerHTML = `<input type="checkbox" name="kp-edit-gate" value="${g.id}" ${checked} style="width:1rem;height:1rem;flex-shrink:0" /> <span>${esc(g.name)}</span> <span style="color:var(--text-muted);font-size:.85em;margin-left:auto">${g.gate_type === 'car' ? '🚘 Car' : '🚶 Pedestrian'}</span>`;
|
|
checksContainer.appendChild(lbl);
|
|
}
|
|
const allGatesCb = document.getElementById("kp-edit-all-gates");
|
|
allGatesCb.checked = !allowedIds;
|
|
checksContainer.style.display = allowedIds ? "flex" : "none";
|
|
document.getElementById("kp-edit-error").classList.add("hidden");
|
|
document.getElementById("kp-edit-modal").classList.remove("hidden");
|
|
});
|
|
});
|
|
tbody.querySelectorAll("[data-qr-kp-id]").forEach(btn => {
|
|
btn.addEventListener("click", async () => {
|
|
const id = btn.dataset.qrKpId;
|
|
const desc = btn.dataset.qrKpDesc;
|
|
document.getElementById("qr-modal-desc").textContent = desc;
|
|
const img = document.getElementById("qr-img");
|
|
const dl = document.getElementById("qr-download");
|
|
img.src = "";
|
|
dl.removeAttribute("href");
|
|
document.getElementById("qr-modal").classList.remove("hidden");
|
|
try {
|
|
const res = await fetch(`/api/admin/keypasses/${id}/qr`, {
|
|
headers: { "Authorization": `Bearer ${getToken()}` },
|
|
});
|
|
if (!res.ok) throw new Error("Failed to load QR code");
|
|
const blob = await res.blob();
|
|
const blobUrl = URL.createObjectURL(blob);
|
|
img.src = blobUrl;
|
|
dl.href = blobUrl;
|
|
dl.download = `keypass-${id}-qr.png`;
|
|
} catch (e) {
|
|
showToast(e.message, true);
|
|
document.getElementById("qr-modal").classList.add("hidden");
|
|
}
|
|
});
|
|
});
|
|
|
|
tbody.querySelectorAll("[data-kp-id]").forEach(btn => {
|
|
btn.addEventListener("click", async () => {
|
|
if (!confirm("Revoke this keypass?")) return;
|
|
try {
|
|
await api("DELETE", `/api/admin/keypasses/${btn.dataset.kpId}`);
|
|
showToast("Keypass revoked");
|
|
loadKeypasses();
|
|
} catch (e) { showToast(e.message, true); }
|
|
});
|
|
});
|
|
}
|
|
|
|
// New keypass modal
|
|
let _allGates = [];
|
|
|
|
document.getElementById("btn-new-keypass").addEventListener("click", () => {
|
|
document.getElementById("kp-desc").value = "";
|
|
document.getElementById("kp-code").value = "";
|
|
// Reset complexity — default to passphrase
|
|
document.getElementById("kp-charset").value = "passphrase";
|
|
document.getElementById("kp-length").value = 12;
|
|
document.getElementById("kp-length-val").textContent = "12";
|
|
document.getElementById("kp-length-wrap").style.display = "none";
|
|
document.getElementById("kp-autogen-options").style.display = "";
|
|
// Reset never-expires
|
|
const neverCb = document.getElementById("kp-never-expires");
|
|
neverCb.checked = false;
|
|
const kpExpInput = document.getElementById("kp-expires");
|
|
kpExpInput.disabled = false;
|
|
kpExpInput.required = true;
|
|
kpExpInput.style.opacity = "";
|
|
const d = new Date(Date.now() + 7 * 86400_000);
|
|
kpExpInput.value = toLocalDatetimeInput(d);
|
|
// Render individual gate checkboxes
|
|
const checksContainer = document.getElementById("kp-gate-checks");
|
|
checksContainer.innerHTML = _allGates.length
|
|
? ""
|
|
: '<span style="color:var(--text-muted);font-size:.85em;padding:.25rem .75rem">No gates configured yet</span>';
|
|
for (const g of _allGates) {
|
|
const lbl = document.createElement("label");
|
|
lbl.style.cssText = "display:flex;align-items:center;gap:.75rem;cursor:pointer;padding:.5rem .75rem;background:var(--surface2);border-radius:6px;border:1px solid var(--border);margin:0";
|
|
lbl.innerHTML = `<input type="checkbox" name="kp-gate" value="${g.id}" style="width:1rem;height:1rem;flex-shrink:0" /> <span>${esc(g.name)}</span> <span style="color:var(--text-muted);font-size:.85em;margin-left:auto">${g.gate_type === 'car' ? '🚘 Car' : '🚶 Pedestrian'}</span>`;
|
|
checksContainer.appendChild(lbl);
|
|
}
|
|
// Reset All gates checkbox
|
|
document.getElementById("kp-all-gates").checked = true;
|
|
checksContainer.style.display = "none";
|
|
document.getElementById("kp-error").classList.add("hidden");
|
|
document.getElementById("keypass-modal").classList.remove("hidden");
|
|
});
|
|
|
|
// Auto-generation options — hide when a manual code is typed, hide length for passphrase
|
|
document.getElementById("kp-code").addEventListener("input", e => {
|
|
document.getElementById("kp-autogen-options").style.display = e.target.value.trim() ? "none" : "";
|
|
});
|
|
document.getElementById("kp-charset").addEventListener("change", e => {
|
|
document.getElementById("kp-length-wrap").style.display = e.target.value === "passphrase" ? "none" : "";
|
|
});
|
|
document.getElementById("kp-length").addEventListener("input", e => {
|
|
document.getElementById("kp-length-val").textContent = e.target.value;
|
|
});
|
|
|
|
// Never expires toggle
|
|
document.getElementById("kp-never-expires").addEventListener("change", e => {
|
|
const kpExpInput = document.getElementById("kp-expires");
|
|
kpExpInput.disabled = e.target.checked;
|
|
kpExpInput.required = !e.target.checked;
|
|
kpExpInput.style.opacity = e.target.checked ? ".4" : "";
|
|
});
|
|
|
|
// All gates toggle
|
|
document.getElementById("kp-all-gates").addEventListener("change", e => {
|
|
const checksContainer = document.getElementById("kp-gate-checks");
|
|
if (e.target.checked) {
|
|
// Uncheck all individual gates and hide them
|
|
checksContainer.querySelectorAll("input[name='kp-gate']").forEach(cb => cb.checked = false);
|
|
checksContainer.style.display = "none";
|
|
} else {
|
|
checksContainer.style.display = "flex";
|
|
}
|
|
});
|
|
|
|
// Individual gate checkbox — uncheck "All gates" when any individual gate is checked
|
|
document.getElementById("kp-gate-checks").addEventListener("change", () => {
|
|
const anyChecked = document.getElementById("kp-gate-checks").querySelectorAll("input[name='kp-gate']:checked").length > 0;
|
|
if (anyChecked) document.getElementById("kp-all-gates").checked = false;
|
|
});
|
|
document.getElementById("kp-cancel").addEventListener("click", () => {
|
|
document.getElementById("keypass-modal").classList.add("hidden");
|
|
});
|
|
|
|
// Keypass edit modal
|
|
document.getElementById("kp-edit-never").addEventListener("change", e => {
|
|
const expInput = document.getElementById("kp-edit-expires");
|
|
expInput.disabled = e.target.checked;
|
|
expInput.style.opacity = e.target.checked ? ".4" : "";
|
|
});
|
|
document.getElementById("kp-edit-all-gates").addEventListener("change", e => {
|
|
const checksContainer = document.getElementById("kp-edit-gate-checks");
|
|
if (e.target.checked) {
|
|
checksContainer.querySelectorAll("input[name='kp-edit-gate']").forEach(cb => cb.checked = false);
|
|
checksContainer.style.display = "none";
|
|
} else {
|
|
checksContainer.style.display = "flex";
|
|
}
|
|
});
|
|
document.getElementById("kp-edit-gate-checks").addEventListener("change", () => {
|
|
const anyChecked = document.getElementById("kp-edit-gate-checks").querySelectorAll("input[name='kp-edit-gate']:checked").length > 0;
|
|
if (anyChecked) document.getElementById("kp-edit-all-gates").checked = false;
|
|
});
|
|
document.getElementById("kp-edit-cancel").addEventListener("click", () => {
|
|
document.getElementById("kp-edit-modal").classList.add("hidden");
|
|
});
|
|
|
|
document.getElementById("qr-close").addEventListener("click", () => {
|
|
const img = document.getElementById("qr-img");
|
|
if (img.src.startsWith("blob:")) URL.revokeObjectURL(img.src);
|
|
img.src = "";
|
|
document.getElementById("qr-modal").classList.add("hidden");
|
|
});
|
|
document.getElementById("kp-edit-form").addEventListener("submit", async e => {
|
|
e.preventDefault();
|
|
const id = document.getElementById("kp-edit-id").value;
|
|
const description = document.getElementById("kp-edit-desc").value.trim();
|
|
const never = document.getElementById("kp-edit-never").checked;
|
|
const expires_at = never ? null : new Date(document.getElementById("kp-edit-expires").value).toISOString();
|
|
const allGates = document.getElementById("kp-edit-all-gates").checked;
|
|
const gate_ids = allGates ? [] : Array.from(document.querySelectorAll('input[name="kp-edit-gate"]:checked')).map(cb => parseInt(cb.value));
|
|
const errEl = document.getElementById("kp-edit-error");
|
|
errEl.classList.add("hidden");
|
|
try {
|
|
await api("PATCH", `/api/admin/keypasses/${id}`, { description, expires_at, gate_ids });
|
|
document.getElementById("kp-edit-modal").classList.add("hidden");
|
|
showToast("Keypass updated");
|
|
loadKeypasses();
|
|
} catch (e) {
|
|
errEl.textContent = e.message;
|
|
errEl.classList.remove("hidden");
|
|
}
|
|
});
|
|
document.getElementById("keypass-form").addEventListener("submit", async e => {
|
|
e.preventDefault();
|
|
const desc = document.getElementById("kp-desc").value.trim();
|
|
const code = document.getElementById("kp-code").value.trim() || null;
|
|
const charset = document.getElementById("kp-charset").value;
|
|
const length = parseInt(document.getElementById("kp-length").value, 10);
|
|
const neverExpires = document.getElementById("kp-never-expires").checked;
|
|
const expires_at = neverExpires ? null : new Date(document.getElementById("kp-expires").value).toISOString();
|
|
const allGates = document.getElementById("kp-all-gates").checked;
|
|
const gate_ids = allGates ? [] : Array.from(document.querySelectorAll('input[name="kp-gate"]:checked')).map(cb => parseInt(cb.value));
|
|
const errEl = document.getElementById("kp-error");
|
|
errEl.classList.add("hidden");
|
|
try {
|
|
await api("POST", "/api/admin/keypasses", { description: desc, expires_at, gate_ids, code, charset, length });
|
|
document.getElementById("keypass-modal").classList.add("hidden");
|
|
showToast("Keypass created");
|
|
loadKeypasses();
|
|
} catch (e) {
|
|
errEl.textContent = e.message;
|
|
errEl.classList.remove("hidden");
|
|
}
|
|
});
|
|
|
|
// ── Gates ─────────────────────────────────────────────────────────────────────
|
|
async function loadGates() {
|
|
const rows = await api("GET", "/api/admin/gates");
|
|
_allGates = rows; // cache for keypass modal
|
|
// Populate the stats gate filter dropdown
|
|
const filterGate = document.getElementById("filter-gate");
|
|
const prevGateVal = filterGate.value;
|
|
filterGate.innerHTML = '<option value="">Any</option>';
|
|
for (const g of rows) {
|
|
const opt = document.createElement("option");
|
|
opt.value = g.id;
|
|
opt.textContent = g.name;
|
|
filterGate.appendChild(opt);
|
|
}
|
|
filterGate.value = prevGateVal; // restore selection if still valid
|
|
const isAdmin = _tokenPayload().scope === "admin";
|
|
const tbody = document.getElementById("gates-body");
|
|
tbody.innerHTML = "";
|
|
if (!rows.length) {
|
|
tbody.innerHTML = '<tr><td colspan="5" style="color:var(--text-muted);text-align:center;padding:2rem">No gates yet</td></tr>';
|
|
return;
|
|
}
|
|
for (const g of rows) {
|
|
const badge = g.status === "enabled"
|
|
? '<span class="badge badge-green">Enabled</span>'
|
|
: '<span class="badge badge-muted">Disabled</span>';
|
|
const tr = document.createElement("tr");
|
|
tr.innerHTML = `
|
|
<td>${g.id}</td>
|
|
<td>${esc(g.name)}</td>
|
|
<td>${g.group_name ? esc(g.group_name) : '<span style="color:var(--text-muted)">—</span>'}</td>
|
|
<td>${g.gate_type === "car" ? "🚘 Car" : "🚶 Pedestrian"}</td>
|
|
<td><code style="font-size:.85em">${esc(g.avconnect_macro_id)}</code></td>
|
|
<td>${badge}</td>
|
|
<td><div style="text-align:right;white-space:nowrap;display:flex;gap:.5rem;justify-content:flex-end">
|
|
${g.status === 'enabled' ? `<button class="btn btn-primary" style="font-size:.8rem;padding:.35rem .9rem"
|
|
data-open-id="${g.id}">Open</button>` : ''}
|
|
${isAdmin ? `<button class="btn btn-ghost" style="font-size:.8rem;padding:.35rem .9rem"
|
|
data-edit-id="${g.id}" data-gate='${JSON.stringify(g)}'>Edit</button>
|
|
<button class="btn btn-danger" style="font-size:.8rem;padding:.35rem .9rem"
|
|
data-del-id="${g.id}">Delete</button>` : ''}
|
|
</div></td>`;
|
|
tbody.appendChild(tr);
|
|
}
|
|
|
|
tbody.querySelectorAll("[data-open-id]").forEach(btn => {
|
|
btn.addEventListener("click", async () => {
|
|
btn.disabled = true;
|
|
const orig = btn.textContent;
|
|
btn.textContent = "…";
|
|
try {
|
|
const res = await api("POST", `/api/admin/gates/${btn.dataset.openId}/open`);
|
|
showToast(`${res.gate} opened ✓`);
|
|
} catch (e) { showToast(e.message, true); }
|
|
finally { btn.disabled = false; btn.textContent = orig; }
|
|
});
|
|
});
|
|
tbody.querySelectorAll("[data-edit-id]").forEach(btn => {
|
|
btn.addEventListener("click", () => openGateModal(JSON.parse(btn.dataset.gate)));
|
|
});
|
|
tbody.querySelectorAll("[data-del-id]").forEach(btn => {
|
|
btn.addEventListener("click", async () => {
|
|
if (!confirm("Delete this gate?")) return;
|
|
try {
|
|
await api("DELETE", `/api/admin/gates/${encodeURIComponent(btn.dataset.delId)}`);
|
|
showToast("Gate deleted");
|
|
loadGates();
|
|
} catch (e) { showToast(e.message, true); }
|
|
});
|
|
});
|
|
}
|
|
|
|
function openGateModal(gate = null) {
|
|
document.getElementById("gate-modal-title").textContent = gate ? "Edit Gate" : "Add Gate";
|
|
document.getElementById("gate-edit-id").value = gate ? gate.id : "";
|
|
document.getElementById("gate-name").value = gate ? gate.name : "";
|
|
document.getElementById("gate-group-name").value = gate ? (gate.group_name || "") : "";
|
|
document.getElementById("gate-type").value = gate ? gate.gate_type : "car";
|
|
document.getElementById("gate-avconnect-macro-id").value = gate ? gate.avconnect_macro_id : "";
|
|
document.getElementById("gate-status").value = gate ? gate.status : "enabled";
|
|
document.getElementById("gate-lat").value = (gate && gate.lat != null) ? gate.lat : "";
|
|
document.getElementById("gate-lon").value = (gate && gate.lon != null) ? gate.lon : "";
|
|
document.getElementById("gate-error").classList.add("hidden");
|
|
// Populate group suggestions from existing gates
|
|
const dl = document.getElementById("gate-group-list");
|
|
dl.innerHTML = "";
|
|
const groups = [...new Set((_allGates || []).map(g => g.group_name).filter(Boolean))].sort();
|
|
for (const g of groups) {
|
|
const opt = document.createElement("option");
|
|
opt.value = g;
|
|
dl.appendChild(opt);
|
|
}
|
|
document.getElementById("gate-modal").classList.remove("hidden");
|
|
}
|
|
|
|
document.getElementById("btn-new-gate").addEventListener("click", () => openGateModal());
|
|
document.getElementById("gate-cancel").addEventListener("click", () => {
|
|
document.getElementById("gate-modal").classList.add("hidden");
|
|
});
|
|
document.getElementById("gate-form").addEventListener("submit", async e => {
|
|
e.preventDefault();
|
|
const editId = document.getElementById("gate-edit-id").value;
|
|
const payload = {
|
|
name: document.getElementById("gate-name").value.trim(),
|
|
gate_type: document.getElementById("gate-type").value,
|
|
avconnect_macro_id: document.getElementById("gate-avconnect-macro-id").value.trim(),
|
|
status: document.getElementById("gate-status").value,
|
|
group_name: document.getElementById("gate-group-name").value.trim() || null,
|
|
lat: document.getElementById("gate-lat").value !== "" ? parseFloat(document.getElementById("gate-lat").value) : null,
|
|
lon: document.getElementById("gate-lon").value !== "" ? parseFloat(document.getElementById("gate-lon").value) : null,
|
|
};
|
|
const errEl = document.getElementById("gate-error");
|
|
errEl.classList.add("hidden");
|
|
try {
|
|
if (editId) {
|
|
await api("PUT", `/api/admin/gates/${encodeURIComponent(editId)}`, payload);
|
|
} else {
|
|
await api("POST", "/api/admin/gates", payload);
|
|
}
|
|
document.getElementById("gate-modal").classList.add("hidden");
|
|
showToast("Gate saved");
|
|
loadGates();
|
|
} catch (e) {
|
|
errEl.textContent = e.message;
|
|
errEl.classList.remove("hidden");
|
|
}
|
|
});
|
|
|
|
// ── Credentials ───────────────────────────────────────────────────────────────
|
|
async function loadCredentials() {
|
|
try {
|
|
const list = await api("GET", "/api/admin/credentials");
|
|
if (list.length) {
|
|
document.getElementById("cred-username").value = list[0].username;
|
|
}
|
|
} catch { /* no creds yet */ }
|
|
try {
|
|
const { enabled } = await api("GET", "/api/admin/credentials/mock");
|
|
document.getElementById("mock-toggle").checked = enabled;
|
|
} catch { /* ignore */ }
|
|
}
|
|
|
|
document.getElementById("mock-toggle").addEventListener("change", async e => {
|
|
try {
|
|
await api("PUT", "/api/admin/credentials/mock", { enabled: e.target.checked });
|
|
showToast(e.target.checked ? "Mock mode enabled" : "Mock mode disabled");
|
|
} catch (err) {
|
|
showToast(err.message, true);
|
|
e.target.checked = !e.target.checked; // revert
|
|
}
|
|
});
|
|
|
|
document.getElementById("credentials-form").addEventListener("submit", async e => {
|
|
e.preventDefault();
|
|
const username = document.getElementById("cred-username").value.trim();
|
|
const password = document.getElementById("cred-password").value;
|
|
const errEl = document.getElementById("cred-error");
|
|
errEl.classList.add("hidden");
|
|
if (!password) {
|
|
errEl.textContent = "Password is required.";
|
|
errEl.classList.remove("hidden");
|
|
return;
|
|
}
|
|
try {
|
|
await api("PUT", "/api/admin/credentials", { username, password });
|
|
document.getElementById("cred-password").value = "";
|
|
showToast("Credentials saved");
|
|
} catch (e) {
|
|
errEl.textContent = e.message;
|
|
errEl.classList.remove("hidden");
|
|
}
|
|
});
|
|
|
|
// ── Statistics ───────────────────────────────────────────────────────────────
|
|
const STATS_PAGE_SIZE = 50;
|
|
let _statsPage = 1;
|
|
let _statsTotal = 0;
|
|
|
|
function _buildStatsParams() {
|
|
const params = new URLSearchParams();
|
|
const keypass = document.getElementById("filter-keypass").value.trim();
|
|
if (keypass) params.set("keypass_code", keypass.toUpperCase());
|
|
const gate = document.getElementById("filter-gate").value;
|
|
if (gate) params.set("gate_id", gate);
|
|
const success = document.getElementById("filter-success").value;
|
|
if (success !== "") params.set("success", success);
|
|
const from = document.getElementById("filter-from").value;
|
|
if (from) params.set("date_from", new Date(from).toISOString());
|
|
const to = document.getElementById("filter-to").value;
|
|
if (to) params.set("date_to", new Date(to).toISOString());
|
|
params.set("page", _statsPage);
|
|
params.set("page_size", STATS_PAGE_SIZE);
|
|
return params;
|
|
}
|
|
|
|
async function loadStats() {
|
|
try {
|
|
const data = await api("GET", `/api/admin/stats?${_buildStatsParams()}`);
|
|
_statsTotal = data.total;
|
|
const totalPages = Math.max(1, Math.ceil(_statsTotal / STATS_PAGE_SIZE));
|
|
|
|
document.getElementById("stats-total-label").textContent =
|
|
`${_statsTotal} record${_statsTotal !== 1 ? "s" : ""}`;
|
|
document.getElementById("stats-page-label").textContent =
|
|
`Page ${_statsPage} of ${totalPages}`;
|
|
document.getElementById("btn-stats-prev").disabled = _statsPage <= 1;
|
|
document.getElementById("btn-stats-next").disabled = _statsPage >= totalPages;
|
|
|
|
const tbody = document.getElementById("stats-body");
|
|
tbody.innerHTML = "";
|
|
if (!data.items.length) {
|
|
tbody.innerHTML = '<tr><td colspan="6" style="color:var(--text-muted);text-align:center;padding:2rem">No records match the current filters</td></tr>';
|
|
return;
|
|
}
|
|
for (const r of data.items) {
|
|
const badge = r.success
|
|
? '<span class="badge badge-green">OK</span>'
|
|
: `<span class="badge badge-red" title="${esc(r.error || '')}">Fail</span>`;
|
|
const tr = document.createElement("tr");
|
|
tr.innerHTML = `
|
|
<td style="white-space:nowrap">${fmtDate(r.timestamp.replace(' ', 'T'))}</td>
|
|
<td><code style="font-size:.85em">${esc(r.keypass_code)}</code></td>
|
|
<td>${esc(r.gate_name)}</td>
|
|
<td style="font-size:.85em;font-family:monospace">${esc(r.ip_address || '-')}</td>
|
|
<td style="font-size:.8em;color:var(--text-muted);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="${esc(r.user_agent || '')}">${esc(r.user_agent || '-')}</td>
|
|
<td>${badge}</td>`;
|
|
tbody.appendChild(tr);
|
|
}
|
|
} catch (e) { showToast(e.message, true); }
|
|
}
|
|
|
|
document.getElementById("btn-refresh-stats").addEventListener("click", () => { _statsPage = 1; loadStats(); });
|
|
document.getElementById("btn-stats-filter").addEventListener("click", () => { _statsPage = 1; loadStats(); });
|
|
document.getElementById("btn-stats-reset").addEventListener("click", () => {
|
|
document.getElementById("filter-keypass").value = "";
|
|
document.getElementById("filter-gate").value = "";
|
|
document.getElementById("filter-success").value = "";
|
|
document.getElementById("filter-from").value = "";
|
|
document.getElementById("filter-to").value = "";
|
|
_statsPage = 1;
|
|
loadStats();
|
|
});
|
|
document.getElementById("btn-stats-prev").addEventListener("click", () => {
|
|
if (_statsPage > 1) { _statsPage--; loadStats(); }
|
|
});
|
|
document.getElementById("btn-stats-next").addEventListener("click", () => {
|
|
const totalPages = Math.max(1, Math.ceil(_statsTotal / STATS_PAGE_SIZE));
|
|
if (_statsPage < totalPages) { _statsPage++; loadStats(); }
|
|
});
|
|
|
|
// ── Admin users ───────────────────────────────────────────────────────────────
|
|
async function loadAdmins() {
|
|
const rows = await api("GET", "/api/admin/admins");
|
|
const tbody = document.getElementById("admins-body");
|
|
tbody.innerHTML = "";
|
|
if (!rows.length) {
|
|
tbody.innerHTML = '<tr><td colspan="2" style="color:var(--text-muted);text-align:center;padding:2rem">No admins</td></tr>';
|
|
return;
|
|
}
|
|
const me = _tokenPayload().sub;
|
|
for (const u of rows) {
|
|
const roleBadge = u.role === "admin"
|
|
? '<span class="badge badge-green" style="font-size:.75em">admin</span>'
|
|
: '<span class="badge badge-muted" style="font-size:.75em">manager</span>';
|
|
const totpBadge = u.totp_enabled
|
|
? '<span class="badge badge-green" style="font-size:.75em;background:var(--accent-warn,#b45309);color:#fff" title="2FA enabled">2FA ✓</span>'
|
|
: '';
|
|
const is_me = u.username === me;
|
|
const totpBtn = is_me
|
|
? `<button class="btn btn-ghost" style="font-size:.8rem;padding:.35rem .9rem" data-totp="${esc(u.username)}" data-totp-enabled="${u.totp_enabled}">${u.totp_enabled ? "Disable 2FA" : "Enable 2FA"}</button>`
|
|
: "";
|
|
const tr = document.createElement("tr");
|
|
tr.innerHTML = `
|
|
<td><div style="display:flex;align-items:center;gap:.4rem;flex-wrap:nowrap">${esc(u.username)}${is_me ? '<span class="badge badge-green" style="font-size:.75em">you</span>' : ""} ${roleBadge} ${totpBadge}</div></td>
|
|
<td><div style="text-align:right;display:flex;gap:.5rem;justify-content:flex-end">
|
|
${totpBtn}
|
|
<button class="btn btn-ghost" style="font-size:.8rem;padding:.35rem .9rem" data-chpw="${esc(u.username)}">Change password</button>
|
|
${!is_me ? `<button class="btn btn-danger" style="font-size:.8rem;padding:.35rem .9rem" data-del-admin="${esc(u.username)}">Delete</button>` : ""}
|
|
</div></td>`;
|
|
tbody.appendChild(tr);
|
|
}
|
|
tbody.querySelectorAll("[data-totp]").forEach(btn => {
|
|
btn.addEventListener("click", async () => {
|
|
const username = btn.dataset.totp;
|
|
const enabled = btn.dataset.totpEnabled === "true";
|
|
if (enabled) {
|
|
if (!confirm("Disable two-factor authentication for your account?")) return;
|
|
try {
|
|
await api("DELETE", `/api/admin/admins/${encodeURIComponent(username)}/totp`);
|
|
showToast("2FA disabled");
|
|
loadAdmins();
|
|
} catch (e) { showToast(e.message, true); }
|
|
} else {
|
|
openTotpSetup(username);
|
|
}
|
|
});
|
|
});
|
|
tbody.querySelectorAll("[data-chpw]").forEach(btn => {
|
|
btn.addEventListener("click", () => {
|
|
document.getElementById("chpw-username").value = btn.dataset.chpw;
|
|
document.getElementById("chpw-new").value = "";
|
|
document.getElementById("chpw-confirm").value = "";
|
|
document.getElementById("chpw-error").classList.add("hidden");
|
|
document.getElementById("chpw-modal").classList.remove("hidden");
|
|
});
|
|
});
|
|
tbody.querySelectorAll("[data-del-admin]").forEach(btn => {
|
|
btn.addEventListener("click", async () => {
|
|
if (!confirm(`Delete admin "${btn.dataset.delAdmin}"?`)) return;
|
|
try {
|
|
await api("DELETE", `/api/admin/admins/${encodeURIComponent(btn.dataset.delAdmin)}`);
|
|
showToast("Admin deleted");
|
|
loadAdmins();
|
|
} catch (e) { showToast(e.message, true); }
|
|
});
|
|
});
|
|
}
|
|
|
|
// ── TOTP setup modal ──────────────────────────────────────────────────────────
|
|
let _totpUsername = null;
|
|
|
|
async function openTotpSetup(username) {
|
|
_totpUsername = username;
|
|
document.getElementById("totp-confirm-code").value = "";
|
|
document.getElementById("totp-error").classList.add("hidden");
|
|
document.getElementById("totp-modal").classList.remove("hidden");
|
|
try {
|
|
const data = await api("POST", `/api/admin/admins/${encodeURIComponent(username)}/totp/setup`);
|
|
// Render QR from base64 PNG returned by the server
|
|
const canvas = document.getElementById("totp-qr-canvas");
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
canvas.width = img.width;
|
|
canvas.height = img.height;
|
|
canvas.style.width = Math.min(img.width, 220) + "px";
|
|
canvas.style.height = "auto";
|
|
canvas.getContext("2d").drawImage(img, 0, 0);
|
|
};
|
|
img.src = "data:image/png;base64," + data.qr_image_b64;
|
|
document.getElementById("totp-uri-fallback").textContent = data.provisioning_uri;
|
|
} catch (e) {
|
|
document.getElementById("totp-error").textContent = e.message;
|
|
document.getElementById("totp-error").classList.remove("hidden");
|
|
}
|
|
}
|
|
|
|
document.getElementById("totp-cancel").addEventListener("click", () => {
|
|
document.getElementById("totp-modal").classList.add("hidden");
|
|
_totpUsername = null;
|
|
});
|
|
|
|
document.getElementById("totp-confirm-btn").addEventListener("click", async () => {
|
|
if (!_totpUsername) return;
|
|
const code = document.getElementById("totp-confirm-code").value.trim();
|
|
const errEl = document.getElementById("totp-error");
|
|
errEl.classList.add("hidden");
|
|
if (!code) { errEl.textContent = "Enter the 6-digit code from your app."; errEl.classList.remove("hidden"); return; }
|
|
try {
|
|
await api("POST", `/api/admin/admins/${encodeURIComponent(_totpUsername)}/totp/enable`, { otp_code: code });
|
|
document.getElementById("totp-modal").classList.add("hidden");
|
|
_totpUsername = null;
|
|
showToast("Two-factor authentication enabled");
|
|
loadAdmins();
|
|
} catch (e) {
|
|
errEl.textContent = e.message;
|
|
errEl.classList.remove("hidden");
|
|
}
|
|
});
|
|
|
|
document.getElementById("btn-new-admin").addEventListener("click", () => {
|
|
document.getElementById("admin-new-username").value = "";
|
|
document.getElementById("admin-new-password").value = "";
|
|
document.getElementById("admin-new-role").value = "admin";
|
|
document.getElementById("admin-modal-error").classList.add("hidden");
|
|
document.getElementById("admin-modal").classList.remove("hidden");
|
|
});
|
|
document.getElementById("admin-cancel").addEventListener("click", () => {
|
|
document.getElementById("admin-modal").classList.add("hidden");
|
|
});
|
|
document.getElementById("admin-form").addEventListener("submit", async e => {
|
|
e.preventDefault();
|
|
const username = document.getElementById("admin-new-username").value.trim();
|
|
const password = document.getElementById("admin-new-password").value;
|
|
const role = document.getElementById("admin-new-role").value;
|
|
const errEl = document.getElementById("admin-modal-error");
|
|
errEl.classList.add("hidden");
|
|
try {
|
|
await api("POST", "/api/admin/admins", { username, password, role });
|
|
document.getElementById("admin-modal").classList.add("hidden");
|
|
showToast("Admin created");
|
|
loadAdmins();
|
|
} catch (e) {
|
|
errEl.textContent = e.message;
|
|
errEl.classList.remove("hidden");
|
|
}
|
|
});
|
|
|
|
// ── Change password modal ─────────────────────────────────────────────────────
|
|
document.getElementById("chpw-cancel").addEventListener("click", () => {
|
|
document.getElementById("chpw-modal").classList.add("hidden");
|
|
});
|
|
document.getElementById("chpw-form").addEventListener("submit", async e => {
|
|
e.preventDefault();
|
|
const username = document.getElementById("chpw-username").value;
|
|
const newPw = document.getElementById("chpw-new").value;
|
|
const confirm = document.getElementById("chpw-confirm").value;
|
|
const errEl = document.getElementById("chpw-error");
|
|
errEl.classList.add("hidden");
|
|
if (newPw !== confirm) {
|
|
errEl.textContent = "Passwords do not match";
|
|
errEl.classList.remove("hidden");
|
|
return;
|
|
}
|
|
try {
|
|
await api("PATCH", `/api/admin/admins/${encodeURIComponent(username)}/password`, { new_password: newPw });
|
|
document.getElementById("chpw-modal").classList.add("hidden");
|
|
showToast("Password updated");
|
|
} catch (e) {
|
|
errEl.textContent = e.message;
|
|
errEl.classList.remove("hidden");
|
|
}
|
|
});
|
|
|
|
// ── Telegram / Notifications ──────────────────────────────────────────────────
|
|
async function loadTelegram() {
|
|
try {
|
|
const cfg = await api("GET", "/api/admin/telegram");
|
|
document.getElementById("tg-chat-id").value = cfg.chat_id || "";
|
|
document.getElementById("tg-enabled").checked = cfg.enabled;
|
|
document.getElementById("tg-status").textContent = cfg.configured
|
|
? "Bot token is saved. Leave the token field empty to keep it."
|
|
: "Not configured yet. Enter a bot token to get started.";
|
|
} catch { /* non-admin: tab hidden anyway */ }
|
|
}
|
|
|
|
document.getElementById("telegram-form").addEventListener("submit", async e => {
|
|
e.preventDefault();
|
|
const token = document.getElementById("tg-token").value.trim() || null;
|
|
const chat_id = document.getElementById("tg-chat-id").value.trim();
|
|
const enabled = document.getElementById("tg-enabled").checked;
|
|
const errEl = document.getElementById("tg-error");
|
|
errEl.classList.add("hidden");
|
|
try {
|
|
await api("PUT", "/api/admin/telegram", { bot_token: token, chat_id, enabled });
|
|
document.getElementById("tg-token").value = "";
|
|
showToast("Telegram settings saved");
|
|
loadTelegram();
|
|
} catch (e) {
|
|
errEl.textContent = e.message;
|
|
errEl.classList.remove("hidden");
|
|
}
|
|
});
|
|
|
|
document.getElementById("btn-tg-test").addEventListener("click", async () => {
|
|
const btn = document.getElementById("btn-tg-test");
|
|
const errEl = document.getElementById("tg-error");
|
|
btn.disabled = true;
|
|
errEl.classList.add("hidden");
|
|
try {
|
|
await api("POST", "/api/admin/telegram/test");
|
|
showToast("Test message sent ✓");
|
|
} catch (e) {
|
|
errEl.textContent = e.message;
|
|
errEl.classList.remove("hidden");
|
|
} finally {
|
|
btn.disabled = false;
|
|
}
|
|
});
|
|
|
|
// ── Load all data ─────────────────────────────────────────────────────────────
|
|
function loadAllData() {
|
|
const isAdmin = _tokenPayload().scope === "admin";
|
|
loadKeypasses();
|
|
loadGates();
|
|
loadStats();
|
|
if (isAdmin) {
|
|
loadCredentials();
|
|
loadAdmins();
|
|
loadTelegram();
|
|
}
|
|
}
|
|
|
|
// ── Utilities ─────────────────────────────────────────────────────────────────
|
|
function esc(str) {
|
|
return String(str)
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """);
|
|
}
|
|
|
|
function fmtDate(iso) {
|
|
const d = new Date(iso + "Z");
|
|
const pad = n => String(n).padStart(2, "0");
|
|
return `${pad(d.getDate())}/${pad(d.getMonth()+1)}/${d.getFullYear()} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
|
}
|
|
|
|
function toLocalDatetimeInput(date) {
|
|
const pad = n => String(n).padStart(2, "0");
|
|
return `${date.getFullYear()}-${pad(date.getMonth()+1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
|
|
}
|
|
|
|
/** Parse "dd/mm/yyyy hh:mm" as local time and return a UTC ISO string, or null on error. */
|
|
function parseLocalDdMmYyyy(str) {
|
|
const m = str.trim().match(/^(\d{2})\/(\d{2})\/(\d{4})\s+(\d{2}):(\d{2})$/);
|
|
if (!m) return null;
|
|
const d = new Date(+m[3], +m[2] - 1, +m[1], +m[4], +m[5]);
|
|
return isNaN(d.getTime()) ? null : d.toISOString();
|
|
}
|
|
|
|
// ── Init ──────────────────────────────────────────────────────────────────────
|
|
(function init() {
|
|
const t = getToken();
|
|
if (tokenValid(t)) {
|
|
showAdmin();
|
|
} else {
|
|
clearToken();
|
|
showLogin();
|
|
}
|
|
})();
|