diff --git a/pkg/web/static/fail2ban-ui.css b/pkg/web/static/fail2ban-ui.css index f8b1cb8..d6a60f8 100644 --- a/pkg/web/static/fail2ban-ui.css +++ b/pkg/web/static/fail2ban-ui.css @@ -467,6 +467,25 @@ button.bg-red-500:hover, button.bg-red-600:hover { color: #f3f4f6; } +/* Ignore IPs container - ensure proper wrapping and prevent horizontal overflow */ +#ignoreIPsContainer { + overflow-x: hidden; + word-wrap: break-word; + overflow-wrap: break-word; +} + +#ignoreIPsTags { + max-width: 100%; + overflow-wrap: anywhere; + word-break: break-word; +} + +.ignore-ip-tag { + max-width: 100%; + word-break: break-all; + overflow-wrap: anywhere; +} + #wsTooltip .border-gray-700 { border-color: rgb(55 65 81); } diff --git a/pkg/web/static/js/ignoreips.js b/pkg/web/static/js/ignoreips.js index 5f8ac0c..b0c36e4 100644 --- a/pkg/web/static/js/ignoreips.js +++ b/pkg/web/static/js/ignoreips.js @@ -68,14 +68,14 @@ function setupIgnoreIPsInput() { const input = document.getElementById('ignoreIPInput'); if (!input) return; - // Prevent typing invalid characters - only allow valid IP/hostname characters + // Allow spaces for space-separated lists, but validate on paste/enter/blur let lastValue = ''; input.addEventListener('input', function(e) { - // Filter out invalid characters but allow valid IP/hostname characters - // Allow: 0-9, a-z, A-Z, :, ., /, -, _ (for hostnames) + // 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 - const filtered = value.replace(/[^0-9a-zA-Z:.\/\-_]/g, ''); + // 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; } @@ -101,5 +101,21 @@ 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 + } + } + }, 0); + }); }