From 13ab70386843d23abab0fa5b5f976582d1e72b14 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Thu, 18 Dec 2025 09:33:21 -0500
Subject: [PATCH] fix: implement firewall management help modal with improved
 accessibility and user interaction

---
 .../Servers/Proxmox/views/firewall.blade.php  | 136 +++++++++---------
 1 file changed, 69 insertions(+), 67 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/firewall.blade.php b/extensions/Servers/Proxmox/views/firewall.blade.php
index d7481dff9..245b393f7 100644
--- a/extensions/Servers/Proxmox/views/firewall.blade.php
+++ b/extensions/Servers/Proxmox/views/firewall.blade.php
@@ -183,6 +183,72 @@
         }
     </style>
 
+    {{-- Firewall Management Help Modal --}}
+    <div x-data="{ firewallHelpOpen: false }" @open-firewall-help.window="firewallHelpOpen = true">
+        <!-- Modal Backdrop -->
+        <template x-if="firewallHelpOpen">
+            <div x-show="firewallHelpOpen" 
+                 x-transition:enter="transition ease-out duration-300"
+                 x-transition:enter-start="opacity-0"
+                 x-transition:enter-end="opacity-100"
+                 x-transition:leave="transition ease-in duration-200"
+                 x-transition:leave-start="opacity-100"
+                 x-transition:leave-end="opacity-0"
+                 @click="firewallHelpOpen = false"
+                 style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9998; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);">
+            </div>
+        </template>
+        <!-- Modal -->
+        <template x-if="firewallHelpOpen">
+            <div x-show="firewallHelpOpen"
+                 x-transition:enter="transition ease-out duration-300"
+                 x-transition:enter-start="opacity-0 scale-95"
+                 x-transition:enter-end="opacity-100 scale-100"
+                 x-transition:leave="transition ease-in duration-200"
+                 x-transition:leave-start="opacity-100 scale-100"
+                 x-transition:leave-end="opacity-0 scale-95"
+                 @keydown.escape.window="firewallHelpOpen = false"
+                 style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem;">
+                <div @click.away="firewallHelpOpen = false" style="position: relative; width: 100%; max-width: 42rem; max-height: 90vh; overflow-y: auto; background: white; border-radius: 0.75rem; border: 1px solid #e5e7eb; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); padding: 1.5rem;">
+                    <button @click="firewallHelpOpen = false" style="position: absolute; top: 1rem; right: 1rem; color: #9ca3af; cursor: pointer; background: none; border: none;" onmouseover="this.style.color='#4b5563'" onmouseout="this.style.color='#9ca3af'">
+                        <x-ri-close-line class="size-5" />
+                    </button>
+                    <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; padding-right: 2rem;">
+                        <div style="display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background: rgba(59, 130, 246, 0.1);">
+                            <x-ri-shield-line class="size-5 text-primary" />
+                        </div>
+                        <h6 style="font-size: 1.125rem; font-weight: 600;">
+                            Firewall Management
+                        </h6>
+                    </div>
+                    <p style="font-size: 0.875rem; color: #4b5563; margin-bottom: 1rem;">
+                        The Firewall Management interface provides comprehensive control over your virtual machine's network security, including rule-based filtering, IP aliases, and security policies. Configure granular rules to allow or block specific traffic patterns, manage default policies for incoming and outgoing traffic, and organize IP addresses into reusable aliases and sets.
+                    </p>
+                    <div style="padding-top: 1rem; margin-top: 1rem; border-top: 1px solid #e5e7eb;">
+                        <p style="font-size: 0.75rem; color: #6b7280; margin-bottom: 0.625rem;">
+                            <span style="font-weight: 600; color: #374151;">Firewall Rules:</span> Create granular rules to allow or block specific traffic patterns based on source/destination IP addresses, protocols, ports, and network interfaces. Rules are processed in order with the first matching rule determining the action.
+                        </p>
+                        <p style="font-size: 0.75rem; color: #6b7280; margin-bottom: 0.625rem;">
+                            <span style="font-weight: 600; color: #374151;">Default Policies:</span> Set default actions (ACCEPT, REJECT, or DROP) for incoming and outgoing traffic that doesn't match any specific rule. Use DROP for incoming traffic to create a secure whitelist configuration.
+                        </p>
+                        <p style="font-size: 0.75rem; color: #6b7280; margin-bottom: 0.625rem;">
+                            <span style="font-weight: 600; color: #374151;">IP Aliases:</span> Define named groups of IP addresses or CIDR ranges for easier rule management. Use aliases to create reusable address definitions that can be referenced in multiple rules.
+                        </p>
+                        <p style="font-size: 0.75rem; color: #6b7280; margin-bottom: 0.625rem;">
+                            <span style="font-weight: 600; color: #374151;">IP Sets:</span> Manage collections of IP addresses for advanced filtering scenarios. IP Sets allow you to create groups of addresses that can be efficiently matched against traffic.
+                        </p>
+                        <p style="font-size: 0.75rem; color: #6b7280; margin-bottom: 0.625rem;">
+                            <span style="font-weight: 600; color: #374151;">Firewall Logs:</span> Monitor firewall activity and view logged events when rules with logging enabled are triggered. Logs help troubleshoot connectivity issues and identify security threats.
+                        </p>
+                        <p style="font-size: 0.75rem; color: #6b7280; margin-bottom: 0;">
+                            <span style="font-weight: 600; color: #374151;">Network Adapters:</span> Control firewall state independently for each network adapter attached to your VM. This allows granular control over which interfaces have firewall protection enabled.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </div>
+
     <div class="space-y-6" x-data="{ pageLoaded: false, activeTab: 'rules' }" x-init="setTimeout(() => pageLoaded = true, 50)">
 
         {{-- Page Header --}}
@@ -195,73 +261,9 @@
                     <div style="display: flex; flex-direction: column; gap: .25rem;">
                         <div class="flex items-center gap-2">
                             <h2 style="font-size: 1.125rem; font-weight: 600; color: #212529; margin: 0;">Firewall Management</h2>
-                            <div class="relative" x-data="{ open: false }" x-cloak>
-                                <button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
-                                    <x-ri-question-line class="size-4" />
-                                </button>
-                                <!-- Modal Backdrop -->
-                                <div x-show="open" 
-                                     x-transition:enter="transition ease-out duration-300"
-                                     x-transition:enter-start="opacity-0"
-                                     x-transition:enter-end="opacity-100"
-                                     x-transition:leave="transition ease-in duration-200"
-                                     x-transition:leave-start="opacity-100"
-                                     x-transition:leave-end="opacity-0"
-                                     @click="open = false"
-                                     @keydown.escape.window="open = false"
-                                     class="fixed inset-0 z-[9998] bg-black/50 backdrop-blur-sm"
-                                     style="display: none;">
-                                </div>
-                                <!-- Modal -->
-                                <div x-show="open"
-                                     x-transition:enter="transition ease-out duration-300"
-                                     x-transition:enter-start="opacity-0 scale-95"
-                                     x-transition:enter-end="opacity-100 scale-100"
-                                     x-transition:leave="transition ease-in duration-200"
-                                     x-transition:leave-start="opacity-100 scale-100"
-                                     x-transition:leave-end="opacity-0 scale-95"
-                                     @click.away="open = false"
-                                     @keydown.escape.window="open = false"
-                                     class="fixed inset-0 z-[9999] flex items-center justify-center p-4"
-                                     style="display: none;">
-                                    <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 shadow-2xl p-6">
-                                        <button @click="open = false" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
-                                            <x-ri-close-line class="size-5" />
-                                        </button>
-                                        <div class="flex items-center gap-3 mb-4 pr-8">
-                                            <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
-                                                <x-ri-shield-line class="size-5 text-primary" />
-                                            </div>
-                                            <h6 class="text-lg font-semibold">
-                                                Firewall Management
-                                            </h6>
-                                        </div>
-                                        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
-                                            The Firewall Management interface provides comprehensive control over your virtual machine's network security, including rule-based filtering, IP aliases, and security policies. Configure granular rules to allow or block specific traffic patterns, manage default policies for incoming and outgoing traffic, and organize IP addresses into reusable aliases and sets.
-                                        </p>
-                                        <div class="pt-4 mt-4 border-t border-gray-200 dark:border-gray-700 space-y-2.5">
-                                            <p class="text-xs text-gray-500 dark:text-gray-400">
-                                                <span class="font-semibold text-gray-700 dark:text-gray-300">Firewall Rules:</span> Create granular rules to allow or block specific traffic patterns based on source/destination IP addresses, protocols, ports, and network interfaces. Rules are processed in order with the first matching rule determining the action.
-                                            </p>
-                                            <p class="text-xs text-gray-500 dark:text-gray-400">
-                                                <span class="font-semibold text-gray-700 dark:text-gray-300">Default Policies:</span> Set default actions (ACCEPT, REJECT, or DROP) for incoming and outgoing traffic that doesn't match any specific rule. Use DROP for incoming traffic to create a secure whitelist configuration.
-                                            </p>
-                                            <p class="text-xs text-gray-500 dark:text-gray-400">
-                                                <span class="font-semibold text-gray-700 dark:text-gray-300">IP Aliases:</span> Define named groups of IP addresses or CIDR ranges for easier rule management. Use aliases to create reusable address definitions that can be referenced in multiple rules.
-                                            </p>
-                                            <p class="text-xs text-gray-500 dark:text-gray-400">
-                                                <span class="font-semibold text-gray-700 dark:text-gray-300">IP Sets:</span> Manage collections of IP addresses for advanced filtering scenarios. IP Sets allow you to create groups of addresses that can be efficiently matched against traffic.
-                                            </p>
-                                            <p class="text-xs text-gray-500 dark:text-gray-400">
-                                                <span class="font-semibold text-gray-700 dark:text-gray-300">Firewall Logs:</span> Monitor firewall activity and view logged events when rules with logging enabled are triggered. Logs help troubleshoot connectivity issues and identify security threats.
-                                            </p>
-                                            <p class="text-xs text-gray-500 dark:text-gray-400">
-                                                <span class="font-semibold text-gray-700 dark:text-gray-300">Network Adapters:</span> Control firewall state independently for each network adapter attached to your VM. This allows granular control over which interfaces have firewall protection enabled.
-                                            </p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
+                            <button type="button" @click="$dispatch('open-firewall-help')" class="text-base/50 hover:text-base/70 transition-colors">
+                                <x-ri-question-line class="size-4" />
+                            </button>
                         </div>
                         <p style="font-size: .875rem; color: #6c757d; margin: 0;">Configure firewall rules, policies, aliases, and IPSets for your virtual machine.</p>
                     </div>