{*
    Template representing the login token prompt
    Parameters:
        $url Form submit URL
        $method Form submit method
        $message Message from message stack (optional)
*}

{load_language_text section="login" name="login_text"}
{load_language_text section="twofactorauth" name="twofactorauth_text"}

{block name="twofactorauth_message"}
    {include file="get_usermod:{$alert_message_template_path}" message=$message type="danger"}
{/block}

{block name="twofactorauth_login"}
    {block name="twofactorauth_login_heading"}
        <h1>{$login_text.heading_login}</h1>
    {/block}

    {block name="twofactorauth_login_content"}
        <form action="{$url}" method="{$method}">
            <div class="row">
                <div class="col-xs-12 col-md-6 col-md-offset-3">
                    {$twofactorauth_text.login_token_prompt}

                    <div class="row">
                        <div class="col-xs-12">
                            <input type="number" pattern="\d*" class="form-control input-lg text-center" id="token-input" name="token">
                        </div>
                    </div>

                    <div class="row" style="margin-top: 12px;">
                        <div class="col-xs-12 col-md-4 col-md-offset-4 text-center">
                            <button id="submit-button" class="btn btn-primary" disabled>
                                {$twofactorauth_text.confirm}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    {/block}

    {block name="twofactorauth_login_script"}
        <script>
            {literal}
                const inputElement = document.getElementById('token-input');
                const finalizeButton = document.getElementById('submit-button');

                const ALLOWED_LENGTH = 6;

                function onInput() {
                    if (inputElement.value.length > ALLOWED_LENGTH) {
                        inputElement.value = inputElement.value.substring(0, ALLOWED_LENGTH);
                    }

                    const value = inputElement.value.trim();
                    const isValid = (value.length === ALLOWED_LENGTH && !isNaN(value));

                    finalizeButton.disabled = !isValid;
                }

                inputElement.focus();
                inputElement.addEventListener('input', onInput);
            {/literal}
        </script>
    {/block}
{/block}