perfil/nuxt4/app/components/UserHeader.vue

<template>
  <div class="user-header">
    <!-- Header principal -->
    <div class="header-content">
      <!-- Avatar -->
      <div class="avatar-section">
        <UAvatar
          v-if="user"
          :src="user.avatar"
          :alt="user.name || user.username"
          size="xl"
          class="avatar-glow"
        />
      </div>

      <!-- Info del usuario -->
      <div class="user-info">
        <div class="user-name-row">
          <h1 class="user-name">{{ user?.name || user?.username }}</h1>
          <button class="edit-button" @click.stop="openEditProfile" title="Editar perfil">
            <UIcon name="i-heroicons-pencil-square" class="w-4 h-4" />
          </button>
        </div>
        <p class="user-email">{{ user?.email }}</p>
        <div class="user-badges">
          <UBadge
            v-for="group in user?.groups.slice(0, 3)"
            :key="group"
            size="sm"
            color="primary"
            variant="solid"
            class="solid-badge"
          >
            {{ group }}
          </UBadge>
          <UBadge
            v-if="user && user.groups.length > 3"
            size="sm"
            color="neutral"
            variant="solid"
            class="solid-badge"
          >
            +{{ user.groups.length - 3 }}
          </UBadge>
        </div>
      </div>
    </div>

    <!-- Botón de tema -->
    <button class="theme-toggle" @click.stop="toggleTheme" :title="isNight ? 'Cambiar a modo día' : 'Cambiar a modo noche'">
      <transition name="theme-icon" mode="out-in">
        <UIcon v-if="isNight" key="moon" name="i-heroicons-moon" class="w-6 h-6" />
        <UIcon v-else key="sun" name="i-heroicons-sun" class="w-6 h-6" />
      </transition>
    </button>

    <!-- Modal de edición de perfil -->
    <UModal v-model:open="isEditModalOpen" title="Editar Perfil">
      <template #content>
        <div class="p-4 space-y-4">
          <UFormGroup label="Nombre de usuario" name="username">
            <UInput
              :model-value="user?.username"
              disabled
              :ui="{ base: 'cursor-not-allowed opacity-50' }"
            />
            <template #help>
              <span class="text-xs text-gray-500">El username no se puede cambiar</span>
            </template>
          </UFormGroup>

          <UFormGroup label="Nombre completo" name="name" required>
            <UInput
              v-model="formData.name"
              placeholder="Tu nombre completo"
              :disabled="isSubmitting"
            />
          </UFormGroup>

          <UFormGroup label="Email" name="email" required>
            <UInput
              v-model="formData.email"
              type="email"
              placeholder="tu@email.com"
              :disabled="isSubmitting"
            />
          </UFormGroup>

          <div class="flex justify-end gap-3 pt-4">
            <UButton
              color="neutral"
              variant="ghost"
              @click="isEditModalOpen = false"
              :disabled="isSubmitting"
            >
              Cancelar
            </UButton>
            <UButton
              color="primary"
              :loading="isSubmitting"
              @click="handleSubmit"
            >
              Guardar cambios
            </UButton>
          </div>
        </div>
      </template>
    </UModal>
  </div>
</template>

<script setup lang="ts">
const { user } = useAuthentik()
const { isNight, toggleTheme } = useTheme()
const toast = useToast()

// Estado del modal
const isEditModalOpen = ref(false)
const isSubmitting = ref(false)

// Datos del formulario
const formData = ref({
  name: user.value?.name || '',
  email: user.value?.email || ''
})

// Abrir modal de edición
const openEditProfile = () => {
  if (user.value) {
    formData.value = {
      name: user.value.name || '',
      email: user.value.email || ''
    }
    isEditModalOpen.value = true
  }
}

// Enviar formulario
const handleSubmit = async () => {
  if (!formData.value.name || !formData.value.email) {
    toast.add({
      title: 'Error',
      description: 'Por favor completa todos los campos',
      color: 'error',
      icon: 'i-heroicons-exclamation-triangle'
    })
    return
  }

  isSubmitting.value = true

  try {
    await $fetch('/api/authentik/user', {
      method: 'PATCH',
      body: {
        name: formData.value.name,
        email: formData.value.email
      }
    })

    toast.add({
      title: 'Perfil actualizado',
      description: 'Tus cambios se guardaron correctamente. Recarga la página para verlos.',
      color: 'success',
      icon: 'i-heroicons-check-circle',
      actions: [{
        label: 'Recargar',
        onClick: () => window.location.reload()
      }]
    })

    isEditModalOpen.value = false
  } catch (error) {
    console.error('Error updating profile:', error)
    toast.add({
      title: 'Error',
      description: 'No se pudo actualizar el perfil',
      color: 'error',
      icon: 'i-heroicons-x-circle'
    })
  } finally {
    isSubmitting.value = false
  }
}
</script>

<style scoped>
.user-header {
  position: relative;
  margin-bottom: 2rem;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: 1.5rem;
  box-shadow:
    0 8px 32px 0 rgba(31, 38, 135, 0.15),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.avatar-section {
  flex-shrink: 0;
}

.avatar-glow {
  box-shadow: 0 0 20px rgba(var(--color-primary-500), 0.4);
  transition: box-shadow 0.3s ease;
}

.user-info {
  flex: 1;
  min-width: 0;
}

.user-name-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.user-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  color: var(--color-gray-900);
  transition: color 0.3s ease;
}

.user-email {
  font-size: 0.875rem;
  color: var(--color-gray-600);
  margin: 0.25rem 0 0.75rem 0;
}

.user-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.solid-badge {
  box-shadow:
    0 2px 8px 0 rgba(0, 0, 0, 0.15),
    inset 0 -1px 2px 0 rgba(0, 0, 0, 0.2),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.solid-badge:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 12px 0 rgba(0, 0, 0, 0.2),
    inset 0 -1px 2px 0 rgba(0, 0, 0, 0.2),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
}

.edit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  background: transparent;
  border: none;
  color: var(--color-gray-400);
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 0.375rem;
}

.edit-button:hover {
  color: rgb(var(--color-primary-500));
  background: rgba(var(--color-primary-500), 0.1);
}

.theme-toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(15px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgb(var(--color-primary-500));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 4px 16px 0 rgba(31, 38, 135, 0.2),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
  z-index: 10;
}

.theme-toggle:hover {
  transform: scale(1.15) rotate(20deg) translateY(-2px);
  box-shadow:
    0 8px 24px 0 rgba(31, 38, 135, 0.3),
    0 0 0 1px rgba(var(--color-primary-500), 0.5),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
}

.theme-icon-enter-active,
.theme-icon-leave-active {
  transition: all 0.3s ease;
}

.theme-icon-enter-from {
  opacity: 0;
  transform: rotate(-180deg) scale(0);
}

.theme-icon-leave-to {
  opacity: 0;
  transform: rotate(180deg) scale(0);
}

/* Responsive */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem 1rem;
  }

  .theme-toggle {
    top: 0.5rem;
    right: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
  }

  .user-name {
    font-size: 1.25rem;
  }

  .user-badges {
    justify-content: center;
  }
}
</style>

<style>
/* Estilos de modo oscuro (sin scoped para que .dark funcione correctamente) */
.dark .header-content {
  background: rgba(0, 0, 0, 0.15) !important;
  box-shadow:
    0 8px 32px 0 rgba(0, 0, 0, 0.5),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dark .header-content:hover {
  box-shadow:
    0 12px 40px 0 rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(var(--color-primary-500), 0.6),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.dark .user-name {
  color: var(--color-gray-100) !important;
}

.dark .user-email {
  color: var(--color-gray-300) !important;
  font-weight: 600;
}

.dark .theme-toggle {
  background: rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 4px 16px 0 rgba(0, 0, 0, 0.5),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.dark .theme-toggle:hover {
  box-shadow:
    0 8px 24px 0 rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(var(--color-primary-500), 0.7),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.1) !important;
}
</style>