Files
cataRio/nuxt4/app/components/auth/BackendVerificationButton.vue
josedario87 d1aeb88409 Feat: Agregar estructura PWA Nuxt4 y configuración de desarrollo
Configuración PWA:
- Agregar estructura completa de Nuxt4 para PWA
- Configurar .env.example con variables de entorno
- Preparar aplicación para instalación offline

Configuración Claude Code:
- Agregar .claude/ con settings y hooks
- Configurar entorno de desarrollo con Claude

CI/CD:
- Agregar .gitea/workflows para Gitea Actions
- Preparar pipeline de despliegue automático

Docker:
- Actualizar docker-compose.yml con servicios PWA
- Configurar networking entre servicios

Git:
- Actualizar .gitignore para excluir archivos de build
- Ignorar node_modules y archivos temporales
2025-10-17 17:57:18 -06:00

83 lines
2.0 KiB
Vue

<template>
<UButton
color="orange"
size="lg"
variant="outline"
:loading="loading"
@click="handleClick"
class="verification-button"
>
<template #leading>
<UIcon name="i-heroicons-server" />
</template>
Verificación Backend
</UButton>
</template>
<script setup lang="ts">
const toast = useToast()
const loading = ref(false)
const handleClick = async () => {
loading.value = true
try {
// Consultar el endpoint que lee los headers del servidor
const response = await $fetch<{
authenticated: boolean
user?: {
username: string
groups: string[]
}
}>('/api/auth/status')
if (response.authenticated && response.user) {
const groupCount = response.user.groups.length
const groupList = response.user.groups.join(', ') || 'Ninguno'
toast.add({
title: 'Verificación Backend',
description: `Usuario: ${response.user.username}
Grupos (${groupCount}): ${groupList}`,
color: 'orange',
icon: 'i-heroicons-server-stack',
timeout: 5000
})
} else {
toast.add({
title: 'No Autenticado (Backend)',
description: 'No hay sesión activa en el servidor',
color: 'warning',
icon: 'i-heroicons-exclamation-triangle'
})
}
} catch (error) {
toast.add({
title: 'Error Backend',
description: 'No se pudo verificar en el servidor',
color: 'error',
icon: 'i-heroicons-x-circle'
})
console.error('Backend verification error:', error)
} finally {
loading.value = false
}
}
</script>
<style scoped>
.verification-button {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 6px -1px rgba(249, 115, 22, 0.1), 0 2px 4px -1px rgba(249, 115, 22, 0.06);
}
.verification-button:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.2), 0 4px 6px -2px rgba(249, 115, 22, 0.1);
}
.verification-button:active {
transform: translateY(0) scale(0.98);
}
</style>