fix: add focus on the otp input 2fa modal. Remoove temporary logs

Author: yaroslav8765

custom/TwoFAModal.vue

@@ -97,6 +97,25 @@
     (e: 'closed'): void
   }>();
 
+  function removeListeners() {
+    window.removeEventListener('paste', handlePaste);
+    document.removeEventListener('focusin', handleGlobalFocusIn, true);
+    const rootEl = otpRoot.value;
+    rootEl && rootEl.removeEventListener('focusout', handleFocusOut, true);
+  }
+
+  async function addListeners() {
+    document.addEventListener('focusin', handleGlobalFocusIn, true);
+    
+    // Wait for DOM to be ready and OTP inputs to be rendered
+    await nextTick();
+    await new Promise(resolve => setTimeout(resolve, 100)); // Small delay for v-otp-input to render
+    
+    focusFirstAvailableOtpInput();
+    const rootEl = otpRoot.value;
+    rootEl && rootEl.addEventListener('focusout', handleFocusOut, true);
+  }
+
   const modelShow = ref(false);
   let resolveFn: ((confirmationResult: string) => void) | null = null;
   let verifyingCallback: ((confirmationResult: string) => boolean) | null = null;
@@ -113,6 +132,7 @@
         customDialogTitle.value = title;
       }
       modelShow.value = true;
+      await addListeners();
       resolveFn = resolve;
       rejectFn = reject;
       verifyFn = verifyingCallback ?? null;
@@ -144,6 +164,7 @@
       result: passkeyData
     }
     customDialogTitle.value = "";
+    removeListeners();
     resolveFn(dataToReturn);
   }
 
@@ -195,6 +216,7 @@
       result: value
     }
     customDialogTitle.value = "";
+    removeListeners();
     resolveFn(dataToReturn);
   }
   
@@ -203,20 +225,40 @@
     modelShow.value = false;
     bindValue.value = '';
     confirmationResult.value?.clearInput();
+    removeListeners();
     rejectFn("Cancel");
     emit('rejected', new Error('cancelled'));
     emit('closed');
   }
 
+  watch(modalMode, async (newMode) => {
+    if (newMode === 'totp' && modelShow.value && !isLoading.value) {
+      await nextTick();
+      setTimeout(() => {
+        tagOtpInputs();
+        focusFirstAvailableOtpInput();
+      }, 100);
+    }
+  });
+
   watch(modelShow, async (open) => {
   if (open) {
     await nextTick();
     const htmlRef = document.querySelector('html');
     if (htmlRef) {
       htmlRef.style.overflow = 'hidden';
     }
-    tagOtpInputs();
-    window.addEventListener('paste', handlePaste);
+    
+    // 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');
@@ -248,7 +290,47 @@
     });
   }
 
-  </script>
+  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) {
+    const inputs = getOtpInputs();
+    if (!inputs.length) return;
+    const target = event.target;
+    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();
+      }
+    });
+  }
+
+</script>
 
 <style scoped>
   :deep(.otp-input-container) {

custom/TwoFactorsConfirmation.vue

@@ -150,11 +150,8 @@
       await nextTick();
       await isCMAAvailable();
       tagOtpInputs();
-      console.log("Checking if device supports passkeys:", isPasskeysSupported.value);
       if (isPasskeysSupported.value === true) {
-        console.log("Device supports passkeys, checking if user has passkeys...");
         await checkIfUserHasPasskeys();
-        console.log("Does user have passkeys:", doesUserHavePasskeys.value);
       }
       document.addEventListener('focusin', handleGlobalFocusIn, true);
       focusFirstAvailableOtpInput();
@@ -193,8 +190,6 @@
   async function sendCode (value: any, factorMode: 'TOTP' | 'passkey', passkeyOptions: any) {
     inProgress.value = true;
     const usePasskey = factorMode === 'passkey';
-    console.log("Sending code with factorMode:", factorMode);
-    console.log("Passkey options:", passkeyOptions);
     const resp = await callAdminForthApi({
       method: 'POST',
       path: '/plugin/twofa/confirmLogin',
@@ -205,15 +200,12 @@
         secret: null,
       }
     })
-    console.log("Response from confirmLogin:", resp);
     if ( resp.allowedLogin ) {
       if ( route.meta.isPasskeysEnabled && !doesUserHavePasskeys.value ) {
         handlePasskeyAlert(route.meta.suggestionPeriod, router);
       }
-      console.log("Login confirmed, finishing login...");
       await user.finishLogin();
     } else {
-      console.log("Login not allowed, showing error:", resp.error);
       if (usePasskey) {
         showErrorTost(t(resp.error));
         codeError.value = resp.error || t('Passkey authentication failed');
@@ -277,18 +269,15 @@
 
   async function createSignInRequest() {
     let response;
-    console.log("Creating sign-in request for passkey...");
     try {
       response = await callAdminForthApi({
         path: `/plugin/passkeys/signInRequest`,
         method: 'POST',
       });
     } catch (error) {
-      console.log("Error creating sign-in request:", error);
       console.error('Error creating sign-in request:', error);
       return;
     }
-    console.log("Sign-in request response:", response);
     if (response.ok === true) {
       return { _options: response.data, challengeId: response.challengeId };
     } else {
@@ -298,14 +287,12 @@
   }
 
   async function authenticate(options) {
-    console.log("Authenticating with options:", options);
     try {
       const abortController = new AbortController();
       const credential = await navigator.credentials.get({
         publicKey: options,
         signal: abortController.signal,
       });
-      console.log("Credential obtained:", credential);
       return credential;
     } catch (error) {
       console.error('Error during authentication:', error);

custom/TwoFactorsPasskeysSettings.vue

@@ -144,6 +144,7 @@
             class="w-96" 
             :click-to-close-outside="false"   
             :buttons="[]"
+            :closable="false"
         >
             <div class="flex flex-col">
                 <button

index.ts

@@ -383,21 +383,15 @@ export default class TwoFactorsAuthPlugin extends AdminForthPlugin {
           let verified = null;
           if (body.usePasskey && this.options.passkeys) {
             // passkeys are enabled and user wants to use them
-            console.log("Using passkey for 2FA verification");
             const passkeysCookies = this.adminforth.auth.getCustomCookie({cookies: cookies, name: `passkeyLoginTemporaryJWT`});
-            console.log("Passkey cookies:", passkeysCookies);
             if (!passkeysCookies) {
               return { error: 'Passkey token is required' };
             }
-            console.log("Verifying passkey cookies");
             const decodedPasskeysCookies = await this.adminforth.auth.verify(passkeysCookies, 'tempLoginPasskeyChallenge', false);
             if (!decodedPasskeysCookies) {
               return { error: 'Invalid passkey' };
             }
-            console.log("Passkey cookies decoded:", decodedPasskeysCookies);
-            console.log("Verifying passkey response");
             const res = await this.verifyPasskeyResponse(body.passkeyOptions, decoded.pk, decodedPasskeysCookies);
-            console.log("Passkey response verification result:", res);
             if (res.ok && res.passkeyConfirmed) {
               verified = true;
             }