npm - @adminforth/two-factors-auth - Versions diffs - 1.0.22 → 1.0.28 - Mend

@adminforth/two-factors-auth 1.0.22 → 1.0.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/Changelog.md +5 -0
package/custom/TwoFactorsConfirmation.vue +11 -15
package/custom/TwoFactorsSetup.vue +21 -35
package/dist/custom/TwoFactorsConfirmation.vue +11 -15
package/dist/custom/TwoFactorsSetup.vue +21 -35
package/package.json +1 -1
package/dist/custom/TwoFactorsOtp.vue +0 -0

package/Changelog.md CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -17,14 +17,13 @@
                     <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>
@@ -98,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;
@@ -129,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 CHANGED Viewed

@@ -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,7 +52,6 @@
                       @on-complete="handleOnComplete"
                     />
                   </div>
                   <!-- <Vue2FACodeInput v-model="code" autofocus /> -->
                   <Button @click="()=>{router.push('./login')}"
                       class="w-full">Cancel
@@ -67,7 +66,7 @@
 </template>
-<script setup>
+<script setup lang="ts">
 import { onMounted, onBeforeUnmount,  ref, watchEffect,computed,watch } from 'vue';
 import { useCoreStore } from '@/stores/core';
@@ -81,14 +80,11 @@ 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);
@@ -97,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);
@@ -129,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({
@@ -151,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) {
@@ -178,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 CHANGED Viewed

@@ -17,14 +17,13 @@
                     <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>
@@ -98,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;
@@ -129,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 CHANGED Viewed

@@ -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,7 +52,6 @@
                       @on-complete="handleOnComplete"
                     />
                   </div>
                   <!-- <Vue2FACodeInput v-model="code" autofocus /> -->
                   <Button @click="()=>{router.push('./login')}"
                       class="w-full">Cancel
@@ -67,7 +66,7 @@
 </template>
-<script setup>
+<script setup lang="ts">
 import { onMounted, onBeforeUnmount,  ref, watchEffect,computed,watch } from 'vue';
 import { useCoreStore } from '@/stores/core';
@@ -81,14 +80,11 @@ 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);
@@ -97,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);
@@ -129,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({
@@ -151,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) {
@@ -178,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 CHANGED Viewed

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

package/dist/custom/TwoFactorsOtp.vue DELETED Viewed

File without changes