Add Passkey Support & Pint
This commit is contained in:
11
resources/views/vendor/passkeys/livewire/partials/createScript.blade.php
vendored
Normal file
11
resources/views/vendor/passkeys/livewire/partials/createScript.blade.php
vendored
Normal file
@@ -0,0 +1,11 @@
|
||||
@script
|
||||
<script>
|
||||
Livewire.on('passkeyPropertiesValidated', async function (eventData) {
|
||||
const passkeyOptions = eventData[0].passkeyOptions;
|
||||
|
||||
const passkey = await startRegistration({ optionsJSON: passkeyOptions });
|
||||
|
||||
@this.call('storePasskey', JSON.stringify(passkey));
|
||||
});
|
||||
</script>
|
||||
@endscript
|
||||
44
resources/views/vendor/passkeys/livewire/passkeys.blade.php
vendored
Normal file
44
resources/views/vendor/passkeys/livewire/passkeys.blade.php
vendored
Normal file
@@ -0,0 +1,44 @@
|
||||
<section>
|
||||
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
|
||||
{{ __('passkeys::passkeys.passkeys') }}
|
||||
</h2>
|
||||
<div class="mt-2">
|
||||
<label for="name" class="block mt-1 text-sm text-gray-600 dark:text-gray-400">
|
||||
{{ __('passkeys::passkeys.name') }}
|
||||
</label>
|
||||
<form id="passkeyForm" wire:submit="validatePasskeyProperties" class="flex items-center space-x-2 mt-2">
|
||||
<div>
|
||||
<input autocomplete="off" type="text" wire:model="name" class="border-gray-300 dark:border-gray-700 dark:bg-neutral-900 dark:text-gray-300 focus:border-rose-500 dark:focus:border-rose-600 focus:ring-rose-500 dark:focus:ring-rose-600 rounded-md shadow-sm">
|
||||
@error('name')
|
||||
<span class="text-red-500 text-sm">{{ $message }}</span>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<button type="submit" class="inline-flex items-center px-4 py-2 bg-rose-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-rose-700 active:bg-rose-900 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">
|
||||
{{ __('passkeys::passkeys.create') }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<ul class="space-y-4">
|
||||
@foreach($passkeys as $passkey)
|
||||
<li class="flex justify-between items-center p-4 bg-white border-neutral-200 dark:bg-neutral-900 dark:border-neutral-700 border rounded-lg shadow-sm">
|
||||
<div class="text-gray-900 dark:text-gray-100">
|
||||
{{ $passkey->name }}
|
||||
</div>
|
||||
<div class="ml-2 text-gray-900 dark:text-gray-100">
|
||||
{{ __('passkeys::passkeys.last_used') }}: {{ $passkey->last_used_at?->diffForHumans() ?? __('passkeys::passkeys.not_used_yet') }}
|
||||
</div>
|
||||
<div>
|
||||
<button wire:click="deletePasskey({{ $passkey->id }})" class="inline-flex items-center px-4 py-2 bg-rose-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-rose-700 active:bg-rose-900 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">
|
||||
{{ __('passkeys::passkeys.delete') }}
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@include('passkeys::livewire.partials.createScript')
|
||||
Reference in New Issue
Block a user