refactor: streamline network adapter display logic and improve UI consistency
This commit is contained in:
@@ -74,90 +74,78 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Network Adapters - Always Visible --}}
|
||||
<div class="bg-background border border-neutral rounded-xl p-6 mb-6">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-10 h-10 rounded-lg bg-success/10 flex items-center justify-center">
|
||||
<x-ri-router-line class="size-5 text-success" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-lg font-semibold">Network Adapters (Per-Device Firewall)</h3>
|
||||
<p class="text-sm text-base/60">Enable or disable firewall for each network adapter individually</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if(!$firewallEnabled)
|
||||
<div class="mb-4 p-3 bg-warning/10 border border-warning/30 rounded-lg">
|
||||
<div class="flex items-start gap-2">
|
||||
<x-ri-information-line class="size-4 text-warning flex-shrink-0 mt-0.5" />
|
||||
<p class="text-xs text-warning/90">
|
||||
<strong>Note:</strong> Per-adapter firewall settings can be configured here, but the <strong>Master Firewall</strong> above must be enabled for these settings to take effect.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if(count($networkAdapters) > 0)
|
||||
<div class="space-y-3">
|
||||
@foreach($networkAdapters as $adapter)
|
||||
<div class="p-4 bg-background-secondary/50 border border-neutral/20 rounded-lg hover:border-neutral/40 transition-all">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="font-semibold text-sm">{{ $adapter['name'] }}</span>
|
||||
@if($adapterFirewallStates[$adapter['name']] ?? false)
|
||||
<span class="px-2 py-0.5 bg-success/20 text-success text-xs font-medium rounded-full">Firewall Active</span>
|
||||
@else
|
||||
<span class="px-2 py-0.5 bg-base/20 text-base/60 text-xs font-medium rounded-full">Firewall Off</span>
|
||||
@endif
|
||||
</div>
|
||||
<div class="text-xs text-base/60">
|
||||
Model: {{ ucfirst($adapter['model'] ?? 'Unknown') }}
|
||||
@if($adapter['mac'])
|
||||
<span class="ml-2">MAC: <code class="text-xs bg-background px-1 rounded">{{ $adapter['mac'] }}</code></span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
@if($adapterFirewallStates[$adapter['name']] ?? false)
|
||||
<button type="button"
|
||||
wire:click="toggleAdapterFirewall('{{ $adapter['name'] }}')"
|
||||
wire:loading.attr="disabled"
|
||||
wire:key="adapter-{{ $adapter['name'] }}"
|
||||
style="padding: 0.375rem 0.75rem; background-color: #ef4444; color: white; border-radius: 0.5rem; transition: all 0.2s; font-size: 0.75rem; font-weight: 500; display: flex; align-items: center; gap: 0.375rem;"
|
||||
onmouseover="this.style.backgroundColor='#dc2626'"
|
||||
onmouseout="this.style.backgroundColor='#ef4444'">
|
||||
<x-ri-close-line class="size-3.5" />
|
||||
<span wire:loading.remove wire:target="toggleAdapterFirewall('{{ $adapter['name'] }}')">Disable</span>
|
||||
<span wire:loading wire:target="toggleAdapterFirewall('{{ $adapter['name'] }}')">...</span>
|
||||
</button>
|
||||
@else
|
||||
<button type="button"
|
||||
wire:click="toggleAdapterFirewall('{{ $adapter['name'] }}')"
|
||||
wire:loading.attr="disabled"
|
||||
wire:key="adapter-{{ $adapter['name'] }}"
|
||||
class="px-3 py-1.5 bg-success text-white rounded-lg hover:bg-success/90 transition-colors text-xs font-medium flex items-center gap-1.5">
|
||||
<x-ri-shield-line class="size-3.5" />
|
||||
<span wire:loading.remove wire:target="toggleAdapterFirewall('{{ $adapter['name'] }}')">Enable</span>
|
||||
<span wire:loading wire:target="toggleAdapterFirewall('{{ $adapter['name'] }}')">...</span>
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<div class="text-center py-4 text-base/60 text-sm">
|
||||
<x-ri-router-line class="size-8 mx-auto mb-2 opacity-50" />
|
||||
<p>No network adapters found</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- Firewall Policies & Filters --}}
|
||||
{{-- Firewall Policies & Network Adapters Grid --}}
|
||||
@if($firewallEnabled)
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
||||
{{-- Network Adapters --}}
|
||||
<div class="bg-background border border-neutral rounded-xl p-6">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-10 h-10 rounded-lg bg-success/10 flex items-center justify-center">
|
||||
<x-ri-router-line class="size-5 text-success" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-lg font-semibold">Network Adapters</h3>
|
||||
<p class="text-sm text-base/60">Per-device firewall control</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if(count($networkAdapters) > 0)
|
||||
<div class="space-y-3">
|
||||
@foreach($networkAdapters as $adapter)
|
||||
<div class="p-3 bg-background-secondary/50 border border-neutral/20 rounded-lg hover:border-neutral/40 transition-all">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="font-semibold text-sm">{{ $adapter['name'] }}</span>
|
||||
@if($adapterFirewallStates[$adapter['name']] ?? false)
|
||||
<span class="px-2 py-0.5 bg-success/20 text-success text-xs font-medium rounded-full">Active</span>
|
||||
@else
|
||||
<span class="px-2 py-0.5 bg-base/20 text-base/60 text-xs font-medium rounded-full">Off</span>
|
||||
@endif
|
||||
</div>
|
||||
<div class="text-xs text-base/60">
|
||||
{{ ucfirst($adapter['model'] ?? 'Unknown') }}
|
||||
@if($adapter['mac'])
|
||||
<span class="ml-2">{{ $adapter['mac'] }}</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
@if($adapterFirewallStates[$adapter['name']] ?? false)
|
||||
<button type="button"
|
||||
wire:click="toggleAdapterFirewall('{{ $adapter['name'] }}')"
|
||||
wire:loading.attr="disabled"
|
||||
wire:key="adapter-{{ $adapter['name'] }}"
|
||||
style="padding: 0.375rem 0.75rem; background-color: #ef4444; color: white; border-radius: 0.5rem; transition: all 0.2s; font-size: 0.75rem; font-weight: 500; display: flex; align-items: center; gap: 0.375rem;"
|
||||
onmouseover="this.style.backgroundColor='#dc2626'"
|
||||
onmouseout="this.style.backgroundColor='#ef4444'">
|
||||
<x-ri-close-line class="size-3.5" />
|
||||
<span wire:loading.remove wire:target="toggleAdapterFirewall('{{ $adapter['name'] }}')">Disable</span>
|
||||
<span wire:loading wire:target="toggleAdapterFirewall('{{ $adapter['name'] }}')">...</span>
|
||||
</button>
|
||||
@else
|
||||
<button type="button"
|
||||
wire:click="toggleAdapterFirewall('{{ $adapter['name'] }}')"
|
||||
wire:loading.attr="disabled"
|
||||
wire:key="adapter-{{ $adapter['name'] }}"
|
||||
class="px-3 py-1.5 bg-success text-white rounded-lg hover:bg-success/90 transition-colors text-xs font-medium flex items-center gap-1.5">
|
||||
<x-ri-shield-line class="size-3.5" />
|
||||
<span wire:loading.remove wire:target="toggleAdapterFirewall('{{ $adapter['name'] }}')">Enable</span>
|
||||
<span wire:loading wire:target="toggleAdapterFirewall('{{ $adapter['name'] }}')">...</span>
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<div class="text-center py-4 text-base/60 text-sm">
|
||||
<x-ri-router-line class="size-8 mx-auto mb-2 opacity-50" />
|
||||
<p>No network adapters found</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
{{-- Default Policies Card --}}
|
||||
<div class="bg-background border border-neutral rounded-xl p-6">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
@@ -201,9 +189,8 @@
|
||||
<span wire:loading wire:target="updatePolicies">Updating...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Policy Info Modal --}}
|
||||
@if($showPolicyInfoModal)
|
||||
|
||||
Reference in New Issue
Block a user