Implement unban events and API and also add it to the Recent stored events, as well some cleanups

pkg/web/static/fail2ban-ui.css

@@ -26,6 +26,10 @@
     display: none;
 }
 
+#serverManagerList {
+    min-height: 480px;
+}
+
 /* Custom scrollbar */
 ::-webkit-scrollbar {
     width: 8px;
@@ -168,6 +172,18 @@ mark {
     box-shadow: 0 15px 20px -3px rgba(0, 0, 0, 0.15);
 }
 
+.toast-unban-event {
+    background-color: #14532d;
+    pointer-events: auto;
+    cursor: pointer;
+}
+
+.toast-unban-event:hover {
+    background-color: #166534;
+    transform: translateY(-2px);
+    box-shadow: 0 15px 20px -3px rgba(0, 0, 0, 0.15);
+}
+
 /* Backend Status Indicator */
 #backendStatus {
     display: flex;

pkg/web/static/js/core.js

@@ -46,24 +46,29 @@ function showBanEventToast(event) {
   var container = document.getElementById('toast-container');
   if (!container || !event) return;
   
+  var isUnban = event.eventType === 'unban';
   var toast = document.createElement('div');
-  toast.className = 'toast toast-ban-event';
+  toast.className = isUnban ? 'toast toast-unban-event' : 'toast toast-ban-event';
   
   var ip = event.ip || 'Unknown IP';
   var jail = event.jail || 'Unknown Jail';
   var server = event.serverName || event.serverId || 'Unknown Server';
   var country = event.country || 'UNKNOWN';
   
+  var title = isUnban ? t('toast.unban.title', 'IP unblocked') : t('toast.ban.title', 'New block occurred');
+  var action = isUnban ? t('toast.unban.action', 'unblocked from') : t('toast.ban.action', 'banned in');
+  var icon = isUnban ? 'fas fa-check-circle text-green-400' : 'fas fa-shield-alt text-red-500';
+  
   toast.innerHTML = ''
     + '<div class="flex items-start gap-3">'
     + '  <div class="flex-shrink-0 mt-1">'
-    + '    <i class="fas fa-shield-alt text-red-500"></i>'
+    + '    <i class="' + icon + '"></i>'
     + '  </div>'
     + '  <div class="flex-1 min-w-0">'
-    + '    <div class="font-semibold text-sm">New block occurred</div>'
+    + '    <div class="font-semibold text-sm">' + title + '</div>'
     + '    <div class="text-sm mt-1">'
     + '      <span class="font-mono font-semibold">' + escapeHtml(ip) + '</span>'
-    + '      <span> banned in </span>'
+    + '      <span> ' + action + ' </span>'
     + '      <span class="font-semibold">' + escapeHtml(jail) + '</span>'
     + '    </div>'
     + '    <div class="text-xs text-gray-400 mt-1">'

pkg/web/static/js/dashboard.js

@@ -85,7 +85,7 @@ function fetchBanEventsData() {
     });
 }
 
-// Add new ban event from WebSocket
+// Add new ban or unban event from WebSocket
 function addBanEventFromWebSocket(event) {
   // Check if event already exists (prevent duplicates)
   // Only check by ID if both events have IDs
@@ -95,16 +95,21 @@ function addBanEventFromWebSocket(event) {
       return e.id === event.id;
     });
   } else {
-    // If no ID, check by IP, jail, and occurredAt timestamp
+    // If no ID, check by IP, jail, eventType, and occurredAt timestamp
     exists = latestBanEvents.some(function(e) {
       return e.ip === event.ip && 
              e.jail === event.jail && 
+             e.eventType === event.eventType &&
              e.occurredAt === event.occurredAt;
     });
   }
   
   if (!exists) {
-    console.log('Adding new ban event from WebSocket:', event);
+    // Ensure eventType is set (default to 'ban' for backward compatibility)
+    if (!event.eventType) {
+      event.eventType = 'ban';
+    }
+    console.log('Adding new event from WebSocket:', event);
     
     // Prepend to the beginning of the array
     latestBanEvents.unshift(event);
@@ -121,7 +126,7 @@ function addBanEventFromWebSocket(event) {
     // Refresh dashboard data (summary, stats, insights) and re-render
     refreshDashboardData();
   } else {
-    console.log('Skipping duplicate ban event:', event);
+    console.log('Skipping duplicate event:', event);
   }
 }
 
@@ -453,9 +458,8 @@ function unbanIP(jail, ip) {
     .then(function(data) {
       if (data.error) {
         showToast("Error unbanning IP: " + data.error, 'error');
-      } else {
-        showToast(data.message || "IP unbanned successfully", 'success');
       }
+      // Don't show success toast here - the WebSocket unban event will show a proper toast
       return refreshData({ silent: true });
     })
     .catch(function(err) {
@@ -761,12 +765,19 @@ function renderLogOverviewContent() {
       if (event.ip && recurringMap[event.ip]) {
         ipCell += ' <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">' + t('logs.badge.recurring', 'Recurring') + '</span>';
       }
+      var eventType = event.eventType || 'ban';
+      var eventTypeBadge = '';
+      if (eventType === 'unban') {
+        eventTypeBadge = ' <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">Unban</span>';
+      } else {
+        eventTypeBadge = ' <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">Ban</span>';
+      }
       html += ''
         + '      <tr class="hover:bg-gray-50">'
         + '        <td class="px-2 py-2 whitespace-nowrap">' + escapeHtml(formatDateTime(event.occurredAt || event.createdAt)) + '</td>'
         + '        <td class="px-2 py-2 whitespace-nowrap">' + serverCell + '</td>'
         + '        <td class="hidden sm:table-cell px-2 py-2 whitespace-nowrap">' + jailCell + '</td>'
-        + '        <td class="px-2 py-2 whitespace-nowrap">' + ipCell + '</td>'
+        + '        <td class="px-2 py-2 whitespace-nowrap">' + ipCell + eventTypeBadge + '</td>'
         + '        <td class="hidden md:table-cell px-2 py-2 whitespace-nowrap">' + escapeHtml(event.country || '—') + '</td>'
         + '        <td class="px-2 py-2 whitespace-nowrap">'
         + '          <div class="flex gap-2">'

pkg/web/static/js/jails.js

@@ -260,7 +260,7 @@ function openManageJailsModal() {
         const jsEscapedJailName = jail.jailName.replace(/'/g, "\\'");
         return ''
           + '<div class="flex items-center justify-between gap-3 p-3 bg-gray-50">'
-          + '  <span class="text-sm font-medium flex-1">' + escapedJailName + '</span>'
+          + '  <span class="text-sm font-medium flex-1 text-gray-900">' + escapedJailName + '</span>'
           + '  <div class="flex items-center gap-3">'
           + '    <button'
           + '      type="button"'
@@ -282,7 +282,7 @@ function openManageJailsModal() {
           + '        class="w-11 h-6 bg-gray-200 rounded-full peer-focus:ring-4 peer-focus:ring-blue-300 peer-checked:bg-blue-600 transition-colors"'
           + '      ></div>'
           + '      <span'
-          + '        class="absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-transform peer-checked:translate-x-5"'
+          + '        class="absolute left-1 top-1/2 -translate-y-1/2 bg-white w-4 h-4 rounded-full transition-transform peer-checked:translate-x-5"'
           + '      ></span>'
           + '    </label>'
           + '  </div>'

pkg/web/static/js/settings.js

@@ -13,6 +13,32 @@ function onGeoIPProviderChange(provider) {
   }
 }
 
+// Update email fields state based on checkbox preferences
+function updateEmailFieldsState() {
+  const emailAlertsForBans = document.getElementById('emailAlertsForBans').checked;
+  const emailAlertsForUnbans = document.getElementById('emailAlertsForUnbans').checked;
+  const emailEnabled = emailAlertsForBans || emailAlertsForUnbans;
+
+  // Get all email-related fields
+  const emailFields = [
+    document.getElementById('destEmail'),
+    document.getElementById('smtpHost'),
+    document.getElementById('smtpPort'),
+    document.getElementById('smtpUsername'),
+    document.getElementById('smtpPassword'),
+    document.getElementById('smtpFrom'),
+    document.getElementById('smtpUseTLS'),
+    document.getElementById('sendTestEmailBtn')
+  ];
+
+  // Enable/disable all email fields
+  emailFields.forEach(field => {
+    if (field) {
+      field.disabled = !emailEnabled;
+    }
+  });
+}
+
 function loadSettings() {
   showLoading(true);
   fetch('/api/settings')
@@ -78,6 +104,11 @@ function loadSettings() {
 
       document.getElementById('destEmail').value = data.destemail || '';
 
+      // Load email alert preferences
+      document.getElementById('emailAlertsForBans').checked = data.emailAlertsForBans !== undefined ? data.emailAlertsForBans : true;
+      document.getElementById('emailAlertsForUnbans').checked = data.emailAlertsForUnbans !== undefined ? data.emailAlertsForUnbans : false;
+      updateEmailFieldsState();
+
       const select = document.getElementById('alertCountries');
       for (let i = 0; i < select.options.length; i++) {
         select.options[i].selected = false;
@@ -174,6 +205,8 @@ function saveSettings(event) {
     callbackUrl: callbackUrl,
     callbackSecret: document.getElementById('callbackSecret').value.trim(),
     alertCountries: selectedCountries.length > 0 ? selectedCountries : ["ALL"],
+    emailAlertsForBans: document.getElementById('emailAlertsForBans').checked,
+    emailAlertsForUnbans: document.getElementById('emailAlertsForUnbans').checked,
     bantimeIncrement: document.getElementById('bantimeIncrement').checked,
     defaultJailEnable: document.getElementById('defaultJailEnable').checked,
     bantime: document.getElementById('banTime').value.trim(),

pkg/web/static/js/websocket.js

@@ -93,6 +93,9 @@ class WebSocketManager {
       case 'ban_event':
         this.handleBanEvent(message.data);
         break;
+      case 'unban_event':
+        this.handleBanEvent(message.data); // Use same handler for unban events
+        break;
       case 'heartbeat':
         this.handleHeartbeat(message);
         break;

pkg/web/static/lotr.css

@@ -419,10 +419,42 @@ body.lotr-mode .bg-gray-50 {
 }
 
 body.lotr-mode .text-blue-600 {
-  color: var(--lotr-gold);
+  color: var(--lotr-gold) !important;
   font-weight: 600;
 }
 
+/* Text colors in LOTR mode for better visibility */
+body.lotr-mode .bg-gray-50 .text-gray-900,
+body.lotr-mode .bg-gray-50 .text-sm,
+body.lotr-mode .bg-gray-50 .text-sm.font-medium {
+  color: var(--lotr-text-dark) !important;
+}
+
+/* Open insights button styling */
+body.lotr-mode .border-blue-200 {
+  border-color: var(--lotr-gold) !important;
+}
+
+body.lotr-mode .hover\:bg-blue-50:hover {
+  background-color: rgba(212, 175, 55, 0.1) !important;
+}
+
+/* Logpath results styling */
+body.lotr-mode #logpathResults,
+body.lotr-mode pre#logpathResults {
+  background: var(--lotr-warm-parchment) !important;
+  color: var(--lotr-text-dark) !important;
+  border: 2px solid var(--lotr-stone-gray) !important;
+}
+
+body.lotr-mode #logpathResults.text-red-600 {
+  color: var(--lotr-fire-red) !important;
+}
+
+body.lotr-mode #logpathResults.text-yellow-600 {
+  color: var(--lotr-dark-gold) !important;
+}
+
 /* Tables */
 body.lotr-mode table {
   border-collapse: separate;
@@ -570,12 +602,71 @@ body.lotr-mode .select2-container--default .select2-selection--multiple .select2
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
+body.lotr-mode .select2-container--default .select2-selection--multiple > .select2-selection--inline > input.select2-search__field {
+  border: none !important;
+  box-shadow: none !important;
+}
+
 body.lotr-mode .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
   color: var(--lotr-text-dark) !important;
   font-weight: 700;
   margin-right: 6px;
 }
 
+/* Select2 Dropdown Results Styling */
+body.lotr-mode .select2-results__options {
+  background: var(--lotr-warm-parchment) !important;
+  border: 2px solid var(--lotr-stone-gray) !important;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
+}
+
+body.lotr-mode .select2-results__option {
+  background: transparent !important;
+  color: var(--lotr-text-dark) !important;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--lotr-stone-gray);
+}
+
+body.lotr-mode .select2-results__option:last-child {
+  border-bottom: none;
+}
+
+body.lotr-mode .select2-results__option--highlighted,
+body.lotr-mode .select2-results__option[aria-selected="true"] {
+  background: linear-gradient(135deg, var(--lotr-gold) 0%, var(--lotr-dark-gold) 100%) !important;
+  color: var(--lotr-text-dark) !important;
+  font-weight: 600;
+}
+
+body.lotr-mode .select2-results__option--highlighted[aria-selected="true"] {
+  background: linear-gradient(135deg, var(--lotr-bright-gold) 0%, var(--lotr-gold) 100%) !important;
+}
+
+/* Ignore IP Tags Styling */
+body.lotr-mode .ignore-ip-tag {
+  background: linear-gradient(135deg, var(--lotr-warm-parchment) 0%, var(--lotr-dark-parchment) 100%) !important;
+  color: var(--lotr-text-dark) !important;
+  border: 2px solid var(--lotr-stone-gray) !important;
+  font-weight: 600;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+body.lotr-mode .ignore-ip-tag button {
+  color: var(--lotr-text-dark) !important;
+  font-weight: 700;
+  font-size: 1.1em;
+  line-height: 1;
+  padding: 0 2px;
+  transition: all 0.2s ease;
+}
+
+body.lotr-mode .ignore-ip-tag button:hover {
+  color: var(--lotr-fire-red) !important;
+  transform: scale(1.2);
+  text-shadow: 0 0 4px rgba(193, 18, 31, 0.5);
+}
+
 /* Scrollbar Styling */
 body.lotr-mode ::-webkit-scrollbar {
   width: 14px;
@@ -744,6 +835,52 @@ body.lotr-mode input[type="radio"] {
   cursor: pointer;
 }
 
+/* Toggle Switch Styling for LOTR Mode */
+body.lotr-mode label.inline-flex.relative.items-center.cursor-pointer {
+  position: relative;
+  align-items: center;
+}
+
+/* Toggle switch track - default state */
+body.lotr-mode label.inline-flex.relative.items-center.cursor-pointer > div.w-11 {
+  background: var(--lotr-stone-gray) !important;
+  border: 2px solid var(--lotr-brown) !important;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
+  position: relative;
+}
+
+/* Toggle switch track - checked state (using peer-checked) */
+body.lotr-mode label.inline-flex.relative.items-center.cursor-pointer input.peer:checked ~ div {
+  background: linear-gradient(135deg, var(--lotr-bright-gold) 0%, var(--lotr-gold) 100%) !important;
+  border-color: var(--lotr-gold) !important;
+  box-shadow: 
+    0 0 10px rgba(212, 175, 55, 0.5),
+    inset 0 2px 4px rgba(255, 255, 255, 0.3) !important;
+}
+
+/* Toggle switch focus ring */
+body.lotr-mode label.inline-flex.relative.items-center.cursor-pointer input.peer:focus ~ div {
+  box-shadow: 
+    0 0 0 4px rgba(212, 175, 55, 0.3),
+    inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
+}
+
+/* Toggle switch thumb (the circle) - properly centered */
+body.lotr-mode label.inline-flex.relative.items-center.cursor-pointer > span.absolute {
+  background: var(--lotr-parchment) !important;
+  border: 2px solid var(--lotr-brown) !important;
+  box-shadow: 
+    0 2px 4px rgba(0, 0, 0, 0.3),
+    inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  margin-top: 0 !important;
+}
+
+body.lotr-mode label.inline-flex.relative.items-center.cursor-pointer input.peer:checked ~ span {
+  transform: translateX(1.25rem) translateY(-50%) !important;
+}
+
 /* Labels */
 body.lotr-mode label {
   color: var(--lotr-text-dark);