0% found this document useful (0 votes)
5 views

2fa

Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
5 views

2fa

Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<script type="text/javascript"

src="https://cdn.fsksoft.com/lottie-player.js"></script>
<div class="container">
<div class="grid-container">
<div class="col-span-12">
<div class="auth-screen-container">
<div class="sms-verify">
<div class="verify-icon" id="verify-icon">
<lottie-player class="verify-aminate"
src="https://cdn.fsksoft.com/assets/js/lock.json" background="transparent"
speed="1" loop="" autoplay=""></lottie-player>
</div>
<div class="verify-title">{{ lang('2fa.title') }}</div>
<div class="verify-small-text">{{ lang('2fa.sent') }}</div>
<div class="verify-form">
<form method="post" action="{{ page['url'] }}">
<div class="verify-input-box">
<input class="form-control verify-input"
type="number" maxlength="1" pattern="[0-9]" required="" autofocus="">
<input class="form-control verify-input"
type="number" maxlength="1" pattern="[0-9]" required="">
<input class="form-control verify-input"
type="number" maxlength="1" pattern="[0-9]" required="">
<input class="form-control verify-input"
type="number" maxlength="1" pattern="[0-9]" required="">
<input class="form-control verify-input"
type="number" maxlength="1" pattern="[0-9]" required="">
<input class="form-control verify-input"
type="number" maxlength="1" pattern="[0-9]" required="">
</div>
<input type="hidden" name="code" id="code"
autocomplete="off">
<input type="hidden" name="_csrf"
value="{{csrftoken}}">
<button type="submit" class="btn btn-main btn-block
btn-lg border-10 text-center">{{ lang('2fa.continue') }}</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
const inputs = document.querySelectorAll(".verify-input");
const form = document.querySelector('form');
const codeInput = document.getElementById('code');
const submitButton = document.querySelector('.btn');

inputs[0].focus();

inputs.forEach((input, idx) => {


input.addEventListener('input', () => {
if (input.value.length === 1 && idx < inputs.length - 1) {
inputs[idx + 1].focus();
}
if (idx === inputs.length - 1 && input.value.length === 1) {
submitButton.focus();
}
});
input.addEventListener('keydown', (e) => {
if (e.key === "Backspace" && input.value === '' && idx > 0) {
inputs[idx - 1].focus();
}
});
});

submitButton.addEventListener('click', (e) => {


e.preventDefault();
let code = '';
inputs.forEach(input => {
code += input.value;
});
codeInput.value = code;
form.submit();
});
});
</script>

You might also like