{% extends "single.html" %}


{% block title %}
  MFA
{% endblock %}


{% block single_content %}
  <div class="card">
    <div class="card-body p-6">

      <div class="mb-2">
        Your account is protected with multi-factor authentication (MFA). <br><br>
        To continue with the sign-in you need to provide the access code from your authenticator.
      </div>

      <form method="post">
        {{ otp_token_form.csrf_token }}
        <input type="hidden" name="form-name" value="create">

        <div class="font-weight-bold mt-5">Token</div>
        <div class="small-text">Please enter the 6-digit number displayed in your MFA application
          (Google Authenticator, Authy, MyDigiPassword, etc) here
        </div>

        {{ otp_token_form.token(class="form-control", autofocus="true") }}
        {{ render_field_errors(otp_token_form.token) }}
        <button class="btn btn-success mt-2">Validate</button>
      </form>

      {% if enable_fido %}
        <div class="text-center text-muted mb-6" style="margin-top: 1em;">
          Having trouble with your authenticator? <br> <a href="{{ url_for('auth.fido') }}">Verify by your security
          key</a>
        </div>
      {% endif %}
    </div>
  </div>

{% endblock %}