friwall/web/templates/vpn/index.html

{% extends 'base.html' %}

{% block content %}
<p>
Za VPN oziroma oddeljano povezavo v omrežje FRI uporabljamo <a href="https://wireguard.com">WireGuard</a>. Več informacij o uporabi in nastavitvah VPN najdete v <a href="https://doku.fri.uni-lj.si/vpn">dokumentaciji</a>.

<p>
Za priklop v omrežje spodaj ustvarite nov ključ in prenesite izpisano datoteko. Nato sledite napotkom za posamezni sistem.

<details>
<summary>Windows / Mac</summary>
<p>
Namestite in zaženite WireGuard za <a href="https://download.wireguard.com/windows-client/wireguard-installer.exe">Windows</a> ali <a href="https://itunes.apple.com/us/app/wireguard/id1451685025?ls=1&mt=12">Mac</a>. Kliknite <em>Import tunnel(s) from file</em> in izberite preneseno datoteko z nastavitvami <code>wg-fri.conf</code>. VPN nato aktivirate oziroma deaktivirate s klikom na gumb <em>(De)activate</em>.
</details>

<details>
<summary>Android / iOS</summary>
<p>
Namestite WireGuard za <a href="https://play.google.com/store/apps/details?id=com.wireguard.android">Android</a> ali <a href="https://itunes.apple.com/us/app/wireguard/id1441195209?ls=1&mt=8">iOS</a>. Zaženite WireGuard, dodajte novo povezavo z <em>Import from file</em> in izberite preneseno datoteko z nastavitvami.

<p>
Ključ lahko ustvarite tudi na računalniku in ga v telefon dodate s <em>Scan from QR code</em> s kodo, prikazano ob novem ključu.
</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>
Na vsaki napravi, ki jo želite povezati v omrežje FRI, ustvarite nov ključ. Privzete nastavitve usmerijo čez VPN le promet, namenjen strežnikom na FRI in UL.

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

<p>
Če vklopite prvo opcijo, bo vaš računalnik čez VPN usmerjal ves promet. Če izklopite drugo opcijo, bodo nekateri strežniki dostopni le prek naslova IP. Če ste v dvomih, pustite privzete nastavitve.
</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; margin: 0;"><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>Ključi</h1>
<p>
Če ključa ne uporabljamo, smo ga izgubili ali so nam ga ukradli, ga tukaj odstranimo. 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 %}