Improve OTP input form

templates/login/otp_input.html

@@ -37,77 +37,53 @@ function OTPInput() {
     // Set form destination
     document.getElementById("totp_form").action = location.href;
 
-    const inputs = document.querySelectorAll('#otp > *[id]');
+    const inputs = [...document.querySelectorAll('#otp > *[id]')];
     for (let i = 0; i < inputs.length; i++) {
         // Reset form on init
         inputs[i].value = "";
     }
 
-    
-    function getCurrIndex() {
-        for(const [i, input] of inputs.entries()) {
-            if(input.value === "")
-                return i;
-        }
-
-        return 0;
+    function getMergedCode() {
+        return inputs.map((i) => i.value).join("")
     }
 
+    function submitCode() {
+        const code = getMergedCode();
+
+        document.getElementById("code").value = code;
+        document.getElementById("totp_form").submit();
+    }
 
     document.addEventListener('keydown', (event) => {
-        let currIndex = getCurrIndex();
-        if (event.key === "Backspace") {
-            if (inputs[currIndex].value != "") {
-                inputs[currIndex].value = '';
-            } else if (currIndex > 0) {
-                inputs[currIndex - 1].value = "";
-                inputs[currIndex - 1].focus();
-                currIndex--;
-            }
-
-            event.preventDefault();
-            return;
-        } 
+        let currCode = getMergedCode();
+        if (event.key === "Backspace" && currCode.length > 0) {
+            inputs[currCode.length - 1].value = "";
+            inputs[currCode.length - 1].focus();
+        }
     });
 
-    function handleChange(index) {
-        const input = inputs[index];
-
+    function handleChange() {
         // Remove non-numeric values from input
-        const correctValue = input.value.replace(/[^0-9]/g, "");
-        if (correctValue !== input.value)
-            input.value = correctValue;
-
-        if(correctValue.length == 0) {
-            input.focus();
-            return;
+        const fullCode = getMergedCode().replace(/[^0-9]/g, "").substring(0, 6);
+        
+        for (let i = 0; i < 6; i++) {
+            inputs[i].value = i <= fullCode.length ? fullCode.substring(i, i + 1) : "";
         }
         
-        input.value = correctValue.substring(0, 1);
-
-        if (index === 5) {
+        if (fullCode.length === 6) {
             submitCode();
         }
         else {
-            inputs[index + 1].value = correctValue.substring(1) + inputs[index + 1].value;
-            handleChange(index + 1);
+           inputs[fullCode.length].focus()
         }
     }
 
     // Listen to event on all inputs
     for (let i = 0; i < 6; i++) {
-        inputs[i].addEventListener("change", () => handleChange(i))
-        inputs[i].addEventListener("keyup", () => handleChange(i))
+        inputs[i].addEventListener("change", () => handleChange())
+        inputs[i].addEventListener("keyup", () => handleChange())
     }
-}
 
-function submitCode() {
-    const code = [...document.querySelectorAll('#otp > *[id]')]
-        .map((i) => i.value)
-        .join("");
-
-    document.getElementById("code").value = code;
-    document.getElementById("totp_form").submit();
 }
 
 document.addEventListener("DOMContentLoaded", () => OTPInput());