Improve handling of code input in TOTP page

templates/login/opt_input.html

@@ -38,28 +38,35 @@ function OTPInput() {
     for (let i = 0; i < inputs.length; i++) {
         // Reset form on init
         inputs[i].value = "";
+    }
 
-        inputs[i].addEventListener('keydown', (event) => {
+    let currIndex = 0;
+
+    document.addEventListener('keydown', (event) => {
         if (event.key === "Backspace") {
-                if (inputs[i].value != "") {
+            if (inputs[currIndex].value != "") {
-                    inputs[i].value = '';
+                inputs[currIndex].value = '';
-                } else if (i > 0) {
+            } else if (currIndex > 0) {
-                    inputs[i - 1].value = "";
+                inputs[currIndex - 1].value = "";
-                    inputs[i - 1].focus();
+                inputs[currIndex - 1].focus();
+                currIndex--;
             }
         }
 
         // Code has already been typed entirely
-            else if (i === inputs.length - 1 && inputs[i].value !== '')
+        else if (currIndex === inputs.length - 1 && inputs[currIndex].value !== '')
         {
             return;
         }
 
         // Add new digit
-            else if (event.keyCode >= 48 && event.keyCode <= 57) {
+        else if ((event.keyCode >= 48 && event.keyCode <= 57)
-                inputs[i].value = event.key;
+            || (event.keyCode >= 96 && event.keyCode <= 105)){
-                if (i !== inputs.length - 1)
+            inputs[currIndex].value = event.key;
-                    inputs[i + 1].focus();
+            if (currIndex < inputs.length - 1) {
+                inputs[currIndex + 1].focus();
+                currIndex++;
+            }
             else
                 submitCode();
         }
@@ -67,7 +74,6 @@ function OTPInput() {
         event.preventDefault();
     });
 }
-}
 
 function submitCode() {
     const code = [...document.querySelectorAll('#otp > *[id]')]