Private
Public Access
1
0

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:
2025-12-04 20:28:00 -05:00
parent 2046505109
commit c735435690
2 changed files with 127 additions and 4 deletions

View File

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