Build Housecarl 0.1.0: the nftables firewall manager

Zones, address sets (IPv4 and IPv6 mixed, dynamic sets with timeouts) and
services, ordered rules in the early, input, forward and output chains,
port forwards with hairpin NAT and IPv6 pinholes, source NAT, redirects,
and switchable built-ins (loopback, conntrack, ICMPv6, antispoofing, MSS
clamping, DHCPv6 client, flowtable). Every change is validated, checked
with nft -c and applied in one transaction to Housecarl's own table,
inet housecarl; changes made over the network roll back unless
confirmed, and the confirmed ruleset is loaded at boot by
housecarl-ruleset.service. An empty configuration applies nothing.

Also: hit counters and the drop log (nflog), 'hc import' of an existing
nftables ruleset and 'hc takeover', the hc CLI, the REST API and the web
UI, users, scoped tokens (sets:write:NAME), the audit log, the web UI's
certificate through Jarl, Debian packages, docs, unit tests with real
nft 1.1.3, and an e2e test with real traffic (71 checks).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

internal/web/static/assets/pages/sets.js

@@ -0,0 +1,78 @@
+// Address sets, and dynamic sets' entries.
+import { h, mount, table, modal, errorBox, field, input, checkbox, confirmDialog, badge, toast } from "../ui.js";
+import { get, api, change, can } from "../api.js";
+import { rerender } from "../app.js";
+import { listEditor, fmtSeconds, parseSeconds } from "../widgets.js";
+
+export async function render(el) {
+  const sets = await get("/sets");
+  const write = can("config", true);
+  mount(el,
+    h("div", { class: "page-head" },
+      h("div", { class: "grow" }, h("h1", null, "Address sets"), h("div", { class: "muted" }, "Named lists of IPv4 and IPv6 addresses, prefixes and ranges, mixed. A dynamic set takes entries at run time, each with a timeout (a captive portal's signed-in clients).")),
+      write ? h("div", { class: "actions" }, h("button", { class: "primary", onclick: () => setDialog(null) }, "Add set")) : null),
+    h("div", { class: "panel" }, table([
+      { label: "Name", render: (s) => h("strong", null, s.name) },
+      { label: "Entries", render: (s) => s.dynamic ? [badge("dynamic", "accent"), s.timeout ? " timeout " + fmtSeconds(s.timeout) : "", " ",
+        h("button", { class: "small", onclick: () => entries(s) }, "Entries…")] : h("span", { class: "mono small" }, s.entries.join(", ")) },
+      { label: "Comment", render: (s) => s.comment },
+      write ? { label: "", tdClass: "actions-cell", render: (s) => [
+        h("button", { class: "small reveal", onclick: () => setDialog(s) }, "Edit"), " ",
+        h("button", { class: "small reveal", onclick: () => del(s) }, "Delete")] } : null,
+    ].filter(Boolean), sets, { empty: "No sets yet." })));
+}
+
+async function del(s) {
+  if (!await confirmDialog("Delete set", "Delete set " + s.name + "?", "Delete", "danger")) return;
+  try { await change("DELETE", "/sets/" + s.id); rerender(); } catch (e) { modal("Not deleted", errorBox(e)); }
+}
+
+async function setDialog(s) {
+  s = s || { entries: [] };
+  const name = input({ value: s.name || "", placeholder: "trusted" });
+  const list = listEditor(s.entries, { placeholder: "10.0.10.0/24, 2001:db8:10::/64, 10.0.0.1-10.0.0.9", addLabel: "Add entry" });
+  const dynamic = checkbox("dynamic: entries are added at run time", s.dynamic);
+  const timeout = input({ value: s.timeout ? fmtSeconds(s.timeout) : "", placeholder: "1h, 1d (none: until removed)", class: "short" });
+  const comment = input({ value: s.comment || "" });
+  const err = h("div");
+  await modal(s.id ? "Edit set " + s.name : "Add set", h("div", null, h("div", { class: "form-grid" },
+    field("Name", name), field("Entries", list), h("label"), dynamic, field("Entry timeout", timeout, "A dynamic set's default."), field("Comment", comment)), err), [
+    { label: "Cancel", value: null },
+    { label: s.id ? "Save" : "Add set", kind: "primary", onclick: async () => {
+      mount(err);
+      const t = parseSeconds(timeout.value);
+      if (t === null) { mount(err, h("div", { class: "msg err" }, "Write the timeout as 1h, 30m or 1d.")); return false; }
+      try {
+        await change(s.id ? "PATCH" : "POST", s.id ? "/sets/" + s.id : "/sets", { name: name.value.trim(), entries: list.value(), dynamic: dynamic.input.checked, timeout: t, comment: comment.value.trim() });
+        rerender();
+        return true;
+      } catch (e) { mount(err, errorBox(e)); return false; }
+    } },
+  ], { wide: true, sticky: true });
+}
+
+// entries shows and changes a dynamic set's entries.
+async function entries(s) {
+  const body = h("div");
+  const write = can("sets", true);
+  const draw = async () => {
+    const es = await get("/sets/" + encodeURIComponent(s.name) + "/elements");
+    const addr = input({ placeholder: "10.0.30.5 or 2001:db8::5", class: "mono" });
+    const t = input({ placeholder: s.timeout ? fmtSeconds(s.timeout) : "none", class: "short" });
+    mount(body,
+      table([
+        { label: "Address", render: (e) => h("span", { class: "mono" }, e.address) },
+        { label: "Expires in", render: (e) => e.timeout ? fmtSeconds(e.timeout) : "never" },
+        write ? { label: "", render: (e) => h("button", { class: "small", onclick: async () => {
+          try { await api("DELETE", "/sets/" + encodeURIComponent(s.name) + "/elements/" + encodeURIComponent(e.address)); draw(); } catch (x) { toast(x.message, "err"); }
+        } }, "Remove") } : null,
+      ].filter(Boolean), es, { empty: "No entries." }),
+      write ? h("div", { class: "filter-row" }, addr, t, h("button", { class: "primary small", onclick: async () => {
+        const secs = parseSeconds(t.value);
+        if (secs === null) { toast("Write the timeout as 1h, 30m or 1d", "err"); return; }
+        try { await api("POST", "/sets/" + encodeURIComponent(s.name) + "/elements", { body: { address: addr.value.trim(), timeout: secs } }); draw(); } catch (x) { toast(x.message, "err"); }
+      } }, "Add")) : null);
+  };
+  await draw();
+  await modal("Entries of " + s.name, body, [{ label: "Close", value: null }], { wide: true });
+}