{% extends "baseTemplate/index.html" %}
{% load static %}
{# Enrolment / management page for an already-authenticated user. #}

{% block title %}Two-factor authentication{% endblock %}

{% block content %}
<div ng-controller="twoFactorController">

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Two-factor authentication</h1>
      <p class="text-muted mb-0 small">
        Add a time-based one-time code to <strong>{{ userName }}</strong> so a
        stolen password alone cannot sign in.
      </p>
    </div>
    <span class="badge rounded-pill {% if otpEnabled %}text-bg-success{% else %}text-bg-secondary{% endif %}">
      {% if otpEnabled %}Enabled{% else %}Not enabled{% endif %}
    </span>
  </div>

  <div class="alert alert-danger py-2 px-3" ng-show="errorMessage" ng-cloak role="alert">
    <i class="fas fa-triangle-exclamation me-1"></i>
    <span ng-bind="errorMessage"></span>
  </div>

  <div class="row g-4">
    <div class="col-lg-7">
      <div class="card h-100">
        <div class="card-body">

          {% if otpEnabled %}
            <h2 class="h6 mb-3">Disable two-factor authentication</h2>
            <p class="text-muted small">
              Your password is required. Disabling removes the stored secret —
              re-enabling later issues a new one, so you will need to scan a new
              QR code.
            </p>
            <form novalidate ng-submit="disable()">
              <div class="mb-3">
                <label class="form-label" for="cpPw">Current password</label>
                <input type="password" class="form-control" id="cpPw"
                       ng-model="password" autocomplete="current-password" required>
              </div>
              <button type="submit" class="btn btn-outline-danger" ng-disabled="busy">
                <i class="fas fa-shield-slash me-1"></i>
                <span ng-bind="busy ? 'Working…' : 'Disable 2FA'"></span>
              </button>
            </form>

          {% else %}
            <h2 class="h6 mb-3">Set up two-factor authentication</h2>

            <div ng-hide="enrolling">
              <p class="text-muted small">
                You will need an authenticator app such as Google Authenticator,
                Authy, or 1Password.
              </p>
              <button type="button" class="btn btn-primary"
                      ng-click="beginSetup()" ng-disabled="busy">
                <span ng-show="busy" class="spinner-border spinner-border-sm me-1"
                      role="status" aria-hidden="true"></span>
                <span ng-bind="busy ? 'Generating…' : 'Begin setup'"></span>
              </button>
            </div>

            <div ng-show="enrolling" ng-cloak>
              <ol class="small ps-3 mb-3">
                <li class="mb-2">Scan this QR code with your authenticator app.</li>
                <li class="mb-2">
                  Cannot scan? Enter this key manually:
                  <code class="user-select-all d-inline-block mt-1"
                        ng-bind="secret"></code>
                </li>
                <li>Enter the 6-digit code it shows to confirm.</li>
              </ol>

              <div class="text-center mb-3">
                <img ng-src="{$ qr $}" alt="Two-factor QR code"
                     class="img-fluid border rounded p-2 bg-white"
                     style="max-width:200px">
              </div>

              <form novalidate ng-submit="submitCode()">
                <div class="mb-3">
                  <label class="form-label" for="cpCode2">Confirmation code</label>
                  <input type="text" class="form-control" id="cpCode2"
                         ng-model="code" maxlength="8" inputmode="numeric"
                         autocomplete="one-time-code" spellcheck="false" required>
                </div>
                <button type="submit" class="btn btn-primary" ng-disabled="busy">
                  <span ng-bind="busy ? 'Verifying…' : 'Confirm and enable'"></span>
                </button>
              </form>
            </div>
          {% endif %}

        </div>
      </div>
    </div>

    <div class="col-lg-5">
      <div class="card h-100">
        <div class="card-body">
          <h2 class="h6 mb-3">
            <i class="fas fa-circle-info me-1 text-primary"></i>Before you enable this
          </h2>
          <ul class="small text-muted ps-3 mb-0">
            <li class="mb-2">
              Store the secret key somewhere safe. If you lose both your device
              and the key, an administrator with server access must clear
              <code>otpEnabled</code> for your account directly in the database.
            </li>
            <li class="mb-2">
              The code is accepted within a one-step window, so a clock skew of
              more than about 30 seconds on the server or your phone will cause
              valid codes to be rejected.
            </li>
            <li>
              Failed code attempts count toward the same lockout as failed
              passwords.
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{% static 'loginSystem/loginSystem.js' %}"></script>
{% endblock %}