{% extends "layouts/main.html" %}

{% block main %}
  <div class="container">
    <div id="login-card" class="my-5">
      <div class="card">
        <div class="card-header">Enregistrement multifacteur (TOTP)</div>
        <div class="card-body">
          {% if MfaError %}
            <div class="alert alert-danger">{{ MfaError }}</div>
          {% endif %}

          <div class="lh-sm text-center">
            Le double facteur protège l’application et sécurise les données
            personnelles de nos camarades. Même en cas de vol de mot de passe,
            l’accès est bloqué sans une vérification supplémentaire.
          </div>

          <div class="my-4 text-center">
            <img src="{{ QrCode }}" alt="Code QR" />

            <div class="mt-2">
              <a
                href="javascript:;"
                data-bs-toggle="modal"
                data-bs-target="#modal-help"
              >
                <i class="bi-info-square"></i>
                Comment utiliser ce code QR ?
              </a>
            </div>
          </div>

          <form id="login" method="post">
            <div class="mb-3">
              <label for="secret" class="form-label">
                Secret (si pas possible de scanner le code QR)
              </label>
              <input
                id="secret"
                class="form-control"
                type="text"
                name="secret"
                disabled
                value="{{ Secret }}"
              />
            </div>
            <div class="mb-3">
              <label for="otp" class="form-label"> Code temporaire </label>
              <input
                id="otp"
                class="form-control"
                type="text"
                name="otp"
                required
                placeholder="000000"
                pattern="[0-9]{6}"
                autofocus
              />
            </div>
            <div class="text-end">
              <button class="btn btn-outline-primary" type="submit">
                <i class="me-1 bi-check-circle"></i>
                Vérifier
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <div id="modal-help" class="modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Aide</h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
          ></button>
        </div>
        <div class="modal-body">
          <ol>
            <li>
              <b>Téléchargez une application d’authentification :</b>
              Installez une application compatible TOTP (comme Google
              Authenticator, Microsoft Authenticator ou Authy) sur votre
              smartphone.
            </li>
            <li>
              <b>Scannez le code QR :</b>
              Ouvrez l'application, choisissez "Ajouter un compte" ou "Scanner
              un code QR", puis utilisez votre appareil pour scanner le QR code
              affiché.
            </li>
            <li>
              <b>Enregistrez le compte :</b>
              Une fois scanné, l'application générera un code à usage unique qui
              se renouvelle régulièrement.
            </li>
            <li>
              <b>Testez le code :</b>
              Entrez le code généré dans l'application pour confirmer
              l’enrôlement.
            </li>
          </ol>
        </div>
      </div>
    </div>
  </div>
{% endblock %}