perfil/nuxt4/app/components/UserProfileForm.vue

<template>
  <div class="profile-form-container">
    <div class="form-header">
      <div class="flex items-center justify-between mb-4">
        <h2 class="form-title">
          <UIcon name="i-heroicons-user-circle" class="w-6 h-6" />
          Editar Perfil
        </h2>
        <UButton
          color="neutral"
          variant="ghost"
          icon="i-heroicons-x-mark"
          @click="$emit('close')"
        >
          Cancelar
        </UButton>
      </div>
    </div>

    <form @submit.prevent="handleSubmit" class="form-content">
      <!-- Sección: Información Básica -->
      <div class="form-section">
        <h3 class="section-title">
          <UIcon name="i-heroicons-identification" class="w-5 h-5" />
          Información Básica
        </h3>
        <div class="form-grid">
          <!-- Nombre de usuario (readonly) -->
          <div class="form-field">
            <label class="field-label">
              <UIcon name="i-heroicons-at-symbol" class="w-4 h-4" />
              Nombre de usuario
            </label>
            <UInput
              :model-value="user?.username"
              disabled
              :ui="{ base: 'cursor-not-allowed opacity-50' }"
            />
            <span class="field-help">No se puede cambiar</span>
          </div>

          <!-- UID de Authentik (readonly) -->
          <div class="form-field">
            <label class="field-label">
              <UIcon name="i-heroicons-finger-print" class="w-4 h-4" />
              UID de Authentik
            </label>
            <UInput
              :model-value="user?.uid || 'No disponible'"
              disabled
              :ui="{ base: 'cursor-not-allowed opacity-50' }"
            />
            <span class="field-help">Identificador único del sistema</span>
          </div>

          <!-- Nombre completo -->
          <div class="form-field">
            <label class="field-label">
              <UIcon name="i-heroicons-user" class="w-4 h-4" />
              Nombre completo
              <span class="required">*</span>
            </label>
            <UInput
              v-model="formData.name"
              placeholder="Tu nombre completo"
              :disabled="isSubmitting"
            />
          </div>

          <!-- Email -->
          <div class="form-field">
            <label class="field-label">
              <UIcon name="i-heroicons-envelope" class="w-4 h-4" />
              Correo electrónico
              <span class="required">*</span>
            </label>
            <UInput
              v-model="formData.email"
              type="email"
              placeholder="tu@email.com"
              :disabled="isSubmitting"
            />
          </div>
        </div>
      </div>

      <!-- Sección: Conectividad -->
      <div class="form-section">
        <h3 class="section-title">
          <UIcon name="i-heroicons-wifi" class="w-5 h-5" />
          Conectividad
        </h3>
        <div class="form-grid">
          <!-- Contraseña WiFi (readonly) -->
          <div class="form-field full-width">
            <label class="field-label">
              <UIcon name="i-heroicons-key" class="w-4 h-4" />
              Contraseña WiFi Nucleo
            </label>
            <UInput
              value="Nucleo2024WiFi!"
              disabled
              type="text"
              :ui="{ base: 'cursor-not-allowed opacity-50' }"
            />
            <span class="field-help">Contraseña de la red WiFi de Nucleo</span>
          </div>
        </div>
      </div>

      <!-- Sección: Información Personal -->
      <div class="form-section">
        <h3 class="section-title">
          <UIcon name="i-heroicons-user-circle" class="w-5 h-5" />
          Información Personal
        </h3>
        <div class="form-grid">
          <!-- Teléfono (deshabilitado) -->
          <div class="form-field">
            <label class="field-label">
              <UIcon name="i-heroicons-phone" class="w-4 h-4" />
              Teléfono
            </label>
            <UInput
              v-model="formData.phone"
              placeholder="+506 1234-5678"
              disabled
              :ui="{ base: 'cursor-not-allowed opacity-50' }"
            />
            <span class="field-help">Próximamente disponible</span>
          </div>

          <!-- Cédula (deshabilitado) -->
          <div class="form-field">
            <label class="field-label">
              <UIcon name="i-heroicons-identification" class="w-4 h-4" />
              Cédula
            </label>
            <UInput
              v-model="formData.cedula"
              placeholder="1-2345-6789"
              disabled
              :ui="{ base: 'cursor-not-allowed opacity-50' }"
            />
            <span class="field-help">Próximamente disponible</span>
          </div>

          <!-- Fecha de nacimiento (deshabilitado) -->
          <div class="form-field">
            <label class="field-label">
              <UIcon name="i-heroicons-cake" class="w-4 h-4" />
              Fecha de nacimiento
            </label>
            <UInput
              v-model="formData.birthdate"
              type="date"
              disabled
              :ui="{ base: 'cursor-not-allowed opacity-50' }"
            />
            <span class="field-help">Próximamente disponible</span>
          </div>

          <!-- Avatar URL (deshabilitado) -->
          <div class="form-field">
            <label class="field-label">
              <UIcon name="i-heroicons-photo" class="w-4 h-4" />
              URL del avatar
            </label>
            <UInput
              v-model="formData.avatar"
              placeholder="https://ejemplo.com/avatar.jpg"
              disabled
              :ui="{ base: 'cursor-not-allowed opacity-50' }"
            />
            <span class="field-help">Próximamente disponible</span>
          </div>
        </div>
      </div>

      <!-- Sección: Seguridad y Acceso -->
      <div class="form-section">
        <h3 class="section-title">
          <UIcon name="i-heroicons-shield-check" class="w-5 h-5" />
          Seguridad y Acceso
        </h3>
        <div class="form-grid">
          <!-- NFC vinculada (deshabilitado) -->
          <div class="form-field">
            <label class="field-label">
              <UIcon name="i-heroicons-credit-card" class="w-4 h-4" />
              NFC vinculada
            </label>
            <UInput
              v-model="formData.nfc"
              placeholder="ID de tarjeta NFC"
              disabled
              :ui="{ base: 'cursor-not-allowed opacity-50' }"
            />
            <span class="field-help">Próximamente disponible</span>
          </div>

          <!-- PIN numérico (deshabilitado) -->
          <div class="form-field">
            <label class="field-label">
              <UIcon name="i-heroicons-lock-closed" class="w-4 h-4" />
              PIN numérico
            </label>
            <UInput
              v-model="formData.pin"
              type="password"
              placeholder="••••"
              disabled
              :ui="{ base: 'cursor-not-allowed opacity-50' }"
            />
            <span class="field-help">Próximamente disponible</span>
          </div>

          <!-- Código Nucleo V2 (deshabilitado) -->
          <div class="form-field">
            <label class="field-label">
              <UIcon name="i-heroicons-qr-code" class="w-4 h-4" />
              Código Nucleo V2
            </label>
            <UInput
              v-model="formData.nucleoCode"
              placeholder="NUCLEO-XXXX-XXXX"
              disabled
              :ui="{ base: 'cursor-not-allowed opacity-50' }"
            />
            <span class="field-help">Próximamente disponible</span>
          </div>
        </div>
      </div>

      <!-- Botones de acción -->
      <div class="form-actions">
        <UButton
          color="neutral"
          variant="ghost"
          size="lg"
          @click="$emit('close')"
          :disabled="isSubmitting"
        >
          Cancelar
        </UButton>
        <UButton
          color="primary"
          size="lg"
          type="submit"
          :loading="isSubmitting"
        >
          Guardar cambios
        </UButton>
      </div>
    </form>
  </div>
</template>

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

// Emits
defineEmits(['close'])

// Estado del formulario
const isSubmitting = ref(false)

// Datos del formulario
const formData = ref({
  name: user.value?.name || '',
  email: user.value?.email || '',
  avatar: '',
  phone: '',
  cedula: '',
  birthdate: '',
  nfc: '',
  pin: '',
  nucleoCode: ''
})

// Enviar formulario
const handleSubmit = async () => {
  if (!formData.value.name || !formData.value.email) {
    toast.add({
      title: 'Error',
      description: 'Por favor completa todos los campos requeridos',
      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()
      }]
    })
  } 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>
.profile-form-container {
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow:
    0 8px 32px 0 rgba(31, 38, 135, 0.15),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-header {
  margin-bottom: 2rem;
}

.form-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0;
}

.form-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-gray-800);
  margin: 0 0 0.5rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid rgba(var(--color-primary-500), 0.2);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-field.full-width {
  grid-column: 1 / -1;
}

.field-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-700);
}

.field-label .required {
  color: rgb(var(--color-error-500));
  margin-left: 0.125rem;
}

.field-help {
  font-size: 0.75rem;
  color: var(--color-gray-500);
  font-style: italic;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
  .profile-form-container {
    padding: 1.5rem;
  }

  .form-title {
    font-size: 1.5rem;
  }

  .section-title {
    font-size: 1rem;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .form-field.full-width {
    grid-column: 1;
  }

  .form-actions {
    flex-direction: column;
  }
}
</style>

<style>
/* Estilos de modo oscuro (sin scoped para que .dark funcione correctamente) */
.dark .profile-form-container {
  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 .form-title {
  color: var(--color-gray-100) !important;
}

.dark .section-title {
  color: var(--color-gray-100) !important;
  border-bottom-color: rgba(var(--color-primary-500), 0.3) !important;
}

.dark .field-label {
  color: var(--color-gray-300) !important;
}

.dark .field-help {
  color: var(--color-gray-400) !important;
}

.dark .form-actions {
  border-top-color: rgba(255, 255, 255, 0.1);
}
</style>