{% extends "base.html" %}
{% block title %}Zwei-Faktor-Authentifizierung einrichten · FireDB Medienportal{% endblock %}
{% block content %}
<section class="mfa-card">
  <p class="eyebrow">Kontosicherheit</p><h1>Zwei-Faktor-Authentifizierung einrichten</h1>
  <p>Installieren Sie eine TOTP-kompatible App, zum Beispiel Microsoft Authenticator, Google Authenticator, 2FAS oder Aegis.</p>
  {% if error %}<div class="alert alert-error">{{ error }}</div>{% endif %}
  <div class="mfa-steps">
    <div><span>1</span><strong>QR-Code scannen</strong><p>Öffnen Sie Ihre Authenticator-App und fügen Sie ein Konto per QR-Code hinzu.</p></div>
    <img class="mfa-qr" src="{{ qr_data_uri }}" alt="Persönlicher QR-Code für die Authenticator-App">
    <a class="button button-secondary button-block" href="{{ provisioning_uri }}">Auf diesem Mobilgerät einrichten</a>
    <details><summary>Schlüssel manuell eingeben</summary><code class="mfa-secret">{{ secret }}</code></details>
    <div><span>2</span><strong>Einrichtung bestätigen</strong><p>Geben Sie den aktuell angezeigten sechsstelligen Code ein.</p></div>
    <form class="form-stack" method="post" action="{{ request.scope.get('root_path', '') }}/mfa/setup"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><label>Authenticator-Code<input name="code" type="text" inputmode="numeric" autocomplete="one-time-code" pattern="[0-9]{6}" maxlength="6" required autofocus></label><button class="button button-primary button-block" type="submit">MFA aktivieren</button></form>
  </div>
</section>
{% endblock %}