swissmakers_gmbh/fail2ban-ui
12
1
Fork 0
mirror of https://github.com/swissmakers/fail2ban-ui.git synced 2026-04-11 13:47:05 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

add own external IP-lookup and fix fade-in/out

Browse Source
This commit is contained in:
Michael Reber
2025-07-17 10:36:26 +02:00
parent c9ae9e74d2
commit c3a2fed007
1 changed files with 48 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
pkg/web/templates/index.html
View File

@@ -39,7 +39,17 @@
z-index: 9999; /* on top */
align-items: center;
justify-content: center;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 0.4s ease;
}
#loading-overlay.show {
display: flex;
opacity: 1;
}
.spinner-border {
width: 4rem;
height: 4rem;
@@ -107,9 +117,19 @@
<!-- Dashboard Section -->
<div id="dashboardSection" class="container my-4">
<div class="d-flex align-items-center" style="position: relative;">
<div class="d-flex align-items-center">
<h1 class="mb-4 flex-grow-1" data-i18n="dashboard.title">Dashboard</h1>
<button class="btn btn-outline-secondary" style="position: absolute; right: 0; top: 0;" onclick="openManageJailsModal()" data-i18n="dashboard.manage_jails">Manage Jails</button>
<div class="d-flex align-items-center" style="align-self: baseline;">
<div class="text-secondary small">
Your ext. IP: <span id="external-ip">Loading...</span>
</div>
<button class="btn btn-outline-secondary ms-2"
onclick="openManageJailsModal()"
data-i18n="dashboard.manage_jails">
Manage Jails
</button>
</div>
</div>
<div id="dashboard"></div>
</div>
@@ -527,10 +547,11 @@
//*******************************************************************
//* Init page and main-components : *
//*******************************************************************
showLoading(true);
var currentJailForConfig = null;
window.addEventListener('DOMContentLoaded', function() {
showLoading(true);
displayExternalIP();
checkRestartNeeded();
fetchSummary().then(function() {
showLoading(false);
@@ -540,6 +561,30 @@
});
});
// Toggle the loading overlay (with !important)
function showLoading(show) {
var overlay = document.getElementById('loading-overlay');
if (show) {
overlay.style.setProperty('display', 'flex', 'important');
setTimeout(() => overlay.classList.add('show'), 10);
} else {
overlay.classList.remove('show'); // Start fade-out
setTimeout(() => overlay.style.setProperty('display', 'none', 'important'), 400);
}
}
// Fetch and display own external IP for webUI
function displayExternalIP() {
fetch('https://api.ipify.org?format=json')
.then(res => res.json())
.then(data => {
document.getElementById('external-ip').textContent = data.ip;
})
.catch(() => {
document.getElementById('external-ip').textContent = 'Unavailable';
});
}
// Function to initialize Bootstrap tooltips
function initializeTooltips() {
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
@@ -560,15 +605,6 @@
});
}
}
// Toggle the loading overlay (with !important)
function showLoading(show) {
var overlay = document.getElementById('loading-overlay');
if (show) {
overlay.style.setProperty('display', 'flex', 'important');
} else {
overlay.style.setProperty('display', 'none', 'important');
}
}
// Check if there is still a reload of the fail2ban service needed
function checkRestartNeeded() {