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.
169 lines
5.5 KiB
HTML
169 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",
|
|
});
|
|
});
|
|
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 %}
|