beskar 0.1.0 → 0.2.0

data/app/views/beskar/banned_ips/edit.html.erb

@@ -10,7 +10,8 @@
     <div class="card-subtitle">Modify ban settings for <%= @banned_ip.ip_address %></div>
   </div>
   <div class="card-body">
-    <%= form_with model: @banned_ip, url: banned_ip_path(@banned_ip), method: :patch, local: true do |f| %>
+    <%= form_with model: @banned_ip, url: banned_ip_path(@banned_ip), method: :patch, local: true, data: { beskar_ban_form: true } do |f| %>
+      <%= hidden_field_tag :expiry_precision, "milliseconds" %>
       <% if @banned_ip.errors.any? %>
         <div class="alert alert-danger">
           <h4 style="font-size: 14px; font-weight: 600; margin-bottom: 0.5rem;">
@@ -47,11 +48,13 @@
               <span style="font-size: 13px; color: #697386;">
                 Expires in <%= distance_of_time_in_words(Time.current, @banned_ip.expires_at) %>
               </span>
-            <% else %>
+            <% elsif @banned_ip.expires_at %>
               <span class="badge badge-neutral">Expired</span>
               <span style="font-size: 13px; color: #697386;">
                 Expired <%= time_ago_in_words(@banned_ip.expires_at) %> ago
               </span>
+            <% else %>
+              <span class="badge badge-warning">Expiry required for a temporary ban</span>
             <% end %>
           </div>
         </div>
@@ -60,15 +63,7 @@
         <div class="form-group">
           <%= f.label :reason, "Ban Reason *" %>
           <%= f.select :reason,
-              options_for_select([
-                ['Rate Limit Abuse', 'rate_limit_abuse'],
-                ['Authentication Abuse', 'authentication_abuse'],
-                ['WAF Violation', 'waf_violation'],
-                ['Brute Force Attack', 'brute_force_attack'],
-                ['Suspicious Activity', 'suspicious_activity'],
-                ['Manual Ban', 'manual_ban'],
-                ['Other', 'other']
-              ], @banned_ip.reason),
+              options_for_select(ban_reason_options, @banned_ip.reason),
               { prompt: 'Select a reason...' },
               { required: true } %>
           <div style="font-size: 12px; color: #697386; margin-top: 0.25rem;">
@@ -82,13 +77,11 @@
           <div style="display: flex; flex-direction: column; gap: 0.5rem;">
             <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
               <%= f.radio_button :permanent, false,
-                  onchange: "toggleDurationFields()",
                   checked: !@banned_ip.permanent? %>
               <span style="font-weight: normal;">Temporary Ban</span>
             </label>
             <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
               <%= f.radio_button :permanent, true,
-                  onchange: "toggleDurationFields()",
                   checked: @banned_ip.permanent? %>
               <span style="font-weight: normal; color: #D32F2F;">Permanent Ban</span>
             </label>
@@ -101,27 +94,28 @@
         </div>
 
         <!-- Temporary Ban Options -->
-        <div id="temporary-options" style="<%= @banned_ip.permanent? ? 'display: none;' : '' %>">
+        <div id="temporary-options">
           <div class="form-group">
-            <%= f.label :expires_at, "Expiry Date/Time" %>
+            <%= f.label :expires_at, "Expiry Date/Time (UTC)" %>
             <%= f.datetime_field :expires_at,
-                value: @banned_ip.expires_at&.strftime('%Y-%m-%dT%H:%M'),
-                min: DateTime.now.strftime('%Y-%m-%dT%H:%M') %>
+                value: ban_expiry_input_value(@banned_ip.expires_at),
+                step: "0.001" %>
             <div style="font-size: 12px; color: #697386; margin-top: 0.25rem;">
-              Set when this ban should expire. Leave empty for default duration.
+              Enter the expiry in UTC, not your browser timezone. Temporary bans require an expiry.
             </div>
           </div>
 
           <!-- Quick Extension Options -->
           <div class="form-group">
             <label>Quick Extension</label>
+            <noscript><p>Quick buttons require JavaScript. You can enter the UTC expiry directly or select Permanent Ban above.</p></noscript>
             <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;">
-              <button type="button" onclick="extendBan(1)" class="btn btn-sm btn-secondary">+1 Hour</button>
-              <button type="button" onclick="extendBan(24)" class="btn btn-sm btn-secondary">+1 Day</button>
-              <button type="button" onclick="extendBan(168)" class="btn btn-sm btn-secondary">+7 Days</button>
-              <button type="button" onclick="extendBan(720)" class="btn btn-sm btn-secondary">+30 Days</button>
-              <button type="button" onclick="extendBan(2160)" class="btn btn-sm btn-secondary">+90 Days</button>
-              <button type="button" onclick="makePermanent()" class="btn btn-sm btn-danger">Make Permanent</button>
+              <button type="button" data-beskar-extend-hours="1" class="btn btn-sm btn-secondary">+1 Hour</button>
+              <button type="button" data-beskar-extend-hours="24" class="btn btn-sm btn-secondary">+1 Day</button>
+              <button type="button" data-beskar-extend-hours="168" class="btn btn-sm btn-secondary">+7 Days</button>
+              <button type="button" data-beskar-extend-hours="720" class="btn btn-sm btn-secondary">+30 Days</button>
+              <button type="button" data-beskar-extend-hours="2160" class="btn btn-sm btn-secondary">+90 Days</button>
+              <button type="button" data-beskar-make-permanent class="btn btn-sm btn-danger">Make Permanent</button>
             </div>
           </div>
         </div>
@@ -140,7 +134,7 @@
         <!-- Violation Count -->
         <div class="form-group">
           <%= f.label :violation_count, "Violation Count" %>
-          <%= f.number_field :violation_count, min: 0 %>
+          <%= f.number_field :violation_count, min: 1 %>
           <div style="font-size: 12px; color: #697386; margin-top: 0.25rem;">
             Current violation count: <%= @banned_ip.violation_count %>. Higher counts may result in longer bans for repeat offenders.
           </div>
@@ -183,77 +177,19 @@
           </div>
         </div>
 
+        <div class="form-group">
+          <%= label_tag :audit_reason, "Administrative reason *" %>
+          <%= text_area_tag :audit_reason, params[:audit_reason], required: true, maxlength: 1000, rows: 2 %>
+        </div>
+
         <!-- Submit Buttons -->
         <div style="display: flex; gap: 0.5rem;">
           <%= f.submit "Update Ban", class: "btn btn-primary" %>
           <%= link_to "Cancel", banned_ip_path(@banned_ip), class: "btn btn-secondary" %>
-          <%= link_to "Delete Ban", banned_ip_path(@banned_ip),
-              data: {
-                "turbo-method": "delete",
-                "turbo-confirm": "Are you sure you want to unban #{@banned_ip.ip_address}?"
-              },
+          <%= link_to "Delete Ban", review_banned_ip_path(@banned_ip, operation: "unban"),
               class: "btn btn-danger" %>
         </div>
       </div>
     <% end %>
   </div>
 </div>
-
-<script>
-  function toggleDurationFields() {
-    const isPermanent = document.querySelector('input[name="banned_ip[permanent]"]:checked').value === 'true';
-    const temporaryOptions = document.getElementById('temporary-options');
-
-    if (isPermanent) {
-      temporaryOptions.style.display = 'none';
-      document.getElementById('banned_ip_expires_at').value = '';
-    } else {
-      temporaryOptions.style.display = 'block';
-      // If switching from permanent to temporary, set a default expiry
-      if (!document.getElementById('banned_ip_expires_at').value) {
-        const defaultExpiry = new Date(Date.now() + 24 * 60 * 60 * 1000); // 24 hours from now
-        document.getElementById('banned_ip_expires_at').value = defaultExpiry.toISOString().slice(0, 16);
-      }
-    }
-  }
-
-  function extendBan(hours) {
-    const expiresField = document.getElementById('banned_ip_expires_at');
-    let currentExpiry;
-
-    if (expiresField.value) {
-      currentExpiry = new Date(expiresField.value);
-    } else {
-      // Use current ban expiry or current time
-      <% if @banned_ip.expires_at %>
-        currentExpiry = new Date('<%= @banned_ip.expires_at.iso8601 %>');
-      <% else %>
-        currentExpiry = new Date();
-      <% end %>
-    }
-
-    // Add the specified hours
-    currentExpiry.setHours(currentExpiry.getHours() + hours);
-
-    // Update the field
-    expiresField.value = currentExpiry.toISOString().slice(0, 16);
-
-    // Show a visual feedback
-    const originalBg = expiresField.style.background;
-    expiresField.style.background = '#E8F5E9';
-    setTimeout(() => {
-      expiresField.style.background = originalBg;
-    }, 500);
-  }
-
-  function makePermanent() {
-    document.querySelector('input[name="banned_ip[permanent]"][value="true"]').checked = true;
-    toggleDurationFields();
-  }
-
-  // Initialize on page load
-  document.addEventListener('DOMContentLoaded', function() {
-    // Set initial state
-    toggleDurationFields();
-  });
-</script>

data/app/views/beskar/banned_ips/index.html.erb

@@ -3,10 +3,7 @@
 <% content_for :header_actions do %>
   <div style="display: flex; gap: 0.5rem;">
     <%= link_to "+ New Ban", new_banned_ip_path, class: "btn btn-primary" %>
-    <%= link_to "Export CSV", export_banned_ips_path(format: :csv, params: request.query_parameters),
-        class: "btn btn-secondary" %>
-    <%= link_to "Export JSON", export_banned_ips_path(format: :json, params: request.query_parameters),
-        class: "btn btn-secondary" %>
+    <%= render "beskar/shared/export_form", export_url: export_banned_ips_path %>
   </div>
 <% end %>
 
@@ -76,15 +73,16 @@
   </div>
 
   <div style="display: flex; align-items: center; gap: 0.5rem;">
-    <label style="margin: 0; font-size: 13px; color: #697386;">Per page:</label>
+    <label for="per_page" style="margin: 0; font-size: 13px; color: #697386;">Per page:</label>
     <%= form_with url: banned_ips_path, method: :get, local: true, style: "display: inline;" do |f| %>
-      <% request.query_parameters.except(:per_page).each do |key, value| %>
+      <% request.query_parameters.except("per_page", "page").each do |key, value| %>
         <%= hidden_field_tag key, value %>
       <% end %>
       <%= select_tag :per_page,
           options_for_select([10, 25, 50, 100], params[:per_page]&.to_i || 25),
-          onchange: "this.form.submit();",
+          data: { beskar_auto_submit: true },
           style: "padding: 0.25rem 0.5rem; font-size: 13px;" %>
+      <%= submit_tag "Apply page size", class: "btn btn-sm btn-secondary" %>
     <% end %>
   </div>
 </div>
@@ -92,7 +90,7 @@
 <!-- Bulk Actions Form -->
 <%= form_with url: bulk_action_banned_ips_path, method: :post, local: true, id: "bulk-actions-form" do |f| %>
   <!-- Bulk Actions Bar -->
-  <div class="card" id="bulk-actions-bar" style="display: none; margin-bottom: 1rem;">
+  <div class="card" id="bulk-actions-bar" style="margin-bottom: 1rem;">
     <div class="card-body" style="padding: 0.75rem 1rem;">
       <div style="display: flex; justify-content: space-between; align-items: center;">
         <div style="display: flex; align-items: center; gap: 1rem;">
@@ -100,13 +98,17 @@
             <span id="selected-count">0</span> items selected
           </span>
 
+          <div class="form-group">
+            <%= label_tag :audit_reason, "Administrative reason (all selected bans)" %>
+            <%= text_field_tag :audit_reason, nil, required: true, maxlength: 1000 %>
+          </div>
           <div style="display: flex; gap: 0.5rem;">
-            <%= submit_tag "Unban Selected", name: "bulk_action", value: "unban",
+            <%= button_tag "Unban Selected", name: "bulk_action", value: "unban",
                 class: "btn btn-sm btn-secondary",
-                onclick: "return confirm('Are you sure you want to unban the selected IPs?');" %>
-            <%= submit_tag "Make Permanent", name: "bulk_action", value: "make_permanent",
+                data: { beskar_confirm: "Unban all selected IPs?" } %>
+            <%= button_tag "Make Permanent", name: "bulk_action", value: "make_permanent",
                 class: "btn btn-sm btn-danger",
-                onclick: "return confirm('Are you sure you want to make the selected bans permanent?');" %>
+                data: { beskar_confirm: "Make all selected bans permanent?" } %>
 
             <div style="display: flex; align-items: center; gap: 0.25rem;">
               <%= select_tag :duration,
@@ -116,13 +118,13 @@
                     ['Extend by 30d', '30d']
                   ]),
                   style: "padding: 0.25rem 0.5rem; font-size: 13px;" %>
-              <%= submit_tag "Extend", name: "bulk_action", value: "extend",
+              <%= button_tag "Extend Selected", name: "bulk_action", value: "extend",
                   class: "btn btn-sm btn-warning" %>
             </div>
           </div>
         </div>
 
-        <button type="button" onclick="clearSelection()" class="btn btn-sm btn-secondary">
+        <button type="button" data-beskar-clear-selection class="btn btn-sm btn-secondary">
           Clear Selection
         </button>
       </div>
@@ -137,7 +139,7 @@
           <thead>
             <tr>
               <th style="width: 40px;">
-                <input type="checkbox" id="select-all" onchange="toggleSelectAll(this)">
+                <input type="checkbox" id="select-all" aria-label="Select all bans">
               </th>
               <th>IP Address</th>
               <th>Reason</th>
@@ -154,8 +156,7 @@
                 <tr>
                   <td>
                     <%= check_box_tag "ip_ids[]", ban.id, false,
-                        class: "ban-checkbox",
-                        onchange: "updateBulkActions()" %>
+                        class: "ban-checkbox", aria: { label: "Select ban #{ban.ip_address}" } %>
                   </td>
                   <td>
                     <div style="font-family: monospace; font-size: 14px; font-weight: 500;">
@@ -226,19 +227,11 @@
                           class: "btn btn-sm btn-secondary" %>
 
                       <% if ban.active? && !ban.permanent? %>
-                        <%= link_to "Extend", extend_banned_ip_path(ban, duration: '24h'),
-                            data: {
-                              "turbo-method": "post",
-                              "turbo-confirm": "Extend this ban by 24 hours?"
-                            },
+                        <%= link_to "Extend", review_banned_ip_path(ban, operation: 'extend', duration: '24h'),
                             class: "btn btn-sm btn-warning" %>
                       <% end %>
 
-                      <%= link_to "Unban", banned_ip_path(ban),
-                          data: {
-                            "turbo-method": "delete",
-                            "turbo-confirm": "Are you sure you want to unban #{ban.ip_address}?"
-                          },
+                      <%= link_to "Unban", review_banned_ip_path(ban, operation: 'unban'),
                           class: "btn btn-sm btn-danger" %>
                     </div>
                   </td>
@@ -324,38 +317,3 @@
     Total: <%= number_with_delimiter(@pagination[:total_count]) %> banned IPs
   </div>
 <% end %>
-
-<script>
-  function toggleSelectAll(checkbox) {
-    const checkboxes = document.querySelectorAll('.ban-checkbox');
-    checkboxes.forEach(cb => {
-      cb.checked = checkbox.checked;
-    });
-    updateBulkActions();
-  }
-
-  function updateBulkActions() {
-    const checkboxes = document.querySelectorAll('.ban-checkbox:checked');
-    const bulkBar = document.getElementById('bulk-actions-bar');
-    const selectedCount = document.getElementById('selected-count');
-
-    if (checkboxes.length > 0) {
-      bulkBar.style.display = 'block';
-      selectedCount.textContent = checkboxes.length;
-    } else {
-      bulkBar.style.display = 'none';
-    }
-
-    // Update select-all checkbox state
-    const selectAll = document.getElementById('select-all');
-    const allCheckboxes = document.querySelectorAll('.ban-checkbox');
-    if (allCheckboxes.length > 0) {
-      selectAll.checked = checkboxes.length === allCheckboxes.length;
-    }
-  }
-
-  function clearSelection() {
-    document.getElementById('select-all').checked = false;
-    toggleSelectAll(document.getElementById('select-all'));
-  }
-</script>

data/app/views/beskar/banned_ips/new.html.erb

@@ -10,7 +10,7 @@
     <div class="card-subtitle">Add a new IP address to the ban list</div>
   </div>
   <div class="card-body">
-    <%= form_with model: @banned_ip, url: banned_ips_path, local: true do |f| %>
+    <%= form_with model: @banned_ip, url: banned_ips_path, local: true, data: { beskar_ban_form: true } do |f| %>
       <% if @banned_ip.errors.any? %>
         <div class="alert alert-danger">
           <h4 style="font-size: 14px; font-weight: 600; margin-bottom: 0.5rem;">
@@ -42,15 +42,7 @@
         <div class="form-group">
           <%= f.label :reason, "Ban Reason *" %>
           <%= f.select :reason,
-              options_for_select([
-                ['Rate Limit Abuse', 'rate_limit_abuse'],
-                ['Authentication Abuse', 'authentication_abuse'],
-                ['WAF Violation', 'waf_violation'],
-                ['Brute Force Attack', 'brute_force_attack'],
-                ['Suspicious Activity', 'suspicious_activity'],
-                ['Manual Ban', 'manual_ban'],
-                ['Other', 'other']
-              ], @suggested_reason || @banned_ip.reason),
+              options_for_select(ban_reason_options, @suggested_reason || @banned_ip.reason),
               { prompt: 'Select a reason...' },
               { required: true } %>
           <div style="font-size: 12px; color: #697386; margin-top: 0.25rem;">
@@ -63,20 +55,18 @@
           <label>Ban Duration *</label>
           <div style="display: flex; flex-direction: column; gap: 0.5rem;">
             <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
-              <%= radio_button_tag :ban_type, 'temporary', !@banned_ip.permanent?,
-                  onchange: "toggleDurationFields()" %>
+              <%= radio_button_tag :ban_type, 'temporary', !@banned_ip.permanent? %>
               <span style="font-weight: normal;">Temporary Ban</span>
             </label>
             <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
-              <%= radio_button_tag :ban_type, 'permanent', @banned_ip.permanent?,
-                  onchange: "toggleDurationFields()" %>
+              <%= radio_button_tag :ban_type, 'permanent', @banned_ip.permanent? %>
               <span style="font-weight: normal; color: #D32F2F;">Permanent Ban</span>
             </label>
           </div>
         </div>
 
         <!-- Temporary Ban Options -->
-        <div id="temporary-options" style="<%= @banned_ip.permanent? ? 'display: none;' : '' %>">
+        <div id="temporary-options">
           <div class="form-group">
             <label>Duration</label>
             <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;">
@@ -89,21 +79,21 @@
                 ['90 Days', 90.days]
               ].each do |label, duration| %>
                 <label style="display: flex; align-items: center; padding: 0.75rem; background: #FAFBFC; border: 1px solid #E3E8EE; border-radius: 6px; cursor: pointer;">
-                  <%= radio_button_tag :duration, duration.to_i, false %>
+                  <%= radio_button_tag :duration, duration.to_i, params[:duration].to_s == duration.to_i.to_s %>
                   <span style="margin-left: 0.5rem; font-size: 13px; font-weight: normal;"><%= label %></span>
                 </label>
               <% end %>
             </div>
             <div style="font-size: 12px; color: #697386; margin-top: 0.5rem;">
-              Or specify a custom expiry date and time:
+              Or specify a custom expiry in UTC. Without either, the server applies 24 hours:
             </div>
           </div>
 
           <div class="form-group">
-            <%= f.label :expires_at, "Custom Expiry Date/Time" %>
+            <%= f.label :expires_at, "Custom Expiry Date/Time (UTC)" %>
             <%= f.datetime_field :expires_at,
-                value: @banned_ip.expires_at&.strftime('%Y-%m-%dT%H:%M'),
-                min: DateTime.now.strftime('%Y-%m-%dT%H:%M') %>
+                value: (params.dig(:banned_ip, :expires_at).present? ? ban_expiry_input_value(@banned_ip.expires_at) : ""),
+                step: "0.001" %>
           </div>
         </div>
 
@@ -123,7 +113,7 @@
           <%= f.label :violation_count, "Initial Violation Count" %>
           <%= f.number_field :violation_count,
               value: @banned_ip.violation_count || 1,
-              min: 0 %>
+              min: 1 %>
           <div style="font-size: 12px; color: #697386; margin-top: 0.25rem;">
             Set the initial violation count. This affects ban escalation for repeat offenders.
           </div>
@@ -139,6 +129,12 @@
           </div>
         <% end %>
 
+        <div class="form-group">
+          <%= label_tag :audit_reason, "Administrative reason *" %>
+          <%= text_area_tag :audit_reason, params[:audit_reason], required: true, maxlength: 1000, rows: 2 %>
+          <p>Use a case reference or brief explanation, without credentials or other secrets.</p>
+        </div>
+
         <!-- Submit Buttons -->
         <div style="display: flex; gap: 0.5rem;">
           <%= f.submit "Ban IP Address", class: "btn btn-danger" %>
@@ -150,7 +146,7 @@
 </div>
 
 <!-- Preview Card -->
-<div class="card" id="ban-preview" style="display: none;">
+<div class="card" id="ban-preview" hidden>
   <div class="card-header">
     <h3 class="card-title">Ban Preview</h3>
     <div class="card-subtitle">This is how the ban will appear</div>
@@ -192,119 +188,3 @@
     </div>
   </div>
 </div>
-
-<script>
-  function toggleDurationFields() {
-    const isPermanent = document.querySelector('input[name="ban_type"]:checked').value === 'permanent';
-    const temporaryOptions = document.getElementById('temporary-options');
-
-    if (isPermanent) {
-      temporaryOptions.style.display = 'none';
-      // Clear duration selections
-      document.querySelectorAll('input[name="duration"]').forEach(input => {
-        input.checked = false;
-      });
-      document.getElementById('banned_ip_expires_at').value = '';
-    } else {
-      temporaryOptions.style.display = 'block';
-    }
-
-    updatePreview();
-  }
-
-  function updatePreview() {
-    const previewCard = document.getElementById('ban-preview');
-    const ipInput = document.getElementById('banned_ip_ip_address');
-    const reasonSelect = document.getElementById('banned_ip_reason');
-
-    if (ipInput.value || reasonSelect.value) {
-      previewCard.style.display = 'block';
-
-      // Update IP
-      document.getElementById('preview-ip').textContent = ipInput.value || '-';
-
-      // Update reason
-      const reasonText = reasonSelect.options[reasonSelect.selectedIndex]?.text || '-';
-      document.getElementById('preview-reason').textContent = reasonText;
-
-      // Update duration
-      const isPermanent = document.querySelector('input[name="ban_type"]:checked')?.value === 'permanent';
-      if (isPermanent) {
-        document.getElementById('preview-duration').textContent = 'Permanent';
-        document.getElementById('preview-duration').style.color = '#D32F2F';
-        document.getElementById('preview-status').className = 'badge badge-critical';
-        document.getElementById('preview-status').textContent = 'Permanent';
-      } else {
-        const durationRadio = document.querySelector('input[name="duration"]:checked');
-        const customExpiry = document.getElementById('banned_ip_expires_at').value;
-
-        if (customExpiry) {
-          const expiryDate = new Date(customExpiry);
-          document.getElementById('preview-duration').textContent = expiryDate.toLocaleString();
-        } else if (durationRadio) {
-          const label = durationRadio.parentElement.textContent.trim();
-          document.getElementById('preview-duration').textContent = label;
-        } else {
-          document.getElementById('preview-duration').textContent = 'Not specified';
-        }
-        document.getElementById('preview-duration').style.color = '#1A1F36';
-        document.getElementById('preview-status').className = 'badge badge-danger';
-        document.getElementById('preview-status').textContent = 'Active';
-      }
-    } else {
-      previewCard.style.display = 'none';
-    }
-  }
-
-  // Set up event listeners
-  document.addEventListener('DOMContentLoaded', function() {
-    // Update preview on input changes
-    document.getElementById('banned_ip_ip_address').addEventListener('input', updatePreview);
-    document.getElementById('banned_ip_reason').addEventListener('change', updatePreview);
-    document.getElementById('banned_ip_expires_at').addEventListener('change', updatePreview);
-
-    document.querySelectorAll('input[name="duration"]').forEach(input => {
-      input.addEventListener('change', function() {
-        // Clear custom expiry when selecting a preset duration
-        document.getElementById('banned_ip_expires_at').value = '';
-        updatePreview();
-      });
-    });
-
-    // Clear preset duration when entering custom expiry
-    document.getElementById('banned_ip_expires_at').addEventListener('input', function() {
-      if (this.value) {
-        document.querySelectorAll('input[name="duration"]').forEach(input => {
-          input.checked = false;
-        });
-      }
-    });
-
-    // Initial preview update
-    updatePreview();
-
-    // Handle form submission
-    document.querySelector('form').addEventListener('submit', function(e) {
-      const isPermanent = document.querySelector('input[name="ban_type"]:checked').value === 'permanent';
-
-      if (isPermanent) {
-        // Set permanent flag
-        const permanentField = document.createElement('input');
-        permanentField.type = 'hidden';
-        permanentField.name = 'banned_ip[permanent]';
-        permanentField.value = 'true';
-        this.appendChild(permanentField);
-      } else {
-        // Calculate expires_at based on duration if not custom
-        const durationRadio = document.querySelector('input[name="duration"]:checked');
-        const customExpiry = document.getElementById('banned_ip_expires_at').value;
-
-        if (!customExpiry && durationRadio) {
-          const durationSeconds = parseInt(durationRadio.value);
-          const expiresAt = new Date(Date.now() + durationSeconds * 1000);
-          document.getElementById('banned_ip_expires_at').value = expiresAt.toISOString().slice(0, 16);
-        }
-      }
-    });
-  });
-</script>

data/app/views/beskar/banned_ips/review.html.erb

@@ -0,0 +1,24 @@
+<% content_for :page_title, "Review ban action" %>
+<div class="card">
+  <div class="card-header"><h3 class="card-title"><%= @operation.titleize %> <%= @banned_ip.ip_address %></h3></div>
+  <div class="card-body">
+    <p>This change will be recorded with your administrative identity and its previous and resulting state.</p>
+    <%= form_with url: (@operation == "unban" ? banned_ip_path(@banned_ip) : extend_banned_ip_path(@banned_ip)),
+        method: (@operation == "unban" ? :delete : :post), local: true do %>
+      <% if @operation == "extend" %>
+        <div class="form-group">
+          <%= label_tag :duration, "Extension" %>
+          <%= select_tag :duration, options_for_select([['1 hour', '1h'], ['6 hours', '6h'], ['24 hours', '24h'],
+              ['7 days', '7d'], ['30 days', '30d'], ['Make permanent', 'permanent']], params[:duration] || '24h') %>
+        </div>
+      <% end %>
+      <div class="form-group">
+        <%= label_tag :audit_reason, "Reason for this administrative action" %>
+        <%= text_area_tag :audit_reason, nil, required: true, maxlength: 1000, rows: 3 %>
+        <p>Use a case reference or brief explanation. Do not include credentials or other secrets.</p>
+      </div>
+      <%= submit_tag "Confirm #{@operation}", class: "btn btn-danger" %>
+      <%= link_to "Cancel", banned_ip_path(@banned_ip), class: "btn btn-secondary" %>
+    <% end %>
+  </div>
+</div>