{% extends "horizon/common/_modal_form.html" %}
{% load i18n %}

{% block modal-header %}
<h2>Configure Two Factors Authentication</h2>
   <div class="panel panel-info">
      <div class="panel-heading">
        <h3 class="panel-title">Activation</h3>
      </div>
      <div class="panel-body"><h4>To enable 2FA authentication please scan the QRCode bellow or copy the secret and paste it on your 2FA application.</h4></div>
      <div align="center"><img src="{{ form.seed.value }}/qr"></div>
      <div align="center">
        <div style="width: 490px;">
           <input type="text" value="{{ form.seed.value }}" id="secretKey" style="width: 60%;">
           <button onclick="paste2clipboard()">Copy to Clipboard</button>
      </div>
    </div>
    <p/>
    <div class="panel panel-warning" style="width: 96%; margin: 4% auto;">
      <div class="panel-heading">
        <h3 class="panel-title">Attention!</h3>
      </div>
      <div class="panel-body"><h5>If you have problems with authentication/verification, make sure your device time is synced with an NTP server and let 30 seconds pass before retrying.</h5></div>
    </div>
{% endblock %}

{% block modal-body-right %}
    <h3>{% trans "Token Validation Form" %}</h3>
    <p>{% trans "Scan the QRCode with yout mobile authentication device (Google Authenticator is fine) and the verify the TOTP token." %}</p>
    <p>{% trans "Once the token has been verified, TOTP Two Factor Authentication will be enabled for your user." %}</p>
    <script type="text/javascript">
        if (typeof horizon.user !== 'undefined') {
            horizon.user.init();
        } else {
            addHorizonLoadEvent(function () {
                horizon.user.init();
            });
        }

        function paste2clipboard() {
                 /* Get the text field */
                var copyText = document.getElementById("secretKey");

                /* Select the text field */
                copyText.select();
                copyText.setSelectionRange(0, 99999); /* For mobile devices */

                /* Copy the text inside the text field */
                navigator.clipboard.writeText(copyText.value);

                /* Alert the copied text */
                alert("The secret is copied to clipboard");
        }
    </script>
{% endblock %}