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

Improve OTP input form
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Pierre HUBERT 2022-11-12 18:18:48 +01:00
parent 5300b1a8f9
commit 060ebe49aa
1 changed files with 23 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
templates/login/otp_input.html
View File

@ -37,77 +37,53 @@ function OTPInput() {
// Set form destination // Set form destination
document.getElementById("totp_form").action = location.href; document.getElementById("totp_form").action = location.href;
const inputs = document.querySelectorAll('#otp > *[id]'); const inputs = [...document.querySelectorAll('#otp > *[id]')];
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 = "";
} }
function getMergedCode() {
function getCurrIndex() { return inputs.map((i) => i.value).join("")
for(const [i, input] of inputs.entries()) {
if(input.value === "")
return i;
}
return 0;
} }
function submitCode() {
const code = getMergedCode();
document.getElementById("code").value = code;
document.getElementById("totp_form").submit();
}
document.addEventListener('keydown', (event) => { document.addEventListener('keydown', (event) => {
let currIndex = getCurrIndex(); let currCode = getMergedCode();
if (event.key === "Backspace") { if (event.key === "Backspace" && currCode.length > 0) {
if (inputs[currIndex].value != "") { inputs[currCode.length - 1].value = "";
inputs[currIndex].value = ''; inputs[currCode.length - 1].focus();
} else if (currIndex > 0) { }
inputs[currIndex - 1].value = "";
inputs[currIndex - 1].focus();
currIndex--;
}
event.preventDefault();
return;
}
}); });
function handleChange(index) { function handleChange() {
const input = inputs[index];
// Remove non-numeric values from input // Remove non-numeric values from input
const correctValue = input.value.replace(/[^0-9]/g, ""); const fullCode = getMergedCode().replace(/[^0-9]/g, "").substring(0, 6);
if (correctValue !== input.value)
input.value = correctValue; for (let i = 0; i < 6; i++) {
inputs[i].value = i <= fullCode.length ? fullCode.substring(i, i + 1) : "";
if(correctValue.length == 0) {
input.focus();
return;
} }
input.value = correctValue.substring(0, 1); if (fullCode.length === 6) {
if (index === 5) {
submitCode(); submitCode();
} }
else { else {
inputs[index + 1].value = correctValue.substring(1) + inputs[index + 1].value; inputs[fullCode.length].focus()
handleChange(index + 1);
} }
} }
// Listen to event on all inputs // Listen to event on all inputs
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
inputs[i].addEventListener("change", () => handleChange(i)) inputs[i].addEventListener("change", () => handleChange())
inputs[i].addEventListener("keyup", () => handleChange(i)) inputs[i].addEventListener("keyup", () => handleChange())
} }
}
function submitCode() {
const code = [...document.querySelectorAll('#otp > *[id]')]
.map((i) => i.value)
.join("");
document.getElementById("code").value = code;
document.getElementById("totp_form").submit();
} }
document.addEventListener("DOMContentLoaded", () => OTPInput()); document.addEventListener("DOMContentLoaded", () => OTPInput());