Advanced networking: per-peer site subnets (site-to-site), per-peer client routes, peer isolation option, client setup guide

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>

app/templates/peer_detail.html

@@ -2,6 +2,9 @@
 {% block title %}{{ peer.name }} - WireGuard Admin{% endblock %}
 {% block breadcrumbs %}<span>/</span> <a href="/peers" class="text-blue-600 hover:underline">Peers</a> <span>/</span> <span>{{ peer.name }}</span>{% endblock %}
 {% block content %}
+{% if error %}
+<p class="mb-4 rounded-md bg-red-50 px-3 py-2 text-sm text-red-700">{{ error }}</p>
+{% endif %}
 <div class="mb-6 flex items-center justify-between">
   <h1 class="text-2xl font-bold">{{ peer.name }}</h1>
   <div class="flex gap-2">
@@ -93,6 +96,16 @@
                value="{{ '%.1f' % (peer.quota_bytes / 1073741824) if peer.quota_bytes else '' }}"
                class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
       </label>
+      <label class="block text-sm font-medium text-slate-600">Site subnets behind this peer
+        <input name="extra_allowed_ips" value="{{ peer.extra_allowed_ips }}" placeholder="e.g. 192.168.5.0/24"
+               class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
+        <span class="mt-1 block text-xs text-slate-400">Server-side AllowedIPs: routes these networks to this peer (site-to-site). Peer must forward traffic.</span>
+      </label>
+      <label class="block text-sm font-medium text-slate-600">Client routes (AllowedIPs)
+        <input name="client_allowed_ips" value="{{ peer.client_allowed_ips }}" placeholder="server default"
+               class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
+        <span class="mt-1 block text-xs text-slate-400">What this client routes through the tunnel. Empty = server default. Full tunnel: 0.0.0.0/0, ::/0</span>
+      </label>
       <button type="submit"
               class="rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700">
         Save
@@ -153,6 +166,46 @@
   <pre id="client-config" class="overflow-x-auto rounded-lg bg-slate-900 p-4 text-xs leading-relaxed text-slate-200">{{ client_config }}</pre>
 </div>
 
+<div class="mt-4 rounded-xl bg-white p-5 shadow-sm">
+  <h3 class="mb-3 text-xs font-semibold uppercase tracking-wide text-slate-400">Client setup guide</h3>
+  <div class="space-y-5 text-sm">
+    <div>
+      <h4 class="mb-2 font-semibold text-slate-700">Linux (wg-quick)</h4>
+      <pre class="overflow-x-auto rounded-lg bg-slate-900 p-4 text-xs leading-relaxed text-slate-200"># Install wireguard tools
+sudo apt install wireguard        # Debian/Ubuntu
+sudo dnf install wireguard-tools  # Fedora/RHEL
+
+# Save the config (downloaded or copied from above)
+sudo mv {{ peer.name }}.conf /etc/wireguard/{{ peer.name }}.conf
+sudo chmod 600 /etc/wireguard/{{ peer.name }}.conf
+
+# Bring the tunnel up / down
+sudo wg-quick up {{ peer.name }}
+sudo wg-quick down {{ peer.name }}
+
+# Start automatically at boot
+sudo systemctl enable --now wg-quick@{{ peer.name }}
+
+# Verify: check handshake and ping the server
+sudo wg show
+ping {{ server_tunnel_ip }}</pre>
+    </div>
+    <div>
+      <h4 class="mb-2 font-semibold text-slate-700">Linux (NetworkManager)</h4>
+      <pre class="overflow-x-auto rounded-lg bg-slate-900 p-4 text-xs leading-relaxed text-slate-200">nmcli connection import type wireguard file {{ peer.name }}.conf
+nmcli connection up {{ peer.name }}</pre>
+    </div>
+    <div>
+      <h4 class="mb-2 font-semibold text-slate-700">macOS / Windows</h4>
+      <p class="text-slate-500">Install the official WireGuard app, then Import Tunnel from File and select the downloaded <span class="font-mono text-xs">{{ peer.name }}.conf</span>, or Add Empty Tunnel and paste the config above.</p>
+    </div>
+    <div>
+      <h4 class="mb-2 font-semibold text-slate-700">iOS / Android</h4>
+      <p class="text-slate-500">Install the WireGuard app, tap Add Tunnel, then Create from QR code and scan the QR code above.</p>
+    </div>
+  </div>
+</div>
+
 <script>
 function copyConfig(btn) {
   navigator.clipboard.writeText(document.getElementById("client-config").textContent)

app/templates/peers.html

@@ -39,6 +39,14 @@
       <input name="expires_at" type="datetime-local"
              class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
     </label>
+    <label class="block text-sm font-medium text-slate-600">Site subnets
+      <input name="extra_allowed_ips" placeholder="e.g. 192.168.5.0/24"
+             class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
+    </label>
+    <label class="block text-sm font-medium text-slate-600">Client routes
+      <input name="client_allowed_ips" placeholder="server default"
+             class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
+    </label>
     <div class="flex items-end">
       <button type="submit"
               class="w-full rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700">

app/templates/settings.html

@@ -41,6 +41,10 @@
       <dt class="text-slate-500">Keepalive</dt>
       <dd class="font-medium">{{ settings.wg_persistent_keepalive }}s</dd>
     </div>
+    <div class="flex justify-between gap-4 py-3">
+      <dt class="text-slate-500">Peer isolation</dt>
+      <dd class="font-medium">{{ "on" if settings.wg_peer_isolation else "off" }}</dd>
+    </div>
   </dl>
   <p class="mt-4 text-xs text-slate-400">Settings are read from environment variables / .env and require a restart to change.</p>
 </div>