dictia-public/templates/auth/passkey_setup.html

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

{% block title %}Gérer mes passkeys — DictIA{% endblock %}
{% block description %}Gérez les passkeys de votre compte DictIA — second facteur sans mot de passe (FIDO2 / biométrie).{% endblock %}

{% block content %}
<section class="min-h-[calc(100vh-62px)] bg-brand-bg py-16 px-4" aria-labelledby="passkey-setup-title">
  <div class="max-w-2xl mx-auto bg-white p-8 rounded border border-brand-border shadow-cta">
    <h1 id="passkey-setup-title" class="text-3xl font-black text-brand-navy mb-2">Mes passkeys</h1>
    <p class="text-sm text-brand-navy/70 mb-6">{{ "Une passkey est un second facteur sans mot de passe (clé matérielle YubiKey, biométrie de votre appareil, etc.). Conforme&nbsp;Loi&nbsp;25." | safe }}</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 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 %}

    <h2 class="text-base font-semibold text-brand-navy mb-3">Passkeys enregistrées</h2>
    {% if credentials %}
      <ul class="space-y-2 mb-6" role="list">
        {% for cred in credentials %}
          <li class="flex items-center justify-between p-3 border border-brand-border rounded">
            <div>
              <p class="font-medium text-brand-navy">{{ cred.name }}</p>
              <p class="text-xs text-brand-navy/70">Ajoutée le {{ cred.created_at[:10] }}</p>
            </div>
            <form method="POST" action="{{ url_for('auth.passkey_delete', credential_id=cred.id) }}" onsubmit="return confirm('Supprimer cette passkey ?');">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <button type="submit" class="text-sm text-red-700 hover:text-red-900 font-medium focus-visible:outline-2 focus-visible:outline-red-700 focus-visible:outline-offset-2">
                Supprimer
              </button>
            </form>
          </li>
        {% endfor %}
      </ul>
    {% else %}
      <p class="text-sm text-brand-navy/70 mb-6">Aucune passkey enregistrée pour le moment.</p>
    {% endif %}

    <h2 class="text-base font-semibold text-brand-navy mb-3">Ajouter une passkey</h2>
    <div class="space-y-3">
      <label for="passkey-label" class="block text-sm font-medium text-brand-navy">Nom de la passkey (optionnel)</label>
      <input id="passkey-label" type="text" maxlength="80" placeholder="ex. YubiKey 5C, MacBook Touch ID..." class="w-full px-3 py-2 border border-brand-border rounded-none text-brand-navy focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2">
      <button id="passkey-register-btn" type="button" class="w-full grad-bg text-white font-semibold py-3 rounded-none shadow-cta hover:shadow-cta-hover transition focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2">
        Enregistrer une passkey
      </button>
      <p id="passkey-register-status" class="text-xs text-brand-navy/70" role="status" aria-live="polite"></p>
    </div>

    <p class="text-center text-sm mt-6 pt-4 border-t border-brand-border">
      <a href="{{ url_for('auth.account') }}" class="grad-text font-semibold">&larr; Retour à mon compte</a>
    </p>
  </div>
</section>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/webauthn-client.js') }}"></script>
<script>
  if (window.DictIAWebAuthn) {
    window.DictIAWebAuthn.wireRegisterButton({
      buttonId: 'passkey-register-btn',
      labelInputId: 'passkey-label',
      statusElementId: 'passkey-register-status',
      beginUrl: '{{ url_for("auth.passkey_register_begin") }}',
      finishUrl: '{{ url_for("auth.passkey_register_finish") }}',
      csrfToken: '{{ csrf_token() }}',
    });
  }
</script>
{% endblock %}