{% extends 'base.html' %}
{% block page_content %}
<div class="app-hero">
    <h2>Login Security</h2>
    <p>Setup and authenticate two-factor authentication for your account.</p>
</div>

<form method="POST">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="row">
    <div class="col-lg-6">
        <div class="app-card">
            <h3>Instructions</h3>
            <ol style="padding-left: 1.2rem; margin-bottom: 1rem;">
                <li>Copy the secret token.</li>
                <li>Enter the secret in your authenticator app (LastPass, Enpass, Keepass, etc.).</li>
                <li>Save it.</li>
                <li>Enter a generated code on this page.</li>
                <li>Click "Verify and set".</li>
            </ol>
            <div class="form-group">
                <label for="secret">Secret token</label>
                <input type="text" class="form-control" name="secret" id="secret" value="{{ form.secret }}" readonly>
            </div>
            <button type="button" class="btn btn-outline-primary" onclick="copySecret()">
                <i class="fa fa-copy"></i> Copy secret
            </button>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="app-card">
            <h3>Verify</h3>
            {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                <div class="alert alert-{{ category }}" role="alert">{{ message }}</div>
                {% endfor %}
            {% endif %}
            {% endwith %}
            <div class="form-group">
                <label for="otp">Generated OTP</label>
                <input type="number" class="form-control" id="otp" name="otp" required autofocus>
            </div>
            <button type="submit" class="btn btn-primary">
                <i class="fa fa-check"></i> Verify and set
            </button>
        </div>
    </div>
</div>
</form>
<script>
  function copySecret() {
    var copyText = document.getElementById("secret");
    copyText.select();
    copyText.setSelectionRange(0, 99999);
    document.execCommand("copy");
  }
</script>
{% endblock %}