116 lines
3.4 KiB
HTML
116 lines
3.4 KiB
HTML
{% extends "base_login_page.html" %}
|
|
{% block content %}
|
|
|
|
<style>
|
|
#otp input {
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div>
|
|
<p>Please open one of your registered authenticator app, generate a new code and enter it here:</p>
|
|
<form id="totp_form" method="post">
|
|
<input type="hidden" id="code" name="code"/>
|
|
<div class="form-group">
|
|
<div id="otp" class="inputs d-flex flex-row justify-content-center mt-2">
|
|
<input class="m-2 text-center form-control rounded" type="text" id="i1" maxlength="6" autofocus/>
|
|
<input class="m-2 text-center form-control rounded" type="text" id="i2" maxlength="6"/>
|
|
<input class="m-2 text-center form-control rounded" type="text" id="i3" maxlength="6"/>
|
|
<input class="m-2 text-center form-control rounded" type="text" id="i4" maxlength="6"/>
|
|
<input class="m-2 text-center form-control rounded" type="text" id="i5" maxlength="6"/>
|
|
<input class="m-2 text-center form-control rounded" type="text" id="i6" maxlength="6"/>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
<div style="margin-top: 10px;">
|
|
<a href="/2fa_auth?force_display=true&redirect={{ _p.redirect_uri.get_encoded() }}">Sign in using another factor</a><br/>
|
|
<a href="/logout">Sign out</a>
|
|
</div>
|
|
|
|
<script>
|
|
function OTPInput() {
|
|
// Set form destination
|
|
document.getElementById("totp_form").action = location.href;
|
|
|
|
const inputs = document.querySelectorAll('#otp > *[id]');
|
|
for (let i = 0; i < inputs.length; i++) {
|
|
// Reset form on init
|
|
inputs[i].value = "";
|
|
}
|
|
|
|
|
|
function getCurrIndex() {
|
|
for(const [i, input] of inputs.entries()) {
|
|
if(input.value === "")
|
|
return i;
|
|
}
|
|
|
|
return 0;
|
|
}
|
|
|
|
|
|
document.addEventListener('keydown', (event) => {
|
|
let currIndex = getCurrIndex();
|
|
if (event.key === "Backspace") {
|
|
if (inputs[currIndex].value != "") {
|
|
inputs[currIndex].value = '';
|
|
} else if (currIndex > 0) {
|
|
inputs[currIndex - 1].value = "";
|
|
inputs[currIndex - 1].focus();
|
|
currIndex--;
|
|
}
|
|
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
});
|
|
|
|
function handleChange(index) {
|
|
const input = inputs[index];
|
|
|
|
// Remove non-numeric values from input
|
|
const correctValue = input.value.replace(/[^0-9]/g, "");
|
|
if (correctValue !== input.value)
|
|
input.value = correctValue;
|
|
|
|
if(correctValue.length == 0) {
|
|
input.focus();
|
|
return;
|
|
}
|
|
|
|
input.value = correctValue.substring(0, 1);
|
|
|
|
if (index === 5) {
|
|
submitCode();
|
|
}
|
|
else {
|
|
inputs[index + 1].value = correctValue.substring(1) + inputs[index + 1].value;
|
|
handleChange(index + 1);
|
|
}
|
|
}
|
|
|
|
// Listen to event on all inputs
|
|
for (let i = 0; i < 6; i++) {
|
|
inputs[i].addEventListener("change", () => handleChange(i))
|
|
inputs[i].addEventListener("keyup", () => handleChange(i))
|
|
}
|
|
}
|
|
|
|
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());
|
|
</script>
|
|
|
|
{% endblock content %} |