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/base.html

@@ -9,7 +9,8 @@ body {
     margin: 1em auto;
 }
 code {
-    background-color: #eeeeee;
+    background-color: #f8f8f8;
+    padding: 0.1em 0.25em;
 }
 details {
     margin: 0.5em 1em;
@@ -31,18 +32,22 @@ input:read-only {
     border-style: dotted;
 }
 pre {
-    background-color: #eeeeee;
+    background-color: #f8f8f8;
     border: 1px solid #cccccc;
     padding: 0.5em;
 }
+table {
+    border-spacing: 0 0.1em;
+}
 th {
     text-align: left;
 }
 th, td {
     padding-right: 1em;
+    vertical-align: middle;
 }
-th {
-    border-bottom: 1px solid black;
+tbody > tr:hover {
+    background-color: #f8f8f8;
 }
 ul.keys {
     margin: 0 0.5em 0.5em;

web/templates/index.html

@@ -3,7 +3,7 @@
 <section>
 <dl>
 <dt><a href="{{ url_for('vpn.index') }}">VPN</a>
-<dd>urejanje ključev za WireGuard VPN
+<dd>urejanje ključev za oddaljeni dostop
 <dt><a href="{{ url_for('rules.manage') }}">Pravila</a>
 <dd>vklop / izklop pravil za požarni zid
 </dl>
@@ -20,6 +20,8 @@
 <dd>pravila za posredovanje prometa
 <dt><a href="{{ url_for('config.edit', name='netmap') }}">Netmap</a>
 <dd>statične 1:1 preslikave naslovov za strežniška omrežja
+<dt><a href="{{ url_for('vpn.custom') }}">VPN po meri</a>
+<dd>urejanje ključev za oddaljeni dostop do posebnih omrežij
 <dt><a href="{{ url_for('config.index') }}">Nastavitve</a>
 <dd>nastavitve aplikacije FRIwall
 </dl>

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 %}