friwall/web/static/vpn.js

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';
    });
});