161 lines
11 KiB
PHP
161 lines
11 KiB
PHP
<div class="space-y-5" wire:poll.5s="refreshPeers">
|
|
<div class="animate-rise">
|
|
<h1 class="text-2xl font-semibold tracking-tight text-ink">{{ __('vpn.title') }}</h1>
|
|
<p class="mt-1 text-sm text-muted">{{ __('vpn.subtitle') }}</p>
|
|
</div>
|
|
|
|
@if ($hubEndpoint === '' || $hubPublicKey === '')
|
|
<div class="flex items-start gap-3 rounded-xl border border-warning-border bg-warning-bg p-4 animate-rise">
|
|
<x-ui.icon name="alert-triangle" class="mt-0.5 size-5 shrink-0 text-warning" />
|
|
<div class="text-sm">
|
|
<p class="font-medium text-ink">{{ __('vpn.hub_incomplete_title') }}</p>
|
|
<p class="mt-0.5 text-muted">{{ __('vpn.hub_incomplete_body') }}</p>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Shown once. The private key exists only in this response; a reload loses it. --}}
|
|
@if ($newConfig)
|
|
<div class="rounded-xl border border-accent-border bg-accent-bg p-5 animate-rise">
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div>
|
|
<h2 class="font-semibold text-ink">{{ __('vpn.config_ready', ['name' => $newConfigName]) }}</h2>
|
|
<p class="mt-0.5 text-sm text-muted">{{ __('vpn.config_once') }}</p>
|
|
</div>
|
|
<button type="button" wire:click="dismissConfig" aria-label="{{ __('common.close') }}"
|
|
class="grid size-8 shrink-0 place-items-center rounded-md border border-line text-muted hover:text-ink">
|
|
<x-ui.icon name="x" class="size-4" />
|
|
</button>
|
|
</div>
|
|
<div x-data="{ copied: false }" class="mt-3">
|
|
<pre id="vpn-config" class="max-h-64 overflow-auto rounded-lg border border-line bg-surface p-4 font-mono text-xs leading-relaxed text-body">{{ $newConfig }}</pre>
|
|
<div class="mt-3 flex flex-wrap gap-2">
|
|
<x-ui.button variant="secondary"
|
|
x-on:click="navigator.clipboard.writeText(document.getElementById('vpn-config').textContent); copied = true; setTimeout(() => copied = false, 2000)">
|
|
<x-ui.icon name="copy" class="size-4" />
|
|
<span x-text="copied ? @js(__('vpn.copied')) : @js(__('vpn.copy'))"></span>
|
|
</x-ui.button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="grid grid-cols-1 gap-5 lg:grid-cols-[1fr_320px] lg:items-start">
|
|
{{-- Peer list --}}
|
|
<div class="overflow-hidden rounded-xl border border-line bg-surface shadow-xs animate-rise [animation-delay:60ms]">
|
|
<div class="flex items-center justify-between border-b border-line px-4 py-3">
|
|
<h2 class="text-sm font-semibold text-ink">{{ __('vpn.peers') }}</h2>
|
|
<span class="text-xs text-faint">
|
|
{{ $lastSync ? __('vpn.last_sync', ['time' => \Illuminate\Support\Carbon::parse($lastSync)->diffForHumans()]) : __('vpn.never_synced') }}
|
|
</span>
|
|
</div>
|
|
|
|
@if ($peers->isEmpty())
|
|
<p class="p-8 text-center text-sm text-muted">{{ __('vpn.empty') }}</p>
|
|
@else
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="border-b border-line bg-surface-2 text-left text-xs uppercase tracking-wide text-faint">
|
|
<th class="px-4 py-3 font-semibold">{{ __('vpn.peer') }}</th>
|
|
<th class="px-4 py-3 font-semibold">{{ __('vpn.address') }}</th>
|
|
<th class="px-4 py-3 font-semibold">{{ __('vpn.traffic') }}</th>
|
|
<th class="px-4 py-3 font-semibold">{{ __('vpn.handshake') }}</th>
|
|
<th class="px-4 py-3 font-semibold">{{ __('vpn.status') }}</th>
|
|
<th class="px-4 py-3 text-right font-semibold">{{ __('vpn.actions') }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach ($peers as $peer)
|
|
@php
|
|
$status = $peer->status();
|
|
$tone = [
|
|
'online' => 'border-success-border bg-success-bg text-success',
|
|
'idle' => 'border-line-strong bg-surface-2 text-muted',
|
|
'blocked' => 'border-danger-border bg-danger-bg text-danger',
|
|
'pending' => 'border-warning-border bg-warning-bg text-warning',
|
|
][$status];
|
|
@endphp
|
|
<tr wire:key="peer-{{ $peer->uuid }}" class="border-b border-line last:border-0">
|
|
<td class="px-4 py-3">
|
|
<div class="font-medium text-ink">{{ $peer->name }}</div>
|
|
<div class="mt-0.5 flex items-center gap-1.5 text-xs text-faint">
|
|
@if ($peer->host)
|
|
<x-ui.icon name="server" class="size-3.5" />{{ __('vpn.host_peer') }}
|
|
@else
|
|
<x-ui.icon name="users" class="size-3.5" />{{ __('vpn.operator_peer') }}
|
|
@endif
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
<div class="font-mono text-xs text-body">{{ $peer->allowed_ip }}</div>
|
|
@if ($peer->endpoint)
|
|
<div class="mt-0.5 font-mono text-xs text-faint">{{ $peer->endpoint }}</div>
|
|
@endif
|
|
</td>
|
|
<td class="px-4 py-3 font-mono text-xs text-muted whitespace-nowrap">
|
|
↓ {{ \App\Support\Bytes::human($peer->rx_bytes) }}<br>
|
|
↑ {{ \App\Support\Bytes::human($peer->tx_bytes) }}
|
|
</td>
|
|
<td class="px-4 py-3 text-xs text-muted whitespace-nowrap">
|
|
{{ $peer->last_handshake_at?->diffForHumans() ?? __('vpn.never') }}
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
<span class="inline-flex items-center gap-1.5 rounded-pill border px-2.5 py-0.5 text-xs font-medium {{ $tone }}">
|
|
<span class="size-1.5 rounded-pill bg-current" aria-hidden="true"></span>
|
|
{{ __('vpn.status_'.$status) }}
|
|
</span>
|
|
</td>
|
|
<td class="px-4 py-3 text-right">
|
|
<div class="inline-flex gap-1">
|
|
<button type="button" wire:click="toggle('{{ $peer->uuid }}')"
|
|
aria-label="{{ $peer->enabled ? __('vpn.block') : __('vpn.unblock') }}"
|
|
class="grid size-8 place-items-center rounded-md border border-line text-muted hover:border-warning-border hover:text-warning">
|
|
<x-ui.icon :name="$peer->enabled ? 'lock' : 'unlock'" class="size-4" />
|
|
</button>
|
|
<button type="button" aria-label="{{ __('vpn.delete') }}"
|
|
x-on:click="$dispatch('openModal', { component: 'admin.confirm-delete-vpn-peer', arguments: { uuid: '{{ $peer->uuid }}' } })"
|
|
class="grid size-8 place-items-center rounded-md border border-line text-muted hover:border-danger hover:text-danger">
|
|
<x-ui.icon name="trash-2" class="size-4" />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="space-y-5">
|
|
{{-- New access --}}
|
|
<form wire:submit="create" class="space-y-4 rounded-xl border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:120ms]">
|
|
<h2 class="font-semibold text-ink">{{ __('vpn.add') }}</h2>
|
|
<x-ui.input name="name" wire:model="name" :label="__('vpn.name')" placeholder="Notebook Boban" />
|
|
<x-ui.input name="publicKey" wire:model="publicKey" :label="__('vpn.own_key')" :hint="__('vpn.own_key_hint')" placeholder="{{ __('vpn.own_key_placeholder') }}" />
|
|
<x-ui.button variant="primary" type="submit" class="w-full">
|
|
<x-ui.icon name="plus" class="size-4" />{{ __('vpn.add') }}
|
|
</x-ui.button>
|
|
</form>
|
|
|
|
{{-- Hub facts an operator needs when configuring a peer by hand --}}
|
|
<div class="space-y-3 rounded-xl border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:180ms]">
|
|
<h2 class="font-semibold text-ink">{{ __('vpn.hub') }}</h2>
|
|
<div>
|
|
<div class="text-xs uppercase tracking-wide text-faint">{{ __('vpn.endpoint') }}</div>
|
|
<div class="mt-0.5 break-all font-mono text-xs text-body">{{ $hubEndpoint ?: '—' }}</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs uppercase tracking-wide text-faint">{{ __('vpn.hub_key') }}</div>
|
|
<div class="mt-0.5 break-all font-mono text-xs text-body">{{ $hubPublicKey ?: '—' }}</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs uppercase tracking-wide text-faint">{{ __('vpn.subnet') }}</div>
|
|
<div class="mt-0.5 font-mono text-xs text-body">{{ config('provisioning.wireguard.subnet') }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|