@adminforth/two-factors-auth 1.9.0 → 1.9.2

package/build.log

@@ -11,5 +11,5 @@ custom/package-lock.json
 custom/package.json
 custom/tsconfig.json
 
-sent 31,846 bytes  received 134 bytes  63,960.00 bytes/sec
-total size is 31,348  speedup is 0.98
+sent 34,648 bytes  received 134 bytes  69,564.00 bytes/sec
+total size is 34,157  speedup is 0.98

package/custom/TwoFactorsConfirmation.vue

@@ -92,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) {
@@ -131,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

@@ -85,13 +85,14 @@ 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();
@@ -154,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() {
@@ -175,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;
 

package/dist/custom/TwoFactorsConfirmation.vue

@@ -92,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) {
@@ -131,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

@@ -85,13 +85,14 @@ 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();
@@ -154,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() {
@@ -175,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;
 

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@adminforth/two-factors-auth",
-  "version": "1.9.0",
+  "version": "1.9.2",
   "description": "AdminForth plugin for two factors authentication",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
   "homepage": "https://adminforth.dev/docs/tutorial/Plugins/TwoFactorsAuth/",
   "repository": {
     "type": "git",