vpn: refactor key handling code

Move JS code for listing, creating and deleting WG keys into a
separate file and improve it somewhat. Also the related Python code.

web/static/vpn.js

@@ -0,0 +1,114 @@
+function delKey(key) {
+    fetch('del', {
+        credentials: 'include',
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ pubkey: key })
+    })
+    .then(response => {
+        if (!response.ok)
+            throw new Error('deleting key failed');
+        return response.text();
+    })
+    .then(data => {
+        fetchKeys();
+    })
+    .catch(error => console.error(error));
+}
+
+function fetchKeys() {
+    fetch('list', {
+        credentials: 'include'
+    })
+    .then(response => {
+        if (!response.ok)
+            throw new Error('fetching keys failed');
+        return response.json();
+    })
+    .then(data => {
+        const keys = document.querySelector('ul.keys');
+        keys.innerHTML = '';
+        const warning = document.querySelector('p#active-key-warning');
+        warning.hidden = true;
+
+        for (let key of Object.values(data)) {
+            var a = document.createElement('a');
+            a.innerText = '✖';
+            a.href = '';
+            a.addEventListener('click', event => {
+                delKey(key.key);
+                event.preventDefault();
+            });
+            var li = document.createElement('li');
+            li.innerHTML = ' ' + (new Date(key.time*1000).toISOString().split('T')[0]) +
+                ' <code>' + key.key + '</code> ' + key.name +
+                (key.active ? '<font color="red"><sup>★</sup></font> ' : '');
+            li.prepend(a);
+            keys.appendChild(li);
+            if (key.active)
+                warning.hidden = false;
+        }
+        document.querySelector('section.keys').style.display = (Object.keys(data).length ? 'unset' : 'none');
+    })
+    .catch(error => console.error(error));
+}
+
+window.addEventListener('load', fetchKeys);
+
+const form = document.querySelector('form#request');
+form.addEventListener('submit', event => {
+    event.preventDefault();
+
+    const inputs = Array.from(document.querySelectorAll('form input'));
+    const settings = document.querySelector('section#settings');
+    const submit = document.querySelector('button#submit');
+
+    const key = wireguard.generateKeypair();
+    const options = Object.fromEntries(inputs.map(e => [e.name, e.type === 'checkbox' ? e.checked : e.value]));
+    const networks = Array.from(document.querySelectorAll('select#networks option:checked')).map(e => e.value);
+
+    submit.innerHTML = 'Obdelovanje…';
+    submit.disabled = true;
+    fetch('new', {
+        credentials: 'include',
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+            pubkey: key.publicKey,
+            options: options,
+            networks: networks,
+        })
+    })
+    .then(response => {
+        if (!response.ok) {
+            response.text().then(text => {
+                settings.innerHTML = response.status + ' ' + response.statusText + ': ' + text;
+            });
+        } else {
+            return response.text();
+        }
+    })
+    .then(text => {
+        const config = text.replace(/PrivateKey = .*/, "PrivateKey = "+key.privateKey).trim();
+        document.querySelector('code#config').innerHTML = config;
+
+        const blob = new Blob([config], { type: 'text/plain;charset=utf-8' });
+        const link = document.getElementById('download');
+        link.download = 'wg-fri.conf';
+        link.href = window.URL.createObjectURL(blob);
+
+        const qr = qrcode(0, 'L');
+        qr.addData(config.replace(/#.*\n/g, ''));
+        qr.make();
+        document.getElementById('qr').innerHTML = qr.createSvgTag(3);
+
+        fetchKeys();
+    })
+    .catch(error => {
+        settings.innerHTML = error;
+    })
+    .finally(() => {
+        form.style.display = 'none';
+        settings.style.display = 'unset';
+    });
+});