vpn: add support for custom keys

Custom keys are created by admin and specify networks directly,
bypassing AD permissions. They are intended to join managed devices
into networks where users are not allowed to create keys themselves.

Also comprehend a set directly.

web/templates/vpn/custom.html

@@ -0,0 +1,68 @@
+{% extends 'base.html' %}
+{% block header %}
+<style>
+td > input {
+    width: 100%;
+}
+</style>
+{% endblock %}
+
+{% block content %}
+<p>
+Urejate ključe WireGuard s posebnimi dostopi.
+
+<table class="keys">
+<thead>
+<th><th>Ključ<th>IP<th>IPv6<th>Naprava<th>Omrežja
+<tbody>
+</table>
+
+<section>
+<h1>Nov ključ</h1>
+<form id="request">
+<p>
+<label for="name">Ime naprave</label><br>
+<input type="text" id="name" name="name" pattern="[-._A-Za-z0-9 ]*" maxlength="32" placeholder="A-Z a-z 0-9 . _ - " />
+<p>
+<label for="networks">Omrežja</label><br>
+<select id="networks" name="networks" multiple style="width: 20em;">
+{% for network in ipsets %}
+<option>{{ network }}
+{% endfor %}
+</select>
+<p>
+<button id="submit" type="submit">Ustvari ključ</button>
+</form>
+
+<section id="settings" style="display: none;">
+<p>
+Nastavitve za povezavo so izpisane spodaj. Za nov ključ osvežite to stran.
+
+<section style="display: flex; align-items: center;">
+<pre style="flex-grow: 3; margin: 0;"><a id="download" href="" style="float: right; padding: 0.5em;">Prenesi</a><code id="config"></code></pre>
+<div id="qr" style="flex-grow: 1; text-align: center;"></div>
+</section>
+
+</section>
+</section>
+
+<script type="text/javascript" src="{{ url_for('static', filename='qrcode.js') }}"></script>
+<script type="text/javascript" src="{{ url_for('static', filename='wireguard.js') }}"></script>
+<script type="text/javascript" src="{{ url_for('static', filename='vpn.js') }}"></script>
+<script type="text/javascript">
+const endpoint = 'list-custom';
+function update(keys) {
+    const keytab = document.querySelector('table.keys > tbody');
+    keytab.innerHTML = ''
+    for (const key of keys) {
+        const row = keytab.insertRow();
+        row.insertCell().innerHTML = '<button onclick="delKey(\'' + key.key + '\');">✖</button>';
+        row.insertCell().innerHTML = '<code>' + key.key + '</code>';
+        row.insertCell().innerHTML = key.ip;
+        row.insertCell().innerHTML = key.ip6 || '';
+        row.insertCell().innerHTML = key.name;
+        row.insertCell().innerHTML = key.networks;
+    }
+}
+</script>
+{% endblock %}

web/templates/vpn/index.html

@@ -68,12 +68,37 @@ V nastavitvah lahko dodate ali odstranite vnose <code>AllowedIPs</code>. Ti dolo
 <h1>Ključi</h1>
 <p>
 Če ključa ne uporabljamo, smo ga izgubili ali so nam ga ukradli, ga tukaj odstranimo. Trenutno so registrirani ključi:
-<ul class="keys" style="list-style: none;"></ul>
-<p class="keys" id="active-key-warning" style="margin-top: 0;">
+
+<table class="keys">
+<thead><th><th>Ključ<th>IP<th>IPv6<th>Naprava
+<tbody>
+</table>
+
+<p class="keys" id="active-key-warning">
 <font color="red"><sup>★</sup></font> Ta ključ uporablja trenutna povezava. Če ga odstranite, bo prekinjena.
 </section>
 
 <script type="text/javascript" src="{{ url_for('static', filename='qrcode.js') }}"></script>
 <script type="text/javascript" src="{{ url_for('static', filename='wireguard.js') }}"></script>
 <script type="text/javascript" src="{{ url_for('static', filename='vpn.js') }}"></script>
+<script type="text/javascript">
+const endpoint = 'list';
+function update(keys) {
+    const keytab = document.querySelector('table.keys > tbody');
+    const warning = document.querySelector('p#active-key-warning');
+    keytab.innerHTML = ''
+    warning.hidden = true;
+    for (const key of keys) {
+        const row = keytab.insertRow();
+        row.insertCell().innerHTML = '<button onclick="delKey(\'' + key.key + '\');">✖</button>';
+        row.insertCell().innerHTML = '<code>' + key.key + '</code>';
+        row.insertCell().innerHTML = key.ip;
+        row.insertCell().innerHTML = key.ip6 || '';
+        row.insertCell().innerHTML = key.name + (key.active ? '<font color="red">★</font>' : '');
+        if (key.active)
+            warning.hidden = false;
+    }
+    document.querySelector('section.keys').style.display = (keys.length ? 'unset' : 'none');
+}
+</script>
 {% endblock %}

web/templates/vpn/wg-fri.conf

@@ -1,5 +1,5 @@
 [Interface]
-# {{ timestamp }} {{ current_user['username'] }} {{ name }}
+# {{ timestamp }} {{ user }} {{ name }}
 # PublicKey = {{ pubkey }}
 PrivateKey = # paste private key here
 Address = {{ ip }}{% if ip6 %}, {{ ip6 }}{% endif %}