BasicOIDC/templates/login/otp_input.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 getMergedCode() {
        return inputs.map((i) => i.value).join("")
    }

    function submitCode() {
        const code = getMergedCode();

        document.getElementById("code").value = code;
        document.getElementById("totp_form").submit();
    }

    document.addEventListener('keydown', (event) => {
        let currCode = getMergedCode();
        if (event.key === "Backspace" && currCode.length > 0) {
            inputs[currCode.length - 1].value = "";
            inputs[currCode.length - 1].focus();
        }
    });

    function handleChange() {
        // Remove non-numeric values from input
        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) : "";
        }
        
        if (fullCode.length === 6) {
            submitCode();
        }
        else {
           inputs[fullCode.length].focus()
        }
    }

    // Listen to event on all inputs
    for (let i = 0; i < 6; i++) {
        inputs[i].addEventListener("change", () => handleChange())
        inputs[i].addEventListener("keyup", () => handleChange())
    }

}

document.addEventListener("DOMContentLoaded", () => OTPInput());
</script>

{% endblock content %}