perfil/nuxt4/app/components/auth/EditProfileButton.vue

<template>
  <div>
    <UButton
      icon="i-heroicons-pencil-square"
      color="primary"
      variant="soft"
      :loading="isLoading"
      @click="openModal"
    >
      Editar Perfil
    </UButton>

    <UModal v-model:open="isOpen" title="Editar Perfil">
      <template #content>
        <div class="p-4 space-y-4">
          <UFormGroup label="Nombre Completo" name="name">
            <UInput
              v-model="formData.name"
              placeholder="Tu nombre completo"
              :disabled="isUpdating"
            />
          </UFormGroup>

          <UFormGroup label="Correo electrónico" name="email">
            <UInput
              v-model="formData.email"
              type="email"
              placeholder="tu@email.com"
              :disabled="isUpdating"
            />
          </UFormGroup>

          <UFormGroup label="Nombre de usuario" name="username">
            <UInput
              v-model="formData.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>

          <div class="flex justify-end gap-2 pt-4">
            <UButton
              color="neutral"
              variant="ghost"
              :disabled="isUpdating"
              @click="isOpen = false"
            >
              Cancelar
            </UButton>
            <UButton
              color="primary"
              :loading="isUpdating"
              @click="updateProfile"
            >
              Guardar Cambios
            </UButton>
          </div>
        </div>
      </template>
    </UModal>
  </div>
</template>

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

const isOpen = ref(false)
const isLoading = ref(false)
const isUpdating = ref(false)

const formData = ref({
  name: '',
  email: '',
  username: ''
})

const openModal = async () => {
  isLoading.value = true

  try {
    // Obtener información del usuario desde Authentik
    const userData = await $fetch<{
      name?: string
      email?: string
      username?: string
    }>('/api/authentik/user')

    formData.value = {
      name: userData.name || '',
      email: userData.email || '',
      username: userData.username || ''
    }

    isOpen.value = true
  } catch (error: any) {
    toast.add({
      title: 'Error',
      description: error.message || 'No se pudo cargar la información del usuario',
      color: 'error',
      icon: 'i-heroicons-x-circle'
    })
  } finally {
    isLoading.value = false
  }
}

const updateProfile = async () => {
  isUpdating.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: 'Los cambios se han guardado correctamente. Recarga la página para verlos.',
      color: 'success',
      icon: 'i-heroicons-check-circle',
      actions: [{
        label: 'Recargar',
        onClick: () => {
          window.location.reload()
        }
      }]
    })

    isOpen.value = false
  } catch (error: any) {
    toast.add({
      title: 'Error',
      description: error.message || 'No se pudo actualizar el perfil',
      color: 'error',
      icon: 'i-heroicons-x-circle'
    })
  } finally {
    isUpdating.value = false
  }
}
</script>