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

This commit is contained in:
Daniel Seifert 2022-11-14 00:25:20 +01:00 committed by Daniel Seifert
parent 12bb6355ee
commit 4edfa2d3c3
Signed by: DanielS
GPG Key ID: 8A7C4C6ED1915C6F
6 changed files with 130 additions and 8 deletions

View File

@ -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);

View File

@ -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>
<input type="text" name="d3totp" id="d3totp" value="" size="49" autofocus autocomplete="off"><br>
<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" 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>

View File

@ -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>
<input type="text" name="d3totp" id="d3totp" value="" size="49" autofocus autocomplete="off"><br>
<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" 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"}]

View File

@ -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);

View File

@ -9,4 +9,31 @@
order: 2;
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;
}

View File

@ -14,4 +14,33 @@
.cl-d3totplogin .mainforms {
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;
}