Enhance server detail view with public key toggle and improved layout

This commit is contained in:
Eduardo Silva
2026-01-25 10:17:42 -03:00
parent 81be188302
commit 9fca7de4ce

View File

@@ -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">
{{ instance.public_key|truncatechars:16 }} <span id="publicKeyTruncated" title="{{ instance.public_key }}">
</a> {{ 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>
</div>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<b>{% trans 'Listen Port' %}</b> <b>{% trans 'Listen Port' %}</b>
@@ -35,7 +46,7 @@
</ul> </ul>
<a href="{% url 'wireguard_manage_instance' %}?uuid={{ instance.uuid }}" <a href="{% url 'wireguard_manage_instance' %}?uuid={{ instance.uuid }}"
class="btn btn-primary btn-block"> class="btn btn-primary btn-block">
<b>{% trans 'Edit Instance' %}</b> <b>{% trans 'Edit Instance' %}</b>
</a> </a>
<a href="{% url 'wireguard_server_list' %}" class="btn btn-default btn-block"> <a href="{% url 'wireguard_server_list' %}" class="btn btn-default btn-block">
@@ -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 %}