use separated input fields for totp code in front- and backend

src/Application/Controller/Admin/d3totpadminlogin.php

@@ -147,7 +147,7 @@ class d3totpadminlogin extends AdminController
         $userId = $user->d3TotpGetCurrentUser();
 
         try {
-            $sTotp = Registry::getRequest()->getRequestEscapedParameter('d3totp');
+            $sTotp = implode('', Registry::getRequest()->getRequestEscapedParameter('d3totp'));
 
             $totp = $this->d3TotpGetTotpObject();
             $totp->loadByUserId($userId);

src/Application/views/admin/tpl/d3totplogin.tpl

@@ -22,16 +22,49 @@
             <input type="hidden" name="fnc" value="checklogin">
             <input type="hidden" name="cl" value="[{$oViewConf->getActiveClassName()}]">
 
+            <h3>[{oxmultilang ident="TOTP_INPUT"}]</h3>
+
             [{if !empty($Errors.default)}]
                 [{include file="inc_error.tpl" Errorlist=$Errors.default}]
             [{/if}]
 
             [{$oView->getBackupCodeCountMessage()}]
 
-            <label for="d3totp">[{oxmultilang ident="TOTP_INPUT"}]</label>
+            <div class="container">
-            <input type="text" name="d3totp" id="d3totp" value="" size="49" autofocus autocomplete="off"><br>
+                <label for="1st">erste TOTP-Ziffer</label>
+                <input type="text" name="d3totp[]" class="digit" id='1st' inputmode="numeric" pattern="[0-9]*" maxlength="1" required onkeyup="clickEvent('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" required onkeyup="clickEvent('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" required onkeyup="clickEvent('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" required onkeyup="clickEvent('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" required onkeyup="clickEvent('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" required autocomplete="off">
+            </div>
 
-            [{oxmultilang ident="TOTP_INPUT_HELP"}]
+            [{capture name="d3js"}]
+                function clickEvent(next){
+                    const digits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+                    if(digits.includes(event.key)){
+                        document.getElementById(next).focus();
+                    }
+                }
+                document.addEventListener("paste", function(e) {
+                    if (e.target.type === "text") {
+                        var data = e.clipboardData.getData('Text');
+                        data = data.split('');
+                        [].forEach.call(document.querySelectorAll("#login input[type=text]"), (node, index) => {
+                            node.value = data[index];
+                        });
+                    }
+                });
+            [{/capture}]
+            [{oxscript add=$smarty.capture.d3js}]
+
+            <div>[{oxmultilang ident="TOTP_INPUT_HELP"}]</div>
 
             <input type="submit" value="[{oxmultilang ident="LOGIN_START"}]" class="btn"><br>
 

src/Application/views/tpl/d3totplogin.tpl

@@ -15,16 +15,49 @@
                 <input type="hidden" name="cl" value="[{$oView->getPreviousClass()}]">
                 [{$navFormParams}]
 
+                <h3>[{oxmultilang ident="D3_TOTP_INPUT"}]</h3>
+
                 [{if !empty($Errors.default)}]
                     [{include file="inc_error.tpl" Errorlist=$Errors.default}]
                 [{/if}]
 
                 [{$oView->getBackupCodeCountMessage()}]
 
-                <label for="d3totp">[{oxmultilang ident="D3_TOTP_INPUT"}]</label>
+                <div class="container">
-                <input type="text" name="d3totp" id="d3totp" value="" size="49" autofocus autocomplete="off"><br>
+                    <label for="1st">erste TOTP-Ziffer</label>
+                    <input type="text" name="d3totp[]" class="digit" id='1st' inputmode="numeric" pattern="[0-9]*" maxlength="1" required onkeyup="clickEvent('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" required onkeyup="clickEvent('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" required onkeyup="clickEvent('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" required onkeyup="clickEvent('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" required onkeyup="clickEvent('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" required autocomplete="off">
+                </div>
 
-                [{oxmultilang ident="D3_TOTP_INPUT_HELP"}]
+                [{capture name="d3js"}]
+                    function clickEvent(next){
+                        const digits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+                        if(digits.includes(event.key)){
+                            document.getElementById(next).focus();
+                        }
+                    }
+                    document.addEventListener("paste", function(e) {
+                        if (e.target.type === "text") {
+                            var data = e.clipboardData.getData('Text');
+                            data = data.split('');
+                            [].forEach.call(document.querySelectorAll("#login input[type=text]"), (node, index) => {
+                                node.value = data[index];
+                            });
+                        }
+                    });
+                [{/capture}]
+                [{oxscript add=$smarty.capture.d3js}]
+
+                <div>[{oxmultilang ident="D3_TOTP_INPUT_HELP"}]</div>
 
                 <button type="submit" class="btn btn-primary">
                     [{oxmultilang ident="D3_TOTP_SUBMIT_LOGIN"}]

src/Modules/Application/Component/d3_totp_UserComponent.php

@@ -84,7 +84,7 @@ class d3_totp_UserComponent extends d3_totp_UserComponent_parent
      */
     public function d3TotpCheckTotpLogin()
     {
-        $sTotp = Registry::getRequest()->getRequestEscapedParameter('d3totp', true);
+        $sTotp = implode('', Registry::getRequest()->getRequestEscapedParameter('d3totp'));
 
         /** @var d3_totp_user $oUser */
         $oUser = oxNew(User::class);

src/out/admin/src/css/d3totplogin.css

@@ -10,3 +10,30 @@
     background: silver;
     color: black;
 }
+#login label {
+    position: absolute;
+    left: -2000px;
+}
+
+#login label.show {
+    position: relative;
+    display: block;
+    left: 0;
+}
+
+#login .container {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 10px;
+}
+
+#login .digit {
+    height: 3em;
+    width: 14%;
+    margin: 0 2px;
+    text-align: center;
+}
+
+#login .digit:nth-of-type(4) {
+    margin-left: 7px;
+}

src/out/flow/src/css/d3totplogin.css

@@ -15,3 +15,32 @@
     margin-top: 20px;
     margin-bottom: 20px;
 }
+
+
+#login label {
+    position: absolute;
+    left: -2000px;
+}
+
+#login label.show {
+    position: relative;
+    display: block;
+    left: 0;
+}
+
+#login .container {
+    display: flex;
+    flex-direction: row;
+    margin: 20px 0;
+}
+
+#login .digit {
+    width: 3em;
+    margin: 0 2px;
+    text-align: center;
+    height: 4em;
+}
+
+#login .digit:nth-of-type(4) {
+    margin-left: 15px;
+}