fix: enhance firewall management modal with improved accessibility and styling
This commit is contained in:
@@ -195,70 +195,72 @@
|
||||
<div style="display: flex; flex-direction: column; gap: .25rem;">
|
||||
<div class="flex items-center gap-2">
|
||||
<h2 style="font-size: 1.125rem; font-weight: 600; color: #212529; margin: 0;">Firewall Management</h2>
|
||||
<div x-data="{ open: false }" x-cloak>
|
||||
<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>
|
||||
<template x-teleport="body">
|
||||
<!-- 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"
|
||||
class="fixed inset-0 z-[9998] bg-black/50 backdrop-blur-sm">
|
||||
</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"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-[9999] flex items-center justify-center p-4">
|
||||
<div @click.outside="open = false" class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 shadow-2xl p-6">
|
||||
<button @click="open = false" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 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="text-lg font-semibold">
|
||||
Firewall Management
|
||||
</h6>
|
||||
<!-- 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-[9998] 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-[9999] 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-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 shadow-2xl p-6">
|
||||
<button @click="open = false" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 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>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 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.
|
||||
<h6 class="text-lg font-semibold">
|
||||
Firewall Management
|
||||
</h6>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 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-gray-200 dark:border-gray-700 space-y-2.5">
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">
|
||||
<span class="font-semibold text-gray-700 dark:text-gray-300">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="text-xs text-gray-500 dark:text-gray-400">
|
||||
<span class="font-semibold text-gray-700 dark:text-gray-300">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="text-xs text-gray-500 dark:text-gray-400">
|
||||
<span class="font-semibold text-gray-700 dark:text-gray-300">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="text-xs text-gray-500 dark:text-gray-400">
|
||||
<span class="font-semibold text-gray-700 dark:text-gray-300">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="text-xs text-gray-500 dark:text-gray-400">
|
||||
<span class="font-semibold text-gray-700 dark:text-gray-300">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="text-xs text-gray-500 dark:text-gray-400">
|
||||
<span class="font-semibold text-gray-700 dark:text-gray-300">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 class="pt-4 mt-4 border-t border-gray-200 dark:border-gray-700 space-y-2.5">
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">
|
||||
<span class="font-semibold text-gray-700 dark:text-gray-300">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="text-xs text-gray-500 dark:text-gray-400">
|
||||
<span class="font-semibold text-gray-700 dark:text-gray-300">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="text-xs text-gray-500 dark:text-gray-400">
|
||||
<span class="font-semibold text-gray-700 dark:text-gray-300">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="text-xs text-gray-500 dark:text-gray-400">
|
||||
<span class="font-semibold text-gray-700 dark:text-gray-300">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="text-xs text-gray-500 dark:text-gray-400">
|
||||
<span class="font-semibold text-gray-700 dark:text-gray-300">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="text-xs text-gray-500 dark:text-gray-400">
|
||||
<span class="font-semibold text-gray-700 dark:text-gray-300">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>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size: .875rem; color: #6c757d; margin: 0;">Configure firewall rules, policies, aliases, and IPSets for your virtual machine.</p>
|
||||
|
||||
Reference in New Issue
Block a user