{% extends 'default.html' %}
{% set active_page = "setting" %}
{% block title %}
  MFA Setup
{% endblock %}

{% block head %}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
{% endblock %}

{% block default_content %}
  <div class="bg-white p-6" style="max-width: 60em; margin: auto">
    <h1 class="h2">Multi Factor Authentication</h1>
    <p>Please open a TOTP application (Google Authenticator, Authy, etc)
      on your smartphone 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 use the manual entry with the following key:
    </div>

    <div class="mb-3 p-3" style="background-color: #eee">
      {{ current_user.otp_secret }}
    </div>


    <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 on your phone.</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">Validate</button>
    </form>


  </div>
{% endblock %}