pierre/BasicOIDC
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve handling of code input in TOTP page

Browse Source
This commit is contained in:
Pierre HUBERT 2022-04-20 17:52:32 +02:00
parent 1a1b31e8a0
commit 834ba1987e
1 changed files with 34 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
templates/login/opt_input.html
View File

@ -38,19 +38,23 @@ function OTPInput() {
for (let i = 0; i < inputs.length; i++) { for (let i = 0; i < inputs.length; i++) {
// Reset form on init // Reset form on init
inputs[i].value = ""; inputs[i].value = "";
}
inputs[i].addEventListener('keydown', (event) => { let currIndex = 0;
document.addEventListener('keydown', (event) => {
if (event.key === "Backspace") { if (event.key === "Backspace") {
if (inputs[i].value != "") { if (inputs[currIndex].value != "") {
inputs[i].value = ''; inputs[currIndex].value = '';
} else if (i > 0) { } else if (currIndex > 0) {
inputs[i - 1].value = ""; inputs[currIndex - 1].value = "";
inputs[i - 1].focus(); inputs[currIndex - 1].focus();
currIndex--;
} }
} }
// Code has already been typed entirely // Code has already been typed entirely
else if (i === inputs.length - 1 && inputs[i].value !== '') else if (currIndex === inputs.length - 1 && inputs[currIndex].value !== '')
{ {
return; return;
} }
@ -58,9 +62,11 @@ function OTPInput() {
// Add new digit // Add new digit
else if ((event.keyCode >= 48 && event.keyCode <= 57) else if ((event.keyCode >= 48 && event.keyCode <= 57)
|| (event.keyCode >= 96 && event.keyCode <= 105)){ || (event.keyCode >= 96 && event.keyCode <= 105)){
inputs[i].value = event.key; inputs[currIndex].value = event.key;
if (i !== inputs.length - 1) if (currIndex < inputs.length - 1) {
inputs[i + 1].focus(); inputs[currIndex + 1].focus();
currIndex++;
}
else else
submitCode(); submitCode();
} }
@ -68,7 +74,6 @@ function OTPInput() {
event.preventDefault(); event.preventDefault();
}); });
} }
}
function submitCode() { function submitCode() {
const code = [...document.querySelectorAll('#otp > *[id]')] const code = [...document.querySelectorAll('#otp > *[id]')]