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

Improve TOTP form

Browse Source 
Based on https://bbbootstrap.com/snippets/bootstrap-5-verify-otp-validation-form-inputs-78878858
This commit is contained in:
Pierre HUBERT 2022-04-20 11:59:16 +02:00
parent 0e02b63d93
commit 867021e01a
1 changed files with 67 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
templates/login/opt_input.html
View File

@ -1,17 +1,27 @@
{% extends "base_login_page.html" %}
{% block content %}
<style>
#otp input {
padding-left: 0px;
padding-right: 0px;
}
</style>
<div>
<p>Please go to your authenticator app <i>{{ factor.name }}</i>, generate a new code and enter it here:</p>
<form method="post" action="{{ factor.login_url(_p.redirect_uri) }}">
<form id="totp_form" method="post" action="{{ factor.login_url(_p.redirect_uri) }}">
<input type="hidden" id="code" name="code" />
<div class="form-group">
<label for="code" class="form-label mt-4">Generated code</label>
<input type="text" name="code" minlength="6" maxlength="6" class="form-control" id="code"
placeholder="XXXXXX" autofocus>
<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="1" autofocus/>
<input class="m-2 text-center form-control rounded" type="text" id="i2" maxlength="1"/>
<input class="m-2 text-center form-control rounded" type="text" id="i3" maxlength="1"/>
<input class="m-2 text-center form-control rounded" type="text" id="i4" maxlength="1"/>
<input class="m-2 text-center form-control rounded" type="text" id="i5" maxlength="1"/>
<input class="m-2 text-center form-control rounded" type="text" id="i6" maxlength="1"/>
</div>
</div>
<button class="w-100 btn btn-primary" type="submit" style="margin: 20px 0px;">Login</button>
</form>
</div>
@ -21,4 +31,53 @@
<a href="/logout">Sign out</a>
</div>
<script>
function OTPInput() {
const inputs = document.querySelectorAll('#otp > *[id]');
for (let i = 0; i < inputs.length; i++) {
// Reset form on init
inputs[i].value = "";
inputs[i].addEventListener('keydown', (event) => {
if (event.key === "Backspace") {
if (inputs[i].value != "") {
inputs[i].value = '';
} else if (i > 0) {
inputs[i - 1].value = "";
inputs[i - 1].focus();
}
}
// Code has already been typed entirely
else if (i === inputs.length - 1 && inputs[i].value !== '')
{
return;
}
// Add new digit
else if (event.keyCode >= 48 && event.keyCode <= 57) {
inputs[i].value = event.key;
if (i !== inputs.length - 1)
inputs[i + 1].focus();
else
submitCode();
}
event.preventDefault();
});
}
}
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 %}