app/templates/dashboard/mfa_setup.html

{% 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 Google Authenticator or Authy 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 %}