Improve OTP input form
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
5300b1a8f9
commit
060ebe49aa
@ -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;
|
|
||||||
|
|
||||||
if(correctValue.length == 0) {
|
for (let i = 0; i < 6; i++) {
|
||||||
input.focus();
|
inputs[i].value = i <= fullCode.length ? fullCode.substring(i, i + 1) : "";
|
||||||
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());
|
||||||
|
Loading…
Reference in New Issue
Block a user