feat: enhance error handling in Proxmox Firewall component by adding detailed error messages and modal display for improved user feedback

This commit is contained in:
2025-12-01 13:17:47 -05:00
parent 7628da6a32
commit 4a29e25eeb
2 changed files with 121 additions and 26 deletions

View File

@@ -51,18 +51,20 @@
</style>
<div class="space-y-6">
<!-- Error Message - Centered on Page -->
@if($error)
<div class="fixed inset-0 flex items-center justify-center z-50 bg-black/50 backdrop-blur-sm" wire:click="$set('error', '')">
<div class="bg-error/20 border-2 border-error rounded-lg p-6 shadow-lg max-w-2xl w-full mx-4" wire:click.stop>
<!-- Error Message - Centered Modal -->
@if($error || $showErrorModal)
<div class="fixed inset-0 flex items-center justify-center z-50 bg-black/50 backdrop-blur-sm" wire:click="$set('error', ''); $set('showErrorModal', false)">
<div class="bg-error/20 border-2 border-error rounded-lg p-6 shadow-lg max-w-3xl w-full mx-4 max-h-[80vh] overflow-y-auto" wire:click.stop>
<div class="flex items-start gap-3">
<x-ri-error-warning-fill class="size-6 text-error flex-shrink-0 mt-0.5" />
<div class="flex-1 text-center">
<h3 class="text-lg font-semibold text-error mb-2">Firewall Error</h3>
<p class="text-sm text-error/90 leading-relaxed">{{ $error }}</p>
<div class="flex-1">
<h3 class="text-lg font-semibold text-error mb-2 text-center">Firewall Error</h3>
<div class="bg-background/50 rounded p-3 border border-error/30">
<p class="text-sm text-error/90 leading-relaxed whitespace-pre-wrap break-words">{{ $error }}</p>
</div>
</div>
<button
wire:click="$set('error', '')"
wire:click="$set('error', ''); $set('showErrorModal', false)"
class="text-error/70 hover:text-error transition-colors flex-shrink-0">
<x-ri-close-line class="size-5" />
</button>