Move bad log parsing to utils.js and add section headers

pkg/web/static/js/header.js

@@ -1,10 +1,17 @@
 // Header components: Clock and Backend Status Indicator
 "use strict";
 
+// =========================================================================
+//  Global Variables
+// =========================================================================
+
 var clockInterval = null;
 var statusUpdateCallback = null;
 
-// Initialize clock
+// =========================================================================
+//  Clock
+// =========================================================================
+
 function initClock() {
   function updateClock() {
     var now = new Date();
@@ -18,30 +25,59 @@ function initClock() {
       clockElement.textContent = timeString;
     }
   }
-  
-  // Update immediately
   updateClock();
-  
-  // Update every second
   if (clockInterval) {
     clearInterval(clockInterval);
   }
   clockInterval = setInterval(updateClock, 1000);
 }
 
-// Update status indicator
+// =========================================================================
+//  Status Indicator
+// =========================================================================
+
+function initStatusIndicator() {
+  updateStatusIndicator('connecting', 'Connecting...');
+  function registerStatusCallback() {
+    if (typeof wsManager !== 'undefined' && wsManager) {
+      wsManager.onStatusChange(function(state, text) {
+        updateStatusIndicator(state, text);
+      });
+      var currentState = wsManager.getConnectionState();
+      var currentText = 'Connecting...';
+      if (currentState === 'connected' && wsManager.isConnected) {
+        currentText = 'Connected';
+      } else if (currentState === 'connecting') {
+        currentText = 'Connecting...';
+      } else if (currentState === 'disconnected') {
+        currentText = 'Disconnected';
+      } else if (currentState === 'disconnecting') {
+        currentText = 'Disconnecting...';
+      }
+      updateStatusIndicator(currentState, currentText);
+      return true;
+    }
+    return false;
+  }
+  if (!registerStatusCallback()) {
+    var checkInterval = setInterval(function() {
+      if (registerStatusCallback()) {
+        clearInterval(checkInterval);
+      }
+    }, 100);
+    setTimeout(function() {
+      clearInterval(checkInterval);
+    }, 5000);
+  }
+}
+
 function updateStatusIndicator(state, text) {
   var statusDot = document.getElementById('statusDot');
   var statusText = document.getElementById('statusText');
-  
   if (!statusDot || !statusText) {
     return;
   }
-  
-  // Remove all color classes
   statusDot.classList.remove('bg-green-500', 'bg-yellow-500', 'bg-red-500', 'bg-gray-400');
-  
-  // Set color and text based on state
   switch (state) {
     case 'connected':
       statusDot.classList.add('bg-green-500');
@@ -63,82 +99,30 @@ function updateStatusIndicator(state, text) {
   }
 }
 
-// Initialize status indicator
+// =========================================================================
-function initStatusIndicator() {
+//  WebSocket Tooltip
-  // Set initial state
+// =========================================================================
-  updateStatusIndicator('connecting', 'Connecting...');
 
-  // Register callback with WebSocket manager when available
-  function registerStatusCallback() {
-    if (typeof wsManager !== 'undefined' && wsManager) {
-      // Register callback for future status changes
-      wsManager.onStatusChange(function(state, text) {
-        updateStatusIndicator(state, text);
-      });
-      
-      // Immediately update status based on current connection state
-      // This handles the case where connection was established before callback registration
-      var currentState = wsManager.getConnectionState();
-      var currentText = 'Connecting...';
-      
-      if (currentState === 'connected' && wsManager.isConnected) {
-        currentText = 'Connected';
-      } else if (currentState === 'connecting') {
-        currentText = 'Connecting...';
-      } else if (currentState === 'disconnected') {
-        currentText = 'Disconnected';
-      } else if (currentState === 'disconnecting') {
-        currentText = 'Disconnecting...';
-      }
-      
-      updateStatusIndicator(currentState, currentText);
-      return true;
-    }
-    return false;
-  }
-  
-  if (!registerStatusCallback()) {
-    // Wait for WebSocket manager to be available
-    var checkInterval = setInterval(function() {
-      if (registerStatusCallback()) {
-        clearInterval(checkInterval);
-      }
-    }, 100);
-    
-    // Stop checking after 5 seconds to avoid infinite loop
-    setTimeout(function() {
-      clearInterval(checkInterval);
-    }, 5000);
-  }
-}
-
-// Create and manage WebSocket tooltip
 function createWebSocketTooltip() {
-  // Create tooltip element
   const tooltip = document.createElement('div');
   tooltip.id = 'wsTooltip';
   tooltip.className = 'fixed z-50 px-3 py-2 bg-gray-900 text-white text-xs rounded shadow-lg pointer-events-none opacity-0 transition-opacity duration-200';
   tooltip.style.display = 'none';
   tooltip.style.minWidth = '200px';
   document.body.appendChild(tooltip);
-  
   const statusEl = document.getElementById('backendStatus');
   if (!statusEl) {
     return;
   }
-  
   let tooltipUpdateInterval = null;
-  
   function updateTooltipContent() {
     if (!wsManager || !wsManager.isConnected) {
       return;
     }
-    
     const info = wsManager.getConnectionInfo();
     if (!info) {
       return;
     }
-    
     tooltip.innerHTML = `
       <div class="font-semibold mb-2 text-green-400 border-b border-gray-700 pb-1">WebSocket Connection</div>
       <div class="space-y-1">
@@ -165,21 +149,15 @@ function createWebSocketTooltip() {
       </div>
     `;
   }
-  
   function showTooltip(e) {
     if (!wsManager || !wsManager.isConnected) {
       return;
     }
-    
     updateTooltipContent();
     const rect = statusEl.getBoundingClientRect();
     const tooltipRect = tooltip.getBoundingClientRect();
-    
-    // Position tooltip below the status element, centered
     let left = rect.left + (rect.width / 2) - (tooltipRect.width / 2);
     let top = rect.bottom + 8;
-    
-    // Adjust if tooltip would go off screen
     if (left < 8) left = 8;
     if (left + tooltipRect.width > window.innerWidth - 8) {
       left = window.innerWidth - tooltipRect.width - 8;
@@ -187,37 +165,29 @@ function createWebSocketTooltip() {
     if (top + tooltipRect.height > window.innerHeight - 8) {
       top = rect.top - tooltipRect.height - 8;
     }
-    
     tooltip.style.left = left + 'px';
     tooltip.style.top = top + 'px';
     tooltip.style.display = 'block';
     setTimeout(() => {
       tooltip.style.opacity = '1';
     }, 10);
-    
-    // Update tooltip content every second while visible
     if (tooltipUpdateInterval) {
       clearInterval(tooltipUpdateInterval);
     }
     tooltipUpdateInterval = setInterval(updateTooltipContent, 1000);
   }
-  
   function hideTooltip() {
     tooltip.style.opacity = '0';
     setTimeout(() => {
       tooltip.style.display = 'none';
     }, 200);
-    
     if (tooltipUpdateInterval) {
       clearInterval(tooltipUpdateInterval);
       tooltipUpdateInterval = null;
     }
   }
-  
   statusEl.addEventListener('mouseenter', showTooltip);
   statusEl.addEventListener('mouseleave', hideTooltip);
-  
-  // Also hide tooltip when status changes to disconnected
   if (typeof wsManager !== 'undefined' && wsManager) {
     wsManager.onStatusChange(function(state, text) {
       if (state !== 'connected') {
@@ -225,7 +195,6 @@ function createWebSocketTooltip() {
       }
     });
   } else {
-    // Wait for WebSocket manager to be available
     var checkInterval = setInterval(function() {
       if (typeof wsManager !== 'undefined' && wsManager) {
         wsManager.onStatusChange(function(state, text) {
@@ -239,14 +208,16 @@ function createWebSocketTooltip() {
   }
 }
 
-// Initialize all header components
+// =========================================================================
+//  Initialization
+// =========================================================================
+
 function initHeader() {
   initClock();
   initStatusIndicator();
   createWebSocketTooltip();
 }
 
-// Cleanup on page unload
 if (typeof window !== 'undefined') {
   window.addEventListener('beforeunload', function() {
     if (clockInterval) {

pkg/web/static/js/ignoreips.js

@@ -1,6 +1,10 @@
-// Ignore IPs tag management functions for Fail2ban UI
+// "Ignore IPs" tag management for Fail2ban UI
 "use strict";
 
+// =========================================================================
+//  Tag Rendering, Adding and Removing Functions
+// =========================================================================
+
 function renderIgnoreIPsTags(ips) {
   const container = document.getElementById('ignoreIPsTags');
   if (!container) return;
@@ -16,33 +20,25 @@ function renderIgnoreIPsTags(ips) {
 
 function addIgnoreIPTag(ip) {
   if (!ip || !ip.trim()) return;
-  
   const trimmedIP = ip.trim();
-  
-  // Validate IP before adding - isValidIP is in validation.js
   if (typeof isValidIP === 'function' && !isValidIP(trimmedIP)) {
     if (typeof showToast === 'function') {
       showToast('Invalid IP address, CIDR, or hostname: ' + trimmedIP, 'error');
     }
     return;
   }
-  
   const container = document.getElementById('ignoreIPsTags');
   if (!container) return;
-  
   const existingTags = Array.from(container.querySelectorAll('.ignore-ip-tag')).map(tag => tag.dataset.ip);
   if (existingTags.includes(trimmedIP)) {
-    return; // Already exists
+    return;
   }
-  
   const tag = document.createElement('span');
   tag.className = 'ignore-ip-tag inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800';
   tag.dataset.ip = trimmedIP;
   const escapedIP = escapeHtml(trimmedIP);
   tag.innerHTML = escapedIP + ' <button type="button" class="ml-1 text-blue-600 hover:text-blue-800 focus:outline-none" onclick="removeIgnoreIPTag(\'' + escapedIP.replace(/'/g, "\\'") + '\')">×</button>';
   container.appendChild(tag);
-  
-  // Clear input
   const input = document.getElementById('ignoreIPInput');
   if (input) input.value = '';
 }
@@ -57,43 +53,32 @@ function removeIgnoreIPTag(ip) {
   }
 }
 
-function getIgnoreIPsArray() {
+// =========================================================================
-  const container = document.getElementById('ignoreIPsTags');
+//  Input Handling
-  if (!container) return [];
+// =========================================================================
-  const tags = container.querySelectorAll('.ignore-ip-tag');
-  return Array.from(tags).map(tag => tag.dataset.ip).filter(ip => ip && ip.trim());
-}
 
 function setupIgnoreIPsInput() {
   const input = document.getElementById('ignoreIPInput');
   if (!input) return;
-  
-  // Allow spaces for space-separated lists, but validate on paste/enter/blur
   let lastValue = '';
   input.addEventListener('input', function(e) {
-    // Allow spaces for space-separated lists
-    // Allow: 0-9, a-z, A-Z, :, ., /, -, _, space (for space-separated lists)
     let value = this.value;
-    // Remove any characters that aren't valid for IPs/hostnames or spaces
     const filtered = value.replace(/[^0-9a-zA-Z:.\/\-\_\s]/g, '');
     if (value !== filtered) {
       this.value = filtered;
     }
     lastValue = filtered;
   });
-  
   input.addEventListener('keydown', function(e) {
     if (e.key === 'Enter' || e.key === ',') {
       e.preventDefault();
       const value = input.value.trim();
       if (value) {
-        // Support space or comma separated IPs
         const ips = value.split(/[,\s]+/).filter(ip => ip.trim());
         ips.forEach(ip => addIgnoreIPTag(ip.trim()));
       }
     }
   });
-  
   input.addEventListener('blur', function(e) {
     const value = input.value.trim();
     if (value) {
@@ -101,21 +86,27 @@ function setupIgnoreIPsInput() {
       ips.forEach(ip => addIgnoreIPTag(ip.trim()));
     }
   });
-  
-  // Handle paste events to automatically process space-separated lists
   input.addEventListener('paste', function(e) {
-    // Allow default paste behavior first
     setTimeout(() => {
       const value = input.value.trim();
       if (value) {
-        // Check if pasted content contains spaces (likely a space-separated list)
         if (value.includes(' ') || value.includes(',')) {
           const ips = value.split(/[,\s]+/).filter(ip => ip.trim());
           ips.forEach(ip => addIgnoreIPTag(ip.trim()));
-          input.value = ''; // Clear input after processing
+          input.value = '';
         }
       }
     }, 0);
   });
 }
 
+// =========================================================================
+//  Data Access
+// =========================================================================
+
+function getIgnoreIPsArray() {
+  const container = document.getElementById('ignoreIPsTags');
+  if (!container) return [];
+  const tags = container.querySelectorAll('.ignore-ip-tag');
+  return Array.from(tags).map(tag => tag.dataset.ip).filter(ip => ip && ip.trim());
+}

pkg/web/static/js/init.js

@@ -1,37 +1,36 @@
-// Initialization code for Fail2ban UI
+// App bootstrap and initialization.
 "use strict";
 
+// =========================================================================
+//  Bootstrap
+// =========================================================================
+
 window.addEventListener('DOMContentLoaded', function() {
   showLoading(true);
-  
-  // Check authentication status first (if auth.js is loaded)
   if (typeof checkAuthStatus === 'function') {
     checkAuthStatus().then(function(authStatus) {
-      // Only proceed with initialization if authenticated or OIDC disabled
       if (!authStatus.enabled || authStatus.authenticated) {
         initializeApp();
       } else {
-        // Not authenticated, login page will be shown by checkAuthStatus
         showLoading(false);
       }
     }).catch(function(err) {
       console.error('Auth check failed:', err);
-      // Proceed with initialization anyway (fallback)
       initializeApp();
     });
   } else {
-    // Auth.js not loaded, proceed normally
     initializeApp();
   }
 });
 
+// =========================================================================
+//  App Initialization
+// =========================================================================
+
 function initializeApp() {
-  // Only display external IP if the element exists (not disabled via template variable)
   if (document.getElementById('external-ip')) {
     displayExternalIP();
   }
-  
-  // Initialize header components (clock and status indicator)
   if (typeof initHeader === 'function') {
     initHeader();
   }
@@ -50,20 +49,16 @@ function initializeApp() {
   }
 
   if (!registerBanEventHandler()) {
-    // Wait for WebSocket manager to be available
     var wsCheckInterval = setInterval(function() {
       if (registerBanEventHandler()) {
         clearInterval(wsCheckInterval);
       }
     }, 100);
-    
-    // Stop checking after 5 seconds
     setTimeout(function() {
       clearInterval(wsCheckInterval);
     }, 5000);
   }
 
-  // Check LOTR mode on page load to apply immediately
   fetch('/api/settings')
     .then(res => res.json())
     .then(data => {
@@ -71,7 +66,6 @@ function initializeApp() {
       if (typeof checkAndApplyLOTRTheme === 'function') {
         checkAndApplyLOTRTheme(alertCountries);
       }
-      // Store in global for later use
       if (typeof currentSettings === 'undefined') {
         window.currentSettings = {};
       }
@@ -81,7 +75,7 @@ function initializeApp() {
       console.warn('Could not check LOTR on load:', err);
     });
 
-  // Version and update check: only on page load; UPDATE_CHECK=false disables external GitHub request
+  // Check for updates and display version badge in the footer
   var versionContainer = document.getElementById('version-badge-container');
   if (versionContainer && versionContainer.getAttribute('data-update-check') === 'true') {
     fetch('/api/version')
@@ -98,9 +92,10 @@ function initializeApp() {
           versionContainer.innerHTML = '<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800" title="' + latestLabel + '">' + latestLabel + '</span>';
         }
       })
-      .catch(function() { /* ignore; no badge on error */ });
+      .catch(function() { });
   }
 
+  // Load servers and translations, then render the dashboard and initialize tooltips and search
   Promise.all([
     loadServers(),
     getTranslationsSettingsOnPageload()
@@ -119,12 +114,12 @@ function initializeApp() {
       }
     })
     .finally(function() {
-      initializeTooltips(); // Initialize tooltips after fetching and rendering
+      initializeTooltips();
       initializeSearch();
       showLoading(false);
     });
 
-  // Setup Select2 for alert countries
+  // jQuery-dependent setup (Select2 for alert countries)
   $(document).ready(function() {
     $('#alertCountries').select2({
       placeholder: 'Select countries..',
@@ -132,6 +127,7 @@ function initializeApp() {
       width: '100%'
     });
 
+    // When "ALL" is selected, deselect other countries and vice versa
     $('#alertCountries').on('select2:select', function(e) {
       var selectedValue = e.params.data.id;
       var currentValues = $('#alertCountries').val() || [];
@@ -147,7 +143,6 @@ function initializeApp() {
           $('#alertCountries').val(newValues).trigger('change');
         }
       }
-      // Check LOTR mode after selection change
       setTimeout(function() {
         const selectedCountries = $('#alertCountries').val() || [];
         if (typeof checkAndApplyLOTRTheme === 'function') {
@@ -157,7 +152,6 @@ function initializeApp() {
     });
 
     $('#alertCountries').on('select2:unselect', function(e) {
-      // Check LOTR mode after deselection
       setTimeout(function() {
         const selectedCountries = $('#alertCountries').val() || [];
         if (typeof checkAndApplyLOTRTheme === 'function') {
@@ -175,17 +169,14 @@ function initializeApp() {
       });
     }
 
-    // Setup IgnoreIPs tag input
     if (typeof setupIgnoreIPsInput === 'function') {
       setupIgnoreIPsInput();
     }
 
-    // Setup form validation
     if (typeof setupFormValidation === 'function') {
       setupFormValidation();
     }
 
-    // Setup advanced integration fields
     const advancedIntegrationSelect = document.getElementById('advancedIntegrationSelect');
     if (advancedIntegrationSelect && typeof updateAdvancedIntegrationFields === 'function') {
       advancedIntegrationSelect.addEventListener('change', updateAdvancedIntegrationFields);

pkg/web/static/js/lotr.js

@@ -8,31 +8,28 @@ function isLOTRMode(alertCountries) {
   return alertCountries.includes('LOTR');
 }
 
+// =========================================================================
+//  Theme Application
+// =========================================================================
+
 function applyLOTRTheme(active) {
   const body = document.body;
   const lotrCSS = document.getElementById('lotr-css');
-  
   if (active) {
-    // Enable CSS first
     if (lotrCSS) {
       lotrCSS.disabled = false;
     }
-    // Then add class to body
     body.classList.add('lotr-mode');
     isLOTRModeActive = true;
     console.log('🎭 LOTR Mode Activated - Welcome to Middle-earth!');
   } else {
-    // Remove class first
     body.classList.remove('lotr-mode');
-    // Then disable CSS
     if (lotrCSS) {
       lotrCSS.disabled = true;
     }
     isLOTRModeActive = false;
     console.log('🎭 LOTR Mode Deactivated');
   }
-  
-  // Force a reflow to ensure styles are applied
   void body.offsetHeight;
 }
 
@@ -46,51 +43,36 @@ function checkAndApplyLOTRTheme(alertCountries) {
 
 function updateLOTRTerminology(active) {
   if (active) {
-    // Update navigation title
     const navTitle = document.querySelector('nav .text-xl');
     if (navTitle) {
       navTitle.textContent = 'Middle-earth Security';
     }
-    
-    // Update page title
     const pageTitle = document.querySelector('title');
     if (pageTitle) {
       pageTitle.textContent = 'Middle-earth Security Realm';
     }
-    
-    // Update dashboard terminology
     updateDashboardLOTRTerminology(true);
-    
-    // Add decorative elements
     addLOTRDecorations();
   } else {
-    // Restore original text
     const navTitle = document.querySelector('nav .text-xl');
     if (navTitle) {
       navTitle.textContent = 'Fail2ban UI';
     }
-    
     const pageTitle = document.querySelector('title');
     if (pageTitle && pageTitle.hasAttribute('data-i18n')) {
       const i18nKey = pageTitle.getAttribute('data-i18n');
       pageTitle.textContent = t(i18nKey, 'Fail2ban UI Dashboard');
     }
-    
-    // Restore dashboard terminology
     updateDashboardLOTRTerminology(false);
-    
-    // Remove decorative elements
     removeLOTRDecorations();
   }
 }
 
 function updateDashboardLOTRTerminology(active) {
-  // Update text elements that use data-i18n
   const elements = document.querySelectorAll('[data-i18n]');
   elements.forEach(el => {
     const i18nKey = el.getAttribute('data-i18n');
     if (active) {
-      // Check for LOTR-specific translations
       if (i18nKey === 'dashboard.cards.total_banned') {
         el.textContent = t('lotr.threats_banished', 'Threats Banished');
       } else if (i18nKey === 'dashboard.table.banned_ips') {
@@ -101,14 +83,11 @@ function updateDashboardLOTRTerminology(active) {
         el.textContent = t('lotr.realms_protected', 'Manage Realms');
       }
     } else {
-      // Restore original translations
       if (i18nKey) {
         el.textContent = t(i18nKey, el.textContent);
       }
     }
   });
-  
-  // Update "Unban" buttons
   const unbanButtons = document.querySelectorAll('button, a');
   unbanButtons.forEach(btn => {
     if (btn.textContent && btn.textContent.includes('Unban')) {
@@ -122,26 +101,20 @@ function updateDashboardLOTRTerminology(active) {
 }
 
 function addLOTRDecorations() {
-  // Add decorative divider to settings section if not already present
   const settingsSection = document.getElementById('settingsSection');
   if (settingsSection && !settingsSection.querySelector('.lotr-divider')) {
     const divider = document.createElement('div');
     divider.className = 'lotr-divider';
     divider.style.marginTop = '20px';
     divider.style.marginBottom = '20px';
-    
-    // Find the first child element (not text node) to insert before
     const firstChild = Array.from(settingsSection.childNodes).find(
       node => node.nodeType === Node.ELEMENT_NODE
     );
-    
     if (firstChild && firstChild.parentNode === settingsSection) {
       settingsSection.insertBefore(divider, firstChild);
     } else if (settingsSection.firstChild) {
-      // Fallback: append if insertBefore fails
       settingsSection.insertBefore(divider, settingsSection.firstChild);
     } else {
-      // Last resort: append to end
       settingsSection.appendChild(divider);
     }
   }
@@ -151,4 +124,3 @@ function removeLOTRDecorations() {
   const dividers = document.querySelectorAll('.lotr-divider');
   dividers.forEach(div => div.remove());
 }
-

pkg/web/static/js/modals.js

@@ -1,6 +1,10 @@
-// Modal management functions for Fail2ban UI
+// Modal management for Fail2ban UI
 "use strict";
 
+// =========================================================================
+//  Modal Lifecycle
+// =========================================================================
+
 function updateBodyScrollLock() {
   if (openModalCount > 0) {
     document.body.classList.add('modal-open');
@@ -9,7 +13,6 @@ function updateBodyScrollLock() {
   }
 }
 
-// Close modal
 function closeModal(modalId) {
   var modal = document.getElementById(modalId);
   if (!modal || modal.classList.contains('hidden')) {
@@ -20,7 +23,6 @@ function closeModal(modalId) {
   updateBodyScrollLock();
 }
 
-// Open modal
 function openModal(modalId) {
   var modal = document.getElementById(modalId);
   if (!modal || !modal.classList.contains('hidden')) {
@@ -32,6 +34,11 @@ function openModal(modalId) {
   updateBodyScrollLock();
 }
 
+// =========================================================================
+//  Whois and Logs Modal
+// =========================================================================
+
+// Whois modal
 function openWhoisModal(eventIndex) {
   if (!latestBanEvents || !latestBanEvents[eventIndex]) {
     showToast("Event not found", 'error');
@@ -42,13 +49,13 @@ function openWhoisModal(eventIndex) {
     showToast("No whois data available for this event", 'info');
     return;
   }
-
   document.getElementById('whoisModalIP').textContent = event.ip || 'N/A';
   var contentEl = document.getElementById('whoisModalContent');
   contentEl.textContent = event.whois;
   openModal('whoisModal');
 }
 
+// Logs modal
 function openLogsModal(eventIndex) {
   if (!latestBanEvents || !latestBanEvents[eventIndex]) {
     showToast("Event not found", 'error');
@@ -59,27 +66,21 @@ function openLogsModal(eventIndex) {
     showToast("No logs data available for this event", 'info');
     return;
   }
-
   document.getElementById('logsModalIP').textContent = event.ip || 'N/A';
   document.getElementById('logsModalJail').textContent = event.jail || 'N/A';
-
   var logs = event.logs;
   var ip = event.ip || '';
   var logLines = logs.split('\n');
-
-  // Determine which lines are suspicious (bad requests)
   var suspiciousIndices = [];
   for (var i = 0; i < logLines.length; i++) {
     if (isSuspiciousLogLine(logLines[i], ip)) {
       suspiciousIndices.push(i);
     }
   }
-
   var contentEl = document.getElementById('logsModalContent');
   if (suspiciousIndices.length) {
     var highlightMap = {};
     suspiciousIndices.forEach(function(idx) { highlightMap[idx] = true; });
-
     var html = '';
     for (var j = 0; j < logLines.length; j++) {
       var safeLine = escapeHtml(logLines[j] || '');
@@ -91,57 +92,14 @@ function openLogsModal(eventIndex) {
     }
     contentEl.innerHTML = html;
   } else {
-    // No suspicious lines detected; show raw logs without highlighting
     contentEl.textContent = logs;
   }
-
   openModal('logsModal');
 }
 
-function isSuspiciousLogLine(line, ip) {
+// =========================================================================
-  if (!line) {
+//  Ban Insights Modal
-    return false;
+// =========================================================================
-  }
-
-  var containsIP = ip && line.indexOf(ip) !== -1;
-  var lowered = line.toLowerCase();
-
-  // Detect HTTP status codes (>= 300 considered problematic)
-  var statusMatch = line.match(/"[^"]*"\s+(\d{3})\b/);
-  if (!statusMatch) {
-    statusMatch = line.match(/\s(\d{3})\s+(?:\d+|-)/);
-  }
-  var statusCode = statusMatch ? parseInt(statusMatch[1], 10) : NaN;
-  var hasBadStatus = !isNaN(statusCode) && statusCode >= 300;
-
-  // Detect common attack indicators in URLs/payloads
-  var indicators = [
-    '../',
-    '%2e%2e',
-    '%252e%252e',
-    '%24%7b',
-    '${',
-    '/etc/passwd',
-    'select%20',
-    'union%20',
-    'cmd=',
-    'wget',
-    'curl ',
-    'nslookup',
-    '/xmlrpc.php',
-    '/wp-admin',
-    '/cgi-bin',
-    'content-length: 0'
-  ];
-  var hasIndicator = indicators.some(function(ind) {
-    return lowered.indexOf(ind) !== -1;
-  });
-
-  if (containsIP) {
-    return hasBadStatus || hasIndicator;
-  }
-  return (hasBadStatus || hasIndicator) && !ip;
-}
 
 function openBanInsightsModal() {
   var countriesContainer = document.getElementById('countryStatsContainer');
@@ -176,7 +134,6 @@ function openBanInsightsModal() {
         + '</div>';
     }).join('');
   }
-
   var countries = (latestBanInsights && latestBanInsights.countries) || [];
   if (!countries.length) {
     countriesContainer.innerHTML = '<p class="text-sm text-gray-500" data-i18n="logs.modal.insights_countries_empty">No bans recorded for this period.</p>';
@@ -201,7 +158,6 @@ function openBanInsightsModal() {
     }).join('');
     countriesContainer.innerHTML = countryHTML;
   }
-
   var recurring = (latestBanInsights && latestBanInsights.recurring) || [];
   if (!recurring.length) {
     recurringContainer.innerHTML = '<p class="text-sm text-gray-500" data-i18n="logs.modal.insights_recurring_empty">No recurring IPs detected.</p>';
@@ -226,10 +182,8 @@ function openBanInsightsModal() {
     }).join('');
     recurringContainer.innerHTML = recurringHTML;
   }
-
   if (typeof updateTranslations === 'function') {
     updateTranslations();
   }
   openModal('banInsightsModal');
 }
-

pkg/web/static/js/translations.js

@@ -1,7 +1,10 @@
-// Translation functions for Fail2ban UI
+// Translation implementation for Fail2ban UI.
 "use strict";
 
-// Loads translation JSON file for given language (e.g., en, de, etc.)
+// =========================================================================
+//  Translation Engine
+// =========================================================================
+
 function loadTranslations(lang) {
   $.getJSON('/locales/' + lang + '.json')
     .done(function(data) {
@@ -13,7 +16,6 @@ function loadTranslations(lang) {
     });
 }
 
-// Updates all elements with data-i18n attribute with corresponding translation.
 function updateTranslations() {
   $('[data-i18n]').each(function() {
     var key = $(this).data('i18n');
@@ -21,7 +23,6 @@ function updateTranslations() {
       $(this).text(translations[key]);
     }
   });
-  // Updates placeholders.
   $('[data-i18n-placeholder]').each(function() {
     var key = $(this).data('i18n-placeholder');
     if (translations[key]) {
@@ -43,4 +44,3 @@ function getTranslationsSettingsOnPageload() {
       loadTranslations('en');
     });
 }
-

pkg/web/static/js/utils.js

@@ -1,6 +1,10 @@
-// Utility functions for Fail2ban UI
+// Shared utilities for Fail2ban UI.
 "use strict";
 
+// =========================================================================
+//  Data Normalization
+// =========================================================================
+
 function normalizeInsights(data) {
   var normalized = data && typeof data === 'object' ? data : {};
   if (!normalized.totals || typeof normalized.totals !== 'object') {
@@ -26,6 +30,10 @@ function t(key, fallback) {
   return fallback !== undefined ? fallback : key;
 }
 
+// =========================================================================
+//  Focus Management
+// =========================================================================
+
 function captureFocusState(container) {
   var active = document.activeElement;
   if (!active || !container || !container.contains(active)) {
@@ -40,9 +48,7 @@ function captureFocusState(container) {
       state.selectionStart = active.selectionStart;
       state.selectionEnd = active.selectionEnd;
     }
-  } catch (err) {
+  } catch (err) {}
-    // Ignore selection errors for elements that do not support it.
-  }
   return state;
 }
 
@@ -65,11 +71,13 @@ function restoreFocusState(state) {
     if (typeof state.selectionStart === 'number' && typeof state.selectionEnd === 'number' && typeof next.setSelectionRange === 'function') {
       next.setSelectionRange(state.selectionStart, state.selectionEnd);
     }
-  } catch (err) {
+  } catch (err) {}
-    // Element may not support setSelectionRange; ignore.
-  }
 }
 
+// =========================================================================
+//  String Helpers
+// =========================================================================
+
 function highlightQueryMatch(value, query) {
   var text = value || '';
   if (!query) {
@@ -104,3 +112,46 @@ function slugifyId(value, prefix) {
   return (prefix || 'id') + '-' + base + '-' + hash;
 }
 
+// =========================================================================
+//  Log Analysis Helper
+// =========================================================================
+
+function isSuspiciousLogLine(line, ip) {
+  if (!line) {
+    return false;
+  }
+  var containsIP = ip && line.indexOf(ip) !== -1;
+  var lowered = line.toLowerCase();
+  // Detect HTTP status codes (>= 300 considered problematic)
+  var statusMatch = line.match(/"[^"]*"\s+(\d{3})\b/);
+  if (!statusMatch) {
+    statusMatch = line.match(/\s(\d{3})\s+(?:\d+|-)/);
+  }
+  var statusCode = statusMatch ? parseInt(statusMatch[1], 10) : NaN;
+  var hasBadStatus = !isNaN(statusCode) && statusCode >= 300;
+  // Detect common attack indicators in URLs/payloads
+  var indicators = [
+    '../',
+    '%2e%2e',
+    '%252e%252e',
+    '%24%7b',
+    '${',
+    '/etc/passwd',
+    'select%20',
+    'union%20',
+    'cmd=',
+    'wget',
+    'curl ',
+    'nslookup',
+    '/xmlrpc.php',
+    '/wp-admin',
+    '/cgi-bin',
+    'content-length: 0'
+  ];
+  var hasIndicator = indicators.some(function(ind) {
+    return lowered.indexOf(ind) !== -1;
+  });  if (containsIP) {
+    return hasBadStatus || hasIndicator;
+  }
+  return (hasBadStatus || hasIndicator) && !ip;
+}