@adminforth/two-factors-auth 1.8.10 → 1.9.1

package/build.log

@@ -11,5 +11,5 @@ custom/package-lock.json
 custom/package.json
 custom/tsconfig.json
 
-sent 31,567 bytes  received 134 bytes  63,402.00 bytes/sec
-total size is 31,076  speedup is 0.98
+sent 34,655 bytes  received 134 bytes  69,578.00 bytes/sec
+total size is 34,157  speedup is 0.98

package/custom/TwoFactorsConfirmation.vue

@@ -28,14 +28,15 @@
                         @on-complete="handleOnComplete"
                       />
                     </div>
-                      <div class="mt-6 flex justify-center">
-                        <LinkButton
-                          to="/login"
-                          class="w-full"
-                        >
-                          {{$t('Back to login')}}
-                        </LinkButton>
-                      </div>
+                    <ErrorMessage :error="codeError" />
+                    <div class="mt-6 flex justify-center">
+                      <LinkButton
+                        to="/login"
+                        class="w-full"
+                      >
+                        {{$t('Back to login')}}
+                      </LinkButton>
+                    </div>
                 </div>
             </div>
         </div>
@@ -57,11 +58,13 @@
   import { LinkButton } from '@/afcl';
   import VOtpInput from "vue3-otp-input";
   import { useI18n } from 'vue-i18n';
+  import ErrorMessage from '@/components/ErrorMessage.vue';
 
   const { t } = useI18n();
   const code = ref(null);
   const otpRoot = ref(null);
   const bindValue = ref('');
+  const codeError = ref(null);
 
   const handleOnComplete = (value) => {
     sendCode(value);
@@ -89,10 +92,17 @@
   onMounted(async () => {
     await nextTick();
     tagOtpInputs();
+    document.addEventListener('focusin', handleGlobalFocusIn, true);
+    focusFirstAvailableOtpInput();
+    const rootEl = otpRoot.value;
+    rootEl && rootEl.addEventListener('focusout', handleFocusOut, true);
   });
 
   onBeforeUnmount(() => {
     window.removeEventListener('paste', handlePaste);
+    document.removeEventListener('focusin', handleGlobalFocusIn, true);
+    const rootEl = otpRoot.value;
+    rootEl && rootEl.removeEventListener('focusout', handleFocusOut, true);
   });
   
   async function sendCode (value) {
@@ -108,7 +118,7 @@
     if (resp.allowedLogin){
       await user.finishLogin();
     } else {
-      showErrorTost(t('Invalid code'));
+      codeError.value = 'Invalid code';
     }
   }
 
@@ -128,6 +138,42 @@
       code.value?.fillInput(pastedText);
     }
   }
+
+  function getOtpInputs() {
+    const root = otpRoot.value;
+    if (!root) return [];
+    return Array.from(root.querySelectorAll('input.otp-input'));
+  }
+
+  function focusFirstAvailableOtpInput() {
+    const inputs = getOtpInputs();
+    if (!inputs.length) return;
+    const firstEmpty = inputs.find((i) => !i.value);
+    (firstEmpty || inputs[0]).focus();
+  }
+
+  function handleGlobalFocusIn(event) {
+    const inputs = getOtpInputs();
+    if (!inputs.length) return;
+    const target = event.target;
+    if (!target) return;
+    if (!inputs.includes(target)) {
+      requestAnimationFrame(() => {
+        focusFirstAvailableOtpInput();
+      });
+    }
+  }
+
+  function handleFocusOut() {
+    requestAnimationFrame(() => {
+      const inputs = getOtpInputs();
+      if (!inputs.length) return;
+      const active = document.activeElement;
+      if (!active || !inputs.includes(active)) {
+        focusFirstAvailableOtpInput();
+      }
+    });
+  }
   </script>
 
   <style scoped lang='scss'>

package/custom/TwoFactorsSetup.vue

@@ -45,6 +45,7 @@
                       @on-complete="handleOnComplete"
                     />
                   </div>
+                  <ErrorMessage :error="codeError" />
                   <!-- <Vue2FACodeInput v-model="code" autofocus /> -->
                    <div class="flex flex-row gap-2.5 h-12">
                   <LinkButton to="/login" class="w-full">
@@ -78,17 +79,20 @@ import Vue2FACodeInput from '@loltech/vue3-2fa-code-input';
 import VOtpInput from "vue3-otp-input";
 import adminforth from '@/adminforth';
 import { useI18n } from 'vue-i18n';
+import ErrorMessage from '@/components/ErrorMessage.vue';
 
 const { t } = useI18n();
 
 const code = ref(null);
+const codeError = ref(null);
+const bindValue = ref('');
 const handleOnComplete = (value) => {
   sendCode(value);
 };
 
 const router = useRouter();
 const inProgress = ref(false);
-const otpRoot = ref(null);
+const otpRoot = ref<HTMLElement | null>(null);
 
 const coreStore = useCoreStore();
 const user = useUserStore();
@@ -151,12 +155,19 @@ onMounted(async () => {
   }
 
   window.addEventListener('paste', handlePaste);
+  document.addEventListener('focusin', handleGlobalFocusIn, true);
   await nextTick();
   tagOtpInputs();
+  focusFirstAvailableOtpInput();
+  const rootEl = otpRoot.value;
+  rootEl && rootEl.addEventListener('focusout', handleFocusOut, true);
 });
 
 onBeforeUnmount(() => {
   window.removeEventListener('paste', handlePaste);
+  document.removeEventListener('focusin', handleGlobalFocusIn, true);
+  const rootEl = otpRoot.value;
+  rootEl && rootEl.removeEventListener('focusout', handleFocusOut, true);
 });
 
 function tagOtpInputs() {
@@ -172,6 +183,42 @@ function tagOtpInputs() {
     });
   }
 
+function getOtpInputs(): HTMLInputElement[] {
+  const root = otpRoot.value;
+  if (!root) return [];
+  return Array.from(root.querySelectorAll('input.otp-input')) as HTMLInputElement[];
+}
+
+function focusFirstAvailableOtpInput(): void {
+  const inputs = getOtpInputs();
+  if (!inputs.length) return;
+  const firstEmpty = inputs.find((i) => !i.value);
+  (firstEmpty || inputs[0]).focus();
+}
+
+function handleGlobalFocusIn(event: FocusEvent): void {
+  const inputs = getOtpInputs();
+  if (!inputs.length) return;
+  const target = event.target as HTMLElement | null;
+  if (!target) return;
+  if (!inputs.includes(target as HTMLInputElement)) {
+    requestAnimationFrame(() => {
+      focusFirstAvailableOtpInput();
+    });
+  }
+}
+
+function handleFocusOut(): void {
+  requestAnimationFrame(() => {
+    const inputs = getOtpInputs();
+    if (!inputs.length) return;
+    const active = document.activeElement as HTMLElement | null;
+    if (!active || !inputs.includes(active as HTMLInputElement)) {
+      focusFirstAvailableOtpInput();
+    }
+  });
+}
+
 async function sendCode (value) {
   inProgress.value = true;
 
@@ -187,7 +234,7 @@ async function sendCode (value) {
   if (resp.allowedLogin){
     await user.finishLogin()
   } else {
-    showErrorTost(t('Invalid code'));
+    codeError.value = 'Invalid code';
   }
 }
 
@@ -214,7 +261,7 @@ const handleSkip = async () => {
   if (resp.allowedLogin){
     await user.finishLogin()
   } else {
-    showErrorTost(t('Something went wrong'));
+    codeError.value = 'Something went wrong';
   }
 }
 </script>

package/dist/custom/TwoFactorsConfirmation.vue

@@ -28,14 +28,15 @@
                         @on-complete="handleOnComplete"
                       />
                     </div>
-                      <div class="mt-6 flex justify-center">
-                        <LinkButton
-                          to="/login"
-                          class="w-full"
-                        >
-                          {{$t('Back to login')}}
-                        </LinkButton>
-                      </div>
+                    <ErrorMessage :error="codeError" />
+                    <div class="mt-6 flex justify-center">
+                      <LinkButton
+                        to="/login"
+                        class="w-full"
+                      >
+                        {{$t('Back to login')}}
+                      </LinkButton>
+                    </div>
                 </div>
             </div>
         </div>
@@ -57,11 +58,13 @@
   import { LinkButton } from '@/afcl';
   import VOtpInput from "vue3-otp-input";
   import { useI18n } from 'vue-i18n';
+  import ErrorMessage from '@/components/ErrorMessage.vue';
 
   const { t } = useI18n();
   const code = ref(null);
   const otpRoot = ref(null);
   const bindValue = ref('');
+  const codeError = ref(null);
 
   const handleOnComplete = (value) => {
     sendCode(value);
@@ -89,10 +92,17 @@
   onMounted(async () => {
     await nextTick();
     tagOtpInputs();
+    document.addEventListener('focusin', handleGlobalFocusIn, true);
+    focusFirstAvailableOtpInput();
+    const rootEl = otpRoot.value;
+    rootEl && rootEl.addEventListener('focusout', handleFocusOut, true);
   });
 
   onBeforeUnmount(() => {
     window.removeEventListener('paste', handlePaste);
+    document.removeEventListener('focusin', handleGlobalFocusIn, true);
+    const rootEl = otpRoot.value;
+    rootEl && rootEl.removeEventListener('focusout', handleFocusOut, true);
   });
   
   async function sendCode (value) {
@@ -108,7 +118,7 @@
     if (resp.allowedLogin){
       await user.finishLogin();
     } else {
-      showErrorTost(t('Invalid code'));
+      codeError.value = 'Invalid code';
     }
   }
 
@@ -128,6 +138,42 @@
       code.value?.fillInput(pastedText);
     }
   }
+
+  function getOtpInputs() {
+    const root = otpRoot.value;
+    if (!root) return [];
+    return Array.from(root.querySelectorAll('input.otp-input'));
+  }
+
+  function focusFirstAvailableOtpInput() {
+    const inputs = getOtpInputs();
+    if (!inputs.length) return;
+    const firstEmpty = inputs.find((i) => !i.value);
+    (firstEmpty || inputs[0]).focus();
+  }
+
+  function handleGlobalFocusIn(event) {
+    const inputs = getOtpInputs();
+    if (!inputs.length) return;
+    const target = event.target;
+    if (!target) return;
+    if (!inputs.includes(target)) {
+      requestAnimationFrame(() => {
+        focusFirstAvailableOtpInput();
+      });
+    }
+  }
+
+  function handleFocusOut() {
+    requestAnimationFrame(() => {
+      const inputs = getOtpInputs();
+      if (!inputs.length) return;
+      const active = document.activeElement;
+      if (!active || !inputs.includes(active)) {
+        focusFirstAvailableOtpInput();
+      }
+    });
+  }
   </script>
 
   <style scoped lang='scss'>

package/dist/custom/TwoFactorsSetup.vue

@@ -45,6 +45,7 @@
                       @on-complete="handleOnComplete"
                     />
                   </div>
+                  <ErrorMessage :error="codeError" />
                   <!-- <Vue2FACodeInput v-model="code" autofocus /> -->
                    <div class="flex flex-row gap-2.5 h-12">
                   <LinkButton to="/login" class="w-full">
@@ -78,17 +79,20 @@ import Vue2FACodeInput from '@loltech/vue3-2fa-code-input';
 import VOtpInput from "vue3-otp-input";
 import adminforth from '@/adminforth';
 import { useI18n } from 'vue-i18n';
+import ErrorMessage from '@/components/ErrorMessage.vue';
 
 const { t } = useI18n();
 
 const code = ref(null);
+const codeError = ref(null);
+const bindValue = ref('');
 const handleOnComplete = (value) => {
   sendCode(value);
 };
 
 const router = useRouter();
 const inProgress = ref(false);
-const otpRoot = ref(null);
+const otpRoot = ref<HTMLElement | null>(null);
 
 const coreStore = useCoreStore();
 const user = useUserStore();
@@ -151,12 +155,19 @@ onMounted(async () => {
   }
 
   window.addEventListener('paste', handlePaste);
+  document.addEventListener('focusin', handleGlobalFocusIn, true);
   await nextTick();
   tagOtpInputs();
+  focusFirstAvailableOtpInput();
+  const rootEl = otpRoot.value;
+  rootEl && rootEl.addEventListener('focusout', handleFocusOut, true);
 });
 
 onBeforeUnmount(() => {
   window.removeEventListener('paste', handlePaste);
+  document.removeEventListener('focusin', handleGlobalFocusIn, true);
+  const rootEl = otpRoot.value;
+  rootEl && rootEl.removeEventListener('focusout', handleFocusOut, true);
 });
 
 function tagOtpInputs() {
@@ -172,6 +183,42 @@ function tagOtpInputs() {
     });
   }
 
+function getOtpInputs(): HTMLInputElement[] {
+  const root = otpRoot.value;
+  if (!root) return [];
+  return Array.from(root.querySelectorAll('input.otp-input')) as HTMLInputElement[];
+}
+
+function focusFirstAvailableOtpInput(): void {
+  const inputs = getOtpInputs();
+  if (!inputs.length) return;
+  const firstEmpty = inputs.find((i) => !i.value);
+  (firstEmpty || inputs[0]).focus();
+}
+
+function handleGlobalFocusIn(event: FocusEvent): void {
+  const inputs = getOtpInputs();
+  if (!inputs.length) return;
+  const target = event.target as HTMLElement | null;
+  if (!target) return;
+  if (!inputs.includes(target as HTMLInputElement)) {
+    requestAnimationFrame(() => {
+      focusFirstAvailableOtpInput();
+    });
+  }
+}
+
+function handleFocusOut(): void {
+  requestAnimationFrame(() => {
+    const inputs = getOtpInputs();
+    if (!inputs.length) return;
+    const active = document.activeElement as HTMLElement | null;
+    if (!active || !inputs.includes(active as HTMLInputElement)) {
+      focusFirstAvailableOtpInput();
+    }
+  });
+}
+
 async function sendCode (value) {
   inProgress.value = true;
 
@@ -187,7 +234,7 @@ async function sendCode (value) {
   if (resp.allowedLogin){
     await user.finishLogin()
   } else {
-    showErrorTost(t('Invalid code'));
+    codeError.value = 'Invalid code';
   }
 }
 
@@ -214,7 +261,7 @@ const handleSkip = async () => {
   if (resp.allowedLogin){
     await user.finishLogin()
   } else {
-    showErrorTost(t('Something went wrong'));
+    codeError.value = 'Something went wrong';
   }
 }
 </script>

package/package.json

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