@adminforth/two-factors-auth 2.0.6 → 2.1.1

package/build.log

@@ -13,5 +13,5 @@ custom/package.json
 custom/tsconfig.json
 custom/utils.js
 
-sent 69,822 bytes  received 172 bytes  139,988.00 bytes/sec
-total size is 69,191  speedup is 0.99
+sent 71,446 bytes  received 172 bytes  143,236.00 bytes/sec
+total size is 70,806  speedup is 0.99

package/custom/TwoFAModal.vue

@@ -24,11 +24,11 @@
   
         <div class="mt-6 flex justify-center items-center gap-32 w-full">
           <p v-if="doesUserHavePasskeys===true" class="underline hover:no-underline text-lightPrimary whitespace-nowrap hover:cursor-pointer" @click="modalMode = 'passkey'" >use passkey</p>
-          <button
-            class="px-4 py-2 rounded border bg-gray-100 dark:bg-gray-600"
+          <Button
+            class="px-4 py-2 rounded border"
             @click="onCancel"
             :disabled="inProgress"
-          >{{ $t('Cancel') }}</button>
+          >{{ $t('Cancel') }}</Button>
         </div>
       </div>
 
@@ -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,11 +225,22 @@
     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();
@@ -215,8 +248,17 @@
     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) {

package/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);

package/custom/TwoFactorsPasskeysSettings.vue

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

package/dist/custom/TwoFAModal.vue

@@ -24,11 +24,11 @@
   
         <div class="mt-6 flex justify-center items-center gap-32 w-full">
           <p v-if="doesUserHavePasskeys===true" class="underline hover:no-underline text-lightPrimary whitespace-nowrap hover:cursor-pointer" @click="modalMode = 'passkey'" >use passkey</p>
-          <button
-            class="px-4 py-2 rounded border bg-gray-100 dark:bg-gray-600"
+          <Button
+            class="px-4 py-2 rounded border"
             @click="onCancel"
             :disabled="inProgress"
-          >{{ $t('Cancel') }}</button>
+          >{{ $t('Cancel') }}</Button>
         </div>
       </div>
 
@@ -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,11 +225,22 @@
     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();
@@ -215,8 +248,17 @@
     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) {

package/dist/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);

package/dist/custom/TwoFactorsPasskeysSettings.vue

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

package/dist/index.js

@@ -343,21 +343,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 = yield 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 = yield this.verifyPasskeyResponse(body.passkeyOptions, decoded.pk, decodedPasskeysCookies);
-                        console.log("Passkey response verification result:", res);
                         if (res.ok && res.passkeyConfirmed) {
                             verified = true;
                         }

package/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;
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/two-factors-auth",
-  "version": "2.0.6",
+  "version": "2.1.1",
   "description": "AdminForth plugin for two factors authentication",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",