{% extends "base.html" %}
{% block title %}Set up two-factor authentication - RadiusForge{% endblock %}
{% block content %}
    <div class="rf-page-head">
        <div>
            <h1>Set up two-factor authentication</h1>
        </div>
    </div>
    <p class="hint">In your authenticator app (Google Authenticator, Microsoft Authenticator, Authy,
       1Password and others), choose to add an account by entering a setup key, and type in the key
       below. Then enter the 6-digit code the app shows. Once it's on, you'll get recovery codes to
       save in case you ever lose the app.</p>

    <section class="rf-form-card">
        <p class="rf-field-label">Setup key</p>
        <p class="rf-code-box">{{ secret }}</p>

        <details class="rf-details">
            <summary>Setup link, for apps that accept one instead of a key</summary>
            <code class="rf-break">{{ uri }}</code>
        </details>

        {% if error %}<p class="errorlist">{{ error }}</p>{% endif %}

        <form method="post">
            {% csrf_token %}
            <label for="code">6-digit code from your app</label>
            <input type="text" id="code" name="code" inputmode="numeric" pattern="[0-9]*" maxlength="6" autocomplete="one-time-code">
            <div class="rf-form-actions">
                <button type="submit">Confirm and turn on</button>
                <a href="{% url 'security-settings' %}">Cancel</a>
            </div>
        </form>
    </section>
{% endblock %}