friwall/web/templates/vpn/index.html

{% extends 'base.html' %}

{% block content %}
<p>
Za oddeljano povezavo v omrežje FRI namestite <a href="https://www.wireguard.com/install/">WireGuard</a>, ustvarite ključ in sledite napotkom za posamezni sistem.

<details>
<summary>Windows / Mac</summary>
<p>
Zaženite WireGuard, kliknite <em>Import tunnel(s) from file</em> in izberite preneseno datoteko z nastavitvami. VPN nato (de)aktivirate s klikom na gumb <em>(De)activate</em>.
</details>

<details>
<summary>Android / iOS</summary>
<p>
Zaženite WireGuard, izberite <em>Scan from QR code</em> in skenirajte kodo, prikazano ob izdelavi novega ključa.
</details>

<details>
<summary>Linux / BSD</summary>
<p>
Nastavitve shranite (kot skrbnik) v <code>/etc/wireguard/wg-fri.conf</code>. VPN nato (de)aktivirate s <code>sudo wg-quick up wg-fri</code> oz. <code>sudo wg-quick down wg-fri</code>. Povezavo lahko uvozite tudi v <a href="https://www.xmodulo.com/wireguard-vpn-network-manager-gui.html">NetworkManager</a> ali podobno.
</details>

<section id="new-key">
<h1>Nov ključ</h1>

<form id="request">
<p>
Vnesite poljubno oznako in kliknite <em>Ustvari ključ</em>. Če vklopite prvo opcijo, bo vaš računalnik čez VPN usmeril ves mrežni promet, ne le tistega, ki je namenjen strežnikom na FRI. Če izklopite drugo opcijo, bodo nekatere storitve dostopne le prek naslova IP. Če ste v dvomih, pustite privzete nastavitve.

<p>
<input id="name" name="name" pattern="[\w ]*" maxlength="16" placeholder="Ime naprave" />
<br>
<input type="checkbox" id="add_default" name="add_default" />
<label for="add_default">Uporabi VPN za ves promet</label>
<br>
<input type="checkbox" id="use_dns" name="use_dns" checked />
<label for="use_dns">Uporabi imenske strežnike FRI</label>
<br>
<button id="submit" type="submit">Ustvari ključ</button>
</form>

<section id="settings" style="display: none;">
<p>
Nastavitve za povezavo so izpisane spodaj. Zasebni ključ varujte enako skrbno kot geslo, s katerim ste se prijavili; priporočena je raba šifriranega diska. Za nov ključ osvežite to stran.

<section style="display: flex; align-items: center;">
<pre style="flex-grow: 3;"><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>

<p>
V nastavitvah lahko dodate ali odstranite vnose <code>AllowedIPs</code>. Ti določajo naslove, do katerih bo vaš računalnik dostopal skozi omrežje FRI. Da VPN uporabite za ves promet, dodajte vrstice <code>AllowedIPs = 0.0.0.0/0</code>. Če ne želite uporabljati imenskih strežnikov FRI, odstranite vnos <code>DNS</code>; to lahko vpliva na dostopnost nekaterih storitev.
</section>
</section>

<section class="keys" style="display: none;">
<h1>Obstoječi ključi</h1>
<p>
Za vsako napravo ustvarite nov ključ. Ključe, ki jih ne uporabljate, lahko tukaj odstranite. Trenutno so registrirani ključi:
<ul class="keys" style="list-style: none;"></ul>
<p class="keys" id="active-key-warning" style="margin-top: 0;">
</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">
function del_key(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 => {
        // reload key list
        window.dispatchEvent(new Event('load'));
    })
    .catch(error => console.error(error));
}

function fetch_keys() {
    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.getElementById('active-key-warning');
        warning.innerHTML = '';

        for (let key of Object.values(data)) {
            var a = document.createElement('a');
            a.innerText = '✖';
            a.href = '';
            a.addEventListener('click', event => {
                del_key(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.active ? '<font color="red"><sup>★</sup></font> ' : ' ') +
                key.name;
            li.prepend(a);
            keys.appendChild(li);
            if (key.active)
                warning.innerHTML = '<font color="red"><sup>★</sup></font>Ta ključ uporablja aktivna povezava. Če ga odstranite, bo prekinjena.';
        }
        document.querySelector('section.keys').style.display = (Object.keys(data).length ? 'unset' : 'none');
    })
    .catch(error => console.error(error));
}

window.addEventListener('load', fetch_keys);

const request = document.getElementById('request');
request.addEventListener('submit', event => {
    event.preventDefault();
    const name = document.getElementById('name');
    const key = wireguard.generateKeypair();
    const settings = document.getElementById('settings');
    const submit = document.getElementById('submit');
    const use_dns = document.getElementById('use_dns');
    const add_default = document.getElementById('add_default');

    submit.innerHTML = 'Obdelovanje…';
    submit.disabled = true;
    fetch('new', {
        credentials: 'include',
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            pubkey: key.publicKey,
            name: name.value,
            use_dns: use_dns.checked,
            add_default: add_default.checked,
	})
    })
    .then(response => {
        if (!response.ok) {
            response.text().then(text => {
                settings.innerHTML = response.status + ' ' + response.statusText + ': ' + text;
            });
        } else {
            return response.text();
        }
    })
    .then(text => {
        var complete = text.replace(/PrivateKey = .*/, "PrivateKey = "+key.privateKey).trim();
        document.getElementById("config").innerHTML = complete;

        var blob = new Blob([complete], { type: 'text/plain;charset=utf-8' });
        const link = document.getElementById('download');
        link.download = 'wg-fri.conf';
        link.href = window.URL.createObjectURL(blob);

        var qr = qrcode(0, 'L');
        qr.addData(complete.replace(/#.*\n/g, ''));
        qr.make();
        document.getElementById('qr').innerHTML = qr.createSvgTag(3);

        // reload key list
        fetch_keys();
    })
    .catch(error => {
        settings.innerHTML = error;
    })
    .finally(() => {
        request.style.display = 'none';
        settings.style.display = 'unset';
    });
});
</script>
{% endblock %}