Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor: update Proxmox firewall view to replace checkboxes with buttons for enabling/disabling firewall and adapter firewalls, enhancing user interaction and visual clarity

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-04 18:58:00 -05:00
parent c78ccc1d18
commit 43effcd1fe
1 changed files with 42 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
extensions/Servers/Proxmox/views/firewall.blade.php
View File

@@ -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>