42 lines
2.5 KiB
PHP
42 lines
2.5 KiB
PHP
<x-panel :title="__('auth.webauthn_title')" :subtitle="__('auth.webauthn_subtitle')">
|
|
@if (! $available)
|
|
<div class="flex items-start gap-2.5 rounded-md border border-line bg-inset px-4 py-3">
|
|
<x-icon name="lock" class="mt-0.5 h-4 w-4 shrink-0 text-ink-4" />
|
|
<p class="text-sm text-ink-3">{{ __('auth.webauthn_unavailable') }}</p>
|
|
</div>
|
|
@else
|
|
<div class="space-y-4">
|
|
<div class="divide-y divide-line">
|
|
@forelse ($keys as $key)
|
|
<div class="flex items-center gap-3 py-3">
|
|
<span class="grid h-9 w-9 shrink-0 place-items-center rounded-md border border-line bg-inset text-ink-3">
|
|
<x-icon name="shield" class="h-4 w-4" />
|
|
</span>
|
|
<div class="min-w-0 flex-1">
|
|
<p class="truncate text-sm text-ink">{{ $key->name }}</p>
|
|
<p class="truncate font-mono text-[11px] text-ink-3">
|
|
{{ __('auth.webauthn_added_on', ['date' => $key->created_at->diffForHumans()]) }}
|
|
· {{ $key->last_used_at ? __('auth.webauthn_last_used', ['date' => $key->last_used_at->diffForHumans()]) : __('auth.webauthn_never_used') }}
|
|
</p>
|
|
</div>
|
|
<x-btn variant="danger-soft" size="sm" class="shrink-0" wire:click="confirmRemove({{ $key->id }})">
|
|
<x-icon name="trash" class="h-3.5 w-3.5" /> {{ __('common.remove') }}
|
|
</x-btn>
|
|
</div>
|
|
@empty
|
|
<p class="py-3 font-mono text-[11px] text-ink-4">{{ __('auth.webauthn_none') }}</p>
|
|
@endforelse
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2 sm:flex-row" x-data>
|
|
<input wire:model="newName" type="text" maxlength="60" placeholder="{{ __('auth.webauthn_name_placeholder') }}"
|
|
class="h-9 w-full rounded-md border border-line bg-inset px-3 text-sm text-ink placeholder:text-ink-4 focus:border-accent/40 focus:outline-none" />
|
|
<x-btn variant="accent" class="shrink-0" x-on:click="window.clusevWebauthn?.register($wire)">
|
|
<x-icon name="plus" class="h-3.5 w-3.5" /> {{ __('auth.webauthn_add') }}
|
|
</x-btn>
|
|
</div>
|
|
@error('newName') <p class="font-mono text-[11px] text-offline">{{ $message }}</p> @enderror
|
|
</div>
|
|
@endif
|
|
</x-panel>
|