fix: add help modal for Firewall Management with detailed descriptions and improved accessibility
This commit is contained in:
@@ -193,7 +193,76 @@
|
||||
<x-ri-shield-line class="size-5 transition-colors duration-200" style="color: #0d6efd;" />
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: .25rem;">
|
||||
<h2 style="font-size: 1.125rem; font-weight: 600; color: #212529; margin: 0;">Firewall Management</h2>
|
||||
<div class="flex items-center gap-2">
|
||||
<h2 style="font-size: 1.125rem; font-weight: 600; color: #212529; margin: 0;">Firewall Management</h2>
|
||||
<div class="relative" x-data="{ open: false }" x-cloak>
|
||||
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
|
||||
<x-ri-question-line class="size-4" />
|
||||
</button>
|
||||
<!-- Modal Backdrop -->
|
||||
<div x-show="open"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
|
||||
style="display: none;">
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
<div x-show="open"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 scale-95"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
@click.away="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-[60] flex items-center justify-center p-4"
|
||||
style="display: none;">
|
||||
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
|
||||
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
|
||||
<x-ri-close-line class="size-5" />
|
||||
</button>
|
||||
<div class="flex items-center gap-3 mb-4 pr-8">
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
|
||||
<x-ri-shield-line class="size-5 text-primary" />
|
||||
</div>
|
||||
<h6 class="font-sans text-lg font-semibold leading-tight">
|
||||
Firewall Management
|
||||
</h6>
|
||||
</div>
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
The Firewall Management interface provides comprehensive control over your virtual machine's network security, including rule-based filtering, IP aliases, and security policies. Configure granular rules to allow or block specific traffic patterns, manage default policies for incoming and outgoing traffic, and organize IP addresses into reusable aliases and sets.
|
||||
</p>
|
||||
<div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Firewall Rules:</span> Create granular rules to allow or block specific traffic patterns based on source/destination IP addresses, protocols, ports, and network interfaces. Rules are processed in order with the first matching rule determining the action.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Default Policies:</span> Set default actions (ACCEPT, REJECT, or DROP) for incoming and outgoing traffic that doesn't match any specific rule. Use DROP for incoming traffic to create a secure whitelist configuration.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">IP Aliases:</span> Define named groups of IP addresses or CIDR ranges for easier rule management. Use aliases to create reusable address definitions that can be referenced in multiple rules.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">IP Sets:</span> Manage collections of IP addresses for advanced filtering scenarios. IP Sets allow you to create groups of addresses that can be efficiently matched against traffic.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Firewall Logs:</span> Monitor firewall activity and view logged events when rules with logging enabled are triggered. Logs help troubleshoot connectivity issues and identify security threats.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Network Adapters:</span> Control firewall state independently for each network adapter attached to your VM. This allows granular control over which interfaces have firewall protection enabled.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size: .875rem; color: #6c757d; margin: 0;">Configure firewall rules, policies, aliases, and IPSets for your virtual machine.</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -748,7 +817,7 @@
|
||||
<p class="text-xs text-gray-400 dark:text-gray-500 mt-1">{{ $config['created_at'] }}</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 ml-2">
|
||||
<button wire:click="loadConfiguration('{{ $config['id'] }}')" class="text-gray-400 hover:text-success transition-colors p-1 hover:bg-success/10 rounded" title="Load">
|
||||
<button wire:click="confirmApplyConfiguration({{ $config['id'] }})" class="text-gray-400 hover:text-success transition-colors p-1 hover:bg-success/10 rounded" title="Load">
|
||||
<x-ri-download-line class="size-4" />
|
||||
</button>
|
||||
<button wire:click="deleteConfiguration('{{ $config['id'] }}')" class="text-gray-400 hover:text-error transition-colors p-1 hover:bg-error/10 rounded" title="Delete">
|
||||
|
||||
Reference in New Issue
Block a user