@adminforth/two-factors-auth 4.8.0 → 4.8.2

package/dist/custom/TwoFAModal.vue

@@ -1,76 +1,46 @@
 <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 px-4"
-    v-show ="modelShow && (isLoading === false)">
-      <div :class="`af-two-factor-modal-${modalMode}`" class="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 pr-4 dark:border-darkDialogBreakLine">
-          <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">{{ dialogTitle }}</p>
-            <p class="af-2fa-subtitle mt-0.5 text-[13px] leading-[18px] text-gray-500 dark:text-gray-400">{{ subtitles[modalMode] }}</p>
-          </div>
-          <button 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="onCancel">
-            <IconCloseOutline class="w-5 h-5" />
-          </button>
+    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="min-w-0 text-[15px] leading-[22px] break-words text-gray-800 dark:text-gray-100">{{ item }}</span>
+            </li>
+          </ul>
         </div>
 
-        <div class="af-2fa-body flex flex-col gap-5 px-6 pt-5 pb-6">
-          <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>
-
-          <div v-if="modalMode === 'totp'">
-            <p id="mfaCode-label" class="mb-2 text-[13px] font-medium text-gray-700 dark:text-gray-300">{{ $t('Authenticator code') }}</p>
-            <div class="af-2fa-otp-root text-gray-300 dark:text-gray-500" ref="otpRoot">
-              <v-otp-input
-                ref="confirmationResult"
-                container-class="flex items-center gap-2"
-                :input-classes="otpInputClasses"
-                :num-inputs="6"
-                inputType="number"
-                inputmode="numeric"
-                :should-auto-focus="true"
-                :should-focus-order="true"
-                v-model:value="bindValue"
-                @on-complete="handleOnComplete"
-              />
-            </div>
-            <p v-if="codeError" 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" />
-              {{ codeError }}
-            </p>
-          </div>
-          <div v-else-if="modalMode === 'passkey'" class="af-2fa-passkey-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="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">
-              <IconFingerprintOutline class="w-6 h-6" />
-            </span>
-            <p class="text-[13px] leading-[19px] text-gray-500 dark:text-gray-400">{{ $t('Your browser will ask for Touch ID, Windows Hello or a security key.') }}</p>
-          </div>
-          <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>
-        </div>
-
-        <div class="af-2fa-footer flex items-center gap-3 border-t border-lightDialogBreakLine bg-gray-50 py-3 pl-6 pr-5 dark:border-darkDialogBreakLine dark:bg-gray-800/50">
-          <button v-if="modalMode === 'totp' && doesUserHavePasskeys" type="button" class="af-2fa-switch-to-passkey inline-flex h-11 items-center gap-1.5 text-[13px] font-medium text-lightPrimary hover:underline dark:text-darkPrimary" @click="modalMode = 'passkey'">
+        <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 #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') }}
-          </button>
-          <button v-else-if="modalMode === 'passkey'" type="button" class="af-2fa-switch-to-totp inline-flex h-11 items-center gap-1.5 text-[13px] font-medium text-lightPrimary hover:underline dark:text-darkPrimary" @click="modalMode = 'totp'">
+          </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') }}
-          </button>
-          <div class="af-2fa-buttons ms-auto flex gap-2">
+          </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" />
@@ -81,15 +51,14 @@
               {{ approveLabel }}
             </Button>
           </div>
-        </div>
-      </div>
+        </template>
+      </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';
@@ -97,13 +66,14 @@
   import {
     IconCheckCircleOutline,
     IconCheckOutline,
-    IconCloseOutline,
-    IconExclamationCircleOutline,
     IconFingerprintOutline,
     IconMobilePhoneOutline,
-    IconShieldCheckOutline,
   } from '@iconify-prerendered/vue-flowbite';
-  import { getPasskey } from './utils.js' 
+  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';
@@ -205,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;
@@ -260,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);
@@ -278,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);
@@ -313,12 +260,6 @@
     ? t('Approve {count} actions', { count: confirmItems.value.length })
     : t('Approve'));
   const codeError = ref("");
-  const otpInputClasses = computed(() => [
-    'otp-input 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',
-    codeError.value
-      ? '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(' '));
   const subtitles = computed(() => ({
     totp: t('Enter the 6-digit code from your authenticator app'),
     passkey: t('Confirm with your passkey'),
@@ -347,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 };
@@ -389,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);
   }
   
@@ -415,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 {
@@ -480,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({
@@ -534,15 +369,3 @@
   }
 
 </script>
-  
-<style scoped>
-  /* 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/dist/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 break-words 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/dist/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/dist/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/dist/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>