@adminforth/two-factors-auth 1.0.21 → 1.0.28

package/Changelog.md

@@ -1,3 +1,8 @@
+## [1.0.19] - 2024-12-02
+
+### Fixed
+
+- Fixed copy hash for 2fa
 
 ## [1.0.18] - 2024-09-13
 

package/custom/TwoFactorsConfirmation.vue

@@ -13,25 +13,22 @@
             <!-- Modal content -->
             <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black text-gray-500" >
                 <div class="p-8 w-full max-w-md max-h-full" >
-                    <div class="m-3" >Please enter your authenticator code </div>
+                    <div class="m-3">Please enter your authenticator code </div>
                     <div class="my-4 flex justify-center items-center">
                       <v-otp-input
                         ref="code"
-                        input-classes="h-10 w-10 border border-[2px] rounded-md flex otp-input dark:bg-gray-700 dark:text-gray-400 font-bold"
+                        input-classes="bg-gray-50 text-center flex justify-center otp-input  border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-10 h-10 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"
                         :conditionalClass="['one', 'two', 'three', 'four', 'five', 'six']"
                         inputType="number"
                         :num-inputs="6"
                         v-model:value="bindValue"
                         :should-auto-focus="true"
                         :should-focus-order="true"
-                        @on-change="handleOnChange"
                         @on-complete="handleOnComplete"
                       />
                     </div>
                     <!-- <Vue2FACodeInput v-model="code"/> -->
-                    <button @click="()=>{router.push('./login')}" class="flex items-center justify-center gap-1 w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
-                      Cancel
-                    </button>   
+                    <Button @click="() => {router.push('./login')}" class="w-full">Cancel</Button>
                 </div>
             </div>
         </div>
@@ -52,6 +49,7 @@
   import { callAdminForthApi, loadFile } from '@/utils';
   import { useRouter } from 'vue-router';
   import { showErrorTost } from '@/composables/useFrontendApi';
+  import { Button } from '@/afcl';
   import Vue2FACodeInput from '@loltech/vue3-2fa-code-input';
   import VOtpInput from "vue3-otp-input";
 
@@ -99,13 +97,12 @@
   
   onMounted(async () => {
     coreStore.getPublicConfig();
-    window.addEventListener('keydown', handleKeydown);
+    window.addEventListener('paste', handlePaste);
   });
 
   onBeforeUnmount(() => {
-    window.removeEventListener('keydown', handleKeydown);
+    window.removeEventListener('paste', handlePaste);
   });
-
   
   async function sendCode (value) {
     inProgress.value = true;
@@ -130,16 +127,14 @@
   //   }
   // })
 
-  function handleKeydown(event) {
-    if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
-      event.preventDefault();
-      navigator.clipboard.readText().then((pastedData) => {
-        if (pastedData) {
-          fillInput(pastedData);
-        }
-      }).catch(err => {
-        console.error('Failed to read clipboard contents: ', err);
-      });
+  function handlePaste(event) {
+    event.preventDefault();
+    if (event.target.classList.contains('otp-input')) {
+      return;
+    }
+    const pastedText = event.clipboardData?.getData('text') || '';
+    if (pastedText.length === 6) { 
+      code.value?.fillInput(pastedText);
     }
   }
   </script>

package/custom/TwoFactorsSetup.vue

@@ -22,15 +22,15 @@
                       <div class="w-full max-w-[46rem]">
                           <div class="relative">
                               <label for="npm-install-copy-text" class="sr-only">Label</label>
-                              <input id="npm-install-copy-text" type="text" class="col-span-10 bg-gray-50 border border-gray-300 text-gray-500 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full px-2.5 py-4 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500" :value="totp.newSecret" disabled readonly>
-                              <button data-copy-to-clipboard-target="npm-install-copy-text" class="absolute end-2.5 top-1/2 -translate-y-1/2 text-gray-900 dark:text-gray-400 hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700 rounded-lg py-2 px-2.5 inline-flex items-center justify-center bg-white border-gray-200 border">
-                                  <span id="default-message" class="inline-flex items-center">
+                              <input id="npm-install-copy-text" type="text" class="col-span-10 bg-gray-50 border border-gray-300 text-gray-500 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full px-2.5 py-4 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 pr-20" :value="totp.newSecret" readonly>
+                              <button @click="onCopyClick" data-copy-to-clipboard-target="npm-install-copy-text" class="absolute end-2.5 top-1/2 -translate-y-1/2 text-gray-900 dark:text-gray-400 hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700 rounded-lg py-2 px-2.5 inline-flex items-center justify-center bg-white border-gray-200 border">
+                                  <span v-if="isCopied === false" id="default-message" class="inline-flex items-center">
                                       <svg class="w-3 h-3 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
                                           <path d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z"/>
                                       </svg>
-                                      <span @click="onCopyClick" class="text-xs font-semibold">Copy</span>
+                                      <span class="text-xs font-semibold">Copy</span>
                                   </span>
-                                  <span id="success-message" class="hidden inline-flex items-center">
+                                  <span v-if="isCopied === true" id="success-message" class="inline-flex items-center">
                                       <svg class="w-3 h-3 text-lightPrimary dark:text-darkPrimary me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
                                           <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5"/>
                                       </svg>
@@ -43,7 +43,7 @@
                   <div class="my-4 flex justify-center items-center">
                     <v-otp-input
                       ref="code"
-                      input-classes="h-10 w-10 border border-[2px] rounded-md flex otp-input dark:bg-gray-700 dark:text-gray-400 font-bold" 
+                      input-classes="bg-gray-50 text-center flex justify-center otp-input  border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-10 h-10 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" 
                       :conditionalClass="['one', 'two', 'three', 'four', 'five', 'six']"
                       inputType="number"
                       :num-inputs="6"
@@ -52,21 +52,21 @@
                       @on-complete="handleOnComplete"
                     />
                   </div>
-                  
                   <!-- <Vue2FACodeInput v-model="code" autofocus /> -->
-                  <button @click="()=>{router.push('./login')}" class="flex items-center justify-center gap-1 w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Cancel</button>      
+                  <Button @click="()=>{router.push('./login')}" 
+                      class="w-full">Cancel
+                  </Button>      
               </div>
           </div>
       </div>
   </div>
-    
-    </div>
+</div>
      
 
 </template>
 
 
-<script setup>
+<script setup lang="ts">
 
 import { onMounted, onBeforeUnmount,  ref, watchEffect,computed,watch } from 'vue';
 import { useCoreStore } from '@/stores/core';
@@ -75,18 +75,16 @@ import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbi
 import { callAdminForthApi, loadFile } from '@/utils';
 import { useRouter } from 'vue-router';
 import { showErrorTost } from '@/composables/useFrontendApi';
+import { Button } from '@/afcl';
 import Vue2FACodeInput from '@loltech/vue3-2fa-code-input';
 import VOtpInput from "vue3-otp-input";
 
 const code = ref(null);
+const isCopied = ref<boolean>(false);
 const handleOnComplete = (value) => {
   sendCode(value);
 };
 
-const fillInput = (value) => {
-  code.value?.fillInput(value);
-};
-
 const router = useRouter();
 const inProgress = ref(false);
 
@@ -95,9 +93,6 @@ const user = useUserStore();
 
 // use this simple function to automatically focus on the next input
 
-
-
-
 const showPw = ref(false);
 
 const error = ref(null);
@@ -127,16 +122,11 @@ function parseJwt(token) {
 } 
 
 function onCopyClick(){
+  isCopied.value = true;
+  navigator.clipboard.writeText(totp.value.newSecret);
   window.adminforth.alert({message: 'Copied to clipboard', variant: 'success'})
 }
 
-// watch(code, async (nv)=>{
-//     if (nv){
-//       console.log(code.value);
-//       sendCode();
-//     }
-//   })
-
 onMounted(async () => {
   coreStore.getPublicConfig()
   const resp = await callAdminForthApi({
@@ -149,11 +139,12 @@ onMounted(async () => {
 
   totp.value=parseJwt(totpJWT.value);
 
-  window.addEventListener('keydown', handleKeydown);
+
+  window.addEventListener('paste', handlePaste);
 });
 
 onBeforeUnmount(() => {
-  window.removeEventListener('keydown', handleKeydown);
+  window.removeEventListener('paste', handlePaste);
 });
 
 async function sendCode (value) {
@@ -176,22 +167,19 @@ async function sendCode (value) {
 }
 
 
-function handleKeydown(event) {
-  if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
-    event.preventDefault();
-    navigator.clipboard.readText().then((pastedData) => {
-      if (pastedData) {
-        fillInput(pastedData);
-      }
-    }).catch(err => {
-      console.error('Failed to read clipboard contents: ', err);
-    });
+function handlePaste(event) {
+  event.preventDefault();
+  if (event.target.classList.contains('otp-input')) {
+    return;
+  }
+  const pastedText = event.clipboardData?.getData('text') || '';
+  if (pastedText.length === 6) { 
+    code.value?.fillInput(pastedText);
   }
 }
 </script>
 <style>
 .otp-input {
   margin: 0 5px;
-
 }
 </style>

package/dist/custom/TwoFactorsConfirmation.vue

@@ -13,25 +13,22 @@
             <!-- Modal content -->
             <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black text-gray-500" >
                 <div class="p-8 w-full max-w-md max-h-full" >
-                    <div class="m-3" >Please enter your authenticator code </div>
+                    <div class="m-3">Please enter your authenticator code </div>
                     <div class="my-4 flex justify-center items-center">
                       <v-otp-input
                         ref="code"
-                        input-classes="h-10 w-10 border border-[2px] rounded-md flex otp-input dark:bg-gray-700 dark:text-gray-400 font-bold"
+                        input-classes="bg-gray-50 text-center flex justify-center otp-input  border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-10 h-10 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"
                         :conditionalClass="['one', 'two', 'three', 'four', 'five', 'six']"
                         inputType="number"
                         :num-inputs="6"
                         v-model:value="bindValue"
                         :should-auto-focus="true"
                         :should-focus-order="true"
-                        @on-change="handleOnChange"
                         @on-complete="handleOnComplete"
                       />
                     </div>
                     <!-- <Vue2FACodeInput v-model="code"/> -->
-                    <button @click="()=>{router.push('./login')}" class="flex items-center justify-center gap-1 w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
-                      Cancel
-                    </button>   
+                    <Button @click="() => {router.push('./login')}" class="w-full">Cancel</Button>
                 </div>
             </div>
         </div>
@@ -52,6 +49,7 @@
   import { callAdminForthApi, loadFile } from '@/utils';
   import { useRouter } from 'vue-router';
   import { showErrorTost } from '@/composables/useFrontendApi';
+  import { Button } from '@/afcl';
   import Vue2FACodeInput from '@loltech/vue3-2fa-code-input';
   import VOtpInput from "vue3-otp-input";
 
@@ -99,13 +97,12 @@
   
   onMounted(async () => {
     coreStore.getPublicConfig();
-    window.addEventListener('keydown', handleKeydown);
+    window.addEventListener('paste', handlePaste);
   });
 
   onBeforeUnmount(() => {
-    window.removeEventListener('keydown', handleKeydown);
+    window.removeEventListener('paste', handlePaste);
   });
-
   
   async function sendCode (value) {
     inProgress.value = true;
@@ -130,16 +127,14 @@
   //   }
   // })
 
-  function handleKeydown(event) {
-    if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
-      event.preventDefault();
-      navigator.clipboard.readText().then((pastedData) => {
-        if (pastedData) {
-          fillInput(pastedData);
-        }
-      }).catch(err => {
-        console.error('Failed to read clipboard contents: ', err);
-      });
+  function handlePaste(event) {
+    event.preventDefault();
+    if (event.target.classList.contains('otp-input')) {
+      return;
+    }
+    const pastedText = event.clipboardData?.getData('text') || '';
+    if (pastedText.length === 6) { 
+      code.value?.fillInput(pastedText);
     }
   }
   </script>

package/dist/custom/TwoFactorsSetup.vue

@@ -22,15 +22,15 @@
                       <div class="w-full max-w-[46rem]">
                           <div class="relative">
                               <label for="npm-install-copy-text" class="sr-only">Label</label>
-                              <input id="npm-install-copy-text" type="text" class="col-span-10 bg-gray-50 border border-gray-300 text-gray-500 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full px-2.5 py-4 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500" :value="totp.newSecret" disabled readonly>
-                              <button data-copy-to-clipboard-target="npm-install-copy-text" class="absolute end-2.5 top-1/2 -translate-y-1/2 text-gray-900 dark:text-gray-400 hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700 rounded-lg py-2 px-2.5 inline-flex items-center justify-center bg-white border-gray-200 border">
-                                  <span id="default-message" class="inline-flex items-center">
+                              <input id="npm-install-copy-text" type="text" class="col-span-10 bg-gray-50 border border-gray-300 text-gray-500 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full px-2.5 py-4 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 pr-20" :value="totp.newSecret" readonly>
+                              <button @click="onCopyClick" data-copy-to-clipboard-target="npm-install-copy-text" class="absolute end-2.5 top-1/2 -translate-y-1/2 text-gray-900 dark:text-gray-400 hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700 rounded-lg py-2 px-2.5 inline-flex items-center justify-center bg-white border-gray-200 border">
+                                  <span v-if="isCopied === false" id="default-message" class="inline-flex items-center">
                                       <svg class="w-3 h-3 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
                                           <path d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z"/>
                                       </svg>
-                                      <span @click="onCopyClick" class="text-xs font-semibold">Copy</span>
+                                      <span class="text-xs font-semibold">Copy</span>
                                   </span>
-                                  <span id="success-message" class="hidden inline-flex items-center">
+                                  <span v-if="isCopied === true" id="success-message" class="inline-flex items-center">
                                       <svg class="w-3 h-3 text-lightPrimary dark:text-darkPrimary me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
                                           <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5"/>
                                       </svg>
@@ -43,7 +43,7 @@
                   <div class="my-4 flex justify-center items-center">
                     <v-otp-input
                       ref="code"
-                      input-classes="h-10 w-10 border border-[2px] rounded-md flex otp-input dark:bg-gray-700 dark:text-gray-400 font-bold" 
+                      input-classes="bg-gray-50 text-center flex justify-center otp-input  border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-10 h-10 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" 
                       :conditionalClass="['one', 'two', 'three', 'four', 'five', 'six']"
                       inputType="number"
                       :num-inputs="6"
@@ -52,21 +52,21 @@
                       @on-complete="handleOnComplete"
                     />
                   </div>
-                  
                   <!-- <Vue2FACodeInput v-model="code" autofocus /> -->
-                  <button @click="()=>{router.push('./login')}" class="flex items-center justify-center gap-1 w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Cancel</button>      
+                  <Button @click="()=>{router.push('./login')}" 
+                      class="w-full">Cancel
+                  </Button>      
               </div>
           </div>
       </div>
   </div>
-    
-    </div>
+</div>
      
 
 </template>
 
 
-<script setup>
+<script setup lang="ts">
 
 import { onMounted, onBeforeUnmount,  ref, watchEffect,computed,watch } from 'vue';
 import { useCoreStore } from '@/stores/core';
@@ -75,18 +75,16 @@ import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbi
 import { callAdminForthApi, loadFile } from '@/utils';
 import { useRouter } from 'vue-router';
 import { showErrorTost } from '@/composables/useFrontendApi';
+import { Button } from '@/afcl';
 import Vue2FACodeInput from '@loltech/vue3-2fa-code-input';
 import VOtpInput from "vue3-otp-input";
 
 const code = ref(null);
+const isCopied = ref<boolean>(false);
 const handleOnComplete = (value) => {
   sendCode(value);
 };
 
-const fillInput = (value) => {
-  code.value?.fillInput(value);
-};
-
 const router = useRouter();
 const inProgress = ref(false);
 
@@ -95,9 +93,6 @@ const user = useUserStore();
 
 // use this simple function to automatically focus on the next input
 
-
-
-
 const showPw = ref(false);
 
 const error = ref(null);
@@ -127,16 +122,11 @@ function parseJwt(token) {
 } 
 
 function onCopyClick(){
+  isCopied.value = true;
+  navigator.clipboard.writeText(totp.value.newSecret);
   window.adminforth.alert({message: 'Copied to clipboard', variant: 'success'})
 }
 
-// watch(code, async (nv)=>{
-//     if (nv){
-//       console.log(code.value);
-//       sendCode();
-//     }
-//   })
-
 onMounted(async () => {
   coreStore.getPublicConfig()
   const resp = await callAdminForthApi({
@@ -149,11 +139,12 @@ onMounted(async () => {
 
   totp.value=parseJwt(totpJWT.value);
 
-  window.addEventListener('keydown', handleKeydown);
+
+  window.addEventListener('paste', handlePaste);
 });
 
 onBeforeUnmount(() => {
-  window.removeEventListener('keydown', handleKeydown);
+  window.removeEventListener('paste', handlePaste);
 });
 
 async function sendCode (value) {
@@ -176,22 +167,19 @@ async function sendCode (value) {
 }
 
 
-function handleKeydown(event) {
-  if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
-    event.preventDefault();
-    navigator.clipboard.readText().then((pastedData) => {
-      if (pastedData) {
-        fillInput(pastedData);
-      }
-    }).catch(err => {
-      console.error('Failed to read clipboard contents: ', err);
-    });
+function handlePaste(event) {
+  event.preventDefault();
+  if (event.target.classList.contains('otp-input')) {
+    return;
+  }
+  const pastedText = event.clipboardData?.getData('text') || '';
+  if (pastedText.length === 6) { 
+    code.value?.fillInput(pastedText);
   }
 }
 </script>
 <style>
 .otp-input {
   margin: 0 5px;
-
 }
 </style>

package/package.json

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