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
+    }
+  }
+}