fix htmx refactor route mismatches and remaining TODO items
- wireguard: POST /peers with JSON encoding (was /add-peer) - rules: delete by rule_id in URL path (was JSON body); pass rule objects with id from server; add hx-disable to initial render - nat: port forward delete uses URL path params to match blueprint - nat: masquerade toggle uses native hx-post/hx-vals (was inline fetch) - app.js renderers updated to use URL path deletes for rules and forwards - remove TODO.md
This commit is contained in:
+289
-113
@@ -1,137 +1,86 @@
|
||||
// Toast notification system
|
||||
function showToast(message, type = "info") {
|
||||
const container = document.querySelector(".toast") || createToastContainer();
|
||||
const toast = document.createElement("div");
|
||||
toast.className = `toast-message toast-${type}`;
|
||||
// Toast notifications
|
||||
const showToast = (message, type, duration = 4000) => {
|
||||
const container = document.getElementById('toast-container');
|
||||
if (!container) return;
|
||||
const toast = document.createElement('div');
|
||||
toast.className = 'toast toast-' + type;
|
||||
toast.textContent = message;
|
||||
container.appendChild(toast);
|
||||
requestAnimationFrame(() => toast.classList.add('show'));
|
||||
setTimeout(() => {
|
||||
toast.style.opacity = "0";
|
||||
toast.style.transform = "translateX(40px)";
|
||||
toast.style.transition = "all 0.3s ease";
|
||||
toast.classList.remove('show');
|
||||
setTimeout(() => toast.remove(), 300);
|
||||
}, 5000);
|
||||
}
|
||||
}, duration);
|
||||
};
|
||||
|
||||
function createToastContainer() {
|
||||
const el = document.createElement("div");
|
||||
el.className = "toast";
|
||||
document.body.appendChild(el);
|
||||
return el;
|
||||
}
|
||||
const showSuccessToast = (msg) => showToast(msg, 'success');
|
||||
|
||||
const showErrorToast = (msg) => showToast(msg, 'error');
|
||||
|
||||
// Modal helpers
|
||||
function openModal(id) {
|
||||
const modal = document.getElementById(id);
|
||||
if (modal) modal.classList.add("show");
|
||||
}
|
||||
const openModal = (id) => {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.classList.add('active');
|
||||
};
|
||||
|
||||
function closeModal(id) {
|
||||
const modal = document.getElementById(id);
|
||||
if (modal) modal.classList.remove("show");
|
||||
}
|
||||
const closeModal = (id) => {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.classList.remove('active');
|
||||
};
|
||||
|
||||
// Confirm dialog
|
||||
function confirmAction(message, onConfirm) {
|
||||
const existing = document.getElementById("confirm-modal");
|
||||
if (existing) existing.remove();
|
||||
// Tab switching
|
||||
const switchTab = (tabName) => {
|
||||
document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
|
||||
document.querySelectorAll('.tab').forEach(el => el.classList.remove('active'));
|
||||
document.getElementById('tab-' + tabName).classList.add('active');
|
||||
const clickedTab = document.querySelector('.tab[data-tab="' + tabName + '"]');
|
||||
if (clickedTab) clickedTab.classList.add('active');
|
||||
};
|
||||
|
||||
const modal = document.createElement("div");
|
||||
modal.id = "confirm-modal";
|
||||
modal.className = "modal";
|
||||
modal.innerHTML = `
|
||||
<div class="modal-content">
|
||||
<p class="mb-2">${message}</p>
|
||||
<div style="display:flex; gap:0.75rem; justify-content:flex-end;">
|
||||
<button class="btn btn-outline" id="confirm-cancel">Cancel</button>
|
||||
<button class="btn btn-danger" id="confirm-ok">Confirm</button>
|
||||
</div>
|
||||
</div>`;
|
||||
document.body.appendChild(modal);
|
||||
openModal("confirm-modal");
|
||||
document.getElementById("confirm-cancel").onclick = () => closeModal("confirm-modal");
|
||||
modal.addEventListener("click", (e) => {
|
||||
if (e.target === modal) closeModal("confirm-modal");
|
||||
});
|
||||
}
|
||||
|
||||
function setupConfirmCallback(callback) {
|
||||
document.getElementById("confirm-ok")?.addEventListener("click", () => {
|
||||
closeModal("confirm-modal");
|
||||
callback();
|
||||
});
|
||||
}
|
||||
|
||||
// Auto-refresh with HTMX
|
||||
function startAutoRefresh(endpoint, target, interval) {
|
||||
const el = document.createElement("div");
|
||||
el.setAttribute("hx-get", endpoint);
|
||||
el.setAttribute("hx-target", `#${target}`);
|
||||
el.setAttribute("hx-swap", "innerHTML");
|
||||
el.setAttribute("hx-trigger", `every ${interval}s`);
|
||||
el.setAttribute("hx-swap-oob", "true");
|
||||
document.body.appendChild(el);
|
||||
}
|
||||
|
||||
// Time formatting
|
||||
function formatTime(seconds) {
|
||||
if (seconds < 60) return `${seconds}s`;
|
||||
if (seconds < 3600) return `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
|
||||
if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ${Math.floor((seconds % 3600) / 60)}m`;
|
||||
return `${Math.floor(seconds / 86400)}d ${Math.floor((seconds % 86400) / 3600)}h`;
|
||||
}
|
||||
|
||||
// Bytes formatting
|
||||
function formatBytes(bytes) {
|
||||
if (bytes === 0) return "0 B";
|
||||
const units = ["B", "KB", "MB", "GB", "TB"];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(1024));
|
||||
return `${(bytes / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0)} ${units[i]}`;
|
||||
}
|
||||
|
||||
// Form helpers
|
||||
function resetForm(formId) {
|
||||
const form = document.getElementById(formId);
|
||||
if (form) form.reset();
|
||||
}
|
||||
|
||||
function fillForm(formId, data) {
|
||||
const form = document.getElementById(formId);
|
||||
if (!form) return;
|
||||
for (const [key, value] of Object.entries(data)) {
|
||||
const input = form.querySelector(`[name="${key}"]`);
|
||||
if (input) input.value = value;
|
||||
}
|
||||
}
|
||||
// Refresh a container from a JSON GET endpoint using a renderer callback
|
||||
const refreshTable = (url, container, renderer) => {
|
||||
fetch(url)
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
const json = data.ok ? data.data : data;
|
||||
container.innerHTML = renderer(json);
|
||||
htmx.process(container);
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
// HTMX event handlers
|
||||
document.body.addEventListener("htmx:afterSwap", (evt) => {
|
||||
const toastHeader = evt.detail.xhr?.getResponseHeader("X-Toast");
|
||||
document.body.addEventListener('htmx:afterSwap', (evt) => {
|
||||
const toastHeader = evt.detail.xhr?.getResponseHeader('X-Toast');
|
||||
if (toastHeader) {
|
||||
const parts = toastHeader.split(":");
|
||||
const msg = parts.slice(1).join(":").trim();
|
||||
showToast(msg, parts[0]?.trim() || "info");
|
||||
const parts = toastHeader.split(':');
|
||||
const msg = parts.slice(1).join(':').trim();
|
||||
showToast(msg, parts[0]?.trim() || 'info');
|
||||
}
|
||||
});
|
||||
|
||||
document.body.addEventListener("htmx:responseError", (evt) => {
|
||||
document.body.addEventListener('htmx:responseError', (evt) => {
|
||||
const status = evt.detail.xhr?.status || 0;
|
||||
showToast(`Request failed (${status})`, "error");
|
||||
const json = evt.detail.xhr?.response;
|
||||
let msg = 'Request failed (' + status + ')';
|
||||
try {
|
||||
const parsed = JSON.parse(json);
|
||||
if (parsed.error) msg = parsed.error;
|
||||
} catch (e) {}
|
||||
showToast(msg, 'error');
|
||||
});
|
||||
|
||||
document.body.addEventListener("htmx:beforeRequest", (evt) => {
|
||||
const target = evt.target;
|
||||
const btn = target.closest(".btn");
|
||||
document.body.addEventListener('htmx:beforeRequest', (evt) => {
|
||||
const btn = evt.target.closest('.btn');
|
||||
if (btn) {
|
||||
btn.dataset.originalText = btn.textContent;
|
||||
btn.disabled = true;
|
||||
btn.textContent = "Loading...";
|
||||
btn.textContent = 'Loading...';
|
||||
}
|
||||
});
|
||||
|
||||
document.body.addEventListener("htmx:afterRequest", (evt) => {
|
||||
const target = evt.target;
|
||||
const btn = target.closest(".btn");
|
||||
document.body.addEventListener('htmx:afterRequest', (evt) => {
|
||||
const btn = evt.target.closest('.btn');
|
||||
if (btn && btn.dataset.originalText !== undefined) {
|
||||
btn.disabled = false;
|
||||
btn.textContent = btn.dataset.originalText;
|
||||
@@ -139,9 +88,236 @@ document.body.addEventListener("htmx:afterRequest", (evt) => {
|
||||
}
|
||||
});
|
||||
|
||||
// Close on escape
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") {
|
||||
document.querySelectorAll(".modal.show").forEach((m) => m.classList.remove("show"));
|
||||
// Keyboard: Escape closes all modals
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
document.querySelectorAll('.modal-overlay.active').forEach(el => el.classList.remove('active'));
|
||||
}
|
||||
});
|
||||
|
||||
// -------- Renderer helpers for htmx-driven DOM updates --------
|
||||
|
||||
const renderZones = (data) => {
|
||||
const active = Array.isArray(data) ? data : (data.active || []);
|
||||
if (!active.length) return '<div class="card"><div class="text-muted text-sm">No zones configured. Create a zone to get started.</div></div>';
|
||||
return active.map(zone =>
|
||||
'<div class="card" style="position:relative;">' +
|
||||
'<div style="display:flex;justify-content:space-between;align-items:flex-start;">' +
|
||||
'<div><h3 style="font-size:16px;color:var(--accent);">' + escHtml(zone.name) + '</h3>' +
|
||||
'<div class="text-muted text-sm" style="margin-bottom:10px;">' + (zone.target ? 'Target: ' + escHtml(zone.target) : '') + '</div></div></div>' +
|
||||
'<div class="text-sm mb-4"><div class="text-muted" style="margin-bottom:4px;">Interfaces</div>' +
|
||||
(zone.interfaces && zone.interfaces.length ? zone.interfaces.map(i => '<span class="badge badge-info">' + escHtml(i) + '</span>').join('') : '<span class="text-muted">None</span>') +
|
||||
'</div><div class="text-sm mb-4"><div class="text-muted" style="margin-bottom:4px;">Services</div>' +
|
||||
(zone.services && zone.services.length ? zone.services.map(s => '<span class="badge badge-success">' + escHtml(s) + '</span>').join('') : '<span class="text-muted">None</span>') +
|
||||
'</div><div style="display:flex;justify-content:flex-end;gap:6px;margin-top:12px;">' +
|
||||
'<form hx-delete="/api/firewall/zones/' + escAttr(zone.name) + '" hx-swap="none" hx-confirm="Delete zone ' + escHtml(zone.name) + '? This will affect traffic to its interfaces." hx-on::after-request="if(evt.detail.successful){ refreshTable(\'/api/firewall/zones\', document.getElementById(\'zone-grid\'), renderZones); showSuccessToast(\'Zone deleted\'); }">' +
|
||||
'<button type="submit" class="btn btn-sm btn-danger">Delete</button></form></div></div>'
|
||||
).join('');
|
||||
};
|
||||
|
||||
const renderRules = (data) => {
|
||||
let html = '';
|
||||
let zoneRules = {};
|
||||
const cfgZones = data && data.zones ? data.zones : null;
|
||||
if (cfgZones) {
|
||||
Object.keys(cfgZones).forEach(zname => {
|
||||
const rr = cfgZones[zname].rich_rules || [];
|
||||
if (rr.length) zoneRules[zname] = rr;
|
||||
});
|
||||
} else {
|
||||
zoneRules = data || {};
|
||||
}
|
||||
Object.keys(zoneRules).forEach(zone => {
|
||||
let entries = zoneRules[zone];
|
||||
if (!Array.isArray(entries)) entries = [];
|
||||
html += '<div class="card"><h3>Zone: <span style="color:var(--accent);">' + escHtml(zone || '(default)') + '</span></h3>';
|
||||
if (entries.length) {
|
||||
html += '<table><thead><tr><th>#</th><th>Rule</th><th style="width:80px;">Action</th></tr></thead><tbody>';
|
||||
entries.forEach((entry, i) => {
|
||||
let ruleId, ruleText;
|
||||
if (typeof entry === 'object' && entry.rule) {
|
||||
ruleId = entry.id;
|
||||
ruleText = entry.rule;
|
||||
} else {
|
||||
ruleId = null;
|
||||
ruleText = String(entry);
|
||||
}
|
||||
html += '<tr><td class="text-muted">' + (i + 1) + '</td>' +
|
||||
'<td style="font-family:monospace;font-size:12px;word-break:break-all;" hx-disable>' + escHtml(ruleText) + '</td>' +
|
||||
'<td><form hx-delete="/api/firewall/rich-rules/' + escAttr(zone) + (ruleId ? '/' + encodeURIComponent(ruleId) : '') + '"' +
|
||||
(ruleId ? '' : ' hx-encoding="json" hx-vals=\'{"rule": ' + JSON.stringify(ruleText) + ' }\'') +
|
||||
' hx-swap="none" hx-confirm="Remove rule ' + escHtml(ruleText.substring(0, 40)) + '?" hx-on::after-request="if(evt.detail.successful){ refreshTable(\'/api/firewall/config\', document.getElementById(\'rules-container\'), renderRules); showSuccessToast(\'Rule removed\'); }">' +
|
||||
'<button type="submit" class="btn btn-sm btn-danger">Remove</button></form></td></tr>';
|
||||
});
|
||||
html += '</tbody></table>';
|
||||
} else {
|
||||
html += '<div class="text-muted text-sm">No rich rules configured for this zone.</div>';
|
||||
}
|
||||
html += '</div>';
|
||||
});
|
||||
return html || '<div class="card"><div class="text-muted text-sm">No rules loaded.</div></div>';
|
||||
};
|
||||
|
||||
const renderForwards = (forwards) => {
|
||||
if (!forwards.length) return '<tr><td colspan="6" class="text-muted text-sm">No port forwarding rules configured</td></tr>';
|
||||
return forwards.map(fwd => {
|
||||
const proto = fwd['proxy-protocol'] || fwd.proto;
|
||||
return '<tr><td><strong>' + escHtml(fwd.zone) + '</strong></td>' +
|
||||
'<td><span class="badge badge-info">' + escHtml(proto) + '</span></td>' +
|
||||
'<td>' + fwd.port + '</td><td>' + escHtml(fwd['to-addr'] || fwd.toaddr) + '</td>' +
|
||||
'<td>' + (fwd['to-port'] || fwd.toport || '-') + '</td>' +
|
||||
'<td><form hx-delete="/api/firewall/forward-port/' + encodeURIComponent(fwd.zone) + '/' + fwd.port + '/' + encodeURIComponent(proto) + '" hx-swap="none" hx-confirm="Remove forward rule ' + fwd.port + '/' + proto + '?" hx-on::after-request="if(evt.detail.successful){ refreshTable(\'/api/firewall/config\', document.getElementById(\'forward-rows\'), renderForwardsFromConfig); showSuccessToast(\'Rule removed\'); }">' +
|
||||
'<button type="submit" class="btn btn-sm btn-danger">Remove</button></form></td></tr>';
|
||||
}).join('');
|
||||
};
|
||||
|
||||
const renderForwardsFromConfig = (data) => {
|
||||
const zones = data.zones || {};
|
||||
const forwards = [];
|
||||
Object.keys(zones).forEach(name => {
|
||||
zones[name].forward_ports = zones[name].forward_ports || [];
|
||||
zones[name].forward_ports.forEach(fwd => {
|
||||
forwards.push({
|
||||
zone: name,
|
||||
'proxy-protocol': fwd['proxy-protocol'] || fwd.proto,
|
||||
port: fwd.port,
|
||||
'to-addr': fwd['to-addr'] || fwd.toaddr,
|
||||
'to-port': fwd['to-port'] || fwd.toport
|
||||
});
|
||||
});
|
||||
});
|
||||
return renderForwards(forwards);
|
||||
};
|
||||
|
||||
const renderRanges = (ranges) => {
|
||||
if (!ranges.length) return '<tr><td colspan="5" class="text-muted text-sm">No DHCP ranges configured</td></tr>';
|
||||
return ranges.map(rng =>
|
||||
'<tr><td>' + escHtml(rng.interface || '(global)') + '</td>' +
|
||||
'<td>' + escHtml(rng.start) + '</td><td>' + escHtml(rng.end) + '</td>' +
|
||||
'<td>' + escHtml(rng.lease_time || '1h') + '</td>' +
|
||||
'<td><form hx-delete="/api/dhcp/ranges" hx-encoding="json" hx-vals=\'{"interface": "' + escAttr(rng.interface || '') + '", "start": "' + escAttr(rng.start) + '", "end": "' + escAttr(rng.end) + '"}\' hx-swap="none" hx-confirm="Remove DHCP range ' + escHtml(rng.start) + ' - ' + escHtml(rng.end) + '?" hx-on::after-request="if(evt.detail.successful){ refreshTable(\'/api/dhcp/config\', document.getElementById(\'range-rows\'), renderRanges); showSuccessToast(\'Range removed\'); }">' +
|
||||
'<button type="submit" class="btn btn-sm btn-danger">Remove</button></form></td></tr>'
|
||||
).join('');
|
||||
};
|
||||
|
||||
const renderStaticLeases = (leases) => {
|
||||
if (!leases.length) return '<tr><td colspan="4" class="text-muted text-sm">No static leases configured</td></tr>';
|
||||
return leases.map(lease =>
|
||||
'<tr><td>' + escHtml(lease.mac) + '</td><td>' + escHtml(lease.ip) + '</td>' +
|
||||
'<td>' + escHtml(lease.hostname || '-') + '</td>' +
|
||||
'<td><form hx-delete="/api/dhcp/static-lease/' + encodeURIComponent(lease.mac) + '" hx-swap="none" hx-confirm="Remove lease ' + escHtml(lease.mac) + '?" hx-on::after-request="if(evt.detail.successful){ refreshTable(\'/api/dhcp/config\', document.getElementById(\'lease-rows\'), renderStaticLeases); showSuccessToast(\'Lease removed\'); }">' +
|
||||
'<button type="submit" class="btn btn-sm btn-danger">Remove</button></form></td></tr>'
|
||||
).join('');
|
||||
};
|
||||
|
||||
const renderDnsRecords = (records) => {
|
||||
if (!records.length) return '<tr><td colspan="3" class="text-muted text-sm">No custom DNS records</td></tr>';
|
||||
return records.map(rec =>
|
||||
'<tr><td><strong>' + escHtml(rec.name || 'unnamed') + '</strong></td>' +
|
||||
'<td class="text-sm">' + escHtml(rec.address || '-') + '</td>' +
|
||||
'<td><form hx-delete="/api/dhcp/dns-record/' + encodeURIComponent(rec.name) + '" hx-swap="none" hx-confirm="Remove DNS record ' + escHtml(rec.name || 'unnamed') + '?" hx-on::after-request="if(evt.detail.successful){ refreshTable(\'/api/dhcp/config\', document.getElementById(\'dns-rows\'), renderDnsRecords); showSuccessToast(\'Record removed\'); }">' +
|
||||
'<button type="submit" class="btn btn-sm btn-danger">Remove</button></form></td></tr>'
|
||||
).join('');
|
||||
};
|
||||
|
||||
const renderDomains = (domains) => {
|
||||
if (!domains.length) return '<tr><td colspan="6" class="text-muted text-sm">No proxy domains configured. Add a domain to start terminating SSL.</td></tr>';
|
||||
return domains.map(d => {
|
||||
let certHtml = '<span class="badge badge-danger">' + (d.cert_status || 'No cert') + '</span>';
|
||||
if (d.cert_status === 'expired') certHtml = '<span class="badge badge-danger">Expired</span>';
|
||||
else if (d.cert_status === 'valid' || d.cert_status === 'active') certHtml = '<span class="badge badge-success">Valid</span>';
|
||||
else if (typeof d.days_remaining === 'number') {
|
||||
if (d.days_remaining <= 0) certHtml = '<span class="badge badge-danger">Expired</span>';
|
||||
else if (d.days_remaining <= 30) certHtml = '<span class="badge badge-warning">' + d.days_remaining + 'd</span>';
|
||||
else certHtml = '<span class="badge badge-success">Valid</span>';
|
||||
}
|
||||
return '<tr><td><strong>' + escHtml(d.domain) + '</strong></td>' +
|
||||
'<td>' + escHtml(d.backend_host || '-') + '</td>' +
|
||||
'<td>' + (d.backend_port || '-') + '</td>' +
|
||||
'<td><span class="badge badge-info">' + escHtml(d.protocol || 'http') + '</span></td>' +
|
||||
'<td>' + certHtml + '</td>' +
|
||||
'<td><div class="flex gap-2">' +
|
||||
'<button class="btn btn-sm btn-outline" onclick="openEditDomainModal(\'' + escAttr(d.domain) + '\', ' + JSON.stringify(d) + ')">Edit</button>' +
|
||||
'<form hx-delete="/api/proxy/domains/' + escAttr(d.domain) + '" hx-swap="none" hx-confirm="Remove proxy for ' + escHtml(d.domain) + '?" hx-on::after-request="if(evt.detail.successful){ refreshTable(\'/api/proxy/domains\', document.getElementById(\'domain-rows\'), renderDomains); showSuccessToast(\'Domain removed\'); }">' +
|
||||
'<button type="submit" class="btn btn-sm btn-danger">Delete</button></form></div></td></tr>';
|
||||
}).join('');
|
||||
};
|
||||
|
||||
const renderPeers = (peers) => {
|
||||
if (!peers.length) return '<tr><td colspan="7" class="text-muted text-sm">No peers configured. Add a peer above.</td></tr>';
|
||||
return peers.map(peer =>
|
||||
'<tr><td><span class="status-dot ' + (peer.latest_handshake ? 'status-up' : 'status-down') + '"></span>' +
|
||||
'<strong>' + escHtml(peer.name || 'unnamed') + '</strong></td>' +
|
||||
'<td style="font-family:monospace;font-size:11px;">' + escHtml((peer.public_key || 'N/A').substring(0, 20)) + '...</td>' +
|
||||
'<td class="text-sm">' + escHtml(peer.allowed_ips || '-') + '</td>' +
|
||||
'<td class="text-sm">' + escHtml(peer.endpoint || '-') + '</td>' +
|
||||
'<td class="text-sm">' + escHtml(peer.latest_handshake || 'Never') + '</td>' +
|
||||
'<td class="text-sm"><div>Recv: ' + escHtml(peer.transfer_recv || '0') + '</div><div>Sent: ' + escHtml(peer.transfer_sent || '0') + '</div></td>' +
|
||||
'<td><div class="flex gap-2">' +
|
||||
'<button class="btn btn-sm btn-outline" onclick="downloadPeerConfig(\'' + escAttr(peer.name) + '\')">Config</button>' +
|
||||
'<form hx-delete="/api/wireguard/peers/' + encodeURIComponent(peer.name) + '" hx-swap="none" hx-confirm="Remove peer ' + escHtml(peer.name) + '?" hx-on::after-request="if(evt.detail.successful){ refreshTable(\'/api/wireguard/peers\', document.getElementById(\'peer-rows\'), renderPeers); showSuccessToast(\'Peer removed\'); }">' +
|
||||
'<button type="submit" class="btn btn-sm btn-danger">Remove</button></form></div></td></tr>'
|
||||
).join('');
|
||||
};
|
||||
|
||||
const renderCerts = (certs) => {
|
||||
if (!certs.length) return '<tr><td colspan="5" class="text-muted text-sm">No certificates found. Issue a certificate to get started.</td></tr>';
|
||||
return certs.map(cert => {
|
||||
const days = cert.days_remaining;
|
||||
let badgeHtml;
|
||||
if (cert.expired || (days !== undefined && days <= 0)) {
|
||||
badgeHtml = '<span class="badge badge-danger">Expired' + (days !== undefined ? ' (' + days + 'd ago)' : '') + '</span>';
|
||||
} else if (days !== undefined && days <= 30) {
|
||||
badgeHtml = '<span class="badge badge-warning">' + days + ' days</span>';
|
||||
} else {
|
||||
badgeHtml = '<span class="badge badge-success">' + (days !== undefined ? days + ' days' : 'N/A') + '</span>';
|
||||
}
|
||||
return '<tr><td><strong>' + escHtml(cert.domain || 'unknown') + '</strong></td>' +
|
||||
'<td class="text-sm">' + escHtml(cert.issuer || '-') + '</td>' +
|
||||
'<td>' + escHtml(cert.expiry || 'N/A') + '</td>' +
|
||||
'<td>' + badgeHtml + '</td>' +
|
||||
'<td><form hx-post="/api/certs/' + escAttr(cert.domain) + '/renew" hx-swap="none" hx-on::after-request="if(evt.detail.successful){ refreshTable(\'/api/certs/list\', document.getElementById(\'cert-rows\'), renderCerts); showSuccessToast(\'Renewal started for ' + escHtml(cert.domain) + '\'); }">' +
|
||||
'<button type="submit" class="btn btn-sm btn-outline">Renew</button></form></td></tr>';
|
||||
}).join('');
|
||||
};
|
||||
|
||||
const renderInterfaces = (interfaces) => {
|
||||
if (!interfaces.length) return '<tr><td colspan="5" class="text-muted text-sm">No interfaces found</td></tr>';
|
||||
return interfaces.map(iface => {
|
||||
const zoneOptions = (iface.zones || []).map(z =>
|
||||
'<option value="' + escAttr(z) + '"' + (z === iface.zone ? ' selected' : '') + '>' + escHtml(z) + '</option>'
|
||||
).join('');
|
||||
return '<tr><td><strong>' + escHtml(iface.name) + '</strong></td>' +
|
||||
'<td class="text-muted">' + escHtml(iface.mac || 'N/A') + '</td>' +
|
||||
'<td>' + (iface.ips && iface.ips.length ? iface.ips.map(ip => escHtml(ip)).join(', ') : 'N/A') + '</td>' +
|
||||
'<td><span class="status-dot ' + (iface.state === 'up' ? 'status-up' : 'status-down') + '"></span>' +
|
||||
(iface.state === 'up' ? 'Up' : 'Down') + '</td>' +
|
||||
'<td><select hx-on::change="assignZone(\'' + escAttr(iface.name) + '\', this)">' + zoneOptions + '</select></td></tr>';
|
||||
}).join('');
|
||||
};
|
||||
|
||||
const assignZone = (ifaceName, selectEl) => {
|
||||
fetch('/api/firewall/zones/' + encodeURIComponent(selectEl.value) + '/interfaces', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({ interfaces: [ifaceName] })
|
||||
})
|
||||
.then(r => {
|
||||
if (r.ok) {
|
||||
showSuccessToast(ifaceName + ' assigned to ' + selectEl.value);
|
||||
refreshTable('/api/firewall/interfaces', document.getElementById('interface-list'), renderInterfaces);
|
||||
}
|
||||
else return r.json().then(j => { throw new Error(j.error || r.statusText); });
|
||||
})
|
||||
.catch(e => { showErrorToast(e.message); });
|
||||
};
|
||||
|
||||
const escHtml = (s) => {
|
||||
const div = document.createElement('div');
|
||||
div.appendChild(document.createTextNode(s));
|
||||
return div.innerHTML;
|
||||
};
|
||||
|
||||
const escAttr = (s) => {
|
||||
return String(s).replace(/&/g,'&').replace(/"/g,'"').replace(/'/g,''').replace(/</g,'<').replace(/>/g,'>');
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user