{% extends "base.html" %}
{% block title %}Set up two-factor authentication — allowthem{% endblock %}
{% block body %}
<div class="flex min-h-screen justify-center px-4 py-12">
<div class="w-full max-w-md space-y-6">
<h1 class="text-2xl font-bold text-gray-900">Set up two-factor authentication</h1>
<p class="text-sm text-gray-600">
Scan the QR code with your authenticator app, or enter the secret key manually.
</p>
<div class="rounded border border-gray-200 bg-white p-4 space-y-3">
<div data-testid="totp-uri" class="text-xs text-gray-400 break-all">
{{ totp_uri }}
</div>
<div>
<span class="text-sm font-medium text-gray-700">Secret key:</span>
<code data-testid="totp-secret" class="ml-2 rounded bg-gray-100 px-2 py-1 text-sm font-mono text-gray-900">{{ secret }}</code>
</div>
</div>
{% if error %}
<div class="rounded bg-red-50 border border-red-200 p-3 text-sm text-red-700">
{{ error }}
</div>
{% endif %}
<form method="post" action="/settings/mfa/confirm" class="space-y-4">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
<div>
<label for="code" class="block text-sm font-medium text-gray-700">
Enter the 6-digit code from your authenticator app
</label>
<input type="text" id="code" name="code"
required autocomplete="one-time-code" inputmode="numeric"
maxlength="6" pattern="[0-9]{6}"
class="mt-1 block w-full rounded border border-gray-300 px-3 py-2
text-gray-900 focus:border-blue-500 focus:ring-1 focus:ring-blue-500">
</div>
<button type="submit"
class="rounded bg-blue-600 px-4 py-2 text-white font-medium
hover:bg-blue-700 focus:outline-none focus:ring-2
focus:ring-blue-500 focus:ring-offset-2">
Verify and enable
</button>
</form>
<p class="text-sm text-gray-500">
<a href="/settings" class="text-blue-600 hover:text-blue-700">Back to settings</a>
</p>
</div>
</div>
{% endblock %}