Add WireGuard, DNS and more to the web UI and router-setup

Web UI: a WireGuard page (tunnels, peers, keys made on the router, client
configs with a QR code, import of wg-quick configs, live status), a DNS page
(records, wildcards, forward zones), interface dropdowns with VLAN devices,
IPv6 options and a local domain. router-setup asks about VLANs, IPv6 and
the domain. The router publishes its own name in DNS and hands the local
domain to DHCP clients; wg and jq are on the router. Includes a script
that takes over antigua's tunnels.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AeFqV9dZrK6nipHkPfyM4F

pkgs/router-webui/templates/network.html

@@ -1,29 +1,44 @@
 {{define "content"}}
 {{with .Data}}
 {{$e := .Errors}}
+<form method="post" action="/vlan">
+  <input type="hidden" name="csrf" value="{{$.CSRF}}">
+  <fieldset>
+    <legend>Interfaces</legend>
+    <table>
+      <tr><th>Interface</th><th>Kind</th><th>Used as</th><th></th></tr>
+      {{range .Devices}}<tr><td>{{.Name}}</td><td>{{.Kind}}</td><td>{{if .Role}}{{.Role}}{{else}}<span class="hint">unused</span>{{end}}</td>
+        <td>{{if .Removable}}<button name="remove" value="{{.Name}}" class="link">remove</button>{{end}}</td></tr>{{end}}
+    </table>
+    <div class="sub">
+      <p class="hint">Add a VLAN (a tagged network on one of the interfaces); it is then offered below.</p>
+      <label>On <select name="parent">{{range .Devices}}{{if eq .Kind "physical"}}<option value="{{.Name}}">{{.Name}}</option>{{end}}{{end}}</select></label>
+      <label>VLAN ID <input name="id" size="5" inputmode="numeric"></label>
+      <button name="add" value="1">Add VLAN</button>
+    </div>
+  </fieldset>
+</form>
+
 <form method="post" action="/network">
   <input type="hidden" name="csrf" value="{{$.CSRF}}">
-  <datalist id="ifaces">{{range .Interfaces}}<option value="{{.}}">{{end}}</datalist>
-  <datalist id="devices">{{range .Devices}}<option value="{{.Name}}">{{end}}</datalist>
 
   <fieldset>
     <legend>System</legend>
     <label>Host name <input name="hostName" value="{{.Form.HostName}}"></label>
     {{with index $e "hostName"}}<span class="field-error">{{.}}</span>{{end}}
-  </fieldset>
-
-  <fieldset>
-    <legend>Interfaces</legend>
-    <table>
-      <tr><th>Interface</th><th>Kind</th><th>Used as</th></tr>
-      {{range .Devices}}<tr><td>{{.Name}}</td><td>{{.Kind}}</td><td>{{if .Role}}{{.Role}}{{else}}<span class="hint">unused</span>{{end}}</td></tr>{{end}}
-    </table>
-    <p class="hint">A VLAN is written <code>interface.id</code>, for example <code>enp2s0.1001</code>; naming one below creates it.</p>
+    <label>Local domain <input name="domain" value="{{.Form.Domain}}" placeholder="home.example.org" spellcheck="false"></label>
+    {{with index $e "domain"}}<span class="field-error">{{.}}</span>{{end}}
+    <p class="hint">Optional. The router answers for it, publishes DHCP reservations in it, and clients get it as
+       their search domain, so <code>nas</code> finds <code>nas.home.example.org</code>.</p>
   </fieldset>
 
   <fieldset>
     <legend>Uplink (WAN)</legend>
-    <label>Interface <input name="wan.interface" list="devices" value="{{.Form.WAN.Interface}}" required></label>
+    <label>Interface
+      <select name="wan.interface">{{$wan := .Form.WAN.Interface}}
+        {{range choices $.Data.Devices $wan}}<option value="{{.}}" {{if eq . $wan}}selected{{end}}>{{.}}</option>{{end}}
+      </select>
+    </label>
     {{with index $e "wan.interface"}}<span class="field-error">{{.}}</span>{{end}}
     <label>Type
       <select name="wan.type">
@@ -47,12 +62,14 @@
     {{with index $e "lans"}}<p class="field-error">{{.}}</p>{{end}}
     <input type="hidden" name="lans" value="{{len .Form.LANs}}">
     <table>
-      <tr><th>Name</th><th>Interface</th><th>VLAN</th><th>Address</th><th>Prefix</th><th>Internet access</th><th>IPv6</th><th>DHCP</th><th>Pool start</th><th>Pool end</th><th>Remove</th></tr>
+      <tr><th>Name</th><th>Interface</th><th>Address</th><th>Prefix</th><th>Internet access</th><th>IPv6</th><th>DHCP</th><th>Pool start</th><th>Pool end</th><th>Remove</th></tr>
       {{range $i, $l := .Form.LANs}}
       <tr>
         <td><input name="lan.{{$i}}.name" value="{{$l.Name}}" size="8" placeholder="new"></td>
-        <td><input name="lan.{{$i}}.interface" list="ifaces" value="{{$l.Interface}}" size="8"></td>
-        <td><input name="lan.{{$i}}.vlan" value="{{$l.VLAN}}" size="4" inputmode="numeric"></td>
+        <td><select name="lan.{{$i}}.interface">{{$cur := $l.Interface}}
+          {{if not $cur}}<option value="" selected></option>{{end}}
+          {{range choices $.Data.Devices $cur}}<option value="{{.}}" {{if eq . $cur}}selected{{end}}>{{.}}</option>{{end}}
+        </select></td>
         <td><input name="lan.{{$i}}.address" value="{{$l.Address}}" size="13"></td>
         <td><input name="lan.{{$i}}.prefix" value="{{$l.Prefix}}" size="2" inputmode="numeric" placeholder="24"></td>
         <td><input type="checkbox" name="lan.{{$i}}.internet" {{if $l.Internet}}checked{{end}}></td>
@@ -62,7 +79,7 @@
         <td><input name="lan.{{$i}}.poolEnd" value="{{$l.PoolEnd}}" size="13"></td>
         <td>{{if $l.Name}}<input type="checkbox" name="lan.{{$i}}.remove">{{end}}</td>
       </tr>
-      {{range $f := list "name" "interface" "vlan" "address" "prefix" "poolStart" "poolEnd"}}{{with index $e (printf "lans[%d].%s" $i $f)}}<tr><td colspan="11" class="field-error">{{$f}}: {{.}}</td></tr>{{end}}{{end}}
+      {{range $f := list "name" "interface" "address" "prefix" "poolStart" "poolEnd"}}{{with index $e (printf "lans[%d].%s" $i $f)}}<tr><td colspan="10" class="field-error">{{$f}}: {{.}}</td></tr>{{end}}{{end}}
       {{end}}
     </table>
     <p class="hint">Fill in the last row to add a LAN. Other LAN settings (zones, a fixed IPv6 address) are kept; edit them under Advanced.</p>