{% extends "forms/field.html.twig" %}

{% block input %}
    <div class="form-input-wrapper twofa-wrapper">
        {% try %}
            {% set viewer = grav.user %}
            {% set user = form.object ?? viewer %}

            {# The secret and its QR code are shown only for the signed-in member's own account #}
            {% if viewer.username and user.username == viewer.username %}
                {% set secret = user.twofa_secret ?: grav.login.twoFactorAuth.createSecret() %}
                {% set image = grav.login.twoFactorAuth.getQrImageData(user.username, secret) %}

                <img style="border: 1px solid #ddd" data-2fa-image src="{{ image }}" />
                <div>
                    <span>{{ 'PLUGIN_LOGIN.2FA_SECRET'|t }}: </span><span class="twofa-secret-code" data-2fa-secret>{{ secret|regex_replace('/(\\w{4})/', '\\1 ') }}</span>
                </div>

                <div class="danger twofa-wrapper">
                    <button data-hint="{{ 'PLUGIN_LOGIN.2FA_REGEN_HINT'|t }}" class="button button-small hint--bottom" data-2fa-regenerate><i class="fa fa-fw fa-refresh"></i> {{ 'PLUGIN_LOGIN.2FA_REGENERATE'|t }}</button>
                    <p class="form-errors twofa-regenerate-error" data-2fa-error role="alert" style="display:none;"></p>
                    {# CSRF token read by 2fa.js when POSTing the regenerate task (GHSA-4px8) #}
                    {{ nonce_field('login-form', 'login-form-nonce')|raw }}
                </div>

                <input type="text" class="no-form" style="display:none;" name="{{ (scope ~ field.name)|fieldName }}" data-2fa-value value="{{ secret }}" />

            {% endif %}

        {% catch %}
            <div class="notice error">
                <p>{{ e.message }}</p>
            </div>
        {% endcatch %}
    </div>

    {# jQuery goes in 'bottom' so it still loads on themes that write the head group
       out before the form renders. If the theme registered it already, leave that
       alone: assets are keyed by path, so adding it again would move the theme's
       own copy out of the head. #}
    {% set jquery_src = assets.getCollections().jquery ?? 'jquery' %}
    {% if jquery_src is iterable or assets.getJs(jquery_src) is null %}
        {% do assets.addJs('jquery', { 'group': 'bottom', 'priority': 101 }) %}
    {% endif %}
    {% do assets.addJs('plugin://login/js/2fa.js', { 'group': 'bottom', 'loading': 'defer' }) %}
{% endblock %}