@adminforth/two-factors-auth 1.7.0 → 1.8.1

package/build.log

@@ -11,5 +11,5 @@ custom/package-lock.json
 custom/package.json
 custom/tsconfig.json
 
-sent 31,283 bytes  received 134 bytes  62,834.00 bytes/sec
-total size is 30,790  speedup is 0.98
+sent 31,322 bytes  received 134 bytes  62,912.00 bytes/sec
+total size is 30,836  speedup is 0.98

package/custom/TwoFaModal.vue

@@ -34,7 +34,7 @@
   
   <script setup lang="ts">
   import VOtpInput from 'vue3-otp-input';
-  import { ref, nextTick, onMounted, onBeforeUnmount } from 'vue';
+  import { ref, nextTick, watch } from 'vue';
   import { useUserStore } from '@/stores/user';
   import { useI18n } from 'vue-i18n';
   declare global {
@@ -131,15 +131,19 @@
     emit('rejected', new Error('cancelled'));
     emit('closed');
   }
-  
-  onMounted(async () => {
+
+  watch(modelShow, async (open) => {
+  if (open) {
     await nextTick();
     tagOtpInputs();
-    window.addEventListener('paste', handlePaste as any);
-  });
-  onBeforeUnmount(() => {
-    window.removeEventListener('paste', handlePaste as any);
-  });
+    console.log('adding paste listener');
+    window.addEventListener('paste', handlePaste);
+  } else {
+    console.log('re paste listener');
+    window.removeEventListener('paste', handlePaste);
+  }
+});
+
   </script>
   
 <style scoped>

package/custom/TwoFactorsSetup.vue

@@ -35,7 +35,7 @@
                     <v-otp-input
                       ref="code"
                       container-class="grid grid-cols-6 gap-3 w-full"
-                      input-classes="otp-input bg-gray-50 text-center border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block h-[46px] w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                      input-classes="otp-input bg-gray-50 text-center border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block h-11 w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                       :num-inputs="6"
                       inputType="number" 
                       inputmode="numeric"

package/dist/custom/TwoFaModal.vue

@@ -34,7 +34,7 @@
   
   <script setup lang="ts">
   import VOtpInput from 'vue3-otp-input';
-  import { ref, nextTick, onMounted, onBeforeUnmount } from 'vue';
+  import { ref, nextTick, watch } from 'vue';
   import { useUserStore } from '@/stores/user';
   import { useI18n } from 'vue-i18n';
   declare global {
@@ -131,15 +131,19 @@
     emit('rejected', new Error('cancelled'));
     emit('closed');
   }
-  
-  onMounted(async () => {
+
+  watch(modelShow, async (open) => {
+  if (open) {
     await nextTick();
     tagOtpInputs();
-    window.addEventListener('paste', handlePaste as any);
-  });
-  onBeforeUnmount(() => {
-    window.removeEventListener('paste', handlePaste as any);
-  });
+    console.log('adding paste listener');
+    window.addEventListener('paste', handlePaste);
+  } else {
+    console.log('re paste listener');
+    window.removeEventListener('paste', handlePaste);
+  }
+});
+
   </script>
   
 <style scoped>

package/dist/custom/TwoFactorsSetup.vue

@@ -35,7 +35,7 @@
                     <v-otp-input
                       ref="code"
                       container-class="grid grid-cols-6 gap-3 w-full"
-                      input-classes="otp-input bg-gray-50 text-center border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block h-[46px] w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                      input-classes="otp-input bg-gray-50 text-center border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block h-11 w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                       :num-inputs="6"
                       inputType="number" 
                       inputmode="numeric"

package/dist/index.js

@@ -83,6 +83,9 @@ export default class TwoFactorsAuthPlugin extends AdminForthPlugin {
             const userName = adminUser.dbUser[adminforth.config.auth.usernameField];
             const brandName = adminforth.config.customization.brandName;
             const brandNameSlug = adminforth.config.customization.brandNameSlug;
+            const issuerName = (this.options.customBrendPrefix && this.options.customBrendPrefix.trim())
+                ? this.options.customBrendPrefix.trim()
+                : brandName;
             const authResource = adminforth.config.resources.find((res) => res.resourceId === adminforth.config.auth.usersResourceId);
             const authPk = authResource.columns.find((col) => col.primaryKey).name;
             const userPk = adminUser.dbUser[authPk];
@@ -95,11 +98,11 @@ export default class TwoFactorsAuthPlugin extends AdminForthPlugin {
             }
             const userCanSkipSetup = this.options.usersFilterToAllowSkipSetup ? this.options.usersFilterToAllowSkipSetup(adminUser) : false;
             if (!secret) {
-                const tempSecret = twofactor.generateSecret({ name: brandName, account: userName });
+                const tempSecret = twofactor.generateSecret({ name: issuerName, account: userName });
                 newSecret = tempSecret.secret;
             }
             else {
-                const value = this.adminforth.auth.issueJWT({ userName, issuer: brandName, pk: userPk, userCanSkipSetup, rememberMeDays }, 'tempTotp', '2h');
+                const value = this.adminforth.auth.issueJWT({ userName, issuer: issuerName, pk: userPk, userCanSkipSetup, rememberMeDays }, 'tempTotp', '2h');
                 response.setHeader('Set-Cookie', `adminforth_${brandNameSlug}_totpTemporaryJWT=${value}; Path=${this.adminforth.config.baseUrl || '/'}; HttpOnly; SameSite=Strict; max-age=3600; `);
                 return {
                     body: {
@@ -109,7 +112,7 @@ export default class TwoFactorsAuthPlugin extends AdminForthPlugin {
                     ok: true
                 };
             }
-            const totpTemporaryJWT = this.adminforth.auth.issueJWT({ userName, newSecret, issuer: brandName, pk: userPk, userCanSkipSetup, rememberMeDays }, 'tempTotp', '2h');
+            const totpTemporaryJWT = this.adminforth.auth.issueJWT({ userName, newSecret, issuer: issuerName, pk: userPk, userCanSkipSetup, rememberMeDays }, 'tempTotp', '2h');
             response.setHeader('Set-Cookie', `adminforth_${brandNameSlug}_totpTemporaryJWT=${totpTemporaryJWT}; Path=${this.adminforth.config.baseUrl || '/'}; HttpOnly; SameSite=Strict; Expires=${new Date(Date.now() + '1h').toUTCString()} `);
             return {
                 body: {

package/index.ts

@@ -93,6 +93,9 @@ export default class TwoFactorsAuthPlugin extends AdminForthPlugin {
         const userName = adminUser.dbUser[adminforth.config.auth.usernameField]
         const brandName = adminforth.config.customization.brandName;
         const brandNameSlug = adminforth.config.customization.brandNameSlug;
+        const issuerName = (this.options.customBrendPrefix && this.options.customBrendPrefix.trim())
+        ? this.options.customBrendPrefix.trim()
+        : brandName;
         const authResource = adminforth.config.resources.find((res)=>res.resourceId === adminforth.config.auth.usersResourceId )
         const authPk = authResource.columns.find((col)=>col.primaryKey).name
         const userPk = adminUser.dbUser[authPk]
@@ -108,10 +111,10 @@ export default class TwoFactorsAuthPlugin extends AdminForthPlugin {
         const userCanSkipSetup = this.options.usersFilterToAllowSkipSetup ? this.options.usersFilterToAllowSkipSetup(adminUser) : false;
 
         if (!secret){
-          const tempSecret = twofactor.generateSecret({name: brandName,account: userName})
+          const tempSecret = twofactor.generateSecret({name: issuerName,account: userName})
           newSecret = tempSecret.secret
         } else {
-          const value = this.adminforth.auth.issueJWT({userName, issuer:brandName, pk:userPk, userCanSkipSetup, rememberMeDays }, 'tempTotp', '2h');
+          const value = this.adminforth.auth.issueJWT({userName, issuer:issuerName, pk:userPk, userCanSkipSetup, rememberMeDays }, 'tempTotp', '2h');
           response.setHeader('Set-Cookie', `adminforth_${brandNameSlug}_totpTemporaryJWT=${value}; Path=${this.adminforth.config.baseUrl || '/'}; HttpOnly; SameSite=Strict; max-age=3600; `);
 
           return {
@@ -122,7 +125,7 @@ export default class TwoFactorsAuthPlugin extends AdminForthPlugin {
             ok: true
           }
         }
-        const totpTemporaryJWT = this.adminforth.auth.issueJWT({userName, newSecret, issuer:brandName, pk:userPk, userCanSkipSetup, rememberMeDays }, 'tempTotp', '2h');
+        const totpTemporaryJWT = this.adminforth.auth.issueJWT({userName, newSecret, issuer:issuerName, pk:userPk, userCanSkipSetup, rememberMeDays }, 'tempTotp', '2h');
         response.setHeader('Set-Cookie', `adminforth_${brandNameSlug}_totpTemporaryJWT=${totpTemporaryJWT}; Path=${this.adminforth.config.baseUrl || '/'}; HttpOnly; SameSite=Strict; Expires=${new Date(Date.now() + '1h').toUTCString() } `);
 
         return {

package/package.json

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

package/types.ts

@@ -16,6 +16,8 @@ export type PluginOptions = {
      */
     timeStepWindow?: number;
 
+    customBrendPrefix?: string;
+
     /**
      * Optional function to filter users to apply 2FA.
      * Should return true if 2FA should be applied to the user and false if AdminForth should not challenge the user with 2FA.