{% extends "admin/_base.html" %}
{% block content %}
<div class="rio-form-shell">
<header class="rio-page-header">
<nav class="rio-breadcrumbs">
<a href="/admin">Home</a> ยท <span>Two-factor authentication</span>
</nav>
<h1>Set up two-factor authentication</h1>
<p class="rio-page-header__lead">
Scan the code with your authenticator app or enter the manual key,
then type the 6-digit code your app shows you to finish setup.
</p>
</header>
{% if error %}
<div class="rio-flash rio-flash--error" role="alert">{{ error }}</div>
{% endif %}
<section class="rio-card">
<div class="rio-form-row">
<span class="rio-label">Authenticator URL</span>
<a href="{{ otpauth_url }}" class="rio-link rio-link--otpauth" rel="noopener">
Open in authenticator app
</a>
</div>
<div class="rio-form-row">
<span class="rio-label">Manual setup key</span>
<code class="rio-code-block">{{ secret_base32 }}</code>
</div>
<form method="post" action="/admin/account/mfa/enroll" class="rio-form" autocomplete="off">
<input type="hidden" name="_csrf" value="{{ csrf_token }}">
<input type="hidden" name="secret_base32" value="{{ secret_base32 }}">
<div class="rio-form-row">
<label class="rio-label" for="rio-mfa-enroll-code">6-digit code from your app</label>
<input
type="text"
id="rio-mfa-enroll-code"
name="code"
inputmode="numeric"
pattern="[0-9]{6}"
maxlength="6"
autocomplete="one-time-code"
autofocus
required
placeholder="123456"
class="rio-input"
>
</div>
<div class="rio-form-actions">
<a href="/admin" class="rio-button rio-button--ghost">Cancel</a>
<span class="rio-form-actions-spacer" aria-hidden="true"></span>
<button type="submit" class="rio-button rio-button--primary">Verify and enable</button>
</div>
</form>
</section>
</div>
{% endblock %}