@adminforth/two-factors-auth 4.7.1 → 4.8.1

package/custom/TwoFactorsConfirmation.vue

@@ -8,83 +8,36 @@
     }: {}"
   >
     <div v-if="isLoading===false" id="authentication-modal" class="af-two-factors-confirmation flex items-center justify-center w-full p-4">
-      <div class="relative w-full max-w-md">
-        
-        <div class="af-login-popup relative bg-white dark:bg-gray-700 rounded-lg shadow p-6" :class="codeError ? 'rounded-b-none' : ''">
-          
-          <div class="af-2fa-header flex flex-col items-center justify-center gap-3 mb-6">
-            <div class="af-2fa-icon-wrap w-14 h-14 shrink-0 flex items-center justify-center rounded-full bg-lightPrimary dark:bg-darkPrimary">
-              <IconShieldOutline class="af-2fa-shield-icon w-7 h-7 text-white" />
-            </div>
-            <div class="af-2fa-title-wrap text-center">
-              <p class="text-xl font-medium text-gray-900 dark:text-white">
-                {{ confirmationMode === 'code' ? $t('Two-factor Auth') : $t('Passkey') }}
-              </p>
-              <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                {{ confirmationMode === 'code' 
-                   ? $t('Please enter your authenticator code') 
-                   : $t('When you are ready, authenticate using the button below') 
-                }}
-              </p>
-            </div>
-          </div>
-
-          <div v-if="confirmationMode === 'code'" class="af-2fa-otp-root flex flex-col items-center gap-6" ref="otpRoot">
-            <v-otp-input
-              ref="code"
-              container-class="grid grid-cols-6 gap-3"
-              input-classes="bg-gray-50 text-center flex justify-center otp-input border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-10 h-10 dark:bg-gray-600 dark:border-gray-500 dark:text-white"
-              :num-inputs="6"
-              inputType="number"
-              inputmode="numeric"
-              :should-auto-focus="true"
-              v-model:value="bindValue"
-              @on-complete="handleOnComplete"
-            />
-
-            <div class="af-2fa-footer text-center text-xs text-gray-500 dark:text-gray-400">
-              <p>
-                {{$t('Having trouble?')}}
-                <button v-if="doesUserHavePasskeys" type="button" 
-                  class="hover-link bg-transparent text-[#16537E] border-none p-0 cursor-pointer ml-1" 
-                  @click="router.push({ hash: '#passkey' })">
-                  {{$t('Use passkey instead')}}
-                </button>
-                <span v-if="doesUserHavePasskeys" class="mx-1">{{$t('or')}}</span>
-                <Link to="/login" class="hover-link">
-                  {{$t('Back to login')}}
-                </Link>
-              </p>
-            </div>
-          </div>
-
-          <div v-else class="af-2fa-passkey-root flex flex-col gap-6">
-            <Button @click="usePasskeyButton" :disabled="isFetchingPasskey" :loader="isFetchingPasskey" class="af-2fa-passkey-btn w-full flex items-center justify-center gap-2">
-              <IconShieldOutline class="w-4 h-4" />
-              {{$t('Use passkey to verify')}}
+      <TwoFaCard
+        class="af-login-popup"
+        :title="$t('Two-factor authentication')"
+        :subtitle="confirmationMode === 'code' ? $t('Enter the 6-digit code from your authenticator app') : $t('Confirm with your passkey')"
+        :error="codeError"
+      >
+        <TwoFaCodeInput v-if="confirmationMode === 'code'" ref="codeInput" :invalid="Boolean(codeError)" @complete="handleOnComplete" />
+        <TwoFaHint v-else class="af-2fa-passkey-hint">
+          <template #icon><IconFingerprintOutline class="w-6 h-6" /></template>
+          {{ $t('Your browser will ask for Touch ID, Windows Hello or a security key.') }}
+        </TwoFaHint>
+
+        <template #footer>
+          <TwoFaLinkButton v-if="confirmationMode === 'code' && doesUserHavePasskeys" class="af-2fa-switch-to-passkey" @click="router.push({ hash: '#passkey' })">
+            <IconFingerprintOutline class="w-4 h-4" />
+            {{ $t('Use passkey instead') }}
+          </TwoFaLinkButton>
+          <TwoFaLinkButton v-else-if="confirmationMode === 'passkey'" class="af-2fa-switch-to-totp" @click="router.push({ hash: '#code' })">
+            <IconMobilePhoneOutline class="w-4 h-4" />
+            {{ $t('Use code instead') }}
+          </TwoFaLinkButton>
+          <div class="af-2fa-buttons ms-auto flex gap-2 whitespace-nowrap">
+            <LinkButton to="/login" variant="secondary" class="af-2fa-back-to-login">{{ $t('Back to login') }}</LinkButton>
+            <Button v-if="confirmationMode === 'passkey'" @click="usePasskeyButton" :disabled="isFetchingPasskey" :loader="isFetchingPasskey" class="af-2fa-passkey-btn gap-2">
+              <IconFingerprintOutline class="w-4 h-4" />
+              {{ $t('Use passkey') }}
             </Button>
-
-            <div class="af-2fa-footer text-center text-xs text-gray-500 dark:text-gray-400">
-              <p>
-                {{$t('Having trouble?')}}
-                <button type="button" 
-                  class="hover-link bg-transparent text-[#16537E] border-none p-0 cursor-pointer ml-1" 
-                  @click="router.push({ hash: '#code' })">
-                  {{$t('Use TOTP instead')}}
-                </button>
-                <span class="mx-1">{{$t('or')}}</span>
-                <Link to="/login" class="hover-link">
-                  {{$t('Back to login')}}
-                </Link>
-              </p>
-            </div>
           </div>
-        </div>
-
-        <div v-if="codeError" class="af-two-factors-confirmation-error relative bg-red-100 text-red-700 text-xs px-4 py-2 rounded-b-lg shadow border-t border-red-200 text-center">
-          {{ codeError }}
-        </div>
-      </div>
+        </template>
+      </TwoFaCard>
     </div>
     <div v-else>
       <Spinner class="w-10 h-10" />
@@ -100,22 +53,23 @@
   import { useUserStore } from '@/stores/user';
   import { callAdminForthApi, loadFile } from '@/utils';
   import { showErrorTost } from '@/composables/useFrontendApi';
-  import { Button, Link, Spinner } from '@/afcl';
-  import VOtpInput from "vue3-otp-input";
+  import { Button, LinkButton, Spinner } from '@/afcl';
   import { useI18n } from 'vue-i18n';
   import { useRoute } from 'vue-router'
   import { useRouter } from 'vue-router';
-  import { IconShieldOutline } from '@iconify-prerendered/vue-flowbite';
+  import { IconFingerprintOutline, IconMobilePhoneOutline } from '@iconify-prerendered/vue-flowbite';
   import ErrorMessage from '@/components/ErrorMessage.vue';
   import { handlePasskeyAlert } from './utils.js';
-  
+  import TwoFaCard from './TwoFaCard.vue';
+  import TwoFaCodeInput from './TwoFaCodeInput.vue';
+  import TwoFaHint from './TwoFaHint.vue';
+  import TwoFaLinkButton from './TwoFaLinkButton.vue';
+
   // Global provided by AdminForth runtime
   declare const adminforth: any;
 
   const { t } = useI18n();
-  const code = ref(null);
-  const otpRoot = ref(null);
-  const bindValue = ref('');
+  const codeInput = ref<InstanceType<typeof TwoFaCodeInput> | null>(null);
   const route = useRoute();
   const router = useRouter();
   const codeError = ref(null);
@@ -159,19 +113,6 @@
     sendCode(value, 'TOTP', null);
   };
 
-  function tagOtpInputs() {
-    const root = otpRoot.value;
-    if (!root) return;
-    const inputs = root.querySelectorAll('input.otp-input');
-    inputs.forEach((el, idx) => {
-      el.setAttribute('name', 'mfaCode');
-      el.setAttribute('id', `mfaCode-${idx + 1}`);
-      el.setAttribute('autocomplete', 'one-time-code');
-      el.setAttribute('inputmode', 'numeric');
-      el.setAttribute('aria-labelledby', 'mfaCode-label');
-    });
-  }
-
   const inProgress = ref(false);
 
   const coreStore = useCoreStore();
@@ -187,24 +128,13 @@
       cancelPendingWebAuthn('mount-init');
       await nextTick();
       await isCMAAvailable();
-      tagOtpInputs();
       if (isPasskeysSupported.value === true) {
         await checkIfUserHasPasskeys();
       }
-      if (confirmationMode.value ===  'code') {
-        await addEventListenerForOTPInput();
-      }
     }
     isLoading.value = false;
   });
 
-  watch(confirmationMode, async (newMode) => {
-    if (newMode === 'code') {
-      await addEventListenerForOTPInput();
-    } else {
-      removeEventListenerForOTPInput();
-    }
-  });
   watch(route, (newRoute) => {
     codeError.value = null;
     if ( newRoute.hash === '#passkey' ) {
@@ -217,24 +147,6 @@
     }
   });
 
-  async function addEventListenerForOTPInput(){
-    document.addEventListener('focusin', handleGlobalFocusIn, true);
-    focusFirstAvailableOtpInput();
-    isLoading.value = false;
-    await nextTick();
-    const rootEl = otpRoot.value;
-    rootEl && rootEl.addEventListener('focusout', handleFocusOut, true);
-  }
-
-  function removeEventListenerForOTPInput() {
-    window.removeEventListener('paste', handlePaste);
-    document.removeEventListener('focusin', handleGlobalFocusIn, true);
-    const rootEl = otpRoot.value;
-    rootEl && rootEl.removeEventListener('focusout', handleFocusOut, true);
-    // Abort any in-flight WebAuthn request when leaving the component
-    cancelPendingWebAuthn('component-unmount');
-  }
-
   async function isCMAAvailable() {
     if (window.PublicKeyCredential &&  
     PublicKeyCredential.isConditionalMediationAvailable) {  
@@ -246,7 +158,8 @@
   }
 
   onBeforeUnmount(() => {
-    removeEventListenerForOTPInput();
+    // Abort any in-flight WebAuthn request when leaving the component
+    cancelPendingWebAuthn('component-unmount');
   });
 
   async function sendCode (value: any, factorMode: 'TOTP' | 'passkey', passkeyOptions: any) {
@@ -273,21 +186,11 @@
       } else {
         showErrorTost(t(resp.error));
         codeError.value = resp.error || t('Invalid code');
+        codeInput.value!.clear();
       }
     }
   }
 
-  function handlePaste(event) {
-    event.preventDefault();
-    if (event.target.classList.contains('otp-input')) {
-      return;
-    }
-    const pastedText = event.clipboardData?.getData('text') || '';
-    if (pastedText.length === 6) { 
-      code.value?.fillInput(pastedText);
-    }
-  }
-
   async function checkIfUserHasPasskeys() {
     if(!route.meta.isPasskeysEnabled) {
       return;
@@ -414,98 +317,4 @@
       webAuthn.controller = null;
     }
   }
-
-
-  function getOtpInputs(): HTMLInputElement[] {
-    const root = otpRoot.value;
-    if (!root) return [];
-    return Array.from(root.querySelectorAll('input.otp-input')) as HTMLInputElement[];
-  }
-
-  function focusFirstAvailableOtpInput() {
-    const inputs = getOtpInputs();
-    if (!inputs.length) return;
-    const firstEmpty = inputs.find((i) => !i.value);
-    (firstEmpty || inputs[0]).focus();
-  }
-
-  function handleGlobalFocusIn(event) {
-    const inputs = getOtpInputs();
-    if (!inputs.length) return;
-    const target = event.target as HTMLInputElement | null;
-    if (!target) return;
-    if (!inputs.includes(target)) {
-      requestAnimationFrame(() => {
-        focusFirstAvailableOtpInput();
-      });
-    }
-  }
-
-  function handleFocusOut() {
-    requestAnimationFrame(() => {
-      const inputs = getOtpInputs();
-      if (!inputs.length) return;
-      const active = document.activeElement as Element | null;
-      const activeInput = active instanceof HTMLInputElement ? active : null;
-      if (!activeInput || !inputs.includes(activeInput)) {
-        focusFirstAvailableOtpInput();
-      }
-    });
-  }
   </script>
-
-  <style scoped lang='scss'>
-    .vue3-2fa-code-input {
-      display: flex;
-      justify-content: center;
-      gap: 1rem;
-      margin-bottom: 1rem;
-    }
-    :deep(.otp-input-container) {
-      display: flex;
-      gap: 0.75rem;
-    }
-    .vue3-2fa-code-input-box {
-        &[type='text'] {
-          @apply  w-10 h-10 text-center text-xl border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500;
-        
-        }
-        
-    }
-
-    /**
-    * This particular piece of code makes the last input have a gap in the middle.
-    */
-    .spaced-code-input {
-        & .vue3-2fa-code-input-box {
-            &:nth-child(3) {
-                @apply mr-4;
-            }
-
-            &:nth-child(4) {
-                @apply ml-4;
-            }
-        }
-    } 
-
-    :deep(.otp-input-container) {
-      display: flex;
-      gap: 0.75rem;
-    }
-
-    .hover-link {
-      text-decoration: none !important;
-      display: inline-block;
-      width: fit-content;
-      margin: 0 auto;
-
-      &:hover {
-        text-decoration: underline !important;
-      }
-    }
-
-    button.hover-link {
-      font-family: inherit;
-      font-size: inherit;
-    }
-  </style>

package/custom/TwoFactorsPasskeysSettings.vue

@@ -1,29 +1,29 @@
 <template>
     <div class="af-passkeys flex flex-col justify-center mr-6 md:mr-12">
         <h2 class="af-passkeys-title flex items-start justify-start leading-none text-gray-800 dark:text-gray-50 text-3xl font-semibold">{{$t('Passkeys')}}</h2>
-        <p class="af-passkeys-subtitle text-sm mt-3"> {{$t('Manage your passwordless authentication methods')}} </p>
+        <p class="af-passkeys-subtitle text-sm mt-3 text-gray-500 dark:text-gray-400"> {{$t('Manage your passwordless authentication methods')}} </p>
 
         <div class="af-passkeys-grid mt-6 flex flex-wrap gap-4">
             <div
                 v-for="item in passkeys"
                 :key="item.id"
-                class="af-passkey-card flex flex-col w-full h-42 lg:w-72 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-4 shadow-sm"
+                class="af-passkey-card flex flex-col w-full h-42 lg:w-72 rounded-xl border border-lightDialogBreakLine bg-lightDialogBackgorund p-4 shadow-sm dark:border-darkDialogBreakLine dark:bg-darkDialogBackgorund"
             >
                 <div class="af-passkey-card-header flex items-center gap-3 mb-3">
-                    <div class="af-passkey-card-icon w-10 h-10 flex items-center justify-center bg-gray-100 dark:bg-gray-700 rounded-lg shrink-0">
+                    <div class="af-passkey-card-icon flex w-10 h-10 shrink-0 items-center justify-center rounded-[10px] bg-gray-100 dark:bg-gray-800">
                         <img class="max-h-6 max-w-6" :src="coreStore.theme === 'light' ? item.light_icon : item.dark_icon" />
                     </div>
                     <div class="af-passkey-card-info flex-1 min-w-0">
-                        <p class="af-passkey-card-name font-semibold text-gray-900 dark:text-white truncate" :title="item.name">{{ item.name }}</p>
+                        <p class="af-passkey-card-name font-semibold text-lightDialogHeaderText dark:text-darkDialogHeaderText truncate" :title="item.name">{{ item.name }}</p>
                         <p class="af-passkey-card-type text-xs text-gray-500 dark:text-gray-400">{{$t('Synced passkey')}}</p>
                     </div>
-                    <span class="af-passkey-card-badge shrink-0 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+                    <span class="af-passkey-card-badge shrink-0 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-800 dark:bg-green-500/10 dark:text-green-300">
                         {{$t('Active')}}
                     </span>
                 </div>
 
                 <div class="af-passkey-card-last-used text-xs text-gray-500 dark:text-gray-400 mb-4">
-                    <span class="af-passkey-card-last-used-label font-medium">{{$t('Last used')}}:</span>
+                    <span class="af-passkey-card-last-used-label font-medium text-gray-700 dark:text-gray-300">{{$t('Last used')}}:</span>
                     <span v-if="item.last_used_at" class="af-passkey-card-last-used-date ml-1">{{ formatDateTime(item.last_used_at) }}</span>
                     <span v-else class="af-passkey-card-last-used-never ml-1 italic">{{$t('Never')}}</span>
                 </div>
@@ -38,13 +38,16 @@
                         header="Edit Passkey"
                     >
                         <template #trigger>
-                            <button
+                            <Button
+                                type="button"
+                                variant="secondary"
+                                :shadow="false"
                                 @click="passkeysNewName = ''"
-                                class="af-passkey-btn-rename w-full flex items-center justify-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-lg border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer"
+                                class="af-passkey-btn-rename w-full gap-1.5 px-3 py-2 text-[13px]"
                             >
-                                <IconPenSolid class="w-3.5 h-3.5" />
+                                <IconPenOutline class="w-4 h-4" />
                                 {{$t('Rename')}}
-                            </button>
+                            </Button>
                         </template>
                         <div class="flex flex-col gap-2">
                             <label class="text-sm font-medium">{{$t('Current name:')}}</label>
@@ -60,10 +63,11 @@
                     </Dialog>
 
                     <button
+                        type="button"
                         @click="confirmAndDelete(item.id)"
-                        class="af-passkey-btn-remove flex items-center justify-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-lg border border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 transition-colors cursor-pointer"
+                        class="af-passkey-btn-remove flex items-center justify-center gap-1.5 px-3 py-2 text-[13px] font-medium rounded-default border border-red-200 dark:border-red-500/30 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors cursor-pointer"
                     >
-                        <IconTrashBinSolid class="w-3.5 h-3.5" />
+                        <IconTrashBinOutline class="w-4 h-4" />
                         {{$t('Remove')}}
                     </button>
                 </div>
@@ -72,8 +76,8 @@
             <template v-if="isInitialFinished">
                 <Tooltip v-if="!isPasskeySupported && (authenticatorAttachment === 'platform' || authenticatorAttachment === 'both')">
                     <div class="af-passkey-add-card af-passkey-add-local flex flex-col items-center justify-center gap-2 p-4 rounded-xl border-2 border-dashed border-gray-300 dark:border-gray-600 w-full lg:w-72 min-h-36 opacity-50 pointer-events-none">
-                        <div class="af-passkey-add-card-icon w-10 h-10 flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700">
-                            <IconPlusOutline class="w-5 h-5 text-gray-500 dark:text-gray-400" />
+                        <div class="af-passkey-add-card-icon w-10 h-10 flex items-center justify-center rounded-full bg-lightPrimary/10 text-lightPrimary dark:bg-darkPrimary/20 dark:text-darkPrimary">
+                            <IconPlusOutline class="w-5 h-5" />
                         </div>
                         <p class="af-passkey-add-card-title font-medium text-gray-700 dark:text-gray-300 text-sm">{{$t('Add local passkey')}}</p>
                         <p class="af-passkey-add-card-subtitle text-xs text-gray-400 dark:text-gray-500 text-center">{{$t('Register this device')}}</p>
@@ -84,40 +88,44 @@
                     </template>
                 </Tooltip>
 
-                <div
+                <button
                     v-else-if="authenticatorAttachment === 'platform' || authenticatorAttachment === 'both'"
+                    type="button"
+                    :disabled="isFetchingPasskey"
                     @click="addLocalPasskey"
-                    class="af-passkey-add-card af-passkey-add-local flex flex-col items-center justify-center gap-2 p-4 rounded-xl border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-blue-400 dark:hover:border-blue-500 hover:bg-blue-50/50 dark:hover:bg-blue-900/10 transition-colors w-full lg:w-72 min-h-36"
+                    class="af-passkey-add-card af-passkey-add-local flex flex-col items-center justify-center gap-2 p-4 rounded-xl border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-lightPrimary hover:bg-lightPrimary/5 dark:hover:border-darkPrimary dark:hover:bg-darkPrimary/10 transition-colors w-full lg:w-72 min-h-36"
                     :class="isFetchingPasskey ? 'opacity-50 pointer-events-none' : 'cursor-pointer'"
                 >
-                    <div class="af-passkey-add-card-icon w-10 h-10 flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700">
+                    <span class="af-passkey-add-card-icon w-10 h-10 flex items-center justify-center rounded-full bg-lightPrimary/10 text-lightPrimary dark:bg-darkPrimary/20 dark:text-darkPrimary">
                         <Spinner v-if="isFetchingPasskey && addPasskeyMode === 'platform'" class="w-5 h-5" />
-                        <IconPlusOutline v-else class="w-5 h-5 text-gray-500 dark:text-gray-400" />
-                    </div>
-                    <p class="af-passkey-add-card-title font-medium text-gray-700 dark:text-gray-300 text-sm">{{$t('Add local passkey')}}</p>
-                    <p class="af-passkey-add-card-subtitle text-xs text-gray-400 dark:text-gray-500 text-center">{{$t('Register this device')}}</p>
-                </div>
+                        <IconPlusOutline v-else class="w-5 h-5" />
+                    </span>
+                    <span class="af-passkey-add-card-title font-medium text-gray-700 dark:text-gray-300 text-sm">{{$t('Add local passkey')}}</span>
+                    <span class="af-passkey-add-card-subtitle text-xs text-gray-500 dark:text-gray-400 text-center">{{$t('Register this device')}}</span>
+                </button>
 
-                <div
+                <button
                     v-if="authenticatorAttachment === 'cross-platform' || authenticatorAttachment === 'both'"
+                    type="button"
+                    :disabled="isFetchingPasskey"
                     @click="addCrossDevicePasskey"
-                    class="af-passkey-add-card af-passkey-add-cross flex flex-col items-center justify-center gap-2 p-4 rounded-xl border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-purple-400 dark:hover:border-purple-500 hover:bg-purple-50/50 dark:hover:bg-purple-900/10 transition-colors w-full lg:w-72 min-h-36"
+                    class="af-passkey-add-card af-passkey-add-cross flex flex-col items-center justify-center gap-2 p-4 rounded-xl border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-lightPrimary hover:bg-lightPrimary/5 dark:hover:border-darkPrimary dark:hover:bg-darkPrimary/10 transition-colors w-full lg:w-72 min-h-36"
                     :class="isFetchingPasskey ? 'opacity-50 pointer-events-none' : 'cursor-pointer'"
                 >
-                    <div class="af-passkey-add-card-icon w-10 h-10 flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700">
+                    <span class="af-passkey-add-card-icon w-10 h-10 flex items-center justify-center rounded-full bg-lightPrimary/10 text-lightPrimary dark:bg-darkPrimary/20 dark:text-darkPrimary">
                         <Spinner v-if="isFetchingPasskey && addPasskeyMode === 'cross-platform'" class="w-5 h-5" />
-                        <IconPlusOutline v-else class="w-5 h-5 text-gray-500 dark:text-gray-400" />
-                    </div>
-                    <p class="af-passkey-add-card-title font-medium text-gray-700 dark:text-gray-300 text-sm">{{$t('Add cross-device')}}</p>
-                    <p class="af-passkey-add-card-subtitle text-xs text-gray-400 dark:text-gray-500 text-center">{{$t('Use phone or security key')}}</p>
-                </div>
+                        <IconPlusOutline v-else class="w-5 h-5" />
+                    </span>
+                    <span class="af-passkey-add-card-title font-medium text-gray-700 dark:text-gray-300 text-sm">{{$t('Add cross-device')}}</span>
+                    <span class="af-passkey-add-card-subtitle text-xs text-gray-500 dark:text-gray-400 text-center">{{$t('Use phone or security key')}}</span>
+                </button>
             </template>
         </div>
 
-        <div class="af-passkeys-info mt-6 flex items-center gap-2 px-4 py-3 bg-blue-50 w-full md:w-fit dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800 rounded-xl text-sm text-blue-700 dark:text-blue-300">
-            <IconInfoCircleOutline class="af-passkeys-info-icon w-4 h-4 shrink-0" />
-            <span class="af-passkeys-info-text">{{$t('Passkeys are a more secure alternative to passwords. They use your device\'s biometrics or PIN and are resistant to phishing attacks.')}}</span>
-        </div>
+        <TwoFaHint class="af-passkeys-info mt-6 w-full md:w-fit">
+            <template #icon><IconInfoCircleOutline class="af-passkeys-info-icon w-5 h-5" /></template>
+            {{$t('Passkeys are a more secure alternative to passwords. They use your device\'s biometrics or PIN and are resistant to phishing attacks.')}}
+        </TwoFaHint>
 
     </div>
 </template>
@@ -127,8 +135,9 @@
     import adminforth, { useAdminforth } from '@/adminforth';
     import { onMounted, ref, Ref } from 'vue';
     import { useI18n } from 'vue-i18n';
-    import { Dialog, Tooltip, Spinner, Input } from '@/afcl';
-    import { IconTrashBinSolid, IconPenSolid, IconPlusOutline, IconInfoCircleOutline } from '@iconify-prerendered/vue-flowbite';
+    import { Button, Dialog, Tooltip, Spinner, Input } from '@/afcl';
+    import { IconTrashBinOutline, IconPenOutline, IconPlusOutline, IconInfoCircleOutline } from '@iconify-prerendered/vue-flowbite';
+    import TwoFaHint from './TwoFaHint.vue';
     import { useCoreStore } from '@/stores/core';
     import { useTwoFactorsAuth, type TwoFaConfirmationResult } from './use2faApi';