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>.

<p>
Povezavo lahko uvozite tudi v NetworkManager z ukazom <code>nmcli connection import type wireguard file wg-fri.conf</code>.
</details>

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

<form id="request">
<p>
Za vsako napravo, ki jo želite povezati v omrežje FRI, ustvarite nov ključ.

<p>
<label for="name">Ime naprave</label><br>
<input id="name" name="name" pattern="[.-_A-Za-z0-9 ]*" maxlength="16" placeholder="A-Z a-z 0-9 . _ - " />
<button id="submit" type="submit">Ustvari ključ</button>
<p>
<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>
</form>

<p>
Privzete nastavitve čez VPN usmerijo le promet, namenjen strežnikom na FRI in UL. Če vklopite prvo opcijo, bo vaš računalnik čez VPN usmeril ves promet. Če izklopite drugo opcijo, bodo nekateri strežniki dostopni le prek naslova IP. Če ste v dvomih, pustite privzete nastavitve. Podrobnejše informacije so v <a href="https://doku.fri.uni-lj.si/vpn#nastavitve">dokumentaciji</a>.

<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>
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.name +
                (key.active ? '<font color="red"><sup>★</sup></font> ' : '');
            li.prepend(a);
            keys.appendChild(li);
            if (key.active)
                warning.innerHTML = '<font color="red"><sup>★</sup></font> Ta ključ uporablja trenutna 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 %}