Improve OTP input form

templates/login/otp_input.html

@@ -15,12 +15,12 @@
         <input type="hidden" id="code" name="code"/>
         <div class="form-group">
             <div id="otp" class="inputs d-flex flex-row justify-content-center mt-2">
-                <input class="m-2 text-center form-control rounded" type="text" id="i1" maxlength="1" autofocus/>
-                <input class="m-2 text-center form-control rounded" type="text" id="i2" maxlength="1"/>
-                <input class="m-2 text-center form-control rounded" type="text" id="i3" maxlength="1"/>
-                <input class="m-2 text-center form-control rounded" type="text" id="i4" maxlength="1"/>
-                <input class="m-2 text-center form-control rounded" type="text" id="i5" maxlength="1"/>
-                <input class="m-2 text-center form-control rounded" type="text" id="i6" maxlength="1"/>
+                <input class="m-2 text-center form-control rounded" type="text" id="i1" maxlength="6" autofocus/>
+                <input class="m-2 text-center form-control rounded" type="text" id="i2" maxlength="6"/>
+                <input class="m-2 text-center form-control rounded" type="text" id="i3" maxlength="6"/>
+                <input class="m-2 text-center form-control rounded" type="text" id="i4" maxlength="6"/>
+                <input class="m-2 text-center form-control rounded" type="text" id="i5" maxlength="6"/>
+                <input class="m-2 text-center form-control rounded" type="text" id="i6" maxlength="6"/>
             </div>
         </div>
     </form>
@@ -37,54 +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 = "";
     }
 
-    let currIndex = 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) => {
-        if (event.key === "Backspace") {
-            if (inputs[currIndex].value != "") {
-                inputs[currIndex].value = '';
-            } else if (currIndex > 0) {
-                inputs[currIndex - 1].value = "";
-                inputs[currIndex - 1].focus();
-                currIndex--;
-            }
+        let currCode = getMergedCode();
+        if (event.key === "Backspace" && currCode.length > 0) {
+            inputs[currCode.length - 1].value = "";
+            inputs[currCode.length - 1].focus();
         }
-
-        // Code has already been typed entirely
-        else if (currIndex === inputs.length - 1 && inputs[currIndex].value !== '')
-        {
-            return;
-        }
-
-        // Add new digit
-        else if ((event.keyCode >= 48 && event.keyCode <= 57)
-            || (event.keyCode >= 96 && event.keyCode <= 105)){
-            inputs[currIndex].value = event.key;
-            if (currIndex < inputs.length - 1) {
-                inputs[currIndex + 1].focus();
-                currIndex++;
-            }
-            else
-                submitCode();
-        }
-
-        event.preventDefault();
     });
-}
 
-function submitCode() {
-    const code = [...document.querySelectorAll('#otp > *[id]')]
-        .map((i) => i.value)
-        .join("");
+    function handleChange() {
+        // Remove non-numeric values from input
+        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) : "";
+        }
+        
+        if (fullCode.length === 6) {
+            submitCode();
+        }
+        else {
+           inputs[fullCode.length].focus()
+        }
+    }
+
+    // Listen to event on all inputs
+    for (let i = 0; i < 6; i++) {
+        inputs[i].addEventListener("change", () => handleChange())
+        inputs[i].addEventListener("keyup", () => handleChange())
+    }
 
-    document.getElementById("code").value = code;
-    document.getElementById("totp_form").submit();
 }
 
 document.addEventListener("DOMContentLoaded", () => OTPInput());