feat: implement delete rule confirmation modal in Proxmox Firewall component to enhance user experience and prevent accidental deletions
This commit is contained in:
@@ -410,9 +410,28 @@ class Firewall extends Component
|
||||
}
|
||||
}
|
||||
|
||||
public function deleteRule(int $pos): void
|
||||
public function confirmDeleteRule(int $pos): void
|
||||
{
|
||||
$this->deletingRulePos = $pos;
|
||||
$this->showDeleteModal = true;
|
||||
}
|
||||
|
||||
public function cancelDeleteRule(): void
|
||||
{
|
||||
$this->deletingRulePos = null;
|
||||
$this->showDeleteModal = false;
|
||||
}
|
||||
|
||||
public function deleteRule(): void
|
||||
{
|
||||
if ($this->deletingRulePos === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
$pos = $this->deletingRulePos;
|
||||
$this->loading = true;
|
||||
$this->showDeleteModal = false;
|
||||
|
||||
try {
|
||||
$response = $this->firewallRequest(
|
||||
'/nodes/' . $this->server->node->name . '/qemu/' . $this->server->vm_id . '/firewall/rules/' . $pos,
|
||||
@@ -441,6 +460,7 @@ class Firewall extends Component
|
||||
$this->showErrorModal = true;
|
||||
} finally {
|
||||
$this->loading = false;
|
||||
$this->deletingRulePos = null;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -133,7 +133,7 @@
|
||||
<p class="text-xs text-base/50 mt-2">Enables or disables the firewall ability for this network adapter</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 ml-4">
|
||||
<span class="text-xs font-medium text-base/60">Firewall</span>
|
||||
<span class="text-xs font-medium text-base/60">Network Adapter Firewall</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-sm font-medium text-base/70">Disabled</span>
|
||||
<label class="firewall-toggle-switch" wire:loading.attr="disabled">
|
||||
@@ -180,146 +180,6 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Rule Form Modal -->
|
||||
@if($showRuleForm)
|
||||
<div class="bg-background-secondary border border-neutral/20 rounded-lg p-4 mb-4">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-lg font-semibold">{{ $editingRulePos !== null ? 'Edit Rule' : 'Create New Rule' }}</h3>
|
||||
<button wire:click="$set('showRuleForm', false); $set('editingRulePos', null); resetRuleForm()" class="text-base/50 hover:text-base">
|
||||
<x-ri-close-line class="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2">Action</label>
|
||||
<select wire:model="ruleAction" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background">
|
||||
<option value="ACCEPT">Accept</option>
|
||||
<option value="REJECT">Reject</option>
|
||||
<option value="DROP">Drop</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2">Protocol</label>
|
||||
<select wire:model="ruleProto" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background">
|
||||
<option value="tcp">TCP</option>
|
||||
<option value="udp">UDP</option>
|
||||
<option value="icmp">ICMP</option>
|
||||
<option value="igmp">IGMP</option>
|
||||
<option value="ggp">GGP</option>
|
||||
<option value="ipencap">IPENCAP</option>
|
||||
<option value="st">ST</option>
|
||||
<option value="egp">EGP</option>
|
||||
<option value="igp">IGP</option>
|
||||
<option value="pip">PIP</option>
|
||||
<option value="hmp">HMP</option>
|
||||
<option value="xns-idp">XNS-IDP</option>
|
||||
<option value="rdp">RDP</option>
|
||||
<option value="iso-tp4">ISO-TP4</option>
|
||||
<option value="dccp">DCCP</option>
|
||||
<option value="xtp">XTP</option>
|
||||
<option value="ddp">DDP</option>
|
||||
<option value="idpr-cmtp">IDPR-CMTP</option>
|
||||
<option value="ipv6">IPv6</option>
|
||||
<option value="ipv6-route">IPv6-Route</option>
|
||||
<option value="ipv6-frag">IPv6-Frag</option>
|
||||
<option value="idrp">IDRP</option>
|
||||
<option value="rsvp">RSVP</option>
|
||||
<option value="gre">GRE</option>
|
||||
<option value="esp">ESP</option>
|
||||
<option value="ah">AH</option>
|
||||
<option value="skip">SKIP</option>
|
||||
<option value="ipv6-icmp">IPv6-ICMP</option>
|
||||
<option value="ipv6-nonxt">IPv6-Nonxt</option>
|
||||
<option value="ipv6-opts">IPv6-Opts</option>
|
||||
<option value="vmtp">VMTP</option>
|
||||
<option value="eigrp">EIGRP</option>
|
||||
<option value="ospf">OSPF</option>
|
||||
<option value="ax.25">AX.25</option>
|
||||
<option value="ipip">IPIP</option>
|
||||
<option value="etherip">EtherIP</option>
|
||||
<option value="encap">ENCAP</option>
|
||||
<option value="pim">PIM</option>
|
||||
<option value="ipcomp">IPComp</option>
|
||||
<option value="vrrp">VRRP</option>
|
||||
<option value="l2tp">L2TP</option>
|
||||
<option value="isis">ISIS</option>
|
||||
<option value="sctp">SCTP</option>
|
||||
<option value="fc">FC</option>
|
||||
<option value="mobility-header">Mobility-Header</option>
|
||||
<option value="udplite">UDPLite</option>
|
||||
<option value="mpls-in-ip">MPLS-in-IP</option>
|
||||
<option value="hip">HIP</option>
|
||||
<option value="shim6">Shim6</option>
|
||||
<option value="wesp">WESP</option>
|
||||
<option value="rohc">ROHC</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2">Source</label>
|
||||
<input type="text" wire:model="ruleSource" placeholder="e.g., 192.168.1.0/24" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2">Destination</label>
|
||||
<select wire:model="ruleDest" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background">
|
||||
@foreach($availableIps as $ipData)
|
||||
<option value="{{ $ipData['ip'] }}">{{ $ipData['ip'] }} ({{ $ipData['type'] }} - {{ $ipData['label'] }})</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2">Destination Port</label>
|
||||
<input type="text" wire:model="ruleDport" placeholder="e.g., 80,443 or 1000:2000" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2">Source Port</label>
|
||||
<input type="text" wire:model="ruleSport" placeholder="e.g., 8080" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2">Interface</label>
|
||||
<select wire:model="ruleIface" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background">
|
||||
@foreach($networkAdapters as $adapter)
|
||||
<option value="{{ $adapter['name'] }}">{{ $adapter['name'] }} ({{ ucfirst($adapter['model'] ?? 'Unknown') }})</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2">Log Level</label>
|
||||
<select wire:model="ruleLog" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background">
|
||||
<option value="">No Logging</option>
|
||||
<option value="nolog">No Log</option>
|
||||
<option value="info">Info</option>
|
||||
<option value="warning">Warning</option>
|
||||
<option value="err">Error</option>
|
||||
<option value="crit">Critical</option>
|
||||
<option value="alert">Alert</option>
|
||||
<option value="emerg">Emergency</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
<label class="block text-sm font-medium mb-2">Comment</label>
|
||||
<input type="text" wire:model="ruleComment" placeholder="Optional description" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background">
|
||||
</div>
|
||||
<div class="md:col-span-2 flex items-center gap-2">
|
||||
<input type="checkbox" wire:model="ruleEnable" id="ruleEnable" class="rounded border-neutral">
|
||||
<label for="ruleEnable" class="text-sm">Enable this rule</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2 mt-4">
|
||||
<button
|
||||
wire:click="saveRule"
|
||||
wire:loading.attr="disabled"
|
||||
class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium">
|
||||
Save Rule
|
||||
</button>
|
||||
<button
|
||||
wire:click="$set('showRuleForm', false); $set('editingRulePos', null); resetRuleForm()"
|
||||
class="px-4 py-2 bg-background-secondary border border-neutral rounded-lg hover:bg-background transition-colors text-sm font-medium">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Rules Table -->
|
||||
@if(count($rules) > 0)
|
||||
<div class="overflow-x-auto">
|
||||
@@ -380,8 +240,7 @@
|
||||
<x-ri-edit-line class="size-4" />
|
||||
</button>
|
||||
<button
|
||||
wire:click="deleteRule({{ $rule['pos'] ?? 0 }})"
|
||||
wire:confirm="Are you sure you want to delete this rule?"
|
||||
wire:click="confirmDeleteRule({{ $rule['pos'] ?? 0 }})"
|
||||
class="text-error hover:text-error/80 transition-colors"
|
||||
title="Delete rule">
|
||||
<x-ri-delete-bin-line class="size-4" />
|
||||
@@ -476,6 +335,211 @@
|
||||
<p class="text-base/60">Enable the firewall above to manage firewall rules.</p>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Add/Edit Rule Modal -->
|
||||
@if($showRuleForm)
|
||||
<div class="fixed inset-0 flex items-center justify-center z-50 bg-black/50 backdrop-blur-sm"
|
||||
wire:click="$set('showRuleForm', false); $set('editingRulePos', null); resetRuleForm()">
|
||||
<div class="bg-background border border-neutral rounded-lg p-6 shadow-lg max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto" wire:click.stop>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-lg font-semibold">{{ $editingRulePos !== null ? 'Edit Rule' : 'Create New Rule' }}</h3>
|
||||
<button
|
||||
wire:click="$set('showRuleForm', false); $set('editingRulePos', null); resetRuleForm()"
|
||||
class="text-base/50 hover:text-base transition-colors">
|
||||
<x-ri-close-line class="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2">Action</label>
|
||||
<select wire:model="ruleAction" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background">
|
||||
<option value="ACCEPT">Accept</option>
|
||||
<option value="REJECT">Reject</option>
|
||||
<option value="DROP">Drop</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2">Protocol</label>
|
||||
<select wire:model="ruleProto" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background">
|
||||
<option value="tcp">TCP</option>
|
||||
<option value="udp">UDP</option>
|
||||
<option value="icmp">ICMP</option>
|
||||
<option value="igmp">IGMP</option>
|
||||
<option value="ggp">GGP</option>
|
||||
<option value="ipencap">IPENCAP</option>
|
||||
<option value="st">ST</option>
|
||||
<option value="egp">EGP</option>
|
||||
<option value="igp">IGP</option>
|
||||
<option value="pip">PIP</option>
|
||||
<option value="hmp">HMP</option>
|
||||
<option value="xns-idp">XNS-IDP</option>
|
||||
<option value="rdp">RDP</option>
|
||||
<option value="iso-tp4">ISO-TP4</option>
|
||||
<option value="dccp">DCCP</option>
|
||||
<option value="xtp">XTP</option>
|
||||
<option value="ddp">DDP</option>
|
||||
<option value="idpr-cmtp">IDPR-CMTP</option>
|
||||
<option value="ipv6">IPv6</option>
|
||||
<option value="ipv6-route">IPv6-Route</option>
|
||||
<option value="ipv6-frag">IPv6-Frag</option>
|
||||
<option value="idrp">IDRP</option>
|
||||
<option value="rsvp">RSVP</option>
|
||||
<option value="gre">GRE</option>
|
||||
<option value="esp">ESP</option>
|
||||
<option value="ah">AH</option>
|
||||
<option value="skip">SKIP</option>
|
||||
<option value="ipv6-icmp">IPv6-ICMP</option>
|
||||
<option value="ipv6-nonxt">IPv6-Nonxt</option>
|
||||
<option value="ipv6-opts">IPv6-Opts</option>
|
||||
<option value="vmtp">VMTP</option>
|
||||
<option value="eigrp">EIGRP</option>
|
||||
<option value="ospf">OSPF</option>
|
||||
<option value="ax.25">AX.25</option>
|
||||
<option value="ipip">IPIP</option>
|
||||
<option value="etherip">EtherIP</option>
|
||||
<option value="encap">ENCAP</option>
|
||||
<option value="pim">PIM</option>
|
||||
<option value="ipcomp">IPComp</option>
|
||||
<option value="vrrp">VRRP</option>
|
||||
<option value="l2tp">L2TP</option>
|
||||
<option value="isis">ISIS</option>
|
||||
<option value="sctp">SCTP</option>
|
||||
<option value="fc">FC</option>
|
||||
<option value="mobility-header">Mobility-Header</option>
|
||||
<option value="udplite">UDPLite</option>
|
||||
<option value="mpls-in-ip">MPLS-in-IP</option>
|
||||
<option value="hip">HIP</option>
|
||||
<option value="shim6">Shim6</option>
|
||||
<option value="wesp">WESP</option>
|
||||
<option value="rohc">ROHC</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2">Source</label>
|
||||
<input type="text" wire:model="ruleSource" placeholder="e.g., 192.168.1.0/24" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2">Destination</label>
|
||||
<select wire:model="ruleDest" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background">
|
||||
@foreach($availableIps as $ipData)
|
||||
<option value="{{ $ipData['ip'] }}">{{ $ipData['ip'] }} ({{ $ipData['type'] }} - {{ $ipData['label'] }})</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2">Destination Port</label>
|
||||
<input type="text" wire:model="ruleDport" placeholder="e.g., 80,443 or 1000:2000" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2">Source Port</label>
|
||||
<input type="text" wire:model="ruleSport" placeholder="e.g., 8080" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2">Interface</label>
|
||||
<select wire:model="ruleIface" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background">
|
||||
@foreach($networkAdapters as $adapter)
|
||||
<option value="{{ $adapter['name'] }}">{{ $adapter['name'] }} ({{ ucfirst($adapter['model'] ?? 'Unknown') }})</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2">Log Level</label>
|
||||
<select wire:model="ruleLog" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background">
|
||||
<option value="">No Logging</option>
|
||||
<option value="nolog">No Log</option>
|
||||
<option value="info">Info</option>
|
||||
<option value="warning">Warning</option>
|
||||
<option value="err">Error</option>
|
||||
<option value="crit">Critical</option>
|
||||
<option value="alert">Alert</option>
|
||||
<option value="emerg">Emergency</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
<label class="block text-sm font-medium mb-2">Comment</label>
|
||||
<input type="text" wire:model="ruleComment" placeholder="Optional description" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background">
|
||||
</div>
|
||||
<div class="md:col-span-2 flex items-center gap-2">
|
||||
<input type="checkbox" wire:model="ruleEnable" id="ruleEnable" class="rounded border-neutral">
|
||||
<label for="ruleEnable" class="text-sm">Enable this rule</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2 mt-6">
|
||||
<button
|
||||
wire:click="saveRule"
|
||||
wire:loading.attr="disabled"
|
||||
class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium">
|
||||
<span wire:loading.remove wire:target="saveRule">Save Rule</span>
|
||||
<span wire:loading wire:target="saveRule">Saving...</span>
|
||||
</button>
|
||||
<button
|
||||
wire:click="$set('showRuleForm', false); $set('editingRulePos', null); resetRuleForm()"
|
||||
class="px-4 py-2 bg-background-secondary border border-neutral rounded-lg hover:bg-background transition-colors text-sm font-medium">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Delete Rule Confirmation Modal -->
|
||||
@if($showDeleteModal && $deletingRulePos !== null)
|
||||
@php
|
||||
$ruleToDelete = collect($rules)->firstWhere('pos', $deletingRulePos);
|
||||
@endphp
|
||||
<div class="fixed inset-0 flex items-center justify-center z-50 bg-black/50 backdrop-blur-sm"
|
||||
wire:click="cancelDeleteRule">
|
||||
<div class="bg-background border border-neutral rounded-lg p-6 shadow-lg max-w-md w-full mx-4" wire:click.stop>
|
||||
<div class="flex items-start gap-3 mb-4">
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-error/10 flex-shrink-0">
|
||||
<x-ri-error-warning-fill class="size-5 text-error" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-lg font-semibold mb-2">Delete Firewall Rule</h3>
|
||||
<p class="text-sm text-base/60 mb-4">
|
||||
Are you sure you want to delete this firewall rule? This action cannot be undone.
|
||||
</p>
|
||||
@if($ruleToDelete)
|
||||
<div class="bg-background-secondary border border-neutral/20 rounded-lg p-3 mb-4">
|
||||
<div class="text-sm space-y-1">
|
||||
<div><span class="font-medium">Action:</span> {{ $ruleToDelete['action'] ?? '-' }}</div>
|
||||
@if(!empty($ruleToDelete['source']))
|
||||
<div><span class="font-medium">Source:</span> {{ $ruleToDelete['source'] }}</div>
|
||||
@endif
|
||||
@if(!empty($ruleToDelete['dest']))
|
||||
<div><span class="font-medium">Destination:</span> {{ $ruleToDelete['dest'] }}</div>
|
||||
@endif
|
||||
@if(!empty($ruleToDelete['proto']))
|
||||
<div><span class="font-medium">Protocol:</span> {{ strtoupper($ruleToDelete['proto']) }}</div>
|
||||
@endif
|
||||
@if(!empty($ruleToDelete['dport']))
|
||||
<div><span class="font-medium">Port:</span> {{ $ruleToDelete['dport'] }}</div>
|
||||
@endif
|
||||
@if(!empty($ruleToDelete['comment']))
|
||||
<div><span class="font-medium">Comment:</span> {{ $ruleToDelete['comment'] }}</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3 justify-end">
|
||||
<button
|
||||
wire:click="cancelDeleteRule"
|
||||
class="px-4 py-2 bg-background-secondary border border-neutral rounded-lg hover:bg-background transition-colors text-sm font-medium">
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
wire:click="deleteRule"
|
||||
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">
|
||||
<span wire:loading.remove wire:target="deleteRule">Delete Rule</span>
|
||||
<span wire:loading wire:target="deleteRule">Deleting...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
</x-proxmox::layout>
|
||||
|
||||
Reference in New Issue
Block a user