@adminforth/two-factors-auth 2.5.2 → 2.5.4

package/build.log

@@ -15,5 +15,5 @@ custom/package.json
 custom/tsconfig.json
 custom/utils.js
 
-sent 271,370 bytes  received 210 bytes  543,160.00 bytes/sec
-total size is 270,543  speedup is 1.00
+sent 271,356 bytes  received 210 bytes  543,132.00 bytes/sec
+total size is 270,529  speedup is 1.00

package/custom/TwoFAModal.vue

@@ -76,6 +76,7 @@
   import { Link, Button } from '@/afcl';
   import { IconShieldOutline } from '@iconify-prerendered/vue-flowbite';
   import { getPasskey } from './utils.js' 
+  import adminforth from '@/adminforth';
 
 
   declare global {
@@ -154,8 +155,22 @@
     let passkeyData;
     try {
       passkeyData = await getPasskey();
-    } catch (e) {
-      adminforth.alert({message: 'Failed to get passkey', variant: 'danger'});
+    } catch (error) {
+      const name = (error && (error.name || error.constructor?.name)) || '';
+      const message = (error && error.message) || '';
+      if (name === 'AbortError') {
+        // Aborted intentionally; no user-facing error needed
+        return null;
+      } else if (name === 'InvalidStateError' || name === 'OperationError' || /pending/i.test(message)) {
+        adminforth.alert({ message: t('Another security prompt is already open. Please try again.'), variant: 'warning' });
+        return null;
+      } else if (name === 'NotAllowedError') {
+        adminforth.alert({ message: `The operation either timed out or was not allowed`, variant: 'warning' });
+        return null;
+      } else {
+        adminforth.alert({message: `Error during authentication: ${error}`, variant: 'warning'});
+        return null;
+      }
       onCancel();
     }
     modelShow.value = false;

package/custom/TwoFactorsConfirmation.vue

@@ -11,7 +11,7 @@
   <div v-if="isLoading===false" id="authentication-modal" tabindex="-1" class="af-two-factors-confirmation overflow-y-auto overflow-x-hidden z-50 min-w-[00px] justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
     <div class="relative p-4 w-full max-w-md max-h-full">
         <!-- Modal content -->
-        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black text-gray-500" :class="codeError ? 'rounded-b-none' : ''">
+        <div class="af-login-popup relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black text-gray-500" :class="codeError ? 'rounded-b-none' : ''">
             <div class="p-8 w-full max-w-md max-h-full custom-auth-wrapper" >
               <div v-if="confirmationMode === 'code'" class="af-totp-confirmation">
                 <div id="mfaCode-label" class="mx-4">{{$t('Please enter your authenticator code')}} </div>
@@ -178,11 +178,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();
@@ -225,8 +222,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',
@@ -237,15 +232,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');
@@ -324,18 +316,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 {
@@ -347,7 +336,6 @@
   let controller = new AbortController();
 
   async function authenticate(options) {
-    console.log("Authenticating with options:", options);
     controller.abort();
     try {
       // Guard: prevent concurrent navigator.credentials.get calls
@@ -365,7 +353,6 @@
         signal: abortController.signal,
         // mediation can be set if using conditional UI, omitted here intentionally
       });
-      console.log("Credential obtained:", credential);
       return credential;
     } catch (error) {
       console.error('Error during authentication:', error);

package/custom/TwoFactorsSetup.vue

@@ -11,7 +11,7 @@
     <div id="authentication-modal" tabindex="-1" class="af-two-factors-setup overflow-y-auto overflow-x-hidden z-50 min-w-[00px] justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
       <div class="relative p-4 w-full max-w-md max-h-full">
           <!-- Modal content -->
-          <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black text-gray-500" >
+          <div class="af-login-popup relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black text-gray-500" >
               <div class="p-10 w-full max-w-md max-h-full custom-auth-wrapper" >
                   <div>{{$t('Scan this QR code with your authenticator app or open by')}} <a class="text-blue-600" :href="totpUri">{{$t('click')}}</a></div>
                   <div class="flex justify-center m-3" >

package/dist/custom/TwoFAModal.vue

@@ -76,6 +76,7 @@
   import { Link, Button } from '@/afcl';
   import { IconShieldOutline } from '@iconify-prerendered/vue-flowbite';
   import { getPasskey } from './utils.js' 
+  import adminforth from '@/adminforth';
 
 
   declare global {
@@ -154,8 +155,22 @@
     let passkeyData;
     try {
       passkeyData = await getPasskey();
-    } catch (e) {
-      adminforth.alert({message: 'Failed to get passkey', variant: 'danger'});
+    } catch (error) {
+      const name = (error && (error.name || error.constructor?.name)) || '';
+      const message = (error && error.message) || '';
+      if (name === 'AbortError') {
+        // Aborted intentionally; no user-facing error needed
+        return null;
+      } else if (name === 'InvalidStateError' || name === 'OperationError' || /pending/i.test(message)) {
+        adminforth.alert({ message: t('Another security prompt is already open. Please try again.'), variant: 'warning' });
+        return null;
+      } else if (name === 'NotAllowedError') {
+        adminforth.alert({ message: `The operation either timed out or was not allowed`, variant: 'warning' });
+        return null;
+      } else {
+        adminforth.alert({message: `Error during authentication: ${error}`, variant: 'warning'});
+        return null;
+      }
       onCancel();
     }
     modelShow.value = false;

package/dist/custom/TwoFactorsConfirmation.vue

@@ -11,7 +11,7 @@
   <div v-if="isLoading===false" id="authentication-modal" tabindex="-1" class="af-two-factors-confirmation overflow-y-auto overflow-x-hidden z-50 min-w-[00px] justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
     <div class="relative p-4 w-full max-w-md max-h-full">
         <!-- Modal content -->
-        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black text-gray-500" :class="codeError ? 'rounded-b-none' : ''">
+        <div class="af-login-popup relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black text-gray-500" :class="codeError ? 'rounded-b-none' : ''">
             <div class="p-8 w-full max-w-md max-h-full custom-auth-wrapper" >
               <div v-if="confirmationMode === 'code'" class="af-totp-confirmation">
                 <div id="mfaCode-label" class="mx-4">{{$t('Please enter your authenticator code')}} </div>
@@ -178,11 +178,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();
@@ -225,8 +222,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',
@@ -237,15 +232,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');
@@ -324,18 +316,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 {
@@ -347,7 +336,6 @@
   let controller = new AbortController();
 
   async function authenticate(options) {
-    console.log("Authenticating with options:", options);
     controller.abort();
     try {
       // Guard: prevent concurrent navigator.credentials.get calls
@@ -365,7 +353,6 @@
         signal: abortController.signal,
         // mediation can be set if using conditional UI, omitted here intentionally
       });
-      console.log("Credential obtained:", credential);
       return credential;
     } catch (error) {
       console.error('Error during authentication:', error);

package/dist/custom/TwoFactorsSetup.vue

@@ -11,7 +11,7 @@
     <div id="authentication-modal" tabindex="-1" class="af-two-factors-setup overflow-y-auto overflow-x-hidden z-50 min-w-[00px] justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
       <div class="relative p-4 w-full max-w-md max-h-full">
           <!-- Modal content -->
-          <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black text-gray-500" >
+          <div class="af-login-popup relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black text-gray-500" >
               <div class="p-10 w-full max-w-md max-h-full custom-auth-wrapper" >
                   <div>{{$t('Scan this QR code with your authenticator app or open by')}} <a class="text-blue-600" :href="totpUri">{{$t('click')}}</a></div>
                   <div class="flex justify-center m-3" >

package/package.json

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