mirror of
https://github.com/eduardogsilva/wireguard_webadmin.git
synced 2026-01-31 11:36:18 +00:00
Enhance server detail view with public key toggle and improved layout
This commit is contained in:
@@ -7,14 +7,25 @@
|
|||||||
<div class="card card-primary card-outline">
|
<div class="card card-primary card-outline">
|
||||||
<div class="card-body box-profile">
|
<div class="card-body box-profile">
|
||||||
<h3 class="profile-username text-center">wg{{ instance.instance_id }}</h3>
|
<h3 class="profile-username text-center">wg{{ instance.instance_id }}</h3>
|
||||||
<p class="text-muted text-center">{{ instance.name|default:"" }}</p>
|
|
||||||
|
|
||||||
<ul class="list-group list-group-unbordered mb-3">
|
<ul class="list-group list-group-unbordered mb-3">
|
||||||
|
<li class="list-group-item">
|
||||||
|
<b>{% trans 'Name' %}</b>
|
||||||
|
<span class="float-right">{{ instance.name|default_if_none:"-" }}</span>
|
||||||
|
</li>
|
||||||
|
|
||||||
<li class="list-group-item">
|
<li class="list-group-item">
|
||||||
<b>{% trans 'Public Key' %}</b>
|
<b>{% trans 'Public Key' %}</b>
|
||||||
<a class="float-right" title="{{ instance.public_key }}">
|
<div class="float-right">
|
||||||
|
<span id="publicKeyTruncated" title="{{ instance.public_key }}">
|
||||||
{{ instance.public_key|truncatechars:16 }}
|
{{ instance.public_key|truncatechars:16 }}
|
||||||
|
</span>
|
||||||
|
<span id="publicKeyFull" style="display: none;">
|
||||||
|
{{ instance.public_key }}
|
||||||
|
</span>
|
||||||
|
<a href="javascript:void(0);" onclick="togglePublicKey()" class="text-primary ml-2">
|
||||||
|
<i class="fas fa-eye" id="toggleIcon"></i>
|
||||||
</a>
|
</a>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="list-group-item">
|
<li class="list-group-item">
|
||||||
<b>{% trans 'Listen Port' %}</b>
|
<b>{% trans 'Listen Port' %}</b>
|
||||||
@@ -51,6 +62,7 @@
|
|||||||
<h3 class="card-title">{% trans 'Traffic Graph' %}</h3>
|
<h3 class="card-title">{% trans 'Traffic Graph' %}</h3>
|
||||||
<div class="card-tools">
|
<div class="card-tools">
|
||||||
<form method="get" class="form-inline">
|
<form method="get" class="form-inline">
|
||||||
|
<input type="hidden" name="uuid" value="{{ instance.uuid }}">
|
||||||
<select name="period" class="form-control form-control-sm" onchange="this.form.submit()">
|
<select name="period" class="form-control form-control-sm" onchange="this.form.submit()">
|
||||||
<option value="6h" {% if request.GET.period == '6h' %}selected{% endif %}>6h</option>
|
<option value="6h" {% if request.GET.period == '6h' %}selected{% endif %}>6h</option>
|
||||||
<option value="1d" {% if request.GET.period == '1d' %}selected{% endif %}>1d</option>
|
<option value="1d" {% if request.GET.period == '1d' %}selected{% endif %}>1d</option>
|
||||||
@@ -69,3 +81,25 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block custom_page_scripts %}
|
||||||
|
<script>
|
||||||
|
function togglePublicKey() {
|
||||||
|
var truncated = document.getElementById('publicKeyTruncated');
|
||||||
|
var full = document.getElementById('publicKeyFull');
|
||||||
|
var icon = document.getElementById('toggleIcon');
|
||||||
|
|
||||||
|
if (full.style.display === "none") {
|
||||||
|
full.style.display = "inline";
|
||||||
|
truncated.style.display = "none";
|
||||||
|
icon.classList.remove('fa-eye');
|
||||||
|
icon.classList.add('fa-eye-slash');
|
||||||
|
} else {
|
||||||
|
full.style.display = "none";
|
||||||
|
truncated.style.display = "inline";
|
||||||
|
icon.classList.remove('fa-eye-slash');
|
||||||
|
icon.classList.add('fa-eye');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
Reference in New Issue
Block a user