Add DeviceDetector and postres_cursor

app/javascript/controllers/quick_create_rule_controller.js

@@ -2,18 +2,29 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["form", "toggle", "ruleTypeSelect", "actionSelect", "patternFields", "rateLimitFields", "redirectFields", "helpText", "conditionsField"]
+  static targets = ["form", "toggle", "ruleTypeSelect", "actionSelect", "patternFields", "rateLimitFields", "redirectFields", "helpText", "conditionsField", "expiresAtField"]
 
   connect() {
-    this.setupEventListeners()
+    console.log("QuickCreateRuleController connected")
     this.initializeFieldVisibility()
   }
 
   toggle() {
-    this.formTarget.classList.toggle("hidden")
+    console.log("Toggle method called")
+    console.log("Form target:", this.formTarget)
 
-    if (this.formTarget.classList.contains("hidden")) {
-      this.resetForm()
+    if (this.formTarget) {
+      this.formTarget.classList.toggle("hidden")
+      console.log("Toggled hidden class, now:", this.formTarget.classList.contains("hidden"))
+
+      if (this.formTarget.classList.contains("hidden")) {
+        this.resetForm()
+      } else {
+        // Form is being shown, clear the expires_at field for Safari
+        this.clearExpiresAtField()
+      }
+    } else {
+      console.error("Form target not found!")
     }
   }
 
@@ -81,13 +92,28 @@ export default class extends Controller {
     if (this.hasRedirectFieldsTarget) this.redirectFieldsTarget.classList.add("hidden")
   }
 
+  clearExpiresAtField() {
+    // Clear the expires_at field - much simpler with text field
+    if (this.hasExpiresAtFieldTarget) {
+      this.expiresAtFieldTarget.value = ''
+    }
+  }
+
   resetForm() {
     if (this.formTarget) {
-      this.formTarget.reset()
-      // Reset rule type to default
-      if (this.hasRuleTypeSelectTarget) {
-        this.ruleTypeSelectTarget.value = "network"
-        this.updateRuleTypeFields()
+      // Find the actual form element within the form target div
+      const formElement = this.formTarget.querySelector('form')
+      if (formElement) {
+        formElement.reset()
+
+        // Explicitly clear the expires_at field since browser reset might not clear datetime-local fields properly
+        this.clearExpiresAtField()
+
+        // Reset rule type to default
+        if (this.hasRuleTypeSelectTarget) {
+          this.ruleTypeSelectTarget.value = "network"
+          this.updateRuleTypeFields()
+        }
       }
     }
   }
@@ -95,19 +121,8 @@ export default class extends Controller {
   // Private methods
 
   setupEventListeners() {
-    // Set up action change listener to show/hide redirect fields
-    if (this.hasActionSelectTarget) {
-      this.actionSelectTarget.addEventListener("change", () => {
-        this.updateRuleTypeFields()
-      })
-    }
-
-    // Set up toggle button listener
-    if (this.hasToggleTarget) {
-      this.toggleTarget.addEventListener("click", () => {
-        this.toggle()
-      })
-    }
+    // Event listeners are handled via data-action attributes in the HTML
+    // No manual event listeners needed
   }
 
   initializeFieldVisibility() {

app/javascript/controllers/waf_policy_form_controller.js

@@ -0,0 +1,55 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class WafPolicyFormController extends Controller {
+  static targets = ["policyTypeSelect", "policyActionSelect", "countryTargets", "asnTargets",
+                   "companyTargets", "networkTypeTargets", "redirectConfig", "challengeConfig"]
+
+  connect() {
+    this.updateTargetsVisibility()
+    this.updateActionConfig()
+  }
+
+  updateTargetsVisibility() {
+    const selectedType = this.policyTypeSelectTarget.value
+
+    // Hide all target sections
+    this.countryTargetsTarget.classList.add('hidden')
+    this.asnTargetsTarget.classList.add('hidden')
+    this.companyTargetsTarget.classList.add('hidden')
+    this.networkTypeTargetsTarget.classList.add('hidden')
+
+    // Show relevant target section
+    switch(selectedType) {
+      case 'country':
+        this.countryTargetsTarget.classList.remove('hidden')
+        break
+      case 'asn':
+        this.asnTargetsTarget.classList.remove('hidden')
+        break
+      case 'company':
+        this.companyTargetsTarget.classList.remove('hidden')
+        break
+      case 'network_type':
+        this.networkTypeTargetsTarget.classList.remove('hidden')
+        break
+    }
+  }
+
+  updateActionConfig() {
+    const selectedAction = this.policyActionSelectTarget.value
+
+    // Hide all config sections
+    this.redirectConfigTarget.classList.add('hidden')
+    this.challengeConfigTarget.classList.add('hidden')
+
+    // Show relevant config section
+    switch(selectedAction) {
+      case 'redirect':
+        this.redirectConfigTarget.classList.remove('hidden')
+        break
+      case 'challenge':
+        this.challengeConfigTarget.classList.remove('hidden')
+        break
+    }
+  }
+}

app/views/network_ranges/_geolite_data.html.erb

@@ -0,0 +1,87 @@
+<% geolite_data = network_range.network_data_for(:geolite) %>
+
+<% if geolite_data.present? %>
+  <div class="bg-white shadow rounded-lg mb-6">
+    <div class="px-6 py-4 border-b border-gray-200">
+      <h3 class="text-lg font-medium text-gray-900">MaxMind GeoLite2 Data</h3>
+    </div>
+
+    <div class="px-6 py-4">
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <!-- ASN Data -->
+        <% if geolite_data['asn'].present? %>
+          <div>
+            <dt class="text-sm font-medium text-gray-500">ASN (MaxMind)</dt>
+            <dd class="mt-1 text-sm text-gray-900">
+              AS<%= geolite_data['asn']['autonomous_system_number'] %>
+              <% if geolite_data['asn']['autonomous_system_organization'].present? %>
+                <div class="text-xs text-gray-600"><%= geolite_data['asn']['autonomous_system_organization'] %></div>
+              <% end %>
+            </dd>
+          </div>
+        <% end %>
+
+        <!-- Country Data -->
+        <% if geolite_data['country'].present? %>
+          <div>
+            <dt class="text-sm font-medium text-gray-500">Country (MaxMind)</dt>
+            <dd class="mt-1 text-sm text-gray-900">
+              <%= geolite_data['country']['country_name'] || geolite_data['country']['country_iso_code'] %>
+              <% if geolite_data['country']['country_iso_code'].present? %>
+                <span class="ml-2 text-lg"><%= country_flag(geolite_data['country']['country_iso_code']) %></span>
+              <% end %>
+            </dd>
+          </div>
+
+          <% if geolite_data['country']['continent_name'].present? %>
+            <div>
+              <dt class="text-sm font-medium text-gray-500">Continent</dt>
+              <dd class="mt-1 text-sm text-gray-900">
+                <%= geolite_data['country']['continent_name'] %>
+                <span class="text-xs text-gray-500">(<%= geolite_data['country']['continent_code'] %>)</span>
+              </dd>
+            </div>
+          <% end %>
+
+          <% if geolite_data['country']['geoname_id'].present? %>
+            <div>
+              <dt class="text-sm font-medium text-gray-500">GeoName ID</dt>
+              <dd class="mt-1 text-sm text-gray-900 font-mono">
+                <%= geolite_data['country']['geoname_id'] %>
+              </dd>
+            </div>
+          <% end %>
+
+          <!-- Flags -->
+          <div class="md:col-span-2 lg:col-span-3">
+            <dt class="text-sm font-medium text-gray-500 mb-2">MaxMind Flags</dt>
+            <dd class="flex flex-wrap gap-2">
+              <% if geolite_data['country']['is_anonymous_proxy'] %>
+                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">Anonymous Proxy</span>
+              <% end %>
+              <% if geolite_data['country']['is_satellite_provider'] %>
+                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800">Satellite Provider</span>
+              <% end %>
+              <% if geolite_data['country']['is_anycast'] %>
+                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">Anycast</span>
+              <% end %>
+              <% if geolite_data['country']['is_in_european_union'] == "1" %>
+                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-600 text-white">🇪🇺 EU Member</span>
+              <% end %>
+            </dd>
+          </div>
+        <% end %>
+      </div>
+
+      <!-- Raw GeoLite Data (collapsible) -->
+      <details class="mt-6 pt-6 border-t border-gray-200">
+        <summary class="cursor-pointer text-sm font-medium text-gray-700 hover:text-gray-900">
+          Show Raw MaxMind Data
+        </summary>
+        <div class="mt-3">
+          <pre class="bg-gray-50 p-3 rounded-md text-xs overflow-x-auto"><%= JSON.pretty_generate(geolite_data) %></pre>
+        </div>
+      </details>
+    </div>
+  </div>
+<% end %>

app/views/network_ranges/_ipapi_data.html.erb

@@ -0,0 +1,112 @@
+<div id="ipapi_data_section" class="bg-white shadow rounded-lg mb-6">
+  <div class="px-6 py-4 border-b border-gray-200">
+    <h3 class="text-lg font-medium text-gray-900">IPAPI Enrichment Data</h3>
+  </div>
+
+  <% if ipapi_loading %>
+    <div class="px-6 py-8 text-center">
+      <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+      <p class="mt-2 text-sm text-gray-500">Fetching enrichment data...</p>
+    </div>
+  <% elsif ipapi_data.present? %>
+    <div class="px-6 py-4">
+      <% if parent_with_ipapi %>
+        <div class="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-md">
+          <div class="flex items-center">
+            <svg class="w-5 h-5 text-blue-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+            </svg>
+            <span class="text-sm text-blue-800">
+              Data inherited from parent network <%= link_to parent_with_ipapi.cidr, network_range_path(parent_with_ipapi), class: "font-mono font-medium hover:underline" %>
+            </span>
+          </div>
+        </div>
+      <% end %>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <% if ipapi_data['asn'].present? %>
+          <div>
+            <dt class="text-sm font-medium text-gray-500">ASN (IPAPI)</dt>
+            <dd class="mt-1 text-sm text-gray-900">
+              AS<%= ipapi_data['asn']['asn'] %>
+              <% if ipapi_data['asn']['org'].present? %>
+                <div class="text-xs text-gray-600"><%= ipapi_data['asn']['org'] %></div>
+              <% end %>
+              <% if ipapi_data['asn']['route'].present? %>
+                <div class="text-xs text-gray-500 font-mono"><%= ipapi_data['asn']['route'] %></div>
+              <% end %>
+            </dd>
+          </div>
+        <% end %>
+
+        <% if ipapi_data['location'].present? %>
+          <div>
+            <dt class="text-sm font-medium text-gray-500">Location</dt>
+            <dd class="mt-1 text-sm text-gray-900">
+              <%= [ipapi_data['location']['city'], ipapi_data['location']['state'], ipapi_data['location']['country']].compact.join(', ') %>
+              <% if ipapi_data['location']['country_code'].present? %>
+                <span class="ml-2 text-lg"><%= country_flag(ipapi_data['location']['country_code']) %></span>
+              <% end %>
+            </dd>
+          </div>
+        <% end %>
+
+        <% if ipapi_data['company'].present? %>
+          <div>
+            <dt class="text-sm font-medium text-gray-500">Company (IPAPI)</dt>
+            <dd class="mt-1 text-sm text-gray-900">
+              <%= ipapi_data['company']['name'] %>
+              <% if ipapi_data['company']['type'].present? %>
+                <div class="text-xs text-gray-600"><%= ipapi_data['company']['type'].humanize %></div>
+              <% end %>
+            </dd>
+          </div>
+        <% end %>
+
+        <% if ipapi_data['is_datacenter'] || ipapi_data['is_vpn'] || ipapi_data['is_proxy'] || ipapi_data['is_tor'] %>
+          <div class="md:col-span-2 lg:col-span-3">
+            <dt class="text-sm font-medium text-gray-500 mb-2">IPAPI Flags</dt>
+            <dd class="flex flex-wrap gap-2">
+              <% if ipapi_data['is_datacenter'] %>
+                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-orange-100 text-orange-800">Datacenter</span>
+              <% end %>
+              <% if ipapi_data['is_vpn'] %>
+                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800">VPN</span>
+              <% end %>
+              <% if ipapi_data['is_proxy'] %>
+                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">Proxy</span>
+              <% end %>
+              <% if ipapi_data['is_tor'] %>
+                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-800 text-white">Tor</span>
+              <% end %>
+              <% if ipapi_data['is_abuser'] %>
+                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-600 text-white">Abuser</span>
+              <% end %>
+              <% if ipapi_data['is_bogon'] %>
+                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">Bogon</span>
+              <% end %>
+            </dd>
+          </div>
+        <% end %>
+      </div>
+
+      <!-- Raw IPAPI Data (collapsible) -->
+      <details class="mt-6 pt-6 border-t border-gray-200">
+        <summary class="cursor-pointer text-sm font-medium text-gray-700 hover:text-gray-900">
+          Show Raw IPAPI Data
+        </summary>
+        <div class="mt-3">
+          <pre class="bg-gray-50 p-3 rounded-md text-xs overflow-x-auto"><%= JSON.pretty_generate(ipapi_data) %></pre>
+        </div>
+      </details>
+    </div>
+  <% else %>
+    <div class="px-6 py-8 text-center text-gray-500">
+      <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+      <h3 class="mt-2 text-sm font-medium text-gray-900">No IPAPI data available</h3>
+      <p class="mt-1 text-sm text-gray-500">Enrichment data will be fetched automatically.</p>
+    </div>
+  <% end %>
+</div>

app/views/network_ranges/show.html.erb

@@ -1,5 +1,9 @@
 <% content_for :title, "#{@network_range.cidr} - Network Range Details" %>
 
+<% if @network_range.persisted? %>
+  <%= turbo_stream_from "network_range_#{@network_range.id}" %>
+<% end %>
+
 <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
   <!-- Header -->
   <div class="mb-8">
@@ -48,6 +52,23 @@
     </div>
   </div>
 
+  <!-- IPAPI Enrichment Data -->
+  <% if @network_range.persisted? %>
+    <%= render partial: "network_ranges/ipapi_data", locals: {
+      ipapi_data: @ipapi_data,
+      network_range: @network_range,
+      parent_with_ipapi: @parent_with_ipapi,
+      ipapi_loading: @ipapi_loading || false
+    } %>
+  <% end %>
+
+  <!-- MaxMind GeoLite2 Data -->
+  <% if @network_range.persisted? %>
+    <%= render partial: "network_ranges/geolite_data", locals: {
+      network_range: @network_range
+    } %>
+  <% end %>
+
   <!-- Network Intelligence Card -->
   <div class="bg-white shadow rounded-lg mb-6">
     <div class="px-6 py-4 border-b border-gray-200">
@@ -335,9 +356,12 @@
           <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div>
               <%= form.label :expires_at, "Expires At (Optional)", class: "block text-sm font-medium text-gray-700" %>
-              <%= form.datetime_local_field :expires_at,
-                  class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
-              <p class="mt-1 text-xs text-gray-500">Leave blank for permanent rule</p>
+              <%= form.text_field :expires_at,
+                  placeholder: "YYYY-MM-DD HH:MM (24-hour format, optional)",
+                  class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm",
+                  data: { quick_create_rule_target: "expiresAtField" },
+                  autocomplete: "off" %>
+              <p class="mt-1 text-xs text-gray-500">Leave blank for permanent rule. Format: YYYY-MM-DD HH:MM (e.g., 2024-12-31 23:59)</p>
             </div>
 
             <div class="text-sm text-gray-600 flex items-center pt-6">
@@ -461,9 +485,9 @@
                   <div class="mt-1 text-sm text-gray-500">
                     Created <%= time_ago_in_words(rule.created_at) %> ago by <%= rule.user&.email_address || 'System' %>
                   </div>
-                  <% if rule.metadata&.dig('reason').present? %>
+                  <% if rule.metadata_hash['reason'].present? %>
                     <div class="mt-1 text-sm text-gray-600">
-                      Reason: <%= rule.metadata['reason'] %>
+                      Reason: <%= rule.metadata_hash['reason'] %>
                     </div>
                   <% end %>
                 </div>

app/views/waf_policies/edit.html.erb

@@ -13,7 +13,7 @@
     </div>
   </div>
 
-  <%= form_with(model: @waf_policy, local: true, class: "space-y-6") do |form| %>
+  <%= form_with(model: @waf_policy, local: true, class: "space-y-6", data: { controller: "waf-policy-form" }) do |form| %>
     <!-- Basic Information -->
     <div class="bg-white shadow rounded-lg">
       <div class="px-4 py-5 sm:p-6 space-y-4">
@@ -35,14 +35,14 @@
               placeholder: "Explain why this policy is needed..." %>
         </div>
 
-        <!-- Action -->
+        <!-- Policy Action -->
         <div>
-          <%= form.label :action, "Action", class: "block text-sm font-medium text-gray-700" %>
-          <%= form.select :action,
-              options_for_select(@actions.map { |action| [action.humanize, action] }, @waf_policy.action),
+          <%= form.label :policy_action, "Policy Action", class: "block text-sm font-medium text-gray-700" %>
+          <%= form.select :policy_action,
+              options_for_select(@actions.map { |action| [action.humanize, action] }, @waf_policy.policy_action),
               { prompt: "Select action" },
               { class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
-                id: "action-select" } %>
+                data: { "waf-policy-form-target": "policyActionSelect", "action": "change->waf-policy-form#updateActionConfig" } } %>
         </div>
 
         <!-- Status -->
@@ -164,7 +164,7 @@
         <h3 class="text-lg leading-6 font-medium text-gray-900">⚙️ Additional Configuration</h3>
 
         <!-- Redirect Settings (for redirect action) -->
-        <div id="redirect-config" class="space-y-3 <%= 'hidden' unless @waf_policy.redirect_action? %>">
+        <div id="redirect-config" class="space-y-3 <%= 'hidden' unless @waf_policy.redirect_action? %>" data-waf-policy-form-target="redirectConfig">
           <div>
             <%= label_tag "additional_data[redirect_url]", "Redirect URL", class: "block text-sm font-medium text-gray-700" %>
             <%= text_field_tag "additional_data[redirect_url]", @waf_policy.additional_data&.dig('redirect_url'),
@@ -180,7 +180,7 @@
         </div>
 
         <!-- Challenge Settings (for challenge action) -->
-        <div id="challenge-config" class="space-y-3 <%= 'hidden' unless @waf_policy.challenge_action? %>">
+        <div id="challenge-config" class="space-y-3 <%= 'hidden' unless @waf_policy.challenge_action? %>" data-waf-policy-form-target="challengeConfig">
           <div>
             <%= label_tag "additional_data[challenge_type]", "Challenge Type", class: "block text-sm font-medium text-gray-700" %>
             <%= select_tag "additional_data[challenge_type]",
@@ -205,36 +205,4 @@
           class: "inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
     </div>
   <% end %>
-</div>
-
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-  const actionSelect = document.getElementById('action-select');
-  const redirectConfig = document.getElementById('redirect-config');
-  const challengeConfig = document.getElementById('challenge-config');
-
-  function updateActionConfig() {
-    const selectedAction = actionSelect.value;
-
-    // Hide all config sections
-    redirectConfig.classList.add('hidden');
-    challengeConfig.classList.add('hidden');
-
-    // Show relevant config section
-    switch(selectedAction) {
-      case 'redirect':
-        redirectConfig.classList.remove('hidden');
-        break;
-      case 'challenge':
-        challengeConfig.classList.remove('hidden');
-        break;
-    }
-  }
-
-  // Add event listener
-  actionSelect.addEventListener('change', updateActionConfig);
-
-  // Initial update
-  updateActionConfig();
-});
-</script>
+</div>

app/views/waf_policies/index.html.erb

@@ -85,7 +85,7 @@
             <dl>
               <dt class="text-sm font-medium text-gray-500 truncate">Deny Policies</dt>
               <dd class="text-lg font-medium text-gray-900">
-                <%= number_with_delimiter(@waf_policies.where(action: 'deny').count) %>
+                <%= number_with_delimiter(@waf_policies.where(policy_action: 'deny').count) %>
               </dd>
             </dl>
           </div>
@@ -137,15 +137,15 @@
                           </span>
                         <% end %>
 
-                        <!-- Action Badge -->
+                        <!-- Policy Action Badge -->
                         <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
-                              <%= case policy.action
+                              <%= case policy.policy_action
                                  when 'deny' then 'bg-red-100 text-red-800'
                                  when 'allow' then 'bg-green-100 text-green-800'
                                  when 'redirect' then 'bg-yellow-100 text-yellow-800'
                                  when 'challenge' then 'bg-purple-100 text-purple-800'
                                  end %>">
-                          <%= policy.action.upcase %>
+                          <%= policy.policy_action.upcase %>
                         </span>
                       </div>
                       <div class="mt-1 text-sm text-gray-500">

app/views/waf_policies/new.html.erb

@@ -13,7 +13,7 @@
     </div>
   </div>
 
-  <%= form_with(model: @waf_policy, local: true, class: "space-y-6") do |form| %>
+  <%= form_with(model: @waf_policy, local: true, class: "space-y-6", data: { controller: "waf-policy-form" }) do |form| %>
     <!-- Basic Information -->
     <div class="bg-white shadow rounded-lg">
       <div class="px-4 py-5 sm:p-6 space-y-4">
@@ -42,17 +42,17 @@
               options_for_select(@policy_types.map { |type| [type.humanize, type] }, @waf_policy.policy_type),
               { prompt: "Select policy type" },
               { class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
-                id: "policy-type-select" } %>
+                data: { "waf-policy-form-target": "policyTypeSelect", "action": "change->waf-policy-form#updateTargetsVisibility" } } %>
         </div>
 
-        <!-- Action -->
+        <!-- Policy Action -->
         <div>
-          <%= form.label :action, "Action", class: "block text-sm font-medium text-gray-700" %>
-          <%= form.select :action,
-              options_for_select(@actions.map { |action| [action.humanize, action] }, @waf_policy.action),
+          <%= form.label :policy_action, "Policy Action", class: "block text-sm font-medium text-gray-700" %>
+          <%= form.select :policy_action,
+              options_for_select(@actions.map { |action| [action.humanize, action] }, @waf_policy.policy_action),
               { prompt: "Select action" },
               { class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
-                id: "action-select" } %>
+                data: { "waf-policy-form-target": "policyActionSelect", "action": "change->waf-policy-form#updateActionConfig" } } %>
         </div>
       </div>
     </div>
@@ -63,7 +63,7 @@
         <h3 class="text-lg leading-6 font-medium text-gray-900">🎯 Targets Configuration</h3>
 
         <!-- Country Policy Targets -->
-        <div id="country-targets" class="policy-targets hidden">
+        <div id="country-targets" class="policy-targets hidden" data-waf-policy-form-target="countryTargets">
           <%= form.label :targets, "Countries", class: "block text-sm font-medium text-gray-700 mb-2" %>
           <div data-controller="country-selector"
                data-country-selector-options-value="<%= CountryHelper.all_for_select.to_json %>"
@@ -79,7 +79,7 @@
         </div>
 
         <!-- ASN Policy Targets -->
-        <div id="asn-targets" class="policy-targets hidden">
+        <div id="asn-targets" class="policy-targets hidden" data-waf-policy-form-target="asnTargets">
           <%= form.label :targets, "ASN Numbers", class: "block text-sm font-medium text-gray-700" %>
           <%= text_field_tag "waf_policy[targets][]", nil,
               class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
@@ -88,7 +88,7 @@
         </div>
 
         <!-- Company Policy Targets -->
-        <div id="company-targets" class="policy-targets hidden">
+        <div id="company-targets" class="policy-targets hidden" data-waf-policy-form-target="companyTargets">
           <%= form.label :targets, "Companies", class: "block text-sm font-medium text-gray-700" %>
           <%= text_field_tag "waf_policy[targets][]", nil,
               class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
@@ -97,7 +97,7 @@
         </div>
 
         <!-- Network Type Targets -->
-        <div id="network-type-targets" class="policy-targets hidden">
+        <div id="network-type-targets" class="policy-targets hidden" data-waf-policy-form-target="networkTypeTargets">
           <%= form.label :targets, "Network Types", class: "block text-sm font-medium text-gray-700" %>
           <div class="space-y-2">
             <label class="flex items-center">
@@ -123,7 +123,7 @@
         <h3 class="text-lg leading-6 font-medium text-gray-900">⚙️ Additional Configuration</h3>
 
         <!-- Redirect Settings (for redirect action) -->
-        <div id="redirect-config" class="hidden space-y-3">
+        <div id="redirect-config" class="hidden space-y-3" data-waf-policy-form-target="redirectConfig">
           <div>
             <%= label_tag "additional_data[redirect_url]", "Redirect URL", class: "block text-sm font-medium text-gray-700" %>
             <%= text_field_tag "additional_data[redirect_url]", nil,
@@ -139,7 +139,7 @@
         </div>
 
         <!-- Challenge Settings (for challenge action) -->
-        <div id="challenge-config" class="hidden space-y-3">
+        <div id="challenge-config" class="hidden space-y-3" data-waf-policy-form-target="challengeConfig">
           <div>
             <%= label_tag "additional_data[challenge_type]", "Challenge Type", class: "block text-sm font-medium text-gray-700" %>
             <%= select_tag "additional_data[challenge_type]",
@@ -178,63 +178,4 @@
           class: "inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
     </div>
   <% end %>
-</div>
-
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-  const policyTypeSelect = document.getElementById('policy-type-select');
-  const actionSelect = document.getElementById('action-select');
-  const allTargets = document.querySelectorAll('.policy-targets');
-  const redirectConfig = document.getElementById('redirect-config');
-  const challengeConfig = document.getElementById('challenge-config');
-
-  function updateTargetsVisibility() {
-    const selectedType = policyTypeSelect.value;
-
-    // Hide all target sections
-    allTargets.forEach(target => target.classList.add('hidden'));
-
-    // Show relevant target section
-    switch(selectedType) {
-      case 'country':
-        document.getElementById('country-targets').classList.remove('hidden');
-        break;
-      case 'asn':
-        document.getElementById('asn-targets').classList.remove('hidden');
-        break;
-      case 'company':
-        document.getElementById('company-targets').classList.remove('hidden');
-        break;
-      case 'network_type':
-        document.getElementById('network-type-targets').classList.remove('hidden');
-        break;
-    }
-  }
-
-  function updateActionConfig() {
-    const selectedAction = actionSelect.value;
-
-    // Hide all config sections
-    redirectConfig.classList.add('hidden');
-    challengeConfig.classList.add('hidden');
-
-    // Show relevant config section
-    switch(selectedAction) {
-      case 'redirect':
-        redirectConfig.classList.remove('hidden');
-        break;
-      case 'challenge':
-        challengeConfig.classList.remove('hidden');
-        break;
-    }
-  }
-
-  // Add event listeners
-  policyTypeSelect.addEventListener('change', updateTargetsVisibility);
-  actionSelect.addEventListener('change', updateActionConfig);
-
-  // Initial update
-  updateTargetsVisibility();
-  updateActionConfig();
-});
-</script>
+</div>

app/views/waf_policies/new_country.html.erb

@@ -14,6 +14,31 @@
   </div>
 
   <%= form_with(url: create_country_waf_policies_path, method: :post, local: true, class: "space-y-6") do |form| %>
+    <!-- Display validation errors -->
+    <% if defined?(@waf_policy) && @waf_policy&.errors&.any? %>
+      <div class="rounded-md bg-red-50 p-4 border border-red-200">
+        <div class="flex">
+          <div class="flex-shrink-0">
+            <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
+            </svg>
+          </div>
+          <div class="ml-3">
+            <h3 class="text-sm font-medium text-red-800">
+              <%= pluralize(@waf_policy.errors.count, "error") %> prohibited this policy from being saved:
+            </h3>
+            <div class="mt-2 text-sm text-red-700">
+              <ul class="list-disc pl-5 space-y-1">
+                <% @waf_policy.errors.full_messages.each do |message| %>
+                  <li><%= message %></li>
+                <% end %>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    <% end %>
+
     <!-- Popular Countries Quick Selection -->
     <div class="bg-white shadow rounded-lg">
       <div class="px-4 py-5 sm:p-6">
@@ -67,28 +92,28 @@
 
         <!-- Action Selection -->
         <div>
-          <%= form.label :action, "What should happen to traffic from selected countries?", class: "block text-sm font-medium text-gray-700" %>
+          <%= form.label :policy_action, "What should happen to traffic from selected countries?", class: "block text-sm font-medium text-gray-700" %>
           <div class="mt-2 space-y-2">
             <label class="flex items-center">
-              <%= radio_button_tag "action", "deny", true, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" %>
+              <%= radio_button_tag "policy_action", "deny", true, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" %>
               <span class="ml-2 text-sm text-gray-700">
                 <span class="font-medium">🚫 Block (Deny)</span> - Show 403 Forbidden error
               </span>
             </label>
             <label class="flex items-center">
-              <%= radio_button_tag "action", "challenge", false, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" %>
+              <%= radio_button_tag "policy_action", "challenge", false, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" %>
               <span class="ml-2 text-sm text-gray-700">
                 <span class="font-medium">🛡️ Challenge</span> - Present CAPTCHA challenge
               </span>
             </label>
             <label class="flex items-center">
-              <%= radio_button_tag "action", "redirect", false, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" %>
+              <%= radio_button_tag "policy_action", "redirect", false, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" %>
               <span class="ml-2 text-sm text-gray-700">
                 <span class="font-medium">🔄 Redirect</span> - Redirect to compliance page
               </span>
             </label>
             <label class="flex items-center">
-              <%= radio_button_tag "action", "allow", false, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" %>
+              <%= radio_button_tag "policy_action", "allow", false, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" %>
               <span class="ml-2 text-sm text-gray-700">
                 <span class="font-medium">✅ Allow</span> - Explicitly allow traffic
               </span>
@@ -138,14 +163,14 @@
 </div>
 
 <script>
-// Show/hide redirect settings based on action selection
+// Show/hide redirect settings based on policy action selection
 document.addEventListener('DOMContentLoaded', function() {
-  const actionRadios = document.querySelectorAll('input[name="action"]');
+  const actionRadios = document.querySelectorAll('input[name="policy_action"]');
   const redirectSettings = document.getElementById('redirect-settings');
   const previewText = document.getElementById('preview-text');
 
   function updateVisibility() {
-    const selectedAction = document.querySelector('input[name="action"]:checked')?.value;
+    const selectedAction = document.querySelector('input[name="policy_action"]:checked')?.value;
 
     if (selectedAction === 'redirect') {
       redirectSettings.classList.remove('hidden');
@@ -158,7 +183,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
   function updatePreview() {
     const selectedCountries = document.querySelectorAll('input[name="countries[]"]:checked');
-    const selectedAction = document.querySelector('input[name="action"]:checked')?.value || 'deny';
+    const selectedAction = document.querySelector('input[name="policy_action"]:checked')?.value || 'deny';
     const actionText = {
       'deny': '🚫 Block',
       'challenge': '🛡️ Challenge',

app/views/waf_policies/show.html.erb

@@ -32,16 +32,16 @@
         </div>
 
         <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-500">Action</dt>
+          <dt class="text-sm font-medium text-gray-500">Policy Action</dt>
           <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
             <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
-                  <%= case @waf_policy.action
+                  <%= case @waf_policy.policy_action
                      when 'deny' then 'bg-red-100 text-red-800'
                      when 'allow' then 'bg-green-100 text-green-800'
                      when 'redirect' then 'bg-yellow-100 text-yellow-800'
                      when 'challenge' then 'bg-purple-100 text-purple-800'
                      end %>">
-              <%= @waf_policy.action.upcase %>
+              <%= @waf_policy.policy_action.upcase %>
             </span>
           </dd>
         </div>