Mirrors/wireguard_webadmin
1
0
Fork 0
mirror of https://github.com/eduardogsilva/wireguard_webadmin.git synced 2025-04-19 00:45:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add blinking warning icon for overlapping IP issues and improved text alignment on peer cards

Browse Source
This commit is contained in:
Eduardo Silva 2025-02-26 11:27:54 -03:00
parent e861d1b840
commit f42cbf9451
1 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
templates/wireguard/wireguard_peer_list.html
View File

@ -8,6 +8,12 @@
.callout.position-relative { .callout.position-relative {
padding: 0 !important; padding: 0 !important;
} }
@keyframes blink {
50% { opacity: 0; }
}
.blinking-icon {
animation: blink 1s step-start infinite;
}
</style> </style>
{% endblock %} {% endblock %}
@ -29,12 +35,12 @@
<div class="tab-pane fade show active" id="custom-content-below-home" role="tabpanel" aria-labelledby="custom-content-below-home-tab"> <div class="tab-pane fade show active" id="custom-content-below-home" role="tabpanel" aria-labelledby="custom-content-below-home-tab">
<div class="row" style="padding-top: 15px"> <div class="row" style="padding-top: 15px">
{% for peer in peer_list %} {% for peer in peer_list %}
<div class="col-md-6" id="peer-{{ peer.public_key }}" data-uuid="{{ peer.uuid }}"> <div class="col-xl-6" id="peer-{{ peer.public_key }}" data-uuid="{{ peer.uuid }}">
<div class="callout position-relative"> <div class="callout position-relative">
{% comment %}background: linear-gradient(to right, white 50%, transparent 50%);{% endcomment %} {% comment %}background: linear-gradient(to right, white 50%, transparent 50%);{% endcomment %}
<div class="position-absolute p-3 div-peer-text-information" style="top: 0; left: 0; background: linear-gradient(to right, white, transparent); width: 100%; height: 100%; "> <div class="position-absolute p-3 div-peer-text-information" style="top: 0; left: 0; background: linear-gradient(to right, white, transparent); width: 100%; height: 100%; ">
<div class="d-flex justify-content-between align-items-start"> <div class="d-flex justify-content-between align-items-start">
<h5> <h5 id="peer-name-{{ peer.public_key }}">
<a href="#" onclick="openPeerModal('{{ peer.uuid }}');" style="text-decoration: none"> <a href="#" onclick="openPeerModal('{{ peer.uuid }}');" style="text-decoration: none">
{{ peer }} {{ peer }}
</a> </a>
@ -76,7 +82,7 @@
</span> </span>
</span> </span>
</div> </div>
<canvas class="" id="chart-{{ peer.public_key }}" width="800" height="130"></canvas> <canvas class="" id="chart-{{ peer.public_key }}" width="800" height="130" style="min-height: 85px"></canvas>
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
@ -482,7 +488,7 @@
const htmlIpsArray = htmlIpsText.match(/\b(?:\d{1,3}\.){3}\d{1,3}\/\d{1,2}\b/g) || []; const htmlIpsArray = htmlIpsText.match(/\b(?:\d{1,3}\.){3}\d{1,3}\/\d{1,2}\b/g) || [];
allowedIpsElement.innerHTML = ''; allowedIpsElement.innerHTML = '';
let showExtraInfo = false; let allowedIpsIssue = false;
htmlIpsArray.forEach((ip, index, array) => { htmlIpsArray.forEach((ip, index, array) => {
const ipSpan = document.createElement('span'); const ipSpan = document.createElement('span');
@ -493,7 +499,7 @@
ipSpan.style.color = 'red'; ipSpan.style.color = 'red';
ipSpan.style.textDecoration = 'underline'; ipSpan.style.textDecoration = 'underline';
ipSpan.title = 'This address does not appear in the wg show command output, likely indicating that another peer has an IP overlapping this network or that the configuration file is outdated.'; ipSpan.title = 'This address does not appear in the wg show command output, likely indicating that another peer has an IP overlapping this network or that the configuration file is outdated.';
showExtraInfo = true; allowedIpsIssue = true;
} }
if (index < array.length - 1) { if (index < array.length - 1) {
@ -501,11 +507,14 @@
} }
}); });
if (showExtraInfo) { if (allowedIpsIssue) {
const extraInfoContainerId = allowedIpsElement.id.replace('peer-allowed-ips-', 'peer-extra-info-allowed-ips-'); const peerId = allowedIpsElement.id.replace('peer-allowed-ips-', '');
const extraInfoContainer = document.getElementById(extraInfoContainerId); const h5Element = document.getElementById('peer-name-' + peerId);
if (extraInfoContainer) { if (h5Element && !h5Element.querySelector('.fa-exclamation-triangle')) {
extraInfoContainer.style.display = 'block'; const icon = document.createElement('i');
icon.className = 'fas fa-exclamation-triangle text-danger blinking-icon';
icon.title = 'At least one address does not appear in the wg show command output, which may indicate that another peer is using an overlapping IP or that the configuration file is outdated.';
h5Element.appendChild(icon);
} }
} }
}; };