{% extends 'users/_base_otp.html' %}
{% load static %}
{% load i18n %}

{% block small_title %}
    {% trans 'Bind one-time password authenticator' %}
{% endblock %}

{% block content %}
    <div class="verify">
        <p style="margin:20px auto;">
            <strong style="color: #000000">
            {% trans 'Use the MFA Authenticator application to scan the following qr code for a 6-bit verification code' %}
            </strong>
        </p>

        <div id="qr_code"></div>
        <div style="display: block; margin: 0">Secret: {{ otp_secret_key }}</div>
        <form class="" role="form" method="post" action="">
            {% csrf_token %}
            <div class="form-input">
                <input type="text" class="" name="otp_code" placeholder="{% trans 'Six figures' %}" required="">
            </div>
            <button type="submit" class="next">{% trans 'Next' %}</button>
            {% if 'otp_code' in form.errors %}
                <p style="color: #ed5565">{{ form.otp_code.errors.as_text }}</p>
            {% endif %}
        </form>
    </div>


    <script>
        $('.change-color li:eq(1) i').css('color', '#1ab394');
        $('.change-color li:eq(2) i').css('color', '#1ab394');

        $(document).ready(function() {
            // 生成用户绑定otp的二维码
            var qrcode = new QRCode(document.getElementById('qr_code'), {
                text: "{{ otp_uri|safe}}",
                width: 180 ,
                height: 180,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctlevel: QRCode.CorrectLevel.H
            });

            document.getElementById('qr_code').removeAttribute("title");
        })

    </script>



{% endblock %}

