wizarr/app/templates/components/admin_passkeys.html

<!-- Admin Passkey Management Component -->
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm">
  <div class="flex items-center justify-between mb-4">
    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ _("Passkeys for {}").format(admin.username) }}</h3>
    <button type="button"
            onclick="closeModal()"
            class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
      </svg>
    </button>
  </div>
  {% if passkeys %}
    <div class="space-y-3">
      {% for passkey in passkeys %}
        <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
          <div class="flex items-center space-x-3">
            <div class="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
              <svg class="w-5 h-5 text-blue-600 dark:text-blue-400"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                </path>
              </svg>
            </div>
            <div>
              <p class="font-medium text-gray-900 dark:text-white">{{ passkey.name }}</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">
                {{ _("Created") }}: {{ passkey.created_at.strftime("%Y-%m-%d %H:%M") }}
              </p>
              {% if passkey.last_used_at %}
                <p class="text-sm text-gray-500 dark:text-gray-400">
                  {{ _("Last used") }}: {{ passkey.last_used_at.strftime("%Y-%m-%d %H:%M") }}
                </p>
              {% endif %}
            </div>
          </div>
          <div class="flex space-x-2">
            <button type="button"
                    onclick="deletePasskey({{ passkey.id }})"
                    class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
                </path>
              </svg>
            </button>
          </div>
        </div>
      {% endfor %}
    </div>
    <div class="mt-6 flex justify-between">
      <button type="button"
              onclick="resetAllPasskeys({{ admin.id }}, '{{ admin.username }}')"
              class="px-4 py-2 text-sm font-medium text-red-600 bg-red-50 dark:bg-red-900 dark:text-red-300 border border-red-300 dark:border-red-600 rounded-lg hover:bg-red-100 dark:hover:bg-red-800">
        {{ _("Reset All Passkeys") }}
      </button>
      <button type="button"
              onclick="closeModal()"
              class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600">
        {{ _("Close") }}
      </button>
    </div>
  {% else %}
    <div class="text-center py-8">
      <svg class="mx-auto h-12 w-12 text-gray-400"
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
        </path>
      </svg>
      <p class="mt-4 text-gray-500 dark:text-gray-400">{{ _("No passkeys registered for this user.") }}</p>
      <button type="button"
              onclick="closeModal()"
              class="mt-4 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600">
        {{ _("Close") }}
      </button>
    </div>
  {% endif %}
</div>
<script>
    function deletePasskey(passkeyId) {
        if (confirm('{{ _("Are you sure you want to delete this passkey?") }}')) {
            fetch(`/webauthn/credentials/${passkeyId}`, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload();
                    } else {
                        alert('{{ _("Failed to delete passkey") }}');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('{{ _("An error occurred while deleting the passkey") }}');
                });
        }
    }

    function resetAllPasskeys(adminId, username) {
        if (confirm(`{{ _("Are you sure you want to reset ALL passkeys for {}?").format('${username}') }} {{ _("This action cannot be undone.") }}`)) {
            fetch(`/settings/admins/${adminId}/reset-passkeys`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                })
                .then(response => {
                    if (response.ok) {
                        alert('{{ _("All passkeys have been reset") }}');
                        location.reload();
                    } else {
                        alert('{{ _("Failed to reset passkeys") }}');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('{{ _("An error occurred while resetting passkeys") }}');
                });
        }
    }

    function closeModal() {
        // Close modal logic - depends on your modal implementation
        if (window.parent && window.parent.closeModal) {
            window.parent.closeModal();
        } else {
            window.close();
        }
    }
</script>