{% extends "admin/master.html" %}

{% from "macro/modal.html" import add_modal_button %}

{% do _template.plugin_manager.add_request_plugins(["qrcode", "modal"]) %}

{% block title %}{{ gettext("Set Up Two-Factor Authentication") }}{% endblock %}

{% block main %}
  <div>
    <div>Scan this QR code with your authenticator app:</div>
    <div id="qrimg" data-uri="{{ totp_uri }}"></div>
    <div>
      Or enter this secret manually: <b>{{ totp_secret }}</b>
    </div>
    {% if recovery_codes %}
      <div class="mt-3">
        <b>Save these new recovery codes:</b>
        <pre>{% for code in recovery_codes %}{{ code }}
{% endfor %}
</pre>
      </div>
    {% endif %}
  </div>
  {% if not current_user.tfa_enabled %}
    {{ add_modal_button(
      url=url_for(".enable_tfa", enable=True),
      title=gettext("Enable 2FA"),
      content=gettext("Enable 2FA"),
      fields=[{"name": "code", "label": gettext("2FA Code"), "type": "text", "required": true}],
      success_url=url_for(".profile")
    ) }}
  {% endif %}
{% endblock %}

{% block tail %}
  {{ super() }}
  <script>
    // generate QR code
    document.addEventListener("DOMContentLoaded",()=>{
      let qr = new QrCode(20, 'M');
      let text = document.getElementById('qrimg').dataset.uri;
      qr.addData(text);
      qr.make();
      const qrsvg = qr.createSvgTag(4,4);
      document.getElementById('qrimg').innerHTML = qrsvg;
    });
  </script>
{% endblock %}