{% extends 'base.html' %}
{% block title %}Multi-factor verification | Eternity Project{% endblock %}
{% block content %}
<section class="auth-layout">
  <div class="auth-copy">
    <span class="signal-label">ACCOUNT SECURITY</span>
    {% if mode == 'setup' %}
    <h1>Bind your<br>authenticator.</h1>
    <p>Add this secret to an authenticator app as a time-based one-time password account, then enter its current six-digit code.</p>
    <code class="mfa-secret">{{ secret }}</code>
    {% else %}
    <h1>Confirm the<br>signal.</h1>
    <p>Open your authenticator application and enter the current code for {{ username }}.</p>
    {% endif %}
  </div>
  <form class="auth-form" method="post">
    <label>Authenticator code<input name="code" inputmode="numeric" autocomplete="one-time-code" required pattern="[0-9]{6}" maxlength="6" placeholder="000000"></label>
    <button class="button" type="submit">Verify account <span aria-hidden="true">→</span></button>
  </form>
</section>
{% endblock %}