From 331a05b080afbba1a5e4fc155dd2b5aac4a16189 Mon Sep 17 00:00:00 2001
From: Daniel Seifert <ds@shopmodule.com>
Date: Thu, 24 Nov 2022 09:36:39 +0100
Subject: [PATCH] handle delete keys in OTP input form

---
 .../views/admin/tpl/d3totplogin.tpl           | 23 +++++++++++--------
 src/Application/views/tpl/d3totplogin.tpl     | 21 +++++++++--------
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/Application/views/admin/tpl/d3totplogin.tpl b/src/Application/views/admin/tpl/d3totplogin.tpl
index d2b1768..6dd26e1 100644
--- a/src/Application/views/admin/tpl/d3totplogin.tpl
+++ b/src/Application/views/admin/tpl/d3totplogin.tpl
@@ -34,24 +34,27 @@
 
             <div class="container">
                 <label for="1st">erste TOTP-Ziffer</label>
-                <input type="text" name="d3totp[]" class="digit" id='1st' inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('2nd')" autofocus autocomplete="off">
+                <input type="text" name="d3totp[]" class="digit" id='1st' inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent(null, '2nd')" autofocus autocomplete="off">
                 <label for="2nd">zweite TOTP-Ziffer</label>
-                <input type="text" name="d3totp[]" class="digit" id="2nd" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('3rd')" autocomplete="off">
+                <input type="text" name="d3totp[]" class="digit" id="2nd" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('1st', '3rd')" autocomplete="off">
                 <label for="3rd">dritte TOTP-Ziffer</label>
-                <input type="text" name="d3totp[]" class="digit" id="3rd" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('4th')" autocomplete="off">
+                <input type="text" name="d3totp[]" class="digit" id="3rd" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('2nd', '4th')" autocomplete="off">
                 <label for="4th">vierte TOTP-Ziffer</label>
-                <input type="text" name="d3totp[]" class="digit" id="4th" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('5th')" autocomplete="off">
+                <input type="text" name="d3totp[]" class="digit" id="4th" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('3rd', '5th')" autocomplete="off">
                 <label for="5th">fünfte TOTP-Ziffer</label>
-                <input type="text" name="d3totp[]" class="digit" id="5th" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('6th')" autocomplete="off">
+                <input type="text" name="d3totp[]" class="digit" id="5th" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('4th', '6th')" autocomplete="off">
                 <label for="6th">sechste TOTP-Ziffer</label>
-                <input type="text" name="d3totp[]" class="digit" id="6th" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="off">
+                <input type="text" name="d3totp[]" class="digit" id="6th" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('5th', null)" autocomplete="off">
             </div>
 
             [{capture name="d3js"}]
-                function clickEvent(next){
-                    const digits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
-                    if(digits.includes(event.key)){
+                function clickEvent(previous, next){
+                    const digitKeys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+                    const deleteKeys = ['Backspace', 'Delete'];
+                    if(next && digitKeys.includes(event.key)){
                         document.getElementById(next).focus();
+                    } else if(previous && deleteKeys.includes(event.key)){
+                        document.getElementById(previous).focus();
                     }
                 }
                 document.addEventListener("paste", function(e) {
@@ -71,7 +74,7 @@
             <input type="submit" value="[{oxmultilang ident="LOGIN_START"}]" class="btn"><br>
 
             <input class="btn btn_cancel" value="[{oxmultilang ident="TOTP_CANCEL_LOGIN"}]" type="submit"
-                   onclick="document.getElementById('login').fnc.value='d3CancelLogin'; document.getElementById('login').submit();"
+                onclick="document.getElementById('login').fnc.value='d3CancelLogin'; document.getElementById('login').submit();"
             >
 
             [{oxstyle include=$oViewConf->getModuleUrl('d3totp', 'out/admin/src/css/d3totplogin.css')}]
diff --git a/src/Application/views/tpl/d3totplogin.tpl b/src/Application/views/tpl/d3totplogin.tpl
index 816687b..c6ec44d 100644
--- a/src/Application/views/tpl/d3totplogin.tpl
+++ b/src/Application/views/tpl/d3totplogin.tpl
@@ -25,24 +25,27 @@
 
                 <div class="container">
                     <label for="1st">erste TOTP-Ziffer</label>
-                    <input type="text" name="d3totp[]" class="digit" id='1st' inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('2nd')" autofocus autocomplete="off">
+                    <input type="text" name="d3totp[]" class="digit" id='1st' inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent(null, '2nd')" autofocus autocomplete="off">
                     <label for="2nd">zweite TOTP-Ziffer</label>
-                    <input type="text" name="d3totp[]" class="digit" id="2nd" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('3rd')" autocomplete="off">
+                    <input type="text" name="d3totp[]" class="digit" id="2nd" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('1st', '3rd')" autocomplete="off">
                     <label for="3rd">dritte TOTP-Ziffer</label>
-                    <input type="text" name="d3totp[]" class="digit" id="3rd" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('4th')" autocomplete="off">
+                    <input type="text" name="d3totp[]" class="digit" id="3rd" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('2nd', '4th')" autocomplete="off">
                     <label for="4th">vierte TOTP-Ziffer</label>
-                    <input type="text" name="d3totp[]" class="digit" id="4th" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('5th')" autocomplete="off">
+                    <input type="text" name="d3totp[]" class="digit" id="4th" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('3rd', '5th')" autocomplete="off">
                     <label for="5th">fünfte TOTP-Ziffer</label>
-                    <input type="text" name="d3totp[]" class="digit" id="5th" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('6th')" autocomplete="off">
+                    <input type="text" name="d3totp[]" class="digit" id="5th" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('4th', '6th')" autocomplete="off">
                     <label for="6th">sechste TOTP-Ziffer</label>
-                    <input type="text" name="d3totp[]" class="digit" id="6th" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="off">
+                    <input type="text" name="d3totp[]" class="digit" id="6th" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('5th', null)" autocomplete="off">
                 </div>
 
                 [{capture name="d3js"}]
-                    function clickEvent(next){
-                        const digits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
-                        if(digits.includes(event.key)){
+                    function clickEvent(previous, next){
+                        const digitKeys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+                        const deleteKeys = ['Backspace', 'Delete'];
+                        if(next && digitKeys.includes(event.key)){
                             document.getElementById(next).focus();
+                        } else if(previous && deleteKeys.includes(event.key)){
+                            document.getElementById(previous).focus();
                         }
                     }
                     document.addEventListener("paste", function(e) {