feat: implement IP ban management with override functionality and UI updates

src/templates/static/js/dashboard.js

@@ -31,6 +31,10 @@ document.addEventListener('alpine:init', () => {
                 if (resp.ok) this.authenticated = true;
             } catch {}
 
+            // Sync ban action button visibility with auth state
+            this.$watch('authenticated', (val) => updateBanActionVisibility(val));
+            updateBanActionVisibility(this.authenticated);
+
             // Handle hash-based tab routing
             const hash = window.location.hash.slice(1);
             if (hash === 'ip-stats' || hash === 'attacks') {
@@ -261,6 +265,94 @@ window.openIpInsight = function(ip) {
     }
 };
 
+// Custom modal system (replaces native confirm/alert)
+window.krawlModal = {
+    _create(icon, iconClass, message, buttons) {
+        return new Promise(resolve => {
+            const overlay = document.createElement('div');
+            overlay.className = 'krawl-modal-overlay';
+            overlay.innerHTML = `
+                <div class="krawl-modal-box">
+                    <div class="krawl-modal-icon ${iconClass}">
+                        <span class="material-symbols-outlined">${icon}</span>
+                    </div>
+                    <div class="krawl-modal-message">${message}</div>
+                    <div class="krawl-modal-actions" id="krawl-modal-actions"></div>
+                </div>`;
+            const actions = overlay.querySelector('#krawl-modal-actions');
+            buttons.forEach(btn => {
+                const el = document.createElement('button');
+                el.className = `auth-modal-btn ${btn.cls}`;
+                el.textContent = btn.label;
+                el.onclick = () => { overlay.remove(); resolve(btn.value); };
+                actions.appendChild(el);
+            });
+            overlay.addEventListener('click', e => {
+                if (e.target === overlay) { overlay.remove(); resolve(false); }
+            });
+            document.body.appendChild(overlay);
+        });
+    },
+    confirm(message) {
+        return this._create('warning', 'krawl-modal-icon-warn', message, [
+            { label: 'Cancel', cls: 'auth-modal-btn-cancel', value: false },
+            { label: 'Confirm', cls: 'auth-modal-btn-submit', value: true },
+        ]);
+    },
+    success(message) {
+        return this._create('check_circle', 'krawl-modal-icon-success', message, [
+            { label: 'OK', cls: 'auth-modal-btn-submit', value: true },
+        ]);
+    },
+    error(message) {
+        return this._create('error', 'krawl-modal-icon-error', message, [
+            { label: 'OK', cls: 'auth-modal-btn-cancel', value: true },
+        ]);
+    },
+};
+
+// Global ban action for IP insight page (auth-gated)
+window.ipBanAction = async function(ip, action) {
+    // Check if authenticated
+    const container = document.querySelector('[x-data="dashboardApp()"]');
+    const data = container && (Alpine.$data ? Alpine.$data(container) : (container._x_dataStack && container._x_dataStack[0]));
+    if (!data || !data.authenticated) {
+        if (data && typeof data.promptAuth === 'function') data.promptAuth();
+        return;
+    }
+    const confirmed = await krawlModal.confirm(`Are you sure you want to ${action} IP <strong>${ip}</strong>?`);
+    if (!confirmed) return;
+    try {
+        const resp = await fetch(`${window.__DASHBOARD_PATH__}/api/ban-override`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            credentials: 'same-origin',
+            body: JSON.stringify({ ip, action }),
+        });
+        const result = await resp.json().catch(() => ({}));
+        if (resp.ok) {
+            krawlModal.success(result.message || `${action} successful for ${ip}`);
+        } else {
+            krawlModal.error(result.error || `Failed to ${action} IP ${ip}`);
+        }
+    } catch {
+        krawlModal.error('Request failed');
+    }
+};
+
+// Show/hide ban action buttons based on auth state
+function updateBanActionVisibility(authenticated) {
+    document.querySelectorAll('.ip-ban-actions').forEach(el => {
+        el.style.display = authenticated ? 'inline-flex' : 'none';
+    });
+}
+// Update visibility after HTMX swaps in new content
+document.addEventListener('htmx:afterSwap', () => {
+    const container = document.querySelector('[x-data="dashboardApp()"]');
+    const data = container && (Alpine.$data ? Alpine.$data(container) : (container._x_dataStack && container._x_dataStack[0]));
+    if (data) updateBanActionVisibility(data.authenticated);
+});
+
 // Utility function for formatting timestamps (used by map popups)
 function formatTimestamp(isoTimestamp) {
     if (!isoTimestamp) return 'N/A';