Add Passkey Support & Pint

resources/views/vendor/passkeys/components/authenticate.blade.php

@@ -0,0 +1,23 @@
+<div>
+    @include('passkeys::components.partials.authenticateScript')
+
+    <form id="passkey-login-form" method="POST" action="{{ route('passkeys.login') }}">
+        @csrf
+    </form>
+
+    @if($message = session()->get('authenticatePasskey::message'))
+        <div class="bg-red-100 text-red-700 p-4 border border-red-400 rounded">
+            {{ $message }}
+        </div>
+    @endif
+
+    <div onclick="authenticateWithPasskey()">
+        @if ($slot->isEmpty())
+            <div class="bg-zinc-700 hover:bg-zinc-600 text-white font-bold px-4 h-10 rounded text-center p-[10px] cursor-pointer">
+                <i class="fa-solid fa-key"></i> {{ __('passkeys::passkeys.authenticate_using_passkey') }}
+            </div>
+        @else
+            {{ $slot }}
+        @endif
+    </div>
+</div>

resources/views/vendor/passkeys/components/partials/authenticateScript.blade.php

@@ -0,0 +1,18 @@
+<script>
+    async function authenticateWithPasskey(remember = false) {
+        const response = await fetch('{{ route('passkeys.authentication_options') }}')
+
+        const options = await response.json();
+
+        const startAuthenticationResponse = await startAuthentication({ optionsJSON: options, });
+
+        const form = document.getElementById('passkey-login-form');
+    
+        form.addEventListener('formdata', ({formData}) => {
+            formData.set('remember', remember);
+            formData.set('start_authentication_response', JSON.stringify(startAuthenticationResponse));
+        });
+
+        form.submit();
+    }
+</script>

resources/views/vendor/passkeys/livewire/partials/createScript.blade.php

@@ -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

resources/views/vendor/passkeys/livewire/passkeys.blade.php

@@ -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')