feat: enhance disabled firewall message with detailed guidance and visual improvements

This commit is contained in:
2025-12-04 20:49:58 -05:00
parent 74c55c5934
commit cb1ac5dfae

View File

@@ -1122,11 +1122,38 @@
</div>
</div>
@else
<div class="text-center py-16 bg-background border border-neutral rounded-xl">
<x-ri-shield-line class="size-20 mx-auto mb-4 opacity-30" />
<h3 class="text-xl font-semibold mb-2">Firewall is Disabled</h3>
<p class="text-base/60 mb-6">Enable the firewall to start protecting your virtual machine</p>
</div>
<div class="bg-background border border-neutral rounded-xl p-8">
<div class="max-w-2xl mx-auto text-center">
<div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-warning/10 border-2 border-warning/20 mb-4">
<x-ri-shield-off-line class="size-8 text-warning" />
</div>
<h3 class="text-xl font-semibold mb-2">Firewall Protection Disabled</h3>
<p class="text-base/60 mb-6 max-w-md mx-auto">Your virtual machine is currently unprotected. Enable the firewall above to secure your network traffic with customizable rules.</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-left">
<div class="p-4 bg-background-secondary/50 rounded-lg border border-neutral/20">
<div class="flex items-center gap-2 mb-2">
<x-ri-shield-check-line class="size-5 text-primary" />
<h4 class="font-semibold text-sm">Traffic Control</h4>
</div>
<p class="text-xs text-base/60">Define rules to allow or block specific connections</p>
</div>
<div class="p-4 bg-background-secondary/50 rounded-lg border border-neutral/20">
<div class="flex items-center gap-2 mb-2">
<x-ri-eye-line class="size-5 text-primary" />
<h4 class="font-semibold text-sm">Monitor Activity</h4>
</div>
<p class="text-xs text-base/60">Track and log all firewall events in real-time</p>
</div>
<div class="p-4 bg-background-secondary/50 rounded-lg border border-neutral/20">
<div class="flex items-center gap-2 mb-2">
<x-ri-settings-3-line class="size-5 text-primary" />
<h4 class="font-semibold text-sm">Flexible Policies</h4>
</div>
<p class="text-xs text-base/60">Configure default behavior for incoming and outgoing traffic</p>
</div>
</div>
</div>
</div>
@endif
{{-- Rule Form Modal --}}