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
This commit is contained in:
152
.claude/hooks/README.md
Normal file
152
.claude/hooks/README.md
Normal file
@@ -0,0 +1,152 @@
|
||||
# Gitea Actions Monitor Hook
|
||||
|
||||
Este hook monitorea automáticamente tus Gitea Actions después de hacer `git push` y te notifica cuando terminan.
|
||||
|
||||
## Configuración
|
||||
|
||||
### 1. Crear un token de acceso en Gitea
|
||||
|
||||
1. Ve a: https://gitea.nucleoriofrio.com/user/settings/applications
|
||||
2. En la sección **"Generate New Token"**:
|
||||
- **Token Name**: `claude-code-monitor` (o el nombre que prefieras)
|
||||
- **Select Permissions**: Marca `read:repository` o `repo` (lectura de repositorio)
|
||||
3. Click en **"Generate Token"**
|
||||
4. **IMPORTANTE**: Copia el token inmediatamente (solo se muestra una vez)
|
||||
|
||||
### 2. Configurar la variable de entorno
|
||||
|
||||
Agrega el token a tu archivo de configuración de shell:
|
||||
|
||||
**Para Bash** (`~/.bashrc`):
|
||||
```bash
|
||||
export GITEA_TOKEN='tu_token_aqui'
|
||||
```
|
||||
|
||||
**Para Zsh** (`~/.zshrc`):
|
||||
```bash
|
||||
export GITEA_TOKEN='tu_token_aqui'
|
||||
```
|
||||
|
||||
**Para Fish** (`~/.config/fish/config.fish`):
|
||||
```fish
|
||||
set -x GITEA_TOKEN 'tu_token_aqui'
|
||||
```
|
||||
|
||||
Luego recarga la configuración:
|
||||
```bash
|
||||
source ~/.bashrc # o ~/.zshrc o reinicia la terminal
|
||||
```
|
||||
|
||||
### 3. Verificar que funciona
|
||||
|
||||
Verifica que la variable está configurada:
|
||||
```bash
|
||||
echo $GITEA_TOKEN
|
||||
```
|
||||
|
||||
Deberías ver tu token.
|
||||
|
||||
## Uso
|
||||
|
||||
Una vez configurado, el hook se activa automáticamente cuando Claude Code ejecuta `git push`:
|
||||
|
||||
1. Claude ejecuta `git push`
|
||||
2. El hook verifica que Actions estén habilitadas
|
||||
3. El hook se activa automáticamente y comienza a monitorear
|
||||
4. **Claude se congela** mientras espera a que termine la Gitea Action (máximo 10 minutos)
|
||||
5. Puedes presionar **Ctrl+C** para interrumpir la espera si es necesario
|
||||
6. Cuando termine, Claude te muestra información detallada:
|
||||
|
||||
**Ejemplo de action exitosa:**
|
||||
```
|
||||
✅ Gitea Action completada: EXITOSO
|
||||
|
||||
📋 Detalles:
|
||||
• Workflow: build-and-deploy (build-and-deploy.yml)
|
||||
• Run #3
|
||||
• Evento: push
|
||||
• Branch: master
|
||||
• Commit: a1b2c3d4
|
||||
• Título: Update README: Add Claude Code hooks feature
|
||||
• Duración: 5m 23s
|
||||
• Iniciado: 2025-10-12T14:30:05Z
|
||||
• Finalizado: 2025-10-12T14:35:28Z
|
||||
|
||||
🔗 Ver logs completos:
|
||||
https://gitea.nucleoriofrio.com/nucleo000/plantillaNuxtAuthentikProxy/actions/runs/123
|
||||
```
|
||||
|
||||
**Si las Actions no están habilitadas:**
|
||||
```
|
||||
⚠️ Git push exitoso, pero las Gitea Actions NO están habilitadas en este repositorio.
|
||||
|
||||
📝 Para habilitar Actions:
|
||||
1. Ve a: https://gitea.nucleoriofrio.com/nucleo000/plantillaNuxtAuthentikProxy/settings
|
||||
2. Busca la sección 'Actions' o 'Workflows'
|
||||
3. Activa las Actions
|
||||
```
|
||||
|
||||
## Configuración Avanzada
|
||||
|
||||
### Cambiar el timeout
|
||||
|
||||
Edita `.claude/settings.local.json` y modifica el valor `timeout` (en segundos):
|
||||
|
||||
```json
|
||||
{
|
||||
"hooks": {
|
||||
"PostToolUse": [
|
||||
{
|
||||
"matcher": "Bash",
|
||||
"hooks": [
|
||||
{
|
||||
"type": "command",
|
||||
"command": "\"$CLAUDE_PROJECT_DIR\"/.claude/hooks/monitor-gitea-action.sh",
|
||||
"timeout": 300 // 5 minutos en lugar de 10
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Cambiar el intervalo de polling
|
||||
|
||||
Edita `.claude/hooks/monitor-gitea-action.sh` y modifica:
|
||||
|
||||
```bash
|
||||
POLL_INTERVAL=10 # Consultar cada 10 segundos (puedes cambiar a 5, 15, 30, etc.)
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### El hook no se activa
|
||||
|
||||
1. Verifica que el archivo de configuración es correcto: `cat .claude/settings.local.json`
|
||||
2. Reinicia Claude Code para que recargue la configuración
|
||||
3. Revisa los logs con `claude --debug`
|
||||
|
||||
### Error "falta GITEA_TOKEN"
|
||||
|
||||
El token no está configurado. Sigue los pasos de configuración arriba.
|
||||
|
||||
### Timeout: La action todavía está corriendo
|
||||
|
||||
La action tardó más de 10 minutos. Puedes:
|
||||
- Aumentar el `timeout` en la configuración
|
||||
- Verificar el estado manualmente en Gitea
|
||||
- Optimizar tu Gitea Action para que sea más rápida
|
||||
|
||||
### El script no puede conectarse a la API
|
||||
|
||||
1. Verifica que puedes acceder a Gitea: `curl https://gitea.nucleoriofrio.com`
|
||||
2. Verifica que el token es válido:
|
||||
```bash
|
||||
curl -H "Authorization: token $GITEA_TOKEN" \
|
||||
https://gitea.nucleoriofrio.com/api/v1/repos/nucleo000/plantillaNuxtAuthentikProxy/actions/tasks?limit=1
|
||||
```
|
||||
|
||||
## Desactivar el hook
|
||||
|
||||
Si quieres desactivar temporalmente el hook, comenta o elimina la sección `hooks` en `.claude/settings.local.json`.
|
||||
197
.claude/hooks/monitor-gitea-action.sh
Executable file
197
.claude/hooks/monitor-gitea-action.sh
Executable file
@@ -0,0 +1,197 @@
|
||||
#!/bin/bash
|
||||
|
||||
# Monitor Gitea Action after git push
|
||||
# Este script se ejecuta después de un git push y espera a que termine la Gitea Action
|
||||
|
||||
set -euo pipefail
|
||||
|
||||
# Configuración
|
||||
GITEA_URL="https://gitea.nucleoriofrio.com"
|
||||
OWNER="nucleo000"
|
||||
REPO="cataRio"
|
||||
|
||||
# Intentar cargar el token desde el entorno o desde ~/.bashrc
|
||||
GITEA_TOKEN="${GITEA_TOKEN:-}"
|
||||
if [ -z "$GITEA_TOKEN" ] && [ -f "$HOME/.bashrc" ]; then
|
||||
# Intentar extraer el token de .bashrc
|
||||
GITEA_TOKEN=$(grep -oP "export GITEA_TOKEN=['\"]?\K[^'\"]*" "$HOME/.bashrc" 2>/dev/null || echo "")
|
||||
fi
|
||||
|
||||
MAX_WAIT_SECONDS=600 # 10 minutos
|
||||
POLL_INTERVAL=10 # Consultar cada 10 segundos
|
||||
|
||||
# Leer el input JSON del hook
|
||||
INPUT=$(cat)
|
||||
|
||||
# Verificar si el comando fue un git push
|
||||
COMMAND=$(echo "$INPUT" | jq -r '.tool_input.command // ""')
|
||||
if [[ ! "$COMMAND" =~ git[[:space:]]+push ]]; then
|
||||
# No fue un git push, salir sin hacer nada
|
||||
exit 0
|
||||
fi
|
||||
|
||||
# Verificar que existe el token
|
||||
if [ -z "$GITEA_TOKEN" ]; then
|
||||
cat <<EOF
|
||||
{
|
||||
"decision": "block",
|
||||
"reason": "⚠️ Git push exitoso, pero no puedo monitorear la Gitea Action: falta GITEA_TOKEN.\n\nConfigura el token en ~/.bashrc o ~/.zshrc:\nexport GITEA_TOKEN='tu_token_aqui'"
|
||||
}
|
||||
EOF
|
||||
exit 0
|
||||
fi
|
||||
|
||||
# Función para verificar si las actions están habilitadas
|
||||
check_actions_enabled() {
|
||||
local repo_info=$(curl -s -H "Authorization: token $GITEA_TOKEN" \
|
||||
"$GITEA_URL/api/v1/repos/$OWNER/$REPO")
|
||||
echo "$repo_info" | jq -r '.has_actions // false'
|
||||
}
|
||||
|
||||
# Función para consultar el estado de la última action
|
||||
get_latest_action_status() {
|
||||
local response=$(curl -s -H "Authorization: token $GITEA_TOKEN" \
|
||||
"$GITEA_URL/api/v1/repos/$OWNER/$REPO/actions/tasks?limit=1")
|
||||
|
||||
# Verificar si hay un error de permisos
|
||||
if echo "$response" | jq -e '.message' > /dev/null 2>&1; then
|
||||
echo "ERROR: $(echo "$response" | jq -r '.message')" >&2
|
||||
echo ""
|
||||
return 1
|
||||
fi
|
||||
|
||||
echo "$response" | jq -r '.workflow_runs[0] // .data[0] // empty'
|
||||
}
|
||||
|
||||
# Función para formatear el resultado
|
||||
format_result() {
|
||||
local status="$1"
|
||||
local task_data="$2"
|
||||
|
||||
local id=$(echo "$task_data" | jq -r '.id // "N/A"')
|
||||
local workflow_name=$(echo "$task_data" | jq -r '.name // "N/A"')
|
||||
local workflow_file=$(echo "$task_data" | jq -r '.workflow_id // "N/A"')
|
||||
local run_number=$(echo "$task_data" | jq -r '.run_number // "N/A"')
|
||||
local event=$(echo "$task_data" | jq -r '.event // "N/A"')
|
||||
local branch=$(echo "$task_data" | jq -r '.head_branch // "N/A"')
|
||||
local title=$(echo "$task_data" | jq -r '.display_title // "N/A"')
|
||||
local created=$(echo "$task_data" | jq -r '.created_at // "N/A"')
|
||||
local started=$(echo "$task_data" | jq -r '.run_started_at // .started_at // "N/A"')
|
||||
local updated=$(echo "$task_data" | jq -r '.updated_at // .stopped_at // "N/A"')
|
||||
local commit=$(echo "$task_data" | jq -r '.head_sha[0:8] // "N/A"')
|
||||
local run_url=$(echo "$task_data" | jq -r '.url // ""')
|
||||
|
||||
# Calcular duración si es posible
|
||||
local duration="N/A"
|
||||
if [[ "$started" != "N/A" && "$updated" != "N/A" ]]; then
|
||||
local start_ts=$(date -d "$started" +%s 2>/dev/null || echo "0")
|
||||
local end_ts=$(date -d "$updated" +%s 2>/dev/null || echo "0")
|
||||
if [[ $start_ts -gt 0 && $end_ts -gt 0 ]]; then
|
||||
local diff=$((end_ts - start_ts))
|
||||
if [[ $diff -lt 60 ]]; then
|
||||
duration="${diff}s"
|
||||
else
|
||||
local mins=$((diff / 60))
|
||||
local secs=$((diff % 60))
|
||||
duration="${mins}m ${secs}s"
|
||||
fi
|
||||
fi
|
||||
fi
|
||||
|
||||
case "$status" in
|
||||
success)
|
||||
local emoji="✅"
|
||||
local msg="EXITOSO"
|
||||
;;
|
||||
failure)
|
||||
local emoji="❌"
|
||||
local msg="FALLÓ"
|
||||
;;
|
||||
cancelled)
|
||||
local emoji="🚫"
|
||||
local msg="CANCELADO"
|
||||
;;
|
||||
*)
|
||||
local emoji="⚠️"
|
||||
local msg="DESCONOCIDO ($status)"
|
||||
;;
|
||||
esac
|
||||
|
||||
# Construir URL de logs si no está disponible
|
||||
if [[ -z "$run_url" || "$run_url" == "null" ]]; then
|
||||
run_url="$GITEA_URL/$OWNER/$REPO/actions/runs/$id"
|
||||
fi
|
||||
|
||||
cat <<EOF
|
||||
{
|
||||
"decision": "block",
|
||||
"reason": "$emoji Gitea Action completada: $msg\n\n📋 Detalles:\n • Workflow: $workflow_name ($workflow_file)\n • Run #$run_number\n • Evento: $event\n • Branch: $branch\n • Commit: $commit\n • Título: $title\n • Duración: $duration\n • Iniciado: $started\n • Finalizado: $updated\n\n🔗 Ver logs completos:\n $run_url"
|
||||
}
|
||||
EOF
|
||||
}
|
||||
|
||||
# Verificar si las actions están habilitadas
|
||||
echo "🔍 Verificando si Actions están habilitadas..." >&2
|
||||
ACTIONS_ENABLED=$(check_actions_enabled)
|
||||
|
||||
if [[ "$ACTIONS_ENABLED" != "true" ]]; then
|
||||
cat <<EOF
|
||||
{
|
||||
"decision": "block",
|
||||
"reason": "⚠️ Git push exitoso, pero las Gitea Actions NO están habilitadas en este repositorio.\n\n📝 Para habilitar Actions:\n1. Ve a: $GITEA_URL/$OWNER/$REPO/settings\n2. Busca la sección 'Actions' o 'Workflows'\n3. Activa las Actions\n\nLuego podrás ver tus workflows en:\n$GITEA_URL/$OWNER/$REPO/actions"
|
||||
}
|
||||
EOF
|
||||
exit 0
|
||||
fi
|
||||
|
||||
# Notificar que empezamos a monitorear
|
||||
echo "🔄 Monitoreando Gitea Action (máximo ${MAX_WAIT_SECONDS}s)..." >&2
|
||||
|
||||
# Esperar un poco antes de la primera consulta (dar tiempo a que Gitea cree la action)
|
||||
sleep 5
|
||||
|
||||
# Polling loop
|
||||
elapsed=0
|
||||
while [ $elapsed -lt $MAX_WAIT_SECONDS ]; do
|
||||
# Consultar el estado
|
||||
TASK_DATA=$(get_latest_action_status)
|
||||
|
||||
if [ -z "$TASK_DATA" ]; then
|
||||
echo "⏳ Esperando que Gitea cree la action... (${elapsed}s)" >&2
|
||||
sleep $POLL_INTERVAL
|
||||
elapsed=$((elapsed + POLL_INTERVAL))
|
||||
continue
|
||||
fi
|
||||
|
||||
STATUS=$(echo "$TASK_DATA" | jq -r '.status // "unknown"')
|
||||
|
||||
echo "📊 Estado actual: $STATUS (${elapsed}s)" >&2
|
||||
|
||||
# Verificar si terminó
|
||||
case "$STATUS" in
|
||||
success|failure|cancelled)
|
||||
# Action terminó!
|
||||
format_result "$STATUS" "$TASK_DATA"
|
||||
exit 0
|
||||
;;
|
||||
running|pending|waiting)
|
||||
# Todavía corriendo
|
||||
sleep $POLL_INTERVAL
|
||||
elapsed=$((elapsed + POLL_INTERVAL))
|
||||
;;
|
||||
*)
|
||||
# Estado desconocido
|
||||
echo "⚠️ Estado desconocido: $STATUS" >&2
|
||||
sleep $POLL_INTERVAL
|
||||
elapsed=$((elapsed + POLL_INTERVAL))
|
||||
;;
|
||||
esac
|
||||
done
|
||||
|
||||
# Timeout alcanzado
|
||||
cat <<EOF
|
||||
{
|
||||
"decision": "block",
|
||||
"reason": "⏱️ Timeout: La Gitea Action todavía está corriendo después de ${MAX_WAIT_SECONDS}s.\n\n🔗 Verifica el estado manualmente en:\n$GITEA_URL/$OWNER/$REPO/actions"
|
||||
}
|
||||
EOF
|
||||
16
.claude/settings.json
Normal file
16
.claude/settings.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"hooks": {
|
||||
"PostToolUse": [
|
||||
{
|
||||
"matcher": "Bash",
|
||||
"hooks": [
|
||||
{
|
||||
"type": "command",
|
||||
"command": "\"$CLAUDE_PROJECT_DIR\"/.claude/hooks/monitor-gitea-action.sh",
|
||||
"timeout": 600
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
56
.env.example
Normal file
56
.env.example
Normal file
@@ -0,0 +1,56 @@
|
||||
# ===========================================
|
||||
# Ejemplo de variables de entorno
|
||||
# ===========================================
|
||||
# Copia este archivo y configura los valores según tu entorno
|
||||
#
|
||||
# Para desarrollo local: copia a .env
|
||||
# Para Gitea Actions: configura en Settings > Actions > Variables/Secrets
|
||||
|
||||
# ===========================================
|
||||
# REGISTRY & DEPLOYMENT
|
||||
# ===========================================
|
||||
# URL del registro Docker (sin http:// ni https://)
|
||||
# Para registry de Gitea: gitea.ejemplo.com
|
||||
# El owner del repositorio se agrega automáticamente en el workflow
|
||||
# Imagen final: REGISTRY_URL/owner/APP_NAME:latest
|
||||
REGISTRY_URL=gitea.ejemplo.com
|
||||
|
||||
# Nombre de la aplicación (usado para container, imagen, y labels de Traefik)
|
||||
APP_NAME=mi-app
|
||||
|
||||
# Dominio donde se desplegará la aplicación
|
||||
APP_DOMAIN=miapp.ejemplo.com
|
||||
|
||||
# ===========================================
|
||||
# APPLICATION
|
||||
# ===========================================
|
||||
# URL pública de la aplicación
|
||||
NUXT_PUBLIC_APP_URL=https://miapp.ejemplo.com
|
||||
|
||||
# ===========================================
|
||||
# REGISTRY AUTHENTICATION (solo para CI/CD)
|
||||
# ===========================================
|
||||
# Usuario del registro Docker (SECRETO)
|
||||
REGISTRY_USERNAME=mi-usuario
|
||||
|
||||
# Contraseña del registro Docker (SECRETO)
|
||||
REGISTRY_PASSWORD=mi-password-secreto
|
||||
|
||||
# ===========================================
|
||||
# AUTHENTIK PROXY OUTPOST
|
||||
# ===========================================
|
||||
# Esta plantilla usa Authentik Proxy Outpost para autenticación.
|
||||
# NO se requiere configuración OAuth en la aplicación.
|
||||
#
|
||||
# Requisitos:
|
||||
# 1. Red 'traefik-network' creada: docker network create traefik-network
|
||||
# 2. Middleware 'authentik-forward-auth' configurado en Traefik (ej: dynamic/middlewares.yml)
|
||||
# 3. Proxy Provider de tipo Forward Auth en Authentik
|
||||
# 4. Aplicación configurada en Authentik para el dominio APP_DOMAIN
|
||||
#
|
||||
# La aplicación Nuxt recibirá estos headers automáticamente:
|
||||
# - X-authentik-username: nombre de usuario
|
||||
# - X-authentik-email: email del usuario
|
||||
# - X-authentik-name: nombre completo
|
||||
# - X-authentik-groups: grupos del usuario (separados por |)
|
||||
# - X-authentik-uid: ID único del usuario
|
||||
60
.gitea/workflows/build-and-deploy.yml
Normal file
60
.gitea/workflows/build-and-deploy.yml
Normal file
@@ -0,0 +1,60 @@
|
||||
name: build-and-deploy
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [ main, master ]
|
||||
|
||||
jobs:
|
||||
#───────────────── build & push ─────────────────
|
||||
build:
|
||||
runs-on: docker
|
||||
env:
|
||||
REG: ${{ vars.REGISTRY_URL }}
|
||||
APP_NAME: ${{ vars.APP_NAME }}
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: docker/setup-buildx-action@v2
|
||||
- uses: docker/login-action@v2
|
||||
with:
|
||||
registry: ${{ vars.REGISTRY_URL }}
|
||||
username: ${{ secrets.REGISTRY_USERNAME }}
|
||||
password: ${{ secrets.REGISTRY_PASSWORD }}
|
||||
|
||||
- name: Build+push ${{ vars.APP_NAME }}
|
||||
run: |
|
||||
cd nuxt4
|
||||
docker build -t $REG/${{ github.repository_owner }}/$APP_NAME:${{ github.sha }} -t $REG/${{ github.repository_owner }}/$APP_NAME:latest .
|
||||
docker push $REG/${{ github.repository_owner }}/$APP_NAME:${{ github.sha }}
|
||||
docker push $REG/${{ github.repository_owner }}/$APP_NAME:latest
|
||||
|
||||
#───────────────── deploy ─────────────────
|
||||
deploy:
|
||||
needs: build
|
||||
runs-on: docker
|
||||
env:
|
||||
REG: ${{ vars.REGISTRY_URL }}
|
||||
REPO_OWNER: ${{ github.repository_owner }}
|
||||
APP_NAME: ${{ vars.APP_NAME }}
|
||||
# Variables de entorno para docker-compose
|
||||
APP_DOMAIN: ${{ vars.APP_DOMAIN }}
|
||||
NUXT_PUBLIC_APP_URL: ${{ vars.NUXT_PUBLIC_APP_URL }}
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- name: Login to registry
|
||||
run: docker login ${{ vars.REGISTRY_URL }} -u ${{ secrets.REGISTRY_USERNAME }} -p ${{ secrets.REGISTRY_PASSWORD }}
|
||||
|
||||
- name: Info about environment
|
||||
run: |
|
||||
echo "ℹ️ Deploying ${{ vars.APP_NAME }}"
|
||||
echo " Domain: ${{ vars.APP_DOMAIN }}"
|
||||
echo " Image: ${{ vars.REGISTRY_URL }}/${{ github.repository_owner }}/${{ vars.APP_NAME }}:latest"
|
||||
echo " Network: principal"
|
||||
|
||||
- name: Pull fresh images used in compose
|
||||
run: docker compose pull
|
||||
|
||||
- name: Clean up stack
|
||||
run: docker compose --project-name $APP_NAME down
|
||||
|
||||
- name: Update stack
|
||||
run: docker compose --project-name $APP_NAME up -d --remove-orphans --wait
|
||||
36
.gitignore
vendored
36
.gitignore
vendored
@@ -1,17 +1,27 @@
|
||||
# Backups
|
||||
*.sql
|
||||
!postgres/init/*.sql
|
||||
!postgres/tests/*.sql
|
||||
# Directorio de configuración local de Claude
|
||||
.claude/settings.local.json
|
||||
|
||||
# Docker volumes
|
||||
postgres_data/
|
||||
# Node modules
|
||||
node_modules/
|
||||
|
||||
# Logs
|
||||
*.log
|
||||
# Build outputs
|
||||
dist/
|
||||
.output/
|
||||
.nuxt/
|
||||
.nitro/
|
||||
|
||||
# Environment files
|
||||
.env
|
||||
.env.local
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# Logs
|
||||
logs/
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# OS files
|
||||
.DS_Store
|
||||
@@ -24,6 +34,8 @@ Thumbs.db
|
||||
*.swo
|
||||
*~
|
||||
|
||||
# Temporary files
|
||||
*.tmp
|
||||
*.bak
|
||||
# Local data
|
||||
.data/
|
||||
|
||||
# Docker
|
||||
*.dockerignore
|
||||
|
||||
@@ -1,32 +1,55 @@
|
||||
version: '3.8'
|
||||
|
||||
services:
|
||||
postgres:
|
||||
image: postgres:16-alpine
|
||||
container_name: riocata_postgres
|
||||
environment:
|
||||
POSTGRES_DB: riocata
|
||||
POSTGRES_USER: riocata_user
|
||||
POSTGRES_PASSWORD: riocata_password
|
||||
PGDATA: /var/lib/postgresql/data/pgdata
|
||||
ports:
|
||||
- "5432:5432"
|
||||
volumes:
|
||||
- postgres_data:/var/lib/postgresql/data
|
||||
- ./postgres/init:/docker-entrypoint-initdb.d
|
||||
healthcheck:
|
||||
test: ["CMD-SHELL", "pg_isready -U riocata_user -d riocata"]
|
||||
interval: 10s
|
||||
timeout: 5s
|
||||
retries: 5
|
||||
app:
|
||||
image: ${REG}/${REPO_OWNER}/${APP_NAME}:latest
|
||||
container_name: ${APP_NAME}
|
||||
restart: unless-stopped
|
||||
environment:
|
||||
# Node Environment
|
||||
- NODE_ENV=production
|
||||
- NUXT_HOST=0.0.0.0
|
||||
- NUXT_PORT=3000
|
||||
# Public URL
|
||||
- NUXT_PUBLIC_APP_URL=${NUXT_PUBLIC_APP_URL}
|
||||
networks:
|
||||
- riocata_network
|
||||
- principal
|
||||
- traefik-network
|
||||
labels:
|
||||
# Traefik labels
|
||||
- "traefik.enable=true"
|
||||
- "traefik.docker.network=traefik-network"
|
||||
|
||||
volumes:
|
||||
postgres_data:
|
||||
driver: local
|
||||
# Service (shared by both routers)
|
||||
- "traefik.http.services.${APP_NAME}.loadbalancer.server.port=3000"
|
||||
|
||||
# Router 1: Public PWA resources (no auth) - Higher priority
|
||||
- "traefik.http.routers.${APP_NAME}-public.rule=Host(`${APP_DOMAIN}`) && (PathPrefix(`/manifest.webmanifest`) || PathPrefix(`/sw.js`) || PathPrefix(`/workbox-`) || PathPrefix(`/icon-`) || PathPrefix(`/apple-touch-icon`) || PathPrefix(`/favicon.ico`) || PathPrefix(`/robots.txt`) || PathPrefix(`/offline.html`) || PathPrefix(`/api/_nuxt_icon/`))"
|
||||
- "traefik.http.routers.${APP_NAME}-public.entrypoints=websecure"
|
||||
- "traefik.http.routers.${APP_NAME}-public.tls.certresolver=letsencrypt"
|
||||
- "traefik.http.routers.${APP_NAME}-public.priority=100"
|
||||
- "traefik.http.routers.${APP_NAME}-public.service=${APP_NAME}"
|
||||
- "traefik.http.routers.${APP_NAME}-public.middlewares=${APP_NAME}-headers,${APP_NAME}-cors"
|
||||
|
||||
# Router 2: Protected application (with auth) - Normal priority
|
||||
- "traefik.http.routers.${APP_NAME}.rule=Host(`${APP_DOMAIN}`)"
|
||||
- "traefik.http.routers.${APP_NAME}.entrypoints=websecure"
|
||||
- "traefik.http.routers.${APP_NAME}.tls.certresolver=letsencrypt"
|
||||
- "traefik.http.routers.${APP_NAME}.priority=10"
|
||||
- "traefik.http.routers.${APP_NAME}.service=${APP_NAME}"
|
||||
- "traefik.http.routers.${APP_NAME}.middlewares=authentik-forward-auth@file,${APP_NAME}-headers"
|
||||
|
||||
# Custom headers middleware
|
||||
- "traefik.http.middlewares.${APP_NAME}-headers.headers.customrequestheaders.X-Forwarded-Proto=https"
|
||||
|
||||
# CORS middleware for public resources
|
||||
- "traefik.http.middlewares.${APP_NAME}-cors.headers.accesscontrolallowmethods=GET,OPTIONS"
|
||||
- "traefik.http.middlewares.${APP_NAME}-cors.headers.accesscontrolalloworiginlist=https://${APP_DOMAIN}"
|
||||
- "traefik.http.middlewares.${APP_NAME}-cors.headers.accesscontrolmaxage=100"
|
||||
- "traefik.http.middlewares.${APP_NAME}-cors.headers.addvaryheader=true"
|
||||
|
||||
networks:
|
||||
riocata_network:
|
||||
driver: bridge
|
||||
principal:
|
||||
external: true
|
||||
traefik-network:
|
||||
external: true
|
||||
|
||||
24
nuxt4/.gitignore
vendored
Normal file
24
nuxt4/.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
# Nuxt dev/build outputs
|
||||
.output
|
||||
.data
|
||||
.nuxt
|
||||
.nitro
|
||||
.cache
|
||||
dist
|
||||
|
||||
# Node dependencies
|
||||
node_modules
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Misc
|
||||
.DS_Store
|
||||
.fleet
|
||||
.idea
|
||||
|
||||
# Local env files
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
35
nuxt4/Dockerfile
Normal file
35
nuxt4/Dockerfile
Normal file
@@ -0,0 +1,35 @@
|
||||
# Multi-stage build for Nuxt 4 application
|
||||
FROM node:20-alpine AS builder
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Copy package files
|
||||
COPY package*.json ./
|
||||
|
||||
# Install dependencies
|
||||
RUN npm ci
|
||||
|
||||
# Copy source code
|
||||
COPY . .
|
||||
|
||||
# Build the application
|
||||
RUN npm run build
|
||||
|
||||
# Production stage
|
||||
FROM node:20-alpine
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Copy built application from builder stage
|
||||
COPY --from=builder /app/.output /app/.output
|
||||
|
||||
# Expose port
|
||||
EXPOSE 3000
|
||||
|
||||
# Set environment variables
|
||||
ENV NODE_ENV=production
|
||||
ENV NUXT_HOST=0.0.0.0
|
||||
ENV NUXT_PORT=3000
|
||||
|
||||
# Start the application
|
||||
CMD ["node", ".output/server/index.mjs"]
|
||||
75
nuxt4/README.md
Normal file
75
nuxt4/README.md
Normal file
@@ -0,0 +1,75 @@
|
||||
# Nuxt Minimal Starter
|
||||
|
||||
Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||
|
||||
## Setup
|
||||
|
||||
Make sure to install dependencies:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm install
|
||||
|
||||
# pnpm
|
||||
pnpm install
|
||||
|
||||
# yarn
|
||||
yarn install
|
||||
|
||||
# bun
|
||||
bun install
|
||||
```
|
||||
|
||||
## Development Server
|
||||
|
||||
Start the development server on `http://localhost:3000`:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run dev
|
||||
|
||||
# pnpm
|
||||
pnpm dev
|
||||
|
||||
# yarn
|
||||
yarn dev
|
||||
|
||||
# bun
|
||||
bun run dev
|
||||
```
|
||||
|
||||
## Production
|
||||
|
||||
Build the application for production:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run build
|
||||
|
||||
# pnpm
|
||||
pnpm build
|
||||
|
||||
# yarn
|
||||
yarn build
|
||||
|
||||
# bun
|
||||
bun run build
|
||||
```
|
||||
|
||||
Locally preview production build:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run preview
|
||||
|
||||
# pnpm
|
||||
pnpm preview
|
||||
|
||||
# yarn
|
||||
yarn preview
|
||||
|
||||
# bun
|
||||
bun run preview
|
||||
```
|
||||
|
||||
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||
122
nuxt4/app/app.vue
Normal file
122
nuxt4/app/app.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<UApp>
|
||||
<NuxtRouteAnnouncer />
|
||||
<UNotifications />
|
||||
|
||||
<UContainer class="py-8">
|
||||
<div class="space-y-6">
|
||||
<!-- Header -->
|
||||
<div class="text-center mb-8">
|
||||
<h1 class="text-4xl font-bold mb-2">Plantilla Nuxt + Authentik</h1>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Ejemplo de integración con Authentik Proxy Outpost
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Componentes de autenticación -->
|
||||
<div v-if="isAuthenticated" class="grid gap-6 lg:grid-cols-2">
|
||||
<!-- Columna izquierda -->
|
||||
<div class="space-y-6">
|
||||
<!-- Avatar y datos básicos -->
|
||||
<AuthUserAvatar />
|
||||
|
||||
<!-- Botones de acción individuales -->
|
||||
<UCard class="w-full">
|
||||
<template #header>
|
||||
<h3 class="text-lg font-semibold">Acciones de Sesión</h3>
|
||||
</template>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<AuthSessionStatusButton />
|
||||
<AuthProfileButton />
|
||||
<AuthLogoutButton />
|
||||
<AuthLoginButton />
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Verificaciones Frontend/Backend -->
|
||||
<UCard class="w-full">
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-cpu-chip" class="w-5 h-5" />
|
||||
<h3 class="text-lg font-semibold">Verificación de Sistema</h3>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<AuthFrontendVerificationButton />
|
||||
<AuthBackendVerificationButton />
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<!-- Columna derecha -->
|
||||
<div class="space-y-6">
|
||||
<!-- Metadatos completos -->
|
||||
<AuthUserMetadata />
|
||||
|
||||
<!-- Verificaciones de Grupos Frontend -->
|
||||
<UCard class="w-full">
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-user-group" class="w-5 h-5 text-purple-500" />
|
||||
<h3 class="text-lg font-semibold">Grupos (Frontend)</h3>
|
||||
</div>
|
||||
</template>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<AuthCheckAuthentikAdminsButton />
|
||||
<AuthCheckGrupoPruebaButton />
|
||||
<AuthCheckLvl0Button />
|
||||
<AuthCheckPublicAccessButton />
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Verificaciones de Grupos Backend -->
|
||||
<UCard class="w-full">
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-server-stack" class="w-5 h-5 text-orange-500" />
|
||||
<h3 class="text-lg font-semibold">Grupos (Backend)</h3>
|
||||
</div>
|
||||
</template>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<AuthCheckAuthentikAdminsButton :verify-backend="true" />
|
||||
<AuthCheckGrupoPruebaButton :verify-backend="true" />
|
||||
<AuthCheckLvl0Button :verify-backend="true" />
|
||||
<AuthCheckPublicAccessButton :verify-backend="true" />
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mensaje si no está autenticado -->
|
||||
<UCard v-else class="text-center">
|
||||
<div class="py-8">
|
||||
<UIcon name="i-heroicons-shield-exclamation" class="w-16 h-16 mx-auto mb-4 text-gray-400" />
|
||||
<h2 class="text-2xl font-semibold mb-2">No autenticado</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Authentik Proxy Outpost debería redirigirte automáticamente.
|
||||
</p>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</UContainer>
|
||||
</UApp>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { isAuthenticated } = useAuthentik()
|
||||
|
||||
// Configurar meta tags para PWA
|
||||
useHead({
|
||||
link: [
|
||||
{ rel: 'manifest', href: '/manifest.webmanifest' },
|
||||
{ rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
|
||||
{ rel: 'apple-touch-icon', href: '/apple-touch-icon.png' }
|
||||
],
|
||||
meta: [
|
||||
{ name: 'theme-color', content: '#00DC82' },
|
||||
{ name: 'mobile-web-app-capable', content: 'yes' },
|
||||
{ name: 'apple-mobile-web-app-capable', content: 'yes' },
|
||||
{ name: 'apple-mobile-web-app-status-bar-style', content: 'default' }
|
||||
]
|
||||
})
|
||||
</script>
|
||||
2
nuxt4/app/assets/css/main.css
Normal file
2
nuxt4/app/assets/css/main.css
Normal file
@@ -0,0 +1,2 @@
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui";
|
||||
82
nuxt4/app/components/auth/BackendVerificationButton.vue
Normal file
82
nuxt4/app/components/auth/BackendVerificationButton.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<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>
|
||||
20
nuxt4/app/components/auth/CheckAuthentikAdminsButton.vue
Normal file
20
nuxt4/app/components/auth/CheckAuthentikAdminsButton.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<AuthGroupCheckButton
|
||||
group-name="authentik Admins"
|
||||
label="Authentik Admins"
|
||||
icon="i-heroicons-shield-check"
|
||||
color="red"
|
||||
variant="soft"
|
||||
:verify-backend="verifyBackend"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
verifyBackend?: boolean
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
verifyBackend: false
|
||||
})
|
||||
</script>
|
||||
20
nuxt4/app/components/auth/CheckGrupoPruebaButton.vue
Normal file
20
nuxt4/app/components/auth/CheckGrupoPruebaButton.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<AuthGroupCheckButton
|
||||
group-name="grupo-prueba"
|
||||
label="Grupo Prueba"
|
||||
icon="i-heroicons-beaker"
|
||||
color="blue"
|
||||
variant="soft"
|
||||
:verify-backend="verifyBackend"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
verifyBackend?: boolean
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
verifyBackend: false
|
||||
})
|
||||
</script>
|
||||
20
nuxt4/app/components/auth/CheckLvl0Button.vue
Normal file
20
nuxt4/app/components/auth/CheckLvl0Button.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<AuthGroupCheckButton
|
||||
group-name="lvl0"
|
||||
label="Level 0"
|
||||
icon="i-heroicons-key"
|
||||
color="green"
|
||||
variant="soft"
|
||||
:verify-backend="verifyBackend"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
verifyBackend?: boolean
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
verifyBackend: false
|
||||
})
|
||||
</script>
|
||||
20
nuxt4/app/components/auth/CheckPublicAccessButton.vue
Normal file
20
nuxt4/app/components/auth/CheckPublicAccessButton.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<AuthGroupCheckButton
|
||||
group-name="public-access"
|
||||
label="Acceso Público"
|
||||
icon="i-heroicons-globe-alt"
|
||||
color="gray"
|
||||
variant="soft"
|
||||
:verify-backend="verifyBackend"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
verifyBackend?: boolean
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
verifyBackend: false
|
||||
})
|
||||
</script>
|
||||
59
nuxt4/app/components/auth/FrontendVerificationButton.vue
Normal file
59
nuxt4/app/components/auth/FrontendVerificationButton.vue
Normal file
@@ -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>
|
||||
112
nuxt4/app/components/auth/GroupCheckButton.vue
Normal file
112
nuxt4/app/components/auth/GroupCheckButton.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<UButton
|
||||
:color="color"
|
||||
:size="size"
|
||||
:variant="variant"
|
||||
:loading="loading"
|
||||
@click="handleClick"
|
||||
class="group-check-button"
|
||||
>
|
||||
<template #leading>
|
||||
<UIcon :name="icon" />
|
||||
</template>
|
||||
<slot>{{ label }}</slot>
|
||||
</UButton>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ButtonColor, ButtonVariant, ButtonSize } from '#ui/types'
|
||||
|
||||
interface Props {
|
||||
groupName: string
|
||||
label?: string
|
||||
icon?: string
|
||||
color?: ButtonColor
|
||||
variant?: ButtonVariant
|
||||
size?: ButtonSize
|
||||
verifyBackend?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
label: 'Verificar Grupo',
|
||||
icon: 'i-heroicons-shield-check',
|
||||
color: 'primary',
|
||||
variant: 'soft',
|
||||
size: 'lg',
|
||||
verifyBackend: false
|
||||
})
|
||||
|
||||
const { hasGroup, checkGroupBackend } = useAuthentik()
|
||||
const toast = useToast()
|
||||
const loading = ref(false)
|
||||
|
||||
const handleClick = async () => {
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
if (props.verifyBackend) {
|
||||
// Verificación backend
|
||||
const hasAccess = await checkGroupBackend(props.groupName)
|
||||
|
||||
if (hasAccess) {
|
||||
toast.add({
|
||||
title: 'Acceso Permitido (Backend)',
|
||||
description: `Perteneces al grupo: ${props.groupName}`,
|
||||
color: 'success',
|
||||
icon: 'i-heroicons-check-circle'
|
||||
})
|
||||
} else {
|
||||
toast.add({
|
||||
title: 'Acceso Denegado (Backend)',
|
||||
description: `No perteneces al grupo: ${props.groupName}`,
|
||||
color: 'error',
|
||||
icon: 'i-heroicons-x-circle'
|
||||
})
|
||||
}
|
||||
} else {
|
||||
// Verificación frontend
|
||||
const hasAccess = hasGroup(props.groupName)
|
||||
|
||||
if (hasAccess) {
|
||||
toast.add({
|
||||
title: 'Acceso Permitido (Frontend)',
|
||||
description: `Perteneces al grupo: ${props.groupName}`,
|
||||
color: 'success',
|
||||
icon: 'i-heroicons-check-circle'
|
||||
})
|
||||
} else {
|
||||
toast.add({
|
||||
title: 'Acceso Denegado (Frontend)',
|
||||
description: `No perteneces al grupo: ${props.groupName}`,
|
||||
color: 'error',
|
||||
icon: 'i-heroicons-x-circle'
|
||||
})
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
toast.add({
|
||||
title: 'Error de Verificación',
|
||||
description: 'No se pudo verificar el grupo',
|
||||
color: 'error',
|
||||
icon: 'i-heroicons-exclamation-triangle'
|
||||
})
|
||||
console.error('Group check error:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.group-check-button {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.group-check-button:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.group-check-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
</style>
|
||||
19
nuxt4/app/components/auth/LoginButton.vue
Normal file
19
nuxt4/app/components/auth/LoginButton.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<UButton
|
||||
color="success"
|
||||
size="lg"
|
||||
@click="handleClick"
|
||||
>
|
||||
<template #leading>
|
||||
<UIcon name="i-heroicons-arrow-right-end-on-rectangle" />
|
||||
</template>
|
||||
Iniciar Sesión
|
||||
</UButton>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const handleClick = () => {
|
||||
// Recargar la página para forzar redirect de Authentik al login
|
||||
window.location.reload()
|
||||
}
|
||||
</script>
|
||||
21
nuxt4/app/components/auth/LogoutButton.vue
Normal file
21
nuxt4/app/components/auth/LogoutButton.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<UButton
|
||||
color="error"
|
||||
size="lg"
|
||||
variant="soft"
|
||||
@click="handleClick"
|
||||
>
|
||||
<template #leading>
|
||||
<UIcon name="i-heroicons-arrow-right-on-rectangle" />
|
||||
</template>
|
||||
Cerrar Sesión
|
||||
</UButton>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { logout } = useAuthentik()
|
||||
|
||||
const handleClick = () => {
|
||||
logout()
|
||||
}
|
||||
</script>
|
||||
20
nuxt4/app/components/auth/ProfileButton.vue
Normal file
20
nuxt4/app/components/auth/ProfileButton.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<UButton
|
||||
color="primary"
|
||||
size="lg"
|
||||
@click="handleClick"
|
||||
>
|
||||
<template #leading>
|
||||
<UIcon name="i-heroicons-user-circle" />
|
||||
</template>
|
||||
Ver Perfil
|
||||
</UButton>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { goToProfile } = useAuthentik()
|
||||
|
||||
const handleClick = () => {
|
||||
goToProfile()
|
||||
}
|
||||
</script>
|
||||
21
nuxt4/app/components/auth/SessionStatusButton.vue
Normal file
21
nuxt4/app/components/auth/SessionStatusButton.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<UButton
|
||||
color="info"
|
||||
size="lg"
|
||||
variant="soft"
|
||||
@click="handleClick"
|
||||
>
|
||||
<template #leading>
|
||||
<UIcon name="i-heroicons-information-circle" />
|
||||
</template>
|
||||
Estado de Sesión
|
||||
</UButton>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { checkSessionStatus } = useAuthentik()
|
||||
|
||||
const handleClick = () => {
|
||||
checkSessionStatus()
|
||||
}
|
||||
</script>
|
||||
20
nuxt4/app/components/auth/UserAvatar.vue
Normal file
20
nuxt4/app/components/auth/UserAvatar.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<UCard v-if="user" class="w-full">
|
||||
<div class="flex items-center gap-4">
|
||||
<UAvatar
|
||||
:src="user.avatar"
|
||||
:alt="user.name || user.username"
|
||||
size="xl"
|
||||
/>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-lg">{{ user.name || user.username }}</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">{{ user.email }}</p>
|
||||
<p class="text-xs text-gray-400 dark:text-gray-500 mt-1">ID: {{ user.uid }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { user } = useAuthentik()
|
||||
</script>
|
||||
90
nuxt4/app/components/auth/UserMetadata.vue
Normal file
90
nuxt4/app/components/auth/UserMetadata.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<UCard v-if="user" class="w-full">
|
||||
<template #header>
|
||||
<h3 class="font-semibold text-lg flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-information-circle" />
|
||||
Metadatos del Usuario
|
||||
</h3>
|
||||
</template>
|
||||
|
||||
<div class="space-y-3">
|
||||
<!-- Username -->
|
||||
<div class="flex items-start gap-3">
|
||||
<UIcon name="i-heroicons-at-symbol" class="text-gray-500 dark:text-gray-400 mt-0.5" />
|
||||
<div class="flex-1">
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">Username</p>
|
||||
<p class="font-medium">{{ user.username }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div class="flex items-start gap-3">
|
||||
<UIcon name="i-heroicons-envelope" class="text-gray-500 dark:text-gray-400 mt-0.5" />
|
||||
<div class="flex-1">
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">Email</p>
|
||||
<p class="font-medium">{{ user.email }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nombre completo -->
|
||||
<div class="flex items-start gap-3">
|
||||
<UIcon name="i-heroicons-user" class="text-gray-500 dark:text-gray-400 mt-0.5" />
|
||||
<div class="flex-1">
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">Nombre Completo</p>
|
||||
<p class="font-medium">{{ user.name || 'No especificado' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- UID -->
|
||||
<div class="flex items-start gap-3">
|
||||
<UIcon name="i-heroicons-key" class="text-gray-500 dark:text-gray-400 mt-0.5" />
|
||||
<div class="flex-1">
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">ID Único</p>
|
||||
<p class="font-mono text-sm">{{ user.uid }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Grupos -->
|
||||
<div class="flex items-start gap-3">
|
||||
<UIcon name="i-heroicons-user-group" class="text-gray-500 dark:text-gray-400 mt-0.5" />
|
||||
<div class="flex-1">
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mb-2">Grupos</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<UBadge
|
||||
v-for="group in user.groups"
|
||||
:key="group"
|
||||
color="primary"
|
||||
variant="soft"
|
||||
>
|
||||
{{ group }}
|
||||
</UBadge>
|
||||
<UBadge v-if="user.groups.length === 0" color="gray" variant="soft">
|
||||
Sin grupos asignados
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Metadata de la Aplicación (si está disponible) -->
|
||||
<div v-if="user.appSlug || user.outpostName" class="pt-3 mt-3 border-t border-gray-200 dark:border-gray-700">
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mb-2">Información de Conexión</p>
|
||||
<div class="space-y-2">
|
||||
<div v-if="user.appSlug" class="flex items-center gap-2 text-sm">
|
||||
<UIcon name="i-heroicons-cube" class="text-gray-400" />
|
||||
<span class="text-gray-600 dark:text-gray-300">App: </span>
|
||||
<code class="text-xs bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded">{{ user.appSlug }}</code>
|
||||
</div>
|
||||
<div v-if="user.outpostName" class="flex items-center gap-2 text-sm">
|
||||
<UIcon name="i-heroicons-server" class="text-gray-400" />
|
||||
<span class="text-gray-600 dark:text-gray-300">Outpost: </span>
|
||||
<code class="text-xs bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded">{{ user.outpostName }}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { user } = useAuthentik()
|
||||
</script>
|
||||
220
nuxt4/app/composables/useAuthentik.ts
Normal file
220
nuxt4/app/composables/useAuthentik.ts
Normal file
@@ -0,0 +1,220 @@
|
||||
/**
|
||||
* Composable para leer información de usuario de Authentik
|
||||
* Los headers son inyectados por Authentik Proxy Outpost
|
||||
*
|
||||
* Documentación de headers disponibles:
|
||||
* - x-authentik-username: Username del usuario
|
||||
* - x-authentik-email: Email del usuario
|
||||
* - x-authentik-name: Nombre completo del usuario
|
||||
* - x-authentik-uid: UID único del usuario
|
||||
* - x-authentik-groups: Grupos separados por |
|
||||
* - x-authentik-meta-app: Slug de la aplicación en Authentik
|
||||
* - x-authentik-meta-outpost: Nombre del outpost
|
||||
* - Nota: Los roles RBAC son internos de Authentik y no se exponen via headers
|
||||
*/
|
||||
|
||||
interface AuthentikUser {
|
||||
username: string
|
||||
email: string | undefined
|
||||
name: string | undefined
|
||||
groups: string[]
|
||||
uid: string | undefined
|
||||
avatar: string
|
||||
// Metadata de la aplicación y outpost
|
||||
appSlug?: string
|
||||
outpostName?: string
|
||||
}
|
||||
|
||||
interface AuthStatusResponse {
|
||||
authenticated: boolean
|
||||
user?: {
|
||||
username: string
|
||||
name?: string
|
||||
}
|
||||
}
|
||||
|
||||
export const useAuthentik = () => {
|
||||
// Leer headers en el servidor y almacenarlos en state
|
||||
const authentikUser = useState<AuthentikUser | null>('authentikUser', () => {
|
||||
// Solo en el servidor, leer los headers
|
||||
if (import.meta.server) {
|
||||
const headers = useRequestHeaders()
|
||||
|
||||
const username = headers['x-authentik-username']
|
||||
const email = headers['x-authentik-email']
|
||||
const name = headers['x-authentik-name']
|
||||
const groups = headers['x-authentik-groups']
|
||||
const uid = headers['x-authentik-uid']
|
||||
const appSlug = headers['x-authentik-meta-app']
|
||||
const outpostName = headers['x-authentik-meta-outpost']
|
||||
|
||||
// Si no hay username, el usuario no está autenticado
|
||||
if (!username) {
|
||||
return null
|
||||
}
|
||||
|
||||
return {
|
||||
username,
|
||||
email,
|
||||
name,
|
||||
groups: groups ? groups.split('|').filter(g => g.trim()) : [],
|
||||
uid,
|
||||
appSlug,
|
||||
outpostName,
|
||||
// Generar avatar URL usando UI Avatars
|
||||
avatar: `https://ui-avatars.com/api/?name=${encodeURIComponent(name || username)}&background=random&size=128`
|
||||
}
|
||||
}
|
||||
|
||||
return null
|
||||
})
|
||||
|
||||
const user = computed(() => authentikUser.value)
|
||||
const isAuthenticated = computed(() => !!user.value)
|
||||
|
||||
const logout = () => {
|
||||
// Logout completo: invalida la sesión de Authentik completamente
|
||||
// Esto cierra sesión en todas las aplicaciones
|
||||
const authentikUrl = useRuntimeConfig().public.authentikUrl || 'https://authentik.nucleoriofrio.com'
|
||||
navigateTo(`${authentikUrl}/flows/-/default/invalidation/`, { external: true })
|
||||
}
|
||||
|
||||
const goToProfile = () => {
|
||||
// URL de perfil de Authentik
|
||||
const authentikUrl = useRuntimeConfig().public.authentikUrl || 'https://authentik.nucleoriofrio.com'
|
||||
navigateTo(`${authentikUrl}/if/user/`, { external: true, open: { target: '_blank' } })
|
||||
}
|
||||
|
||||
const checkSessionStatus = async () => {
|
||||
const toast = useToast()
|
||||
|
||||
// Verificar si está offline primero
|
||||
if (!navigator.onLine) {
|
||||
toast.add({
|
||||
title: 'Modo Offline',
|
||||
description: 'No se puede validar sesión sin conexión',
|
||||
color: 'neutral',
|
||||
icon: 'i-heroicons-wifi'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// Mostrar toast de "verificando..."
|
||||
toast.add({
|
||||
title: 'Verificando sesión...',
|
||||
description: 'Consultando estado en Authentik',
|
||||
color: 'info',
|
||||
icon: 'i-heroicons-arrow-path'
|
||||
})
|
||||
|
||||
try {
|
||||
// Consultar el endpoint de API que verifica contra Authentik
|
||||
const response = await $fetch<AuthStatusResponse>('/api/auth/status')
|
||||
|
||||
if (response.authenticated && response.user) {
|
||||
// Sesión activa en Authentik
|
||||
toast.add({
|
||||
title: 'Sesión Activa',
|
||||
description: `Conectado como: ${response.user.name || response.user.username}`,
|
||||
color: 'success',
|
||||
icon: 'i-heroicons-check-circle'
|
||||
})
|
||||
} else {
|
||||
// Sin sesión en Authentik
|
||||
toast.add({
|
||||
title: 'Sin Sesión',
|
||||
description: 'No hay sesión activa en Authentik',
|
||||
color: 'warning',
|
||||
icon: 'i-heroicons-exclamation-triangle',
|
||||
actions: [{
|
||||
label: 'Iniciar Sesión',
|
||||
onClick: () => {
|
||||
// Recargar la página forzará a Authentik a redirigir al login
|
||||
window.location.reload()
|
||||
}
|
||||
}]
|
||||
})
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
// Verificar si está offline ahora (pudo desconectarse durante la petición)
|
||||
if (!navigator.onLine) {
|
||||
toast.add({
|
||||
title: 'Modo Offline',
|
||||
description: 'No se puede validar sesión sin conexión',
|
||||
color: 'neutral',
|
||||
icon: 'i-heroicons-wifi'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// Si el error es por redirect de Authentik (CORS/fetch error), significa que no hay sesión
|
||||
// Authentik redirige a login cuando no hay sesión válida, causando error CORS en fetch
|
||||
const errorMessage = (error as Error)?.message || String(error)
|
||||
const isCorsOrRedirectError = errorMessage.includes('Failed to fetch') ||
|
||||
errorMessage.includes('CORS') ||
|
||||
(error as any)?.statusCode === 302
|
||||
|
||||
if (isCorsOrRedirectError) {
|
||||
// Interpretar como sesión expirada/inválida
|
||||
toast.add({
|
||||
title: 'Sin Sesión',
|
||||
description: 'No hay sesión activa en Authentik',
|
||||
color: 'warning',
|
||||
icon: 'i-heroicons-exclamation-triangle',
|
||||
actions: [{
|
||||
label: 'Iniciar Sesión',
|
||||
onClick: () => {
|
||||
// Recargar la página forzará a Authentik a redirigir al login
|
||||
window.location.reload()
|
||||
}
|
||||
}]
|
||||
})
|
||||
} else {
|
||||
// Error real de red o servidor
|
||||
toast.add({
|
||||
title: 'Error',
|
||||
description: 'No se pudo verificar el estado de la sesión',
|
||||
color: 'error',
|
||||
icon: 'i-heroicons-x-circle'
|
||||
})
|
||||
}
|
||||
console.error('Error checking session status:', error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Verifica si el usuario pertenece a un grupo específico (frontend)
|
||||
* Lee los grupos desde el estado local (headers de Authentik)
|
||||
*/
|
||||
const hasGroup = (groupName: string): boolean => {
|
||||
if (!user.value) return false
|
||||
return user.value.groups.includes(groupName)
|
||||
}
|
||||
|
||||
/**
|
||||
* Verifica si el usuario pertenece a un grupo específico (backend)
|
||||
* Consulta al servidor para validar contra Authentik
|
||||
*/
|
||||
const checkGroupBackend = async (groupName: string): Promise<boolean> => {
|
||||
try {
|
||||
const response = await $fetch<{ hasGroup: boolean }>(`/api/auth/check-group`, {
|
||||
method: 'POST',
|
||||
body: { groupName }
|
||||
})
|
||||
return response.hasGroup
|
||||
} catch (error) {
|
||||
console.error('Error checking group membership:', error)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
user,
|
||||
isAuthenticated,
|
||||
logout,
|
||||
goToProfile,
|
||||
checkSessionStatus,
|
||||
hasGroup,
|
||||
checkGroupBackend
|
||||
}
|
||||
}
|
||||
15
nuxt4/app/server/api/debug/all-headers.ts
Normal file
15
nuxt4/app/server/api/debug/all-headers.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
/**
|
||||
* Endpoint temporal de debug para ver TODOS los headers
|
||||
* ELIMINAR después de debugging
|
||||
*/
|
||||
export default defineEventHandler((event) => {
|
||||
const headers = getHeaders(event)
|
||||
|
||||
return {
|
||||
timestamp: new Date().toISOString(),
|
||||
headers: headers,
|
||||
authentikHeaders: Object.fromEntries(
|
||||
Object.entries(headers).filter(([key]) => key.toLowerCase().startsWith('x-authentik-'))
|
||||
)
|
||||
}
|
||||
})
|
||||
6
nuxt4/eslint.config.mjs
Normal file
6
nuxt4/eslint.config.mjs
Normal file
@@ -0,0 +1,6 @@
|
||||
// @ts-check
|
||||
import withNuxt from './.nuxt/eslint.config.mjs'
|
||||
|
||||
export default withNuxt(
|
||||
// Your custom configs here
|
||||
)
|
||||
152
nuxt4/nuxt.config.ts
Normal file
152
nuxt4/nuxt.config.ts
Normal file
@@ -0,0 +1,152 @@
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
compatibilityDate: '2025-07-15',
|
||||
devtools: { enabled: true },
|
||||
|
||||
modules: [
|
||||
'@nuxt/ui',
|
||||
'@nuxt/test-utils',
|
||||
'@nuxt/image',
|
||||
'@nuxt/eslint',
|
||||
'@nuxt/content',
|
||||
'@vite-pwa/nuxt'
|
||||
],
|
||||
|
||||
css: ['~/assets/css/main.css'],
|
||||
|
||||
runtimeConfig: {
|
||||
public: {
|
||||
authentikUrl: process.env.NUXT_PUBLIC_AUTHENTIK_URL || 'https://authentik.nucleoriofrio.com'
|
||||
}
|
||||
},
|
||||
|
||||
pwa: {
|
||||
registerType: 'autoUpdate',
|
||||
includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'icon.svg', 'offline.html'],
|
||||
manifest: {
|
||||
name: 'RioCata - Sistema de Catación de Café',
|
||||
short_name: 'RioCata',
|
||||
description: 'Sistema de catación de café para evaluación y análisis de calidad',
|
||||
theme_color: '#ffffff',
|
||||
background_color: '#ffffff',
|
||||
display: 'standalone',
|
||||
display_override: ['window-controls-overlay'],
|
||||
orientation: 'portrait',
|
||||
scope: '/',
|
||||
start_url: '/',
|
||||
icons: [
|
||||
{
|
||||
src: '/icon-72x72.png',
|
||||
sizes: '72x72',
|
||||
type: 'image/png',
|
||||
purpose: 'any'
|
||||
},
|
||||
{
|
||||
src: '/icon-96x96.png',
|
||||
sizes: '96x96',
|
||||
type: 'image/png',
|
||||
purpose: 'any'
|
||||
},
|
||||
{
|
||||
src: '/icon-128x128.png',
|
||||
sizes: '128x128',
|
||||
type: 'image/png',
|
||||
purpose: 'any'
|
||||
},
|
||||
{
|
||||
src: '/icon-144x144.png',
|
||||
sizes: '144x144',
|
||||
type: 'image/png',
|
||||
purpose: 'any'
|
||||
},
|
||||
{
|
||||
src: '/icon-152x152.png',
|
||||
sizes: '152x152',
|
||||
type: 'image/png',
|
||||
purpose: 'any'
|
||||
},
|
||||
{
|
||||
src: '/icon-192x192.png',
|
||||
sizes: '192x192',
|
||||
type: 'image/png',
|
||||
purpose: 'any maskable'
|
||||
},
|
||||
{
|
||||
src: '/icon-256x256.png',
|
||||
sizes: '256x256',
|
||||
type: 'image/png',
|
||||
purpose: 'any'
|
||||
},
|
||||
{
|
||||
src: '/icon-384x384.png',
|
||||
sizes: '384x384',
|
||||
type: 'image/png',
|
||||
purpose: 'any'
|
||||
},
|
||||
{
|
||||
src: '/icon-512x512.png',
|
||||
sizes: '512x512',
|
||||
type: 'image/png',
|
||||
purpose: 'any maskable'
|
||||
},
|
||||
{
|
||||
src: '/icon-512x512-maskable.png',
|
||||
sizes: '512x512',
|
||||
type: 'image/png',
|
||||
purpose: 'maskable'
|
||||
}
|
||||
],
|
||||
screenshots: [
|
||||
{
|
||||
src: '/screenshots/desktop-1.png',
|
||||
sizes: '1920x1080',
|
||||
type: 'image/png',
|
||||
form_factor: 'wide',
|
||||
label: 'Pantalla principal en escritorio'
|
||||
},
|
||||
{
|
||||
src: '/screenshots/mobile-1.png',
|
||||
sizes: '614x853',
|
||||
type: 'image/png',
|
||||
form_factor: 'narrow',
|
||||
label: 'Pantalla principal en móvil'
|
||||
}
|
||||
]
|
||||
},
|
||||
workbox: {
|
||||
navigateFallback: '/offline.html',
|
||||
navigateFallbackDenylist: [/^\/api\//, /^\/authentik\//],
|
||||
globPatterns: ['**/*.{js,css,html,png,svg,ico,json}'],
|
||||
cleanupOutdatedCaches: true,
|
||||
runtimeCaching: [
|
||||
{
|
||||
urlPattern: /^https:\/\/authentik\.nucleoriofrio\.com\/.*/i,
|
||||
handler: 'NetworkOnly'
|
||||
},
|
||||
{
|
||||
urlPattern: ({ url, request }) => {
|
||||
return request.destination === 'document' ||
|
||||
request.mode === 'navigate' ||
|
||||
url.pathname === '/'
|
||||
},
|
||||
handler: 'NetworkFirst',
|
||||
options: {
|
||||
cacheName: 'pages-cache',
|
||||
networkTimeoutSeconds: 3,
|
||||
expiration: {
|
||||
maxEntries: 50,
|
||||
maxAgeSeconds: 60 * 60 * 24 * 7 // 7 days
|
||||
},
|
||||
cacheableResponse: {
|
||||
statuses: [0, 200]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
devOptions: {
|
||||
enabled: true,
|
||||
type: 'module'
|
||||
}
|
||||
}
|
||||
})
|
||||
21531
nuxt4/package-lock.json
generated
Normal file
21531
nuxt4/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
28
nuxt4/package.json
Normal file
28
nuxt4/package.json
Normal file
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "nuxt4",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxt/content": "^3.7.1",
|
||||
"@nuxt/eslint": "^1.9.0",
|
||||
"@nuxt/image": "^1.11.0",
|
||||
"@nuxt/test-utils": "^3.19.2",
|
||||
"@nuxt/ui": "^4.0.1",
|
||||
"better-sqlite3": "^12.4.1",
|
||||
"eslint": "^9.37.0",
|
||||
"nuxt": "^4.1.3",
|
||||
"typescript": "^5.9.3",
|
||||
"vue": "^3.5.22",
|
||||
"vue-router": "^4.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vite-pwa/nuxt": "^1.0.4"
|
||||
}
|
||||
}
|
||||
BIN
nuxt4/public/apple-touch-icon.png
Normal file
BIN
nuxt4/public/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
nuxt4/public/favicon.ico
Normal file
BIN
nuxt4/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
nuxt4/public/icon-128x128.png
Normal file
BIN
nuxt4/public/icon-128x128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
nuxt4/public/icon-144x144.png
Normal file
BIN
nuxt4/public/icon-144x144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
nuxt4/public/icon-152x152.png
Normal file
BIN
nuxt4/public/icon-152x152.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
nuxt4/public/icon-192x192.png
Normal file
BIN
nuxt4/public/icon-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
nuxt4/public/icon-256x256.png
Normal file
BIN
nuxt4/public/icon-256x256.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
BIN
nuxt4/public/icon-384x384.png
Normal file
BIN
nuxt4/public/icon-384x384.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 161 KiB |
BIN
nuxt4/public/icon-512x512-maskable.png
Normal file
BIN
nuxt4/public/icon-512x512-maskable.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
nuxt4/public/icon-512x512.png
Normal file
BIN
nuxt4/public/icon-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 274 KiB |
BIN
nuxt4/public/icon-72x72.png
Normal file
BIN
nuxt4/public/icon-72x72.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
BIN
nuxt4/public/icon-96x96.png
Normal file
BIN
nuxt4/public/icon-96x96.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
35
nuxt4/public/icon-maskable.svg
Normal file
35
nuxt4/public/icon-maskable.svg
Normal file
@@ -0,0 +1,35 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none">
|
||||
<!-- Background gradient para maskable (fondo completo sin transparencia) -->
|
||||
<defs>
|
||||
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#00DC82;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#00A155;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#4A90E2;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#2E5C8A;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Fondo completo (sin transparencia para evitar el blanco en Windows) -->
|
||||
<rect width="512" height="512" fill="url(#grad1)"/>
|
||||
|
||||
<!-- Contenido en el 80% central (safe zone para maskable icons) -->
|
||||
<g transform="translate(256, 256) scale(0.9) translate(-256, -256)">
|
||||
<!-- Shield shape (Authentik security) -->
|
||||
<path d="M256 80 L380 140 L380 280 Q380 360 256 420 Q132 360 132 280 L132 140 Z"
|
||||
fill="url(#grad2)" opacity="0.3"/>
|
||||
|
||||
<!-- Letter N (Nuxt) -->
|
||||
<path d="M180 200 L180 340 L220 340 L220 260 L292 340 L332 340 L332 200 L292 200 L292 280 L220 200 Z"
|
||||
fill="white" stroke="white" stroke-width="4"/>
|
||||
|
||||
<!-- Lock icon (Authentication) -->
|
||||
<g transform="translate(340, 180)">
|
||||
<rect x="-20" y="10" width="40" height="50" rx="5" fill="white" opacity="0.9"/>
|
||||
<path d="M -15 10 L -15 -5 Q -15 -20 0 -20 Q 15 -20 15 -5 L 15 10"
|
||||
stroke="white" stroke-width="6" fill="none" opacity="0.9"/>
|
||||
<circle cx="0" cy="30" r="5" fill="#00DC82"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
32
nuxt4/public/icon.svg
Normal file
32
nuxt4/public/icon.svg
Normal file
@@ -0,0 +1,32 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none">
|
||||
<!-- Background gradient -->
|
||||
<defs>
|
||||
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#00DC82;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#00A155;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#4A90E2;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#2E5C8A;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background circle -->
|
||||
<circle cx="256" cy="256" r="240" fill="url(#grad1)"/>
|
||||
|
||||
<!-- Shield shape (Authentik security) -->
|
||||
<path d="M256 80 L380 140 L380 280 Q380 360 256 420 Q132 360 132 280 L132 140 Z"
|
||||
fill="url(#grad2)" opacity="0.3"/>
|
||||
|
||||
<!-- Letter N (Nuxt) -->
|
||||
<path d="M180 200 L180 340 L220 340 L220 260 L292 340 L332 340 L332 200 L292 200 L292 280 L220 200 Z"
|
||||
fill="white" stroke="white" stroke-width="4"/>
|
||||
|
||||
<!-- Lock icon (Authentication) -->
|
||||
<g transform="translate(340, 180)">
|
||||
<rect x="-20" y="10" width="40" height="50" rx="5" fill="white" opacity="0.9"/>
|
||||
<path d="M -15 10 L -15 -5 Q -15 -20 0 -20 Q 15 -20 15 -5 L 15 10"
|
||||
stroke="white" stroke-width="6" fill="none" opacity="0.9"/>
|
||||
<circle cx="0" cy="30" r="5" fill="url(#grad1)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
130
nuxt4/public/offline.html
Normal file
130
nuxt4/public/offline.html
Normal file
@@ -0,0 +1,130 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Modo Offline - Plantilla Nuxt + Authentik</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 48px 32px;
|
||||
max-width: 480px;
|
||||
width: 100%;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto 24px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
color: #1f2937;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.button {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 14px 32px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
|
||||
}
|
||||
|
||||
.button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.status {
|
||||
display: inline-block;
|
||||
margin-top: 24px;
|
||||
padding: 8px 16px;
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="icon">📡</div>
|
||||
<h1>Modo Offline</h1>
|
||||
<p>
|
||||
No tienes conexión a internet en este momento.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Esta aplicación usa SSR (Server-Side Rendering) con autenticación Authentik</strong>, por lo que requiere conexión para cargar cuando se abre desde cero.
|
||||
</p>
|
||||
<p style="font-size: 14px; color: #9ca3af;">
|
||||
💡 <strong>Nota técnica:</strong> El modo offline completo solo funcionaría sin autenticación o sin SSR (SPA).
|
||||
Sin embargo, si ya tienes la app abierta y pierdes conexión, la interfaz seguirá funcionando con los datos cacheados.
|
||||
</p>
|
||||
<button class="button" onclick="window.location.reload()">
|
||||
Reintentar Conexión
|
||||
</button>
|
||||
<div class="status">
|
||||
⚠️ Sin conexión
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Verificar conexión cada 3 segundos
|
||||
setInterval(() => {
|
||||
if (navigator.onLine) {
|
||||
window.location.href = '/';
|
||||
}
|
||||
}, 3000);
|
||||
|
||||
// Escuchar evento de conexión
|
||||
window.addEventListener('online', () => {
|
||||
window.location.href = '/';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
2
nuxt4/public/robots.txt
Normal file
2
nuxt4/public/robots.txt
Normal file
@@ -0,0 +1,2 @@
|
||||
User-Agent: *
|
||||
Disallow:
|
||||
BIN
nuxt4/public/screenshots/desktop-1.png
Normal file
BIN
nuxt4/public/screenshots/desktop-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
BIN
nuxt4/public/screenshots/mobile-1.png
Normal file
BIN
nuxt4/public/screenshots/mobile-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
BIN
nuxt4/public/screenshots/tablet-1.png
Normal file
BIN
nuxt4/public/screenshots/tablet-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
40
nuxt4/server/api/auth/check-group.post.ts
Normal file
40
nuxt4/server/api/auth/check-group.post.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
/**
|
||||
* Endpoint para verificar membresía de grupo desde el backend
|
||||
* Valida contra los headers de Authentik en el servidor
|
||||
*/
|
||||
export default defineEventHandler(async (event) => {
|
||||
// Leer el body de la petición
|
||||
const body = await readBody(event)
|
||||
const { groupName } = body
|
||||
|
||||
if (!groupName || typeof groupName !== 'string') {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'Group name is required'
|
||||
})
|
||||
}
|
||||
|
||||
// Leer headers de Authentik
|
||||
const headers = getHeaders(event)
|
||||
const authentikGroups = headers['x-authentik-groups']
|
||||
|
||||
// Si no hay header de grupos, el usuario no está autenticado o no tiene grupos
|
||||
if (!authentikGroups) {
|
||||
return {
|
||||
hasGroup: false,
|
||||
groups: []
|
||||
}
|
||||
}
|
||||
|
||||
// Parsear los grupos (separados por |)
|
||||
const userGroups = authentikGroups.split('|').filter(g => g.trim())
|
||||
|
||||
// Verificar si el usuario tiene el grupo solicitado
|
||||
const hasGroup = userGroups.includes(groupName)
|
||||
|
||||
return {
|
||||
hasGroup,
|
||||
groups: userGroups,
|
||||
checkedGroup: groupName
|
||||
}
|
||||
})
|
||||
43
nuxt4/server/api/auth/status.get.ts
Normal file
43
nuxt4/server/api/auth/status.get.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
/**
|
||||
* API endpoint para verificar el estado de autenticación en tiempo real
|
||||
* Consulta los headers inyectados por Authentik Proxy Outpost
|
||||
*/
|
||||
export default defineEventHandler((event) => {
|
||||
// Establecer headers para prevenir caching
|
||||
setResponseHeaders(event, {
|
||||
'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate',
|
||||
'Pragma': 'no-cache',
|
||||
'Expires': '0'
|
||||
})
|
||||
|
||||
// Leer headers de Authentik en tiempo real
|
||||
const headers = getHeaders(event)
|
||||
|
||||
const username = headers['x-authentik-username']
|
||||
const email = headers['x-authentik-email']
|
||||
const name = headers['x-authentik-name']
|
||||
const groups = headers['x-authentik-groups']
|
||||
const uid = headers['x-authentik-uid']
|
||||
|
||||
// Si no hay username, no hay sesión activa en Authentik
|
||||
if (!username) {
|
||||
return {
|
||||
authenticated: false,
|
||||
user: null,
|
||||
timestamp: new Date().toISOString()
|
||||
}
|
||||
}
|
||||
|
||||
// Sesión activa
|
||||
return {
|
||||
authenticated: true,
|
||||
user: {
|
||||
username,
|
||||
email,
|
||||
name,
|
||||
groups: groups ? groups.split('|') : [],
|
||||
uid
|
||||
},
|
||||
timestamp: new Date().toISOString()
|
||||
}
|
||||
})
|
||||
18
nuxt4/tsconfig.json
Normal file
18
nuxt4/tsconfig.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
// https://nuxt.com/docs/guide/concepts/typescript
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./.nuxt/tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"path": "./.nuxt/tsconfig.server.json"
|
||||
},
|
||||
{
|
||||
"path": "./.nuxt/tsconfig.shared.json"
|
||||
},
|
||||
{
|
||||
"path": "./.nuxt/tsconfig.node.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user