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(endpoint, {
        credentials: 'include'
    })
    .then(response => {
        if (!response.ok)
            throw new Error('fetching keys failed');
        return response.json();
    })
    .then(data => {
        update(Object.values(data));
    })
    .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';
    });
});