You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
248 lines
8.7 KiB
HTML
248 lines
8.7 KiB
HTML
{% extends 'account_layout.html' %}
|
|
{% load static %}
|
|
{% load i18n %}
|
|
|
|
{% block pagetitle %}{% trans 'WireGuard' %}{% endblock %}
|
|
{% block account_content %}
|
|
<p>
|
|
{% blocktrans trimmed %}
|
|
This page lets you manage <a href="https://www.wireguard.com/">WireGuard</a> clients.
|
|
Each can only have one concurrent connection.
|
|
{% endblocktrans %}
|
|
<br />
|
|
{% blocktrans trimmed %}
|
|
WireGuard has better performances than OpenVPN, but is not as widely supported.
|
|
{% endblocktrans %}
|
|
</p>
|
|
|
|
<div class="page-wg-title">
|
|
<h3>
|
|
{% trans "Your Devices" %} <span>{{ keys|length }}/{{ config.WIREGUARD_MAX_PEERS }}</span>
|
|
</h3>
|
|
<p>
|
|
<a
|
|
{% if not can_create_key %}
|
|
href="#"
|
|
disabled
|
|
{% else %}
|
|
href="{% url 'lambdainst:wireguard_new' %}"
|
|
{% endif %}
|
|
class="pure-button pure-button-primary"
|
|
>
|
|
{% trans "New Device" %}
|
|
</a>
|
|
</p>
|
|
|
|
</div>
|
|
|
|
{% if keys %}
|
|
<table class="pure-table pure-table-bordered page-wg-table">
|
|
<thead>
|
|
<tr>
|
|
<td>{% trans "Public Key" %}</td>
|
|
<td>{% trans "Name" %}</td>
|
|
<td colspan="2"></td>
|
|
</tr>
|
|
</thead>
|
|
{% for peer in keys %}
|
|
<tr>
|
|
<td>
|
|
<span class="wireguard-key">{{ peer.public_key }}</span>
|
|
</td>
|
|
<td class="page-wg-table__name">
|
|
{{peer.name}}
|
|
</td>
|
|
<td class="page-wg-table__action">
|
|
<a href="#" onclick="toggleWgEdit(event, {{ peer.id }});" title="{% trans 'Edit' %}">
|
|
<i class="fa fa-pencil"></i>
|
|
</a>
|
|
</td>
|
|
<td class="page-wg-table__action page-wg-table__action--more">
|
|
<form action="?" method="post">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="action" value="delete_key" />
|
|
<input type="hidden" name="peer_id" value="{{ peer.id }}" />
|
|
<a href="#" onclick="deleteWgKey(event);" title="{% trans 'Delete' %}">
|
|
<i class="fa fa-trash"></i>
|
|
</a>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
|
|
<h3>Configuration</h3>
|
|
<form method="get" class="pure-form pure-form-aligned" id="config-form" action="{% url 'django_lcore:wireguard_dl' %}">
|
|
<fieldset>
|
|
<div class="pure-control-group">
|
|
<label for="p_device">{% trans 'Device' %}</label>
|
|
<select name="id" id="p_device" class="pure-input-1-2">
|
|
{% for k in keys %}
|
|
<option value="{{k.id}}">
|
|
{% if k.name %}
|
|
{{k.name}} ({{k.public_key|truncatechars:8}})
|
|
{% else %}
|
|
{{k.public_key|truncatechars:16}}
|
|
{% endif %}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="pure-control-group">
|
|
<label for="p_gw">{% trans 'Server' %}</label>
|
|
<select name="cluster" id="p_gw" class="pure-input-1-2">
|
|
<optgroup label="{% trans 'Country' %}">
|
|
{% for name, c in locations %}
|
|
<option value="{{name}}">
|
|
{{c.country_name}}
|
|
{% if c.message %}
|
|
[ {{ c.message }} ]
|
|
{% endif %}
|
|
</option>
|
|
{% endfor %}
|
|
</optgroup>
|
|
<option value="all">{% trans 'All (zip archive)' %}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="pure-control-group">
|
|
<label for="p_gw">{% trans 'Server Port' %}</label>
|
|
<select name="gw_port" id="gw_port" class="pure-input-1-2">
|
|
<option value="51820">51820 {% trans '(WireGuard default)' %}</option>
|
|
<option value="53">53 {% trans '(standard DNS port)' %}</option>
|
|
<option value="80">80 {% trans '(standard HTTP port)' %}</option>
|
|
<option value="443">443 {% trans '(standard HTTPS port)' %}</option>
|
|
</select>
|
|
<p class="inputinfo">
|
|
{% trans 'You can try an alternative server port if 51820 is blocked.' %}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="pure-controls">
|
|
<label for="p_ipv6" class="pure-checkbox">
|
|
<input type="checkbox" name="use_ipv6" id="p_ipv6" checked />
|
|
{% trans 'Enable IPv6?' %}
|
|
</label>
|
|
|
|
<button type="submit" class="pure-button pure-button-primary">
|
|
<i class="fa fa-download" aria-hidden="true"></i> Download
|
|
</button>
|
|
<button onclick="showWgCode(this, 'config-form'); return false" class="pure-button pure-button-primary" id="qrbutton">
|
|
<i class="fa fa-qrcode" aria-hidden="true"></i> QR Code
|
|
</button>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
|
|
{% endif %}
|
|
|
|
<script src="{% static 'js/qrcode.min.js' %}"></script>
|
|
<script>
|
|
function showWgCode(event, formId) {
|
|
const form = document.getElementById(formId);
|
|
const gwSel = document.getElementById("p_gw");
|
|
const qrButton = document.getElementById("qrbutton");
|
|
|
|
var formData = new FormData(form);
|
|
|
|
if (gwSel.value == "all") {
|
|
alert("Select a single gateway to generate a QR Code");
|
|
return;
|
|
}
|
|
|
|
var urlParams = new URLSearchParams(formData).toString();
|
|
|
|
var req = new XMLHttpRequest();
|
|
|
|
var bg = document.createElement("div");
|
|
bg.classList.add("page-wg-shadow");
|
|
bg.onclick = function() {
|
|
req.abort();
|
|
bg.remove();
|
|
};
|
|
document.body.appendChild(bg);
|
|
|
|
var spinner = document.createElement("div");
|
|
spinner.classList.add("page-wg-shadow__loading");
|
|
bg.appendChild(spinner);
|
|
|
|
var el = document.getElementById("qrcode");
|
|
|
|
req.addEventListener("load", function(e) {
|
|
spinner.remove();
|
|
console.log(req.response);
|
|
new QRCode(bg, {
|
|
text: req.response,
|
|
width: 256,
|
|
height: 256,
|
|
colorDark: "#000000",
|
|
colorLight: "#ffffff",
|
|
correctLevel: QRCode.CorrectLevel.M
|
|
});
|
|
});
|
|
req.open(form.method, form.action + "?" + urlParams);
|
|
req.send();
|
|
|
|
return false;
|
|
}
|
|
function deleteWgKey(event) {
|
|
event.preventDefault();
|
|
event.target.parentNode.parentNode.submit();
|
|
}
|
|
function toggleWgEdit(event, peer_id) {
|
|
event.preventDefault();
|
|
|
|
const edit_class = 'page-wg-table__name--edit';
|
|
|
|
const tr = event.target.parentNode.parentNode.parentNode;
|
|
const nameTd = tr.querySelector(".page-wg-table__name");
|
|
|
|
// press again to save (trigger form submit)
|
|
if (tr.classList.contains(edit_class)) {
|
|
const nameForm = nameTd.querySelector("form");
|
|
if (nameForm) {
|
|
nameForm.submit();
|
|
}
|
|
return;
|
|
}
|
|
|
|
function addField(form, key, value) {
|
|
const f = document.createElement("input");
|
|
f.type = "hidden";
|
|
f.name = key;
|
|
f.value = value;
|
|
form.appendChild(f);
|
|
}
|
|
|
|
const currentName = nameTd.innerText;
|
|
nameTd.innerHTML = "";
|
|
|
|
const nameForm = document.createElement("form");
|
|
nameForm.method = "post";
|
|
|
|
addField(nameForm, "peer_id", peer_id);
|
|
addField(nameForm, "action", "set_name");
|
|
addField(nameForm, "csrfmiddlewaretoken", "{{ csrf_token }}");
|
|
|
|
const nameInput = document.createElement("input");
|
|
nameInput.type = "text";
|
|
nameInput.name = "name";
|
|
nameInput.value = currentName;
|
|
nameInput.maxLength = 21;
|
|
nameForm.appendChild(nameInput);
|
|
|
|
const nameSubmit = document.createElement("input");
|
|
nameSubmit.type = "submit";
|
|
nameSubmit.value = "{% trans "Save" %}";
|
|
nameForm.appendChild(nameSubmit);
|
|
|
|
nameTd.appendChild(nameForm);
|
|
}
|
|
function saveWgName(tr, name) {
|
|
|
|
}
|
|
</script>
|
|
|
|
{% endblock %}
|