From 43effcd1fe9cf79ed4fedc165d7dba8e04ed8ee2 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Thu, 4 Dec 2025 18:58:00 -0500
Subject: [PATCH] refactor: update Proxmox firewall view to replace checkboxes
 with buttons for enabling/disabling firewall and adapter firewalls, enhancing
 user interaction and visual clarity

---
 .../Servers/Proxmox/views/firewall.blade.php  | 62 +++++++++++++------
 1 file changed, 42 insertions(+), 20 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/firewall.blade.php b/extensions/Servers/Proxmox/views/firewall.blade.php
index d5d85b97d..9e11b56d9 100644
--- a/extensions/Servers/Proxmox/views/firewall.blade.php
+++ b/extensions/Servers/Proxmox/views/firewall.blade.php
@@ -48,16 +48,26 @@
                     </p>
                 </div>
             </div>
-            <div class="flex items-center gap-3">
-                <span class="text-sm font-medium text-base/60">{{ $firewallEnabled ? 'Enabled' : 'Disabled' }}</span>
-                <label class="relative inline-flex items-center cursor-pointer">
-                    <input type="checkbox" 
-                        @if($firewallEnabled) checked @endif
-                        wire:click="toggleFirewall"
-                           wire:loading.attr="disabled"
-                           class="sr-only peer">
-                    <div class="w-14 h-7 bg-neutral/30 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[4px] after:bg-white after:border-neutral after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-primary"></div>
-                </label>
+            <div class="flex items-center gap-2">
+                @if($firewallEnabled)
+                    <button type="button" 
+                            wire:click="toggleFirewall" 
+                            wire:loading.attr="disabled"
+                            class="px-4 py-2 bg-error text-white rounded-lg hover:bg-error/90 transition-colors text-sm font-medium flex items-center gap-2">
+                        <x-ri-shield-off-line class="size-4" />
+                        <span wire:loading.remove wire:target="toggleFirewall">Disable Firewall</span>
+                        <span wire:loading wire:target="toggleFirewall">Disabling...</span>
+                    </button>
+                @else
+                    <button type="button" 
+                            wire:click="toggleFirewall" 
+                            wire:loading.attr="disabled"
+                            class="px-4 py-2 bg-success text-white rounded-lg hover:bg-success/90 transition-colors text-sm font-medium flex items-center gap-2">
+                        <x-ri-shield-check-line class="size-4" />
+                        <span wire:loading.remove wire:target="toggleFirewall">Enable Firewall</span>
+                        <span wire:loading wire:target="toggleFirewall">Enabling...</span>
+                    </button>
+                @endif
             </div>
         </div>
     </div>
@@ -106,16 +116,28 @@
                                     @endif
                                 </div>
                             </div>
-                                <div class="flex items-center gap-3">
-                                <span class="text-sm font-medium text-base/60">{{ ($adapterFirewallStates[$adapter['name']] ?? false) ? 'On' : 'Off' }}</span>
-                                <label class="relative inline-flex items-center cursor-pointer">
-                                    <input type="checkbox"
-                                            @if($adapterFirewallStates[$adapter['name']] ?? false) checked @endif
-                                            wire:click="toggleAdapterFirewall('{{ $adapter['name'] }}')"
-                                           wire:loading.attr="disabled"
-                                           class="sr-only peer">
-                                    <div class="w-11 h-6 bg-neutral/30 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-success/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-success"></div>
-                                    </label>
+                            <div class="flex items-center gap-2">
+                                @if($adapterFirewallStates[$adapter['name']] ?? false)
+                                    <button type="button" 
+                                            wire:click="toggleAdapterFirewall('{{ $adapter['name'] }}')" 
+                                            wire:loading.attr="disabled"
+                                            wire:key="adapter-{{ $adapter['name'] }}"
+                                            class="px-3 py-1.5 bg-error text-white rounded-lg hover:bg-error/90 transition-colors text-xs font-medium flex items-center gap-1.5">
+                                        <x-ri-close-circle-line class="size-3.5" />
+                                        <span wire:loading.remove wire:target="toggleAdapterFirewall('{{ $adapter['name'] }}')">Disable</span>
+                                        <span wire:loading wire:target="toggleAdapterFirewall('{{ $adapter['name'] }}')">...</span>
+                                    </button>
+                                @else
+                                    <button type="button" 
+                                            wire:click="toggleAdapterFirewall('{{ $adapter['name'] }}')" 
+                                            wire:loading.attr="disabled"
+                                            wire:key="adapter-{{ $adapter['name'] }}"
+                                            class="px-3 py-1.5 bg-success text-white rounded-lg hover:bg-success/90 transition-colors text-xs font-medium flex items-center gap-1.5">
+                                        <x-ri-checkbox-circle-line class="size-3.5" />
+                                        <span wire:loading.remove wire:target="toggleAdapterFirewall('{{ $adapter['name'] }}')">Enable</span>
+                                        <span wire:loading wire:target="toggleAdapterFirewall('{{ $adapter['name'] }}')">...</span>
+                                    </button>
+                                @endif
                             </div>
                         </div>
                     </div>