@adminforth/two-factors-auth 4.7.1 → 4.8.1

package/build.log

@@ -6,6 +6,10 @@ sending incremental file list
 custom/
 custom/LoginWithPasskeyButton.vue
 custom/TwoFAModal.vue
+custom/TwoFaCard.vue
+custom/TwoFaCodeInput.vue
+custom/TwoFaHint.vue
+custom/TwoFaLinkButton.vue
 custom/TwoFactorsConfirmation.vue
 custom/TwoFactorsPasskeysSettings.vue
 custom/TwoFactorsSetup.vue
@@ -17,5 +21,5 @@ custom/tsconfig.json
 custom/use2faApi.ts
 custom/utils.js
 
-sent 311,411 bytes  received 248 bytes  623,318.00 bytes/sec
-total size is 310,438  speedup is 1.00
+sent 306,997 bytes  received 324 bytes  614,642.00 bytes/sec
+total size is 305,746  speedup is 0.99

package/custom/LoginWithPasskeyButton.vue

@@ -1,13 +1,12 @@
 <template>
 
     <Button
-        class="w-full !py-2"
+        variant="secondary"
+        class="af-login-with-passkey-btn w-full gap-2"
         @click="handleLoginWithPasskey"
     >
-      <div class="flex items-center justify-center">
-        <IconShieldOutline class="w-6 h-6 mr-1" />
-        <span>{{ $t('Continue with Passkey') }}</span>
-      </div>
+      <IconFingerprintOutline class="w-5 h-5 text-lightPrimary dark:text-darkPrimary" />
+      {{ $t('Continue with Passkey') }}
     </Button>
 
 </template>
@@ -15,7 +14,7 @@
 
 
 <script setup lang="ts">
-    import { IconShieldOutline } from '@iconify-prerendered/vue-flowbite';
+    import { IconFingerprintOutline } from '@iconify-prerendered/vue-flowbite';
     import { getPasskey } from "./utils.js";
     import { callAdminForthApi } from '@/utils';
     import { useUserStore } from '@/stores/user';
@@ -44,7 +43,7 @@
           return;
         }
 
-        if ( resp.allowedLogin === true ) { 
+        if ( resp.allowedLogin === true ) {
             await userStore.finishLogin();
         } else if (resp.redirectTo) {
           router.push(resp.redirectTo);
@@ -54,6 +53,6 @@
         }
       } catch (error) {
         console.error("Error during passkey login:", error);
-      } 
+      }
     }
-</script>
+</script>

package/custom/TwoFAModal.vue

@@ -1,72 +1,79 @@
 <template>
-    <div class="af-two-factors-modal fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 top-0 bottom-0 left-0 right-0"
-    v-show ="modelShow && (isLoading === false)">
-      <div :class="`af-two-factor-modal-${modalMode}`" class="flex flex-col gap-4 relative bg-white dark:bg-gray-700 rounded-lg shadow p-6 w-full max-w-md">
-        <div class="af-2fa-header flex flex-col items-center justify-center gap-3">
-          <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 id="mfaCode-label" class="af-2fa-title-wrap">
-            <p class="af-2fa-title text-xl text-center font-medium text-gray-900 dark:text-white">{{ dialogTitle }}</p>
-            <p class="af-2fa-subtitle text-xs text-center text-gray-500 dark:text-gray-400 mt-1">{{ subtitles[modalMode] }}</p>
-          </div>
+    <div class="af-two-factors-modal fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 top-0 bottom-0 left-0 right-0 px-4"
+    v-if="modelShow && (isLoading === false)">
+      <TwoFaCard
+        :class="`af-two-factor-modal-${modalMode}`"
+        :title="dialogTitle"
+        :subtitle="subtitles[modalMode]"
+        :error="modalMode === 'totp' ? codeError : ''"
+        closable
+        @close="onCancel"
+      >
+        <pre v-if="dialogDetails" class="af-2fa-details max-h-60 overflow-auto rounded-[10px] border border-lightDialogBreakLine bg-gray-50 p-3 text-xs text-gray-800 dark:border-darkDialogBreakLine dark:bg-gray-800 dark:text-gray-100">{{ dialogDetails }}</pre>
+
+        <div v-if="confirmItems.length" class="af-2fa-actions">
+          <p class="mb-2 text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">{{ $t('You are approving') }}</p>
+          <ul class="af-2fa-actions-list max-h-60 overflow-auto divide-y divide-lightDialogBreakLine rounded-[10px] border border-lightDialogBreakLine bg-gray-50 dark:divide-darkDialogBreakLine dark:border-darkDialogBreakLine dark:bg-gray-800">
+            <li v-for="(item, i) in confirmItems" :key="i" class="flex gap-3 px-3.5 py-3">
+              <span aria-hidden="true" class="mt-2 w-1.5 h-1.5 shrink-0 rounded-full bg-lightPrimary dark:bg-darkPrimary"></span>
+              <span class="text-[15px] leading-[22px] break-words text-gray-800 dark:text-gray-100">{{ item }}</span>
+            </li>
+          </ul>
         </div>
 
-        <pre v-if="dialogDetails" class="af-2fa-details max-h-60 overflow-auto rounded-lg bg-gray-100 p-3 text-xs text-gray-800 dark:bg-gray-900 dark:text-gray-100">{{ dialogDetails }}</pre>
-
-        <ul v-if="confirmItems.length > 1" class="af-2fa-actions-list max-h-60 overflow-auto list-disc space-y-1 pl-5 text-sm text-gray-700 dark:text-gray-200">
-          <li v-for="(item, i) in confirmItems" :key="i">{{ item }}</li>
-        </ul>
+        <TwoFaCodeInput v-if="modalMode === 'totp'" ref="codeInput" :invalid="Boolean(codeError)" @complete="sendConfirmationResult" />
+        <TwoFaHint v-else-if="modalMode === 'passkey'" 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>
+        <p v-else role="status" class="af-2fa-grace-notice flex items-start gap-2.5 rounded-[10px] border border-green-200 bg-green-50 px-3.5 py-3 text-[13px] leading-[19px] text-green-800 dark:border-green-500/30 dark:bg-green-500/10 dark:text-green-300">
+          <IconCheckCircleOutline class="w-[18px] h-[18px] shrink-0" />
+          {{ $t('You verified recently, so no code is needed.') }}
+        </p>
 
-        <template v-if="modalMode === 'totp'">
-          <div class="af-2fa-otp-root flex justify-center" ref="otpRoot">
-            <v-otp-input
-              ref="confirmationResult"
-              container-class="grid grid-cols-6 gap-3"
-              input-classes="bg-gray-50 text-center flex justify-center otp-input border leading-none 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:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-              :num-inputs="6"
-              inputType="number"
-              inputmode="numeric"
-              :should-auto-focus="true"
-              :should-focus-order="true"
-              v-model:value="bindValue"
-              @on-complete="handleOnComplete"
-            />
+        <template #footer>
+          <TwoFaLinkButton v-if="modalMode === 'totp' && doesUserHavePasskeys" class="af-2fa-switch-to-passkey" @click="modalMode = 'passkey'">
+            <IconFingerprintOutline class="w-4 h-4" />
+            {{ $t('Use passkey instead') }}
+          </TwoFaLinkButton>
+          <TwoFaLinkButton v-else-if="modalMode === 'passkey'" class="af-2fa-switch-to-totp" @click="modalMode = 'totp'">
+            <IconMobilePhoneOutline class="w-4 h-4" />
+            {{ $t('Use code instead') }}
+          </TwoFaLinkButton>
+          <div class="af-2fa-buttons ms-auto flex gap-2 whitespace-nowrap">
+            <Button variant="secondary" class="af-2fa-cancel-btn" @click="onCancel">{{ $t('Cancel') }}</Button>
+            <Button v-if="modalMode === 'passkey'" @click="usePasskeyButtonClick" :disabled="isFetchingPasskey" :loader="isFetchingPasskey" class="af-2fa-passkey-btn gap-2">
+              <IconFingerprintOutline class="w-4 h-4" />
+              {{ $t('Use passkey') }}
+            </Button>
+            <Button v-else-if="modalMode === 'grace'" class="af-2fa-approve-btn gap-2" @click="approveInGracePeriod">
+              <IconCheckOutline class="w-4 h-4" />
+              {{ approveLabel }}
+            </Button>
           </div>
-          <p v-if="codeError" class="af-2fa-code-error text-center text-xs text-red-600 dark:text-red-400">{{ codeError }}</p>
         </template>
-
-        <div class="af-2fa-buttons flex gap-2">
-          <Button variant="secondary" class="af-2fa-cancel-btn flex-1" @click="onCancel">{{ $t('Cancel') }}</Button>
-          <Button v-if="modalMode === 'passkey'" @click="usePasskeyButtonClick" :disabled="isFetchingPasskey" :loader="isFetchingPasskey" class="af-2fa-passkey-btn flex-1 flex items-center justify-center gap-2">
-            <IconShieldOutline class="w-4 h-4" />
-            {{ $t('Use passkey') }}
-          </Button>
-          <Button v-else-if="modalMode === 'grace'" class="af-2fa-approve-btn flex-1" @click="approveInGracePeriod">{{ $t('Approve') }}</Button>
-        </div>
-
-        <p v-if="modalMode === 'totp' && doesUserHavePasskeys" class="af-2fa-totp-footer text-center text-xs text-gray-500 dark:text-gray-400">
-          {{$t('Having trouble?')}}
-          <button type="button" class="af-2fa-switch-to-passkey text-lightPrimary dark:text-white hover:underline cursor-pointer" @click="modalMode = 'passkey'">{{$t('Use passkey instead')}}</button>
-        </p>
-        <p v-else-if="modalMode === 'passkey'" class="af-2fa-passkey-footer text-center text-xs text-gray-500 dark:text-gray-400">
-          {{$t('Having trouble?')}}
-          <button type="button" class="af-2fa-switch-to-totp text-lightPrimary dark:text-white hover:underline cursor-pointer" @click="modalMode = 'totp'">{{$t('Use TOTP instead')}}</button>
-        </p>
-      </div>
+      </TwoFaCard>
     </div>
   </template>
   
   <script setup lang="ts">
 
-  import VOtpInput from 'vue3-otp-input';
-  import { ref, computed, nextTick, watch } from 'vue';
+  import { ref, computed, watch } from 'vue';
   import { useUserStore } from '@/stores/user';
   import { useI18n } from 'vue-i18n';
   import { callAdminForthApi } from '@/utils';
   import { Link, Button } from '@/afcl';
-  import { IconShieldOutline } from '@iconify-prerendered/vue-flowbite';
-  import { getPasskey } from './utils.js' 
+  import {
+    IconCheckCircleOutline,
+    IconCheckOutline,
+    IconFingerprintOutline,
+    IconMobilePhoneOutline,
+  } from '@iconify-prerendered/vue-flowbite';
+  import { getPasskey } from './utils.js'
+  import TwoFaCard from './TwoFaCard.vue';
+  import TwoFaCodeInput from './TwoFaCodeInput.vue';
+  import TwoFaHint from './TwoFaHint.vue';
+  import TwoFaLinkButton from './TwoFaLinkButton.vue';
   import { useAdminforth } from '@/adminforth';
   import websocket from '@/websocket';
   import { getAdminForthClientId } from '@/utils/clientId';
@@ -139,7 +146,7 @@
     let confirmationResult;
     try {
       isAwaiting2FAResult.value = true;
-      confirmationResult = await twoFactorsAuthApi.get2FaConfirmationResult(sessionsToResolve.value[0].actionDescription);
+      confirmationResult = await twoFactorsAuthApi.get2FaConfirmationResult();
     } catch (error) {
       if (!isTwoFaCancel(error)) {
         console.error('[AdminForth 2FA] Error during 2FA confirmation', error);
@@ -168,24 +175,6 @@
     (e: 'closed'): void
   }>();
 
-  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
-  }
-
-
   const modelShow = ref(false);
   let resolveFn: ((confirmationResult: any) => void) | null = null;
   let verifyFn: null | ((confirmationResult: string) => Promise<boolean> | boolean) = null;
@@ -223,9 +212,6 @@
         rejectFn = reject;
         verifyFn = verifyingCallback ?? null;
         modelShow.value = true;
-        if (modalMode.value === 'totp') {
-          await addEventListenerForOTPInput();
-        }
       })().catch((error) => {
         if (!isTwoFaCancel(error)) {
           console.error('[AdminForth 2FA] Failed to open 2FA modal', error);
@@ -241,9 +227,7 @@
   const { t } = useI18n();
   const user = useUserStore();
   
-  const confirmationResult = ref<any>(null);
-  const otpRoot = ref<HTMLElement | null>(null);
-  const bindValue = ref('');
+  const codeInput = ref<InstanceType<typeof TwoFaCodeInput> | null>(null);
   const doesUserHavePasskeys = ref(false);
   const modalMode = ref<"totp" | "passkey" | "grace">("totp");
   const isLoading = ref(false);
@@ -251,18 +235,35 @@
   const customDialogTitle = ref("");
   const dialogDetails = ref("");
   const dialogItems = ref<string[]>([]);
-  // verifyAuto calls that arrive together are confirmed with one code.
-  const confirmItems = computed(() => sessionsToResolve.value.length > 1
-    ? sessionsToResolve.value.map((session) => session.actionDescription ?? t('Action without a description'))
-    : dialogItems.value);
-  const dialogTitle = computed(() => confirmItems.value.length > 1
-    ? t('Confirm {count} actions', { count: confirmItems.value.length })
-    : customDialogTitle.value || t("Confirm it's you"));
+  // verifyAuto calls that arrive together are confirmed with one code. A single call lists only its own description.
+  const confirmItems = computed(() => {
+    const sessions = sessionsToResolve.value;
+    if (!sessions.length) {
+      return dialogItems.value;
+    }
+    if (sessions.length === 1) {
+      return sessions[0].actionDescription ? [sessions[0].actionDescription] : [];
+    }
+    return sessions.map((session) => session.actionDescription ?? t('Action without a description'));
+  });
+  const dialogTitle = computed(() => {
+    const count = confirmItems.value.length;
+    if (customDialogTitle.value) {
+      return customDialogTitle.value;
+    }
+    if (count > 1) {
+      return t('Confirm {count} actions', { count });
+    }
+    return count ? t('Confirm action') : t("Confirm it's you");
+  });
+  const approveLabel = computed(() => confirmItems.value.length > 1
+    ? t('Approve {count} actions', { count: confirmItems.value.length })
+    : t('Approve'));
   const codeError = ref("");
   const subtitles = computed(() => ({
-    totp: t('Please enter your authenticator code'),
+    totp: t('Enter the 6-digit code from your authenticator app'),
     passkey: t('Confirm with your passkey'),
-    grace: t('You verified recently, so no code is needed'),
+    grace: t('Review and approve'),
   }));
 
   function approveInGracePeriod() {
@@ -287,37 +288,9 @@
       result: passkeyData
     }
     customDialogTitle.value = "";
-    removeEventListenerForOTPInput();
     resolveFn?.(dataToReturn);
   }
 
-  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');
-    });
-    (inputs[0] as HTMLInputElement)?.focus();
-
-  }
-  
-  function handlePaste(event: ClipboardEvent) {
-    event.preventDefault();
-    const pastedText = event.clipboardData?.getData('text') || '';
-    if (pastedText.length === 6) {
-      confirmationResult.value?.fillInput(pastedText);
-    }
-  }
-  
-  async function handleOnComplete(value: string) {
-    await sendConfirmationResult(value);
-  }
-  
   async function sendConfirmationResult(value: string) {
     if (!resolveFn) throw new Error(t('Modal is not initialized properly'));
     let checked: { error: string } | { result: TwoFaConfirmationResult };
@@ -329,15 +302,13 @@
     }
     if ('error' in checked) {
       codeError.value = checked.error;
-      bindValue.value = '';
-      confirmationResult.value?.clearInput();
+      codeInput.value!.clear();
       return;
     }
 
     modelShow.value = false;
     codeError.value = "";
     customDialogTitle.value = "";
-    removeEventListenerForOTPInput();
     resolveFn(checked.result);
   }
   
@@ -355,51 +326,16 @@
   function onCancel() {
     modelShow.value = false;
     codeError.value = "";
-    bindValue.value = '';
-    confirmationResult.value?.clearInput();
-    removeEventListenerForOTPInput();
     rejectFn?.("Cancel");
     emit('rejected', new Error('cancelled'));
     emit('closed');
   }
 
-  watch(modalMode, async (newMode) => {
-    if (newMode === 'totp') {
-      await addEventListenerForOTPInput();
-    } else {
-      removeEventListenerForOTPInput();
-    }
+  // The page under the open modal does not scroll.
+  watch(modelShow, (open) => {
+    document.documentElement.style.overflow = open ? 'hidden' : '';
   });
 
-  watch(modelShow, async (open) => {
-  if (open) {
-    await nextTick();
-    const htmlRef = document.querySelector('html');
-    if (htmlRef) {
-      htmlRef.style.overflow = 'hidden';
-    }
-    
-    // Wait for conditional rendering to complete
-    if (modalMode.value === 'totp' && !isLoading.value) {
-      await nextTick();
-      setTimeout(() => {
-        tagOtpInputs();
-        window.addEventListener('paste', handlePaste);
-      }, 100);
-    } else {
-      window.addEventListener('paste', handlePaste);
-    }
-  } else {
-    window.removeEventListener('paste', handlePaste);
-    const htmlRef = document.querySelector('html');
-    if (htmlRef) {
-      htmlRef.style.overflow = '';
-    }
-    bindValue.value = '';
-    confirmationResult.value?.clearInput();
-  }
-});
-
   async function checkIfUserHasPasskeys() {
     isLoading.value = true;
     try {
@@ -420,47 +356,6 @@
     }
   }
 
-  function getOtpInputs() {
-    const root = otpRoot.value;
-    if (!root) return [];
-    return Array.from(root.querySelectorAll('input.otp-input'));
-  }
-
-  function focusFirstAvailableOtpInput() {
-    const inputs = getOtpInputs();
-    if (!inputs.length) {
-      // Retry after a short delay if inputs aren't ready yet
-      setTimeout(() => focusFirstAvailableOtpInput(), 50);
-      return;
-    }
-    const firstEmpty = inputs.find((i) => !(i as HTMLInputElement).value);
-    ((firstEmpty || inputs[0]) as HTMLInputElement).focus();
-  }
-
-  function handleGlobalFocusIn(event: FocusEvent) {
-    const inputs = getOtpInputs();
-    if (!inputs.length) return;
-    const target = event.target as Element | null;
-    if (!target) return;
-    if (!inputs.includes(target)) {
-      requestAnimationFrame(() => {
-        focusFirstAvailableOtpInput();
-      });
-    }
-  }
-
-  function handleFocusOut() {
-    requestAnimationFrame(() => {
-      const inputs = getOtpInputs();
-      if (!inputs.length) return;
-      const active = document.activeElement;
-      if (!active || !inputs.includes(active)) {
-        focusFirstAvailableOtpInput();
-      }
-    });
-  }
-
-
   async function checkIfSkipAllowModal(): Promise<{ skipAllowed: boolean; gracePeriod?: boolean }> {
     try {
       return await callAdminForthApi({
@@ -474,10 +369,3 @@
   }
 
 </script>
-  
-<style scoped>
-  :deep(.otp-input-container) {
-    display: flex;
-    gap: 0.75rem;
-  }
-</style>

package/custom/TwoFaCard.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="af-2fa-card relative flex flex-col w-full max-w-[460px] overflow-hidden rounded-xl border border-lightDialogBreakLine bg-lightDialogBackgorund shadow-2xl dark:border-darkDialogBreakLine dark:bg-darkDialogBackgorund">
+    <div class="af-2fa-header flex items-start gap-3.5 border-b border-lightDialogBreakLine py-5 pl-6 dark:border-darkDialogBreakLine" :class="closable ? 'pr-4' : 'pr-6'">
+      <div class="af-2fa-icon-wrap flex w-10 h-10 shrink-0 items-center justify-center rounded-[10px] bg-lightPrimary/10 text-lightPrimary dark:bg-darkPrimary/20 dark:text-darkPrimary">
+        <IconShieldCheckOutline class="af-2fa-shield-icon w-6 h-6" />
+      </div>
+      <div class="af-2fa-title-wrap flex-1 min-w-0">
+        <p class="af-2fa-title text-[17px] leading-6 font-semibold text-lightDialogHeaderText dark:text-darkDialogHeaderText">{{ title }}</p>
+        <p class="af-2fa-subtitle mt-0.5 text-[13px] leading-[18px] text-gray-500 dark:text-gray-400">{{ subtitle }}</p>
+      </div>
+      <button v-if="closable" type="button" :aria-label="$t('Cancel')" class="af-2fa-close-btn -mt-1 inline-flex w-9 h-9 shrink-0 items-center justify-center rounded-lg text-lightDialogCloseButton hover:bg-lightDialogCloseButtonHoverBackground hover:text-lightDialogCloseButtonHover dark:text-darkDialogCloseButton dark:hover:bg-darkDialogCloseButtonHoverBackground dark:hover:text-darkDialogCloseButtonHover" @click="emit('close')">
+        <IconCloseOutline class="w-5 h-5" />
+      </button>
+    </div>
+
+    <div class="af-2fa-body flex flex-col gap-5 px-6 pt-5 pb-6">
+      <slot />
+      <p v-if="error" role="alert" class="af-2fa-code-error -mt-2.5 flex items-center gap-1.5 text-[13px] text-red-600 dark:text-red-400">
+        <IconExclamationCircleOutline class="w-4 h-4 shrink-0" />
+        {{ error }}
+      </p>
+    </div>
+
+    <div v-if="$slots.footer" class="af-2fa-footer flex flex-wrap items-center gap-x-3 gap-y-2 border-t border-lightDialogBreakLine bg-gray-50 py-3 pl-6 pr-5 dark:border-darkDialogBreakLine dark:bg-gray-800/50">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { IconCloseOutline, IconExclamationCircleOutline, IconShieldCheckOutline } from '@iconify-prerendered/vue-flowbite';
+
+defineProps<{
+  title: string;
+  subtitle: string;
+  error?: string | null;
+  closable?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+}>();
+</script>

package/custom/TwoFaCodeInput.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="af-2fa-code">
+    <div :id="LABEL_ID">
+      <slot name="label">
+        <p class="mb-2 text-[13px] font-medium text-gray-700 dark:text-gray-300">{{ $t('Authenticator code') }}</p>
+      </slot>
+    </div>
+    <div ref="otpRoot" class="af-2fa-otp-root text-gray-300 dark:text-gray-500">
+      <v-otp-input
+        ref="otpInput"
+        :input-classes="inputClasses"
+        :num-inputs="CODE_LENGTH"
+        inputType="number"
+        inputmode="numeric"
+        :should-auto-focus="true"
+        :should-focus-order="true"
+        @on-complete="emit('complete', $event)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VOtpInput from 'vue3-otp-input';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+
+const props = defineProps<{
+  invalid?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'complete', code: string): void;
+}>();
+
+const CODE_LENGTH = 6;
+const LABEL_ID = 'mfaCode-label';
+const INPUT_CLASS = 'otp-input';
+
+const otpRoot = ref<HTMLElement | null>(null);
+const otpInput = ref<{ clearInput(): void; fillInput(value: string): void } | null>(null);
+
+const inputClasses = computed(() => [
+  `${INPUT_CLASS} w-12 h-14 p-0 rounded-[10px] border-[1.5px] bg-gray-50 text-center text-2xl font-medium leading-none tabular-nums text-gray-900 outline-none focus:ring-4 dark:bg-gray-800 dark:text-white`,
+  props.invalid
+    ? 'border-red-500 focus:border-red-500 focus:ring-red-500/25 dark:border-red-400 dark:focus:border-red-400'
+    : 'border-gray-300 focus:border-lightPrimary focus:ring-lightPrimary/25 dark:border-gray-600 dark:focus:border-darkPrimary dark:focus:ring-darkPrimary/25',
+].join(' '));
+
+// Focus callbacks are deferred with requestAnimationFrame and may run after unmount, when the root is gone.
+function getInputs(): HTMLInputElement[] {
+  return otpRoot.value ? Array.from(otpRoot.value.querySelectorAll<HTMLInputElement>(`input.${INPUT_CLASS}`)) : [];
+}
+
+function focusFirstEmptyInput() {
+  const inputs = getInputs();
+  (inputs.find((input) => !input.value) ?? inputs[0])?.focus();
+}
+
+// While the code is asked, focus stays in the code inputs, so typing and pasting always go into the code.
+function handleFocusIn(event: FocusEvent) {
+  if (!getInputs().includes(event.target as HTMLInputElement)) {
+    requestAnimationFrame(focusFirstEmptyInput);
+  }
+}
+
+function handleFocusOut() {
+  requestAnimationFrame(() => {
+    if (!getInputs().includes(document.activeElement as HTMLInputElement)) {
+      focusFirstEmptyInput();
+    }
+  });
+}
+
+// A paste into one of the inputs is handled by vue3-otp-input itself.
+function handlePaste(event: ClipboardEvent) {
+  event.preventDefault();
+  if ((event.target as HTMLElement).classList.contains(INPUT_CLASS)) {
+    return;
+  }
+  const pastedText = event.clipboardData?.getData('text') ?? '';
+  if (pastedText.length === CODE_LENGTH) {
+    otpInput.value!.fillInput(pastedText);
+  }
+}
+
+function tagInputs() {
+  getInputs().forEach((input, index) => {
+    input.setAttribute('name', 'mfaCode');
+    input.setAttribute('id', `mfaCode-${index + 1}`);
+    input.setAttribute('autocomplete', 'one-time-code');
+    input.setAttribute('aria-labelledby', LABEL_ID);
+  });
+}
+
+onMounted(() => {
+  tagInputs();
+  focusFirstEmptyInput();
+  document.addEventListener('focusin', handleFocusIn, true);
+  otpRoot.value!.addEventListener('focusout', handleFocusOut, true);
+  window.addEventListener('paste', handlePaste);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('focusin', handleFocusIn, true);
+  otpRoot.value!.removeEventListener('focusout', handleFocusOut, true);
+  window.removeEventListener('paste', handlePaste);
+});
+
+defineExpose({
+  clear: () => otpInput.value!.clearInput(),
+});
+</script>
+
+<style scoped>
+  /* vue3-otp-input renders its own container and ignores container classes, so it is styled here */
+  :deep(.otp-input-container) {
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+  }
+
+  /* a dash after the 3rd digit splits the code into two groups of three */
+  :deep(.otp-input-container > div:nth-child(3))::after {
+    content: '';
+    width: 0.75rem;
+    height: 2px;
+    margin-left: 0.5rem;
+    border-radius: 1px;
+    background: currentColor;
+  }
+</style>

package/custom/TwoFaHint.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="af-2fa-hint flex items-center gap-3.5 rounded-[10px] border border-lightDialogBreakLine bg-gray-50 px-4 py-3.5 dark:border-darkDialogBreakLine dark:bg-gray-800">
+    <span class="af-2fa-hint-icon flex w-11 h-11 shrink-0 items-center justify-center rounded-full bg-lightPrimary/10 text-lightPrimary dark:bg-darkPrimary/20 dark:text-darkPrimary">
+      <slot name="icon" />
+    </span>
+    <p class="af-2fa-hint-text text-[13px] leading-[19px] text-gray-500 dark:text-gray-400">
+      <slot />
+    </p>
+  </div>
+</template>

package/custom/TwoFaLinkButton.vue

@@ -0,0 +1,5 @@
+<template>
+  <button type="button" class="af-2fa-link-btn inline-flex h-11 items-center gap-1.5 whitespace-nowrap text-[13px] font-medium text-lightPrimary hover:underline dark:text-darkPrimary">
+    <slot />
+  </button>
+</template>