Implementación inicial de Nucleo Docs

nuxt4/app/components/auth/FrontendVerificationButton.vue

@@ -0,0 +1,59 @@
+<template>
+  <UButton
+    color="purple"
+    size="lg"
+    variant="outline"
+    @click="handleClick"
+    class="verification-button"
+  >
+    <template #leading>
+      <UIcon name="i-heroicons-computer-desktop" />
+    </template>
+    Verificación Frontend
+  </UButton>
+</template>
+
+<script setup lang="ts">
+const { user } = useAuthentik()
+const toast = useToast()
+
+const handleClick = () => {
+  if (!user.value) {
+    toast.add({
+      title: 'No Autenticado',
+      description: 'No hay usuario autenticado',
+      color: 'warning',
+      icon: 'i-heroicons-exclamation-triangle'
+    })
+    return
+  }
+
+  const groupCount = user.value.groups.length
+  const groupList = user.value.groups.join(', ') || 'Ninguno'
+
+  toast.add({
+    title: 'Verificación Frontend',
+    description: `Usuario: ${user.value.username}
+Grupos (${groupCount}): ${groupList}`,
+    color: 'purple',
+    icon: 'i-heroicons-check-badge',
+    timeout: 5000
+  })
+}
+</script>
+
+<style scoped>
+.verification-button {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 6px -1px rgba(147, 51, 234, 0.1), 0 2px 4px -1px rgba(147, 51, 234, 0.06);
+}
+
+.verification-button:hover {
+  transform: translateY(-2px) scale(1.02);
+  box-shadow: 0 10px 15px -3px rgba(147, 51, 234, 0.2), 0 4px 6px -2px rgba(147, 51, 234, 0.1);
+}
+
+.verification-button:active {
+  transform: translateY(0) scale(0.98);
+}
+</style>