BasicOIDC/templates/login/otp_input.html

92 lines
2.9 KiB
HTML
Raw Permalink Normal View History

2022-04-19 17:24:07 +00:00
{% extends "base_login_page.html" %}
{% block content %}
<style>
#otp input {
padding-left: 0px;
padding-right: 0px;
}
</style>
2022-04-19 17:24:07 +00:00
<div>
2022-11-11 11:26:02 +00:00
<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"/>
2022-04-19 17:24:07 +00:00
<div class="form-group">
<div id="otp" class="inputs d-flex flex-row justify-content-center mt-2">
2022-11-12 17:04:27 +00:00
<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>
2022-04-19 17:24:07 +00:00
</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/>
2022-04-19 17:24:07 +00:00
<a href="/logout">Sign out</a>
</div>
<script>
function OTPInput() {
2022-11-11 11:26:02 +00:00
// Set form destination
document.getElementById("totp_form").action = location.href;
2022-11-12 17:18:48 +00:00
const inputs = [...document.querySelectorAll('#otp > *[id]')];
for (let i = 0; i < inputs.length; i++) {
// Reset form on init
inputs[i].value = "";
}
2022-11-12 17:18:48 +00:00
function getMergedCode() {
return inputs.map((i) => i.value).join("")
2022-11-12 17:04:27 +00:00
}
2022-11-12 17:18:48 +00:00
function submitCode() {
const code = getMergedCode();
document.getElementById("code").value = code;
document.getElementById("totp_form").submit();
}
document.addEventListener('keydown', (event) => {
2022-11-12 17:18:48 +00:00
let currCode = getMergedCode();
if (event.key === "Backspace" && currCode.length > 0) {
inputs[currCode.length - 1].value = "";
inputs[currCode.length - 1].focus();
}
2022-11-12 17:04:27 +00:00
});
2022-11-12 17:18:48 +00:00
function handleChange() {
2022-11-12 17:04:27 +00:00
// Remove non-numeric values from input
2022-11-12 17:18:48 +00:00
const fullCode = getMergedCode().replace(/[^0-9]/g, "").substring(0, 6);
for (let i = 0; i < 6; i++) {
inputs[i].value = i <= fullCode.length ? fullCode.substring(i, i + 1) : "";
}
2022-11-12 17:04:27 +00:00
2022-11-12 17:18:48 +00:00
if (fullCode.length === 6) {
2022-11-12 17:04:27 +00:00
submitCode();
}
else {
2022-11-12 17:18:48 +00:00
inputs[fullCode.length].focus()
}
2022-11-12 17:04:27 +00:00
}
2022-11-12 17:04:27 +00:00
// Listen to event on all inputs
for (let i = 0; i < 6; i++) {
2022-11-12 17:18:48 +00:00
inputs[i].addEventListener("change", () => handleChange())
inputs[i].addEventListener("keyup", () => handleChange())
2022-11-12 17:04:27 +00:00
}
}
document.addEventListener("DOMContentLoaded", () => OTPInput());
</script>
2022-04-19 17:24:07 +00:00
{% endblock content %}