feat: add macro definitions for firewall rules and auto-fill functionality in rule form modal, enhancing user experience and simplifying configuration
This commit is contained in:
@@ -1116,7 +1116,25 @@
|
||||
|
||||
{{-- Rule Form Modal --}}
|
||||
@if($showRuleForm)
|
||||
<div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
|
||||
<div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4"
|
||||
x-data="{
|
||||
macroDefinitions: @js($this->macroDefinitions),
|
||||
currentMacro: @entangle('ruleMacro'),
|
||||
handleMacroChange() {
|
||||
if (this.currentMacro && this.currentMacro !== '' && this.macroDefinitions[this.currentMacro]) {
|
||||
const macroDef = this.macroDefinitions[this.currentMacro];
|
||||
// Auto-populate protocol
|
||||
if (macroDef.proto) {
|
||||
$wire.set('ruleProto', macroDef.proto);
|
||||
}
|
||||
// Auto-populate destination port
|
||||
if (macroDef.dport) {
|
||||
$wire.set('ruleDport', macroDef.dport);
|
||||
}
|
||||
}
|
||||
}
|
||||
}"
|
||||
x-init="$watch('currentMacro', () => handleMacroChange())">
|
||||
<div class="relative w-full max-w-4xl bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl max-h-[90vh] overflow-y-auto">
|
||||
<button wire:click="cancelRuleForm" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors z-10">
|
||||
<x-ri-close-line class="size-5" />
|
||||
@@ -1152,7 +1170,10 @@
|
||||
<option value="{{ $value }}">{{ $label }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<p class="text-xs text-base/60 mt-1">Select a macro or leave as "None" for custom rules</p>
|
||||
<p class="text-xs text-base/60 mt-1">
|
||||
<x-ri-lightbulb-line class="size-3 inline mr-0.5" />
|
||||
Selecting a macro will automatically set the protocol and port(s)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{{-- Interface --}}
|
||||
@@ -1189,19 +1210,28 @@
|
||||
|
||||
{{-- Protocol --}}
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2">Protocol</label>
|
||||
<label class="block text-sm font-medium mb-2">
|
||||
Protocol
|
||||
<span class="text-xs font-normal text-base/50">(auto-filled by macro)</span>
|
||||
</label>
|
||||
<select wire:model="ruleProto" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background text-sm">
|
||||
<option value="">Any</option>
|
||||
<option value="tcp">TCP</option>
|
||||
<option value="udp">UDP</option>
|
||||
<option value="icmp">ICMP</option>
|
||||
<option value="igmp">IGMP</option>
|
||||
<option value="ah">AH (IPsec Authentication Header)</option>
|
||||
<option value="esp">ESP (IPsec Encapsulating Security Payload)</option>
|
||||
<option value="ospf">OSPF</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{{-- Destination Port --}}
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2">Destination Port</label>
|
||||
<label class="block text-sm font-medium mb-2">
|
||||
Destination Port
|
||||
<span class="text-xs font-normal text-base/50">(auto-filled by macro)</span>
|
||||
</label>
|
||||
<input type="text" wire:model="ruleDport" placeholder="e.g., 80, 443, 1000:2000" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background text-sm">
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user