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.

170 lines
5.5 KiB
HTML

{% extends 'account_layout.html' %}
{% load static %}
{% load i18n %}
{% block title %}WireGuard{% endblock %}
{% block account_content %}
<h2>WireGuard</h2>
<p>
{% blocktrans trimmed %}
This page lets you manage WireGuard peers.
Each can only have one concurrent connection.
{% endblocktrans %}
</p>
<div class="page-wg-title">
<h3>
{% trans "Your Devices" %} <span>{{ keys|length }}/{{ config.WIREGUARD_MAX_PEERS }}</span>
</h3>
<p>
<a href="{% url 'lambdainst:wireguard_new' %}" class="pure-button pure-button-primary"
{% if not can_create_key %}disabled{% endif %}
>{% trans "New Device" %}</a>
</p>
</div>
{% if keys %}
<table class="pure-table pure-table-bordered page-wg-table">
<thead>
<tr>
<td>{% trans "Key" %}</td>
<td>{% trans "Name" %}</td>
<td colspan="4">{% trans "Actions" %}</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="{% url 'django_lcore:wireguard_dl' %}?id={{peer.id}}" title="{% trans 'Download' %}">
<i class="fa fa-download"></i>
</a>
</td>
<td class="page-wg-table__action page-wg-table__action--more">
<a href="#" onclick="showWgCode(event, '{% url 'django_lcore:wireguard_dl' %}?id={{peer.id}}');" title="{% trans 'Show QR Code' %}">
<i class="fa fa-qrcode"></i>
</a>
</td>
<td class="page-wg-table__action page-wg-table__action--more">
<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>
{% endif %}
<script src="{% static 'js/qrcode.min.js' %}"></script>
<script>
function showWgCode(event, url) {
event.preventDefault();
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: QRErrorCorrectLevel.M
});
});
req.open("GET", url);
req.send();
}
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 %}