{% 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>Scan this code with an iPhone or Android authenticator app, then enter its current six-digit code.</p>
    <img class="mfa-qr" src="{{ qr_code }}" alt="Scan this QR code with your authenticator app to add your Eternity Project account">
    <details class="mfa-manual"><summary>Enter setup key manually</summary><code class="mfa-secret">{{ secret }}</code></details>
    {% 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">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <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 %}