dictia-public/templates/auth/totp_verify.html

{% extends 'marketing/base.html' %}

{% block title %}Vérification 2FA — DictIA{% endblock %}
{% block description %}Saisissez votre code à 6 chiffres pour terminer la connexion à votre compte DictIA.{% endblock %}

{% block content %}
<section class="min-h-[calc(100vh-62px)] bg-brand-bg py-16 px-4" aria-labelledby="totp-verify-title">
  <div class="max-w-md mx-auto bg-white p-8 rounded-[18px] border border-brand-border shadow-cta">
    <h1 id="totp-verify-title" class="text-3xl font-black text-brand-navy mb-2">Vérification en deux étapes</h1>
    <p class="text-sm text-brand-navy/70 mb-6">Entrez le code à 6 chiffres affiché dans votre application authenticator pour terminer la connexion.</p>

    {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
        {% for category, message in messages %}
          <div role="alert" class="mb-3 p-3 rounded-lg text-sm
            {% if category == 'danger' %}bg-red-50 text-red-900 border border-red-200
            {% elif category == 'warning' %}bg-amber-50 text-amber-900 border border-amber-200
            {% elif category == 'success' %}bg-green-50 text-green-900 border border-green-200
            {% else %}bg-blue-50 text-blue-900 border border-blue-200{% endif %}">
            {{ message }}
          </div>
        {% endfor %}
      {% endif %}
    {% endwith %}

    {% if error %}
      <div role="alert" class="mb-4 p-3 rounded-lg text-sm bg-red-50 text-red-900 border border-red-200">{{ error }}</div>
    {% endif %}

    {# B-2.6: Passkey path (only if user has at least one registered passkey) #}
    {% if has_passkeys %}
    <section class="mb-6" aria-labelledby="passkey-section-title">
      <h2 id="passkey-section-title" class="text-base font-semibold text-brand-navy mb-3">Connexion par Passkey</h2>
      <button id="passkey-auth-btn" type="button" class="w-full grad-bg text-white font-semibold py-3 rounded-[0.75rem] shadow-cta hover:shadow-cta-hover transition focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2">
        Utiliser ma Passkey
      </button>
      <p id="passkey-status" class="text-xs text-brand-navy/70 mt-2" role="status" aria-live="polite"></p>
    </section>

    {% if has_totp %}
    <div class="my-4 flex items-center gap-3 text-xs uppercase tracking-wider text-brand-navy/50" aria-hidden="true">
      <span class="flex-1 h-px bg-brand-border"></span><span>ou</span><span class="flex-1 h-px bg-brand-border"></span>
    </div>
    {% endif %}
    {% endif %}

    {% if has_totp %}
    {# Primary path: 6-digit TOTP code #}
    <form method="POST" action="{{ url_for('auth.totp_verify_login') }}" class="space-y-4" novalidate>
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

      <div>
        <label for="code" class="block text-sm font-medium text-brand-navy mb-1">Code à 6 chiffres <span class="text-red-600" aria-hidden="true">*</span></label>
        <input type="text" id="code" name="code"
               inputmode="numeric" autocomplete="one-time-code"
               pattern="[0-9]{6}" maxlength="6"
               class="w-full px-3 py-3 border border-brand-border rounded-[0.5rem] text-brand-navy text-center text-2xl font-mono tracking-widest focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2"
               placeholder="000000" autofocus>
      </div>

      <button type="submit" class="w-full grad-bg text-white font-semibold py-3 rounded-[0.75rem] shadow-cta hover:shadow-cta-hover transition focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2">
        Vérifier et se connecter
      </button>
    </form>

    {# Secondary path: recovery code (collapsed by default for clarity) #}
    <details class="mt-6 border-t border-brand-border pt-4">
      <summary class="cursor-pointer text-sm font-semibold text-brand-navy hover:text-brand-b1 focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2">
        Pas accès à votre application authenticator&nbsp;? Utiliser un code de récupération
      </summary>
      <form method="POST" action="{{ url_for('auth.totp_verify_login') }}" class="space-y-4 mt-4" novalidate>
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div>
          <label for="recovery_code" class="block text-sm font-medium text-brand-navy mb-1">Code de récupération <span class="text-red-600" aria-hidden="true">*</span></label>
          <input type="text" id="recovery_code" name="recovery_code"
                 autocomplete="off"
                 class="w-full px-3 py-2 border border-brand-border rounded-[0.5rem] text-brand-navy font-mono uppercase focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2"
                 placeholder="XXXXX-XXXXX">
          <p class="text-xs text-brand-navy/60 mt-1">Format&nbsp;: 5 caractères + tiret + 5 caractères. Chaque code est à usage unique.</p>
        </div>
        <button type="submit" class="w-full bg-brand-navy text-white font-semibold py-3 rounded-[0.75rem] hover:bg-brand-navy2 transition focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2">
          Utiliser le code de récupération
        </button>
        <p class="text-xs text-brand-navy/60 text-center" aria-live="polite">{{ recovery_codes_remaining }} code{{ 's' if recovery_codes_remaining != 1 else '' }} de récupération restant{{ 's' if recovery_codes_remaining != 1 else '' }}.</p>
      </form>
    </details>
    {% endif %}

    <p class="text-center text-sm text-brand-navy/70 mt-6 pt-4 border-t border-brand-border">
      <a href="{{ url_for('auth.logout') }}" class="grad-text font-semibold">Annuler la connexion</a>
    </p>
  </div>
</section>
{% endblock %}

{% block scripts %}
{% if has_passkeys %}
<script src="{{ url_for('static', filename='js/webauthn-client.js') }}"></script>
<script>
  if (window.DictIAWebAuthn) {
    window.DictIAWebAuthn.wireAuthButton({
      buttonId: 'passkey-auth-btn',
      statusElementId: 'passkey-status',
      beginUrl: '{{ url_for("auth.passkey_auth_begin") }}',
      finishUrl: '{{ url_for("auth.passkey_auth_finish") }}',
      csrfToken: '{{ csrf_token() }}',
    });
  }
</script>
{% endif %}
{% endblock %}