use separated input fields for totp code in front- and backend
This commit is contained in:
parent
12bb6355ee
commit
4edfa2d3c3
@ -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);
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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"}]
|
||||
|
@ -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);
|
||||
|
@ -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;
|
||||
}
|
@ -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;
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user