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>. Za priklop v omrežje 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. Več informacij o uporabi in nastavitvah VPN <a href="https://doku.fri.uni-lj.si/vpn">najdemo v dokumentaciji</a>.
</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:

<table class="keys">
<thead><th><th>Ključ<th>IP<th>IPv6<th>Naprava
<tbody>
</table>

<p class="keys" id="active-key-warning">
<font color="red"><sup>★</sup></font> Ta ključ uporablja trenutna povezava. Če ga odstranite, bo prekinjena.
</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" src="{{ url_for('static', filename='vpn.js') }}"></script>
<script type="text/javascript">
const endpoint = 'list';
function update(keys) {
    const keytab = document.querySelector('table.keys > tbody');
    const warning = document.querySelector('p#active-key-warning');
    keytab.innerHTML = ''
    warning.hidden = true;
    for (const key of keys) {
        const row = keytab.insertRow();
        row.insertCell().innerHTML = '<button onclick="delKey(\'' + key.key + '\');">✖</button>';
        row.insertCell().innerHTML = '<code>' + key.key + '</code>';
        row.insertCell().innerHTML = key.ip;
        row.insertCell().innerHTML = key.ip6 || '';
        row.insertCell().innerHTML = key.name + (key.active ? '<font color="red">★</font>' : '');
        if (key.active)
            warning.hidden = false;
    }
    document.querySelector('section.keys').style.display = (keys.length ? 'unset' : 'none');
}
</script>
{% endblock %}