Files
intrusion-detection/app/templates/whitelist.html
T

111 lines
3.1 KiB
HTML

{% extends "base.html" %} {% block title %}Whitelist — Intrusion Detection{%
endblock %} {% block content %}
<h1>Whitelist</h1>
<p class="muted">
Provider whitelists (from the router snapshot). Never add a whole cloud
provider to the blocklist.
</p>
<div class="panel">
<div class="panel-head"><h2>Add / remove CIDR</h2></div>
<div class="panel-actions" style="margin-top: 0">
<select id="wl-name">
{% for name in whitelist_names %}
<option value="{{ name }}">{{ name }}</option>
{% endfor %}
</select>
<input
id="wl-address"
placeholder="CIDR, e.g. 1.2.3.0/24"
style="min-width: 220px"
/>
<button class="btn primary" id="wl-add-btn">Add</button>
<button class="btn danger" id="wl-remove-btn">Remove</button>
</div>
</div>
<div id="whitelists"></div>
{% endblock %} {% block scripts %}
<script>
async function loadWhitelists() {
try {
const data = await api("/api/whitelist");
const box = document.getElementById("whitelists");
box.innerHTML = "";
for (const name of data.names || []) {
const w = data.whitelists[name] || {};
const rows = [];
for (const version of ["ipv4", "ipv6"]) {
const entries = (w[version] || []).sort();
rows.push(
el(
"tr",
el("td", { text: version }),
el("td", { class: "mono", text: entries.join(", ") || "—" }),
),
);
}
box.append(
el(
"div",
{ class: "panel" },
el(
"div",
{ class: "panel-head" },
el("h2", {
text: `${name} (${(w.ipv4 || []).length + (w.ipv6 || []).length})`,
}),
),
el(
"table",
{ class: "table" },
el(
"thead",
{},
el(
"tr",
{},
el("th", { text: "Version" }),
el("th", { text: "Addresses" }),
),
),
el("tbody", {}, ...rows),
),
),
);
}
} catch (e) {
toast(e.message, "error");
}
}
async function act(action) {
const name = document.getElementById("wl-name").value;
const address = document.getElementById("wl-address").value.trim();
if (!address) {
toast("Enter a CIDR", "warn");
return;
}
try {
await api("/api/whitelist/update", {
method: "POST",
body: { name, address, action },
});
toast(`${action} ${address} on ${name}`, "ok");
document.getElementById("wl-address").value = "";
loadWhitelists();
} catch (e) {
toast(e.message, "error");
}
}
document
.getElementById("wl-add-btn")
.addEventListener("click", () => act("add"));
document
.getElementById("wl-remove-btn")
.addEventListener("click", () => act("remove"));
loadWhitelists();
</script>
{% endblock %}