Add custom peer IP/DNS, inline config view with copy, breadcrumbs, form validation errors

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

app/templates/base.html

@@ -17,6 +17,10 @@
   </form>
 </nav>
 <main>
+<div class="breadcrumbs">
+  <a href="/">Home</a>
+  {% block breadcrumbs %}{% endblock %}
+</div>
 {% block content %}{% endblock %}
 </main>
 {% block scripts %}{% endblock %}

app/templates/dashboard.html

@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% block title %}Dashboard - WireGuard Admin{% endblock %}
+{% block breadcrumbs %}<span>/</span> <span>Dashboard</span>{% endblock %}
 {% block content %}
 <h1>Dashboard</h1>
 <div class="cards">

app/templates/peer_detail.html

@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% block title %}{{ peer.name }} - WireGuard Admin{% endblock %}
+{% block breadcrumbs %}<span>/</span> <a href="/peers">Peers</a> <span>/</span> <span>{{ peer.name }}</span>{% endblock %}
 {% block content %}
 <h1>{{ peer.name }}</h1>
 <div class="cards">
@@ -20,6 +21,7 @@
     </p>
     <form method="post" action="/peers/{{ peer.id }}/update" class="stack">
       <label class="muted">Note <input name="note" value="{{ peer.note }}"></label>
+      <label class="muted">DNS <input name="dns" value="{{ peer.dns }}" placeholder="server default"></label>
       <label class="muted">Quota GiB
         <input name="quota_gib" type="number" step="0.1" min="0" class="narrow"
                value="{{ '%.1f' % (peer.quota_bytes / 1073741824) if peer.quota_bytes else '' }}" placeholder="0 = unlimited">
@@ -41,10 +43,21 @@
   <div class="card">
     <h3>Client config</h3>
     <img src="/peers/{{ peer.id }}/qr" alt="QR code" class="qr">
-    <p><a href="/peers/{{ peer.id }}/config" class="button">Download .conf</a></p>
+    <p><a href="/peers/{{ peer.id }}/config" class="button">Download .conf</a>
+       <button type="button" onclick="copyConfig()">Copy</button></p>
   </div>
 </div>
 
+<div class="card config-card">
+  <h3>{{ peer.name }}.conf</h3>
+  <pre id="client-config">{{ client_config }}</pre>
+</div>
+<script>
+function copyConfig() {
+  navigator.clipboard.writeText(document.getElementById("client-config").textContent);
+}
+</script>
+
 <div class="actions-row">
   <form method="post" action="/peers/{{ peer.id }}/toggle" class="inline">
     <button type="submit">{{ "Disable" if peer.enabled else "Enable" }}</button>

app/templates/peers.html

@@ -1,17 +1,21 @@
 {% extends "base.html" %}
 {% block title %}Peers - WireGuard Admin{% endblock %}
+{% block breadcrumbs %}<span>/</span> <span>Peers</span>{% endblock %}
 {% block content %}
 <h1>Peers</h1>
 
+{% if error %}<p class="error">{{ error }}</p>{% endif %}
 <form method="post" action="/peers" class="add-peer">
   <input name="name" placeholder="Peer name" required>
   <input name="note" placeholder="Note (optional)">
+  <input name="address" placeholder="IP (auto if empty)" class="mid">
+  <input name="dns" placeholder="DNS (default {{ settings.wg_dns }})" class="mid">
   <label class="muted">Quota GiB <input name="quota_gib" type="number" step="0.1" min="0" class="narrow" placeholder="0"></label>
   <label class="muted">Count <input name="count" type="number" min="1" max="50" value="1" class="narrow"></label>
   <label class="muted">Expires <input name="expires_at" type="datetime-local"></label>
   <button type="submit">Add peer(s)</button>
 </form>
-<p class="muted">Count &gt; 1 creates a batch named name-1, name-2, ... Quota 0 = unlimited.</p>
+<p class="muted">Count &gt; 1 creates a batch named name-1, name-2, ... (custom IP ignored). Quota 0 = unlimited.</p>
 
 <table>
   <thead>

app/templates/settings.html

@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% block title %}Settings - WireGuard Admin{% endblock %}
+{% block breadcrumbs %}<span>/</span> <span>Settings</span>{% endblock %}
 {% block content %}
 <h1>Settings</h1>
 <div class="card">