wip passkeys

Author: aguingand

demo/app/Models/Passkey.php

@@ -30,6 +30,7 @@ protected function buildShowFields(FieldsContainer $showFields): void
             )
             ->when(config('demo.enable_passkeys'), fn () => $showFields->addField(
                 SharpShowEntityListField::make(PasskeyEntity::class)
+                    ->setLabel('Passkeys')
             ));
     }
 

demo/app/Sharp/Profile/ProfileSingleShow.php

@@ -15,13 +15,14 @@
     import { FormItem } from "@/components/ui/form";
     import { Check } from "lucide-vue-next";
     import TemplateRenderer from "@/components/TemplateRenderer.vue";
-    import { onMounted, ref } from "vue";
+    import { onMounted } from "vue";
     import {
         startAuthentication,
         browserSupportsWebAuthn,
         browserSupportsWebAuthnAutofill
     } from "@simplewebauthn/browser";
     import { api } from "@/api/api";
+    import { Separator } from "@/components/ui/separator";
 
     const props = defineProps<{
         loginIsEmail: boolean,
@@ -149,6 +150,13 @@
                             {{ __('sharp::pages/auth/login.button') }}
                         </Button>
                         <template v-if="config('sharp.auth.passkeys.enabled') && form.supports_passkeys">
+                            <div class="my-3 flex items-center gap-x-6">
+                                <Separator class="flex-1" />
+                                <div class="text-center text-sm text-muted-foreground [text-box:trim-both_ex_alphabetic]">
+                                    {{ __('sharp::pages/auth/login.or_label') }}
+                                </div>
+                                <Separator class="flex-1" />
+                            </div>
                             <Button
                                 type="button"
                                 variant="outline"

demo/composer.lock

@@ -60,12 +60,13 @@
                     {{ __('sharp::pages/auth/passkeys.title') }}
                 </template>
 
+                <template #description>
+                    <div class="grid grid-cols-1 gap-y-3" v-html="__('sharp::pages/auth/passkeys.description')">
+                    </div>
+                </template>
+
                 <div class="grid gap-4">
-                    <template v-if="prompt">
-                        <p class="text-sm text-muted-foreground">
-                            {{ __('sharp::pages/auth/passkeys.prompt_version.description') }}
-                        </p>
-                    </template>
+
 
                     <FormItem>
                         <Label for="name">
@@ -77,6 +78,7 @@
                             v-model="form.name"
                             autofocus
                         />
+                        <div class="mt-1 text-sm text-muted-foreground">{{ __('sharp::pages/auth/passkeys.name_help_text') }}</div>
                         <template v-if="form.errors.name">
                             <FieldError class="mt-2">
                                 {{ form.errors.name }}
@@ -94,7 +96,7 @@
                         <template v-if="prompt">
                             <Button
                                 type="button"
-                                variant="ghost"
+                                variant="outline"
                                 class="w-full"
                                 as="a"
                                 :href="route('code16.sharp.home')"

demo/config/passkeys.php

@@ -9,5 +9,6 @@
     'remember' => 'Remember me',
     'button' => 'Login',
     'passkey_button' => 'Use passkey',
+    'or_label' => 'or',
     'forgot_password_link' => 'Forgot password?',
 ];

resources/js/Pages/Auth/Login.vue

@@ -3,8 +3,9 @@
 return [
     'title' => 'Create a passkey',
     'name_field' => 'Name',
+    'description' => '<p>Your device supports passkeys, a password replacement that validates your identity using touch, facial recognition, a device password, or a PIN.</p> <p>Passkeys can be used for sign-in as a simple and secure alternative to your password and two-factor credentials.</p>',
+    'name_help_text' => 'The passkey name will help you identify it later.',
     'prompt_version' => [
-        'description' => 'A passkey is a faster, more secure way to sign in without a password.',
         'button' => 'Create passkey',
         'skip_prompt_button' => 'Remind me later',
         'never_ask_again_button' => "Don't ask me again in this browser",

resources/js/Pages/Auth/Passkeys/Create.vue

@@ -1,10 +1,10 @@
 <?php
 
 return [
-    'title' => 'Créer une clé de sécurité',
+    'title' => 'Créer une clé d’accès',
     'name_field' => 'Nom',
     'prompt_version' => [
-        'description' => 'Une clé de sécurité est un moyen plus rapide et plus sûr de se connecter sans mot de passe.',
+        'description' => 'Une clé d’accès est un moyen plus rapide et plus sûr de se connecter sans mot de passe.',
         'button' => 'Créer une clé',
         'skip_prompt_button' => 'Plus tard',
         'never_ask_again_button' => 'Ne plus me demander sur ce navigateur',