{% 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 %}