wizarr/app/templates/profile.html

<div class="container mx-auto px-4 py-8">
  <div class="max-w-4xl mx-auto">
    <!-- Profile Header -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
      <div class="flex items-center gap-4">
        <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center">
          <svg class="w-8 h-8 text-white"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z">
            </path>
          </svg>
        </div>
        <div>
          <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ current_user.username }}</h1>
          <p class="text-gray-600 dark:text-gray-400">{{ _("Administrator") }}</p>
        </div>
      </div>
    </div>
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <!-- Password Management -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <div class="flex items-center gap-3 mb-4">
          <svg class="w-6 h-6 text-gray-600 dark: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>
          <h2 class="text-xl font-semibold text-gray-900 dark:text-white">{{ _("Password") }}</h2>
        </div>
        <p class="text-gray-600 dark:text-gray-400 mb-4">{{ _("Change your account password for security.") }}</p>
        <form hx-post="/profile/change-password"
              hx-target="#password-result"
              hx-swap="innerHTML"
              class="space-y-4">
          <div>
            <label for="current-password"
                   class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              {{ _("Current Password") }}
            </label>
            <input type="password"
                   name="current_password"
                   id="current-password"
                   required
                   class="w-full px-3 py-2 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
          </div>
          <div>
            <label for="new-password"
                   class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              {{ _("New Password") }}
            </label>
            <input type="password"
                   name="new_password"
                   id="new-password"
                   required
                   class="w-full px-3 py-2 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
          </div>
          <div>
            <label for="confirm-password"
                   class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              {{ _("Confirm New Password") }}
            </label>
            <input type="password"
                   name="confirm_password"
                   id="confirm-password"
                   required
                   class="w-full px-3 py-2 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
          </div>
          <button type="submit"
                  class="w-full bg-primary hover:bg-primary_hover text-white font-medium py-2 px-4 rounded-lg transition-colors">
            {{ _("Change Password") }}
          </button>
        </form>
        <div id="password-result" class="mt-4"></div>
      </div>
      <!-- Passkey Management -->
      {% include 'components/passkey_management.html' %}
    </div>
  </div>
</div>