From 834ba1987eedffb3a59379274cf012dc89d1ed8c Mon Sep 17 00:00:00 2001
From: Pierre Hubert <pierre.git@communiquons.org>
Date: Wed, 20 Apr 2022 17:52:32 +0200
Subject: [PATCH] Improve handling of code input in TOTP page

---
 templates/login/opt_input.html | 63 ++++++++++++++++++----------------
 1 file changed, 34 insertions(+), 29 deletions(-)

diff --git a/templates/login/opt_input.html b/templates/login/opt_input.html
index 7493a11..fed383a 100644
--- a/templates/login/opt_input.html
+++ b/templates/login/opt_input.html
@@ -38,36 +38,41 @@ function OTPInput() {
     for (let i = 0; i < inputs.length; i++) {
         // Reset form on init
         inputs[i].value = "";
-
-        inputs[i].addEventListener('keydown', (event) => {
-            if (event.key === "Backspace") {
-                if (inputs[i].value != "") {
-                    inputs[i].value = '';
-                } else if (i > 0) {
-                    inputs[i - 1].value = "";
-                    inputs[i - 1].focus();
-                }
-            }
-
-            // Code has already been typed entirely
-            else if (i === inputs.length - 1 && inputs[i].value !== '')
-            {
-                return;
-            }
-
-            // Add new digit
-            else if ((event.keyCode >= 48 && event.keyCode <= 57)
-                || (event.keyCode >= 96 && event.keyCode <= 105)){
-                inputs[i].value = event.key;
-                if (i !== inputs.length - 1)
-                    inputs[i + 1].focus();
-                else
-                    submitCode();
-            }
-
-            event.preventDefault();
-        });
     }
+
+    let currIndex = 0;
+
+    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--;
+            }
+        }
+
+        // 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() {