@adminforth/two-factors-auth 2.3.0 → 2.5.0

package/build.log

@@ -15,5 +15,5 @@ custom/package.json
 custom/tsconfig.json
 custom/utils.js
 
-sent 271,266 bytes  received 210 bytes  542,952.00 bytes/sec
-total size is 270,439  speedup is 1.00
+sent 271,319 bytes  received 210 bytes  543,058.00 bytes/sec
+total size is 270,492  speedup is 1.00

package/custom/TwoFactorsConfirmation.vue

@@ -13,7 +13,7 @@
         <!-- 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="p-8 w-full max-w-md max-h-full custom-auth-wrapper" >
-              <div v-if="confirmationMode === 'code'">
+              <div v-if="confirmationMode === 'code'" class="af-totp-confirmation">
                 <div id="mfaCode-label" class="mx-4">{{$t('Please enter your authenticator code')}} </div>
                 <div class="mt-4 w-full flex flex-col gap-4 justify-center" ref="otpRoot">
                   <v-otp-input
@@ -40,7 +40,7 @@
                   </div>
                 </div>
               </div>
-              <div v-else class="flex flex-col items-center justify-center py-4 gap-6">
+              <div v-else class="af-passkey-confirmation flex flex-col items-center justify-center py-4 gap-6">
                 <IconShieldOutline class="w-16 h-16 text-lightPrimary dark:text-darkPrimary"/>
                 <p class="text-4xl font-semibold mb-4">Passkey</p>
                 <p class="mb-2 max-w-[300px]">When you are ready, authenticate using the button below</p>

package/dist/custom/TwoFactorsConfirmation.vue

@@ -13,7 +13,7 @@
         <!-- 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="p-8 w-full max-w-md max-h-full custom-auth-wrapper" >
-              <div v-if="confirmationMode === 'code'">
+              <div v-if="confirmationMode === 'code'" class="af-totp-confirmation">
                 <div id="mfaCode-label" class="mx-4">{{$t('Please enter your authenticator code')}} </div>
                 <div class="mt-4 w-full flex flex-col gap-4 justify-center" ref="otpRoot">
                   <v-otp-input
@@ -40,7 +40,7 @@
                   </div>
                 </div>
               </div>
-              <div v-else class="flex flex-col items-center justify-center py-4 gap-6">
+              <div v-else class="af-passkey-confirmation flex flex-col items-center justify-center py-4 gap-6">
                 <IconShieldOutline class="w-16 h-16 text-lightPrimary dark:text-darkPrimary"/>
                 <p class="text-4xl font-semibold mb-4">Passkey</p>
                 <p class="mb-2 max-w-[300px]">When you are ready, authenticate using the button below</p>

package/dist/index.js

@@ -166,9 +166,9 @@ export default class TwoFactorsAuthPlugin extends AdminForthPlugin {
             if (this.options.passkeys.allowLoginWithPasskeys !== false) {
                 this.options.passkeys.allowLoginWithPasskeys = true;
                 if (!this.adminforth.config.customization.loginPageInjections) {
-                    this.adminforth.config.customization.loginPageInjections = { underInputs: [], panelHeader: [] };
+                    this.adminforth.config.customization.loginPageInjections = { underLoginButton: [], panelHeader: [], underInputs: [] };
                 }
-                this.adminforth.config.customization.loginPageInjections.underInputs.push({ file: this.componentPath('LoginWithPasskeyButton.vue'), meta: {} });
+                this.adminforth.config.customization.loginPageInjections.underLoginButton.push({ file: this.componentPath('LoginWithPasskeyButton.vue'), meta: { afOrder: this.options.passkeys.continueWithButtonsOrder || 0 } });
             }
         }
     }

package/index.ts

@@ -178,9 +178,9 @@ export default class TwoFactorsAuthPlugin extends AdminForthPlugin {
       if ( this.options.passkeys.allowLoginWithPasskeys !== false ) {
         this.options.passkeys.allowLoginWithPasskeys = true;
         if ( !this.adminforth.config.customization.loginPageInjections ) {
-          this.adminforth.config.customization.loginPageInjections = { underInputs: [],  panelHeader: [] };
-        }
-        this.adminforth.config.customization.loginPageInjections.underInputs.push({ file: this.componentPath('LoginWithPasskeyButton.vue'), meta: {} });
+          this.adminforth.config.customization.loginPageInjections = { underLoginButton: [],  panelHeader: [], underInputs: [] };
+        } 
+      (this.adminforth.config.customization.loginPageInjections.underLoginButton as Array<any>).push({ file: this.componentPath('LoginWithPasskeyButton.vue'), meta: { afOrder: this.options.passkeys.continueWithButtonsOrder || 0 } });
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/two-factors-auth",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "description": "AdminForth plugin for two factors authentication",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -26,7 +26,7 @@
   "license": "ISC",
   "dependencies": {
     "@simplewebauthn/server": "^13.2.1",
-    "adminforth": "^2.9.2",
+    "adminforth": "^2.4.0-next.221",
     "node-2fa": "^2.0.3"
   },
   "devDependencies": {

package/types.ts

@@ -36,6 +36,11 @@ export type PluginOptions = {
          * Remember user for number of days after login with Passkey, so that user won't be challenged with 2FA on every login.
          */
         rememberDaysAfterPasskeyLogin?: number;
+
+        /**
+         * Order of "Continue with passkey" button in under login button injection
+         */
+        continueWithButtonsOrder?: number,
         /**
          *  Period between showing alert suggesting to set up Passkeys if not set up yet.
          */