{% extends "default.html" %}

{% set active_page = "setting" %}
{% block title %}MFA Setup{% endblock %}
{% block head %}

  <script src="{{ url_for('static', filename='node_modules/qrious/dist/qrious.min.js') }}"></script>
{% endblock %}
{% block default_content %}

  <div class="card">
    <div class="card-body">
      <h1 class="h3">Two Factor Authentication - TOTP</h1>
      <p>
        You will need to use a 2FA application like Proton Pass or Aegis on your phone or PC and scan the following QR Code:
      </p>
      <canvas id="qr"></canvas>
      <script>
        (function () {
          var qr = new QRious({
            element: document.getElementById('qr'),
            value: '{{otp_uri}}'
          });
        })();
      </script>
      <div class="mt-3 mb-2">Or you can manually enter the following secret key:</div>
      <input class="form-control" disabled value="{{ current_user.otp_secret }}">
      <form method="post">
        {{ otp_token_form.csrf_token }}
        <div class="font-weight-bold mt-5">Token</div>
        <div class="small-text">Please enter the 6-digit number displayed in your authenticator app.</div>
        {{ otp_token_form.token(class="form-control", placeholder="") }}
        {{ render_field_errors(otp_token_form.token) }}
        <button class="btn btn-lg btn-success mt-2">Submit</button>
      </form>
    </div>
  </div>
{% endblock %}