Implementación inicial de Nucleo Whisper
- Configurado proyecto Nuxt 4 con PWA - Integrado OpenAI Whisper API para transcripción de audio - Implementada captura de audio desde navegador - Creada UI con grabación y visualización de transcripciones - Configurado Authentik Proxy para autenticación - Setup de Docker y Gitea Actions para despliegue
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="plantillaNuxtAuthentikProxy"
|
||||||
|
|
||||||
|
# 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
|
||||||
41
.gitignore
vendored
Normal file
41
.gitignore
vendored
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
# Directorio de configuración local de Claude
|
||||||
|
.claude/settings.local.json
|
||||||
|
|
||||||
|
# Node modules
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# Build outputs
|
||||||
|
dist/
|
||||||
|
.output/
|
||||||
|
.nuxt/
|
||||||
|
.nitro/
|
||||||
|
|
||||||
|
# Environment files
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
|
!.env.example
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
logs/
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# OS files
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# IDE
|
||||||
|
.vscode/
|
||||||
|
.idea/
|
||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
*~
|
||||||
|
|
||||||
|
# Local data
|
||||||
|
.data/
|
||||||
|
|
||||||
|
# Docker
|
||||||
|
*.dockerignore
|
||||||
316
README.md
Normal file
316
README.md
Normal file
@@ -0,0 +1,316 @@
|
|||||||
|
# Nucleo Whisper
|
||||||
|
|
||||||
|
Aplicación de transcripción de audio usando OpenAI Whisper con Nuxt 4 PWA y autenticación mediante Authentik Proxy Outpost.
|
||||||
|
|
||||||
|
## Estructura del Proyecto
|
||||||
|
|
||||||
|
```
|
||||||
|
.
|
||||||
|
├── nuxt4/ # Aplicación Nuxt 4
|
||||||
|
├── docker-compose.yml # Configuración de despliegue
|
||||||
|
└── .gitea/ # Gitea Actions CI/CD
|
||||||
|
```
|
||||||
|
|
||||||
|
## Características
|
||||||
|
|
||||||
|
- ✅ Nuxt 4 con PWA
|
||||||
|
- ✅ Transcripción de audio con OpenAI Whisper API
|
||||||
|
- ✅ Captura de audio desde el navegador
|
||||||
|
- ✅ Autenticación con Authentik Proxy Outpost
|
||||||
|
- ✅ Docker y Docker Compose
|
||||||
|
- ✅ CI/CD con Gitea Actions
|
||||||
|
- ✅ Traefik para proxy reverso y SSL
|
||||||
|
- ✅ Funciona offline como PWA instalable
|
||||||
|
- ✅ Claude Code hooks para monitoreo de Actions
|
||||||
|
|
||||||
|
## Desarrollo Local
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd nuxt4
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
## Claude Code Hooks
|
||||||
|
|
||||||
|
Este proyecto incluye hooks de Claude Code para monitorear automáticamente las Gitea Actions.
|
||||||
|
|
||||||
|
### Configuración Rápida:
|
||||||
|
|
||||||
|
1. **Crear token de Gitea:**
|
||||||
|
- Ve a tu instancia de Gitea → Settings → Applications
|
||||||
|
- Genera un token con permisos `repo`
|
||||||
|
|
||||||
|
2. **Configurar token:**
|
||||||
|
```bash
|
||||||
|
echo "export GITEA_TOKEN='tu_token_aqui'" >> ~/.bashrc
|
||||||
|
source ~/.bashrc
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **Listo!** Cuando Claude Code haga `git push`, automáticamente:
|
||||||
|
- Monitoreará la Gitea Action
|
||||||
|
- Te notificará cuando termine con información detallada
|
||||||
|
- Te mostrará un link directo a los logs
|
||||||
|
|
||||||
|
📖 Ver documentación completa en [`.claude/hooks/README.md`](.claude/hooks/README.md)
|
||||||
|
|
||||||
|
## Arquitectura de Componentes
|
||||||
|
|
||||||
|
### Componentes de Autenticación
|
||||||
|
|
||||||
|
La aplicación utiliza componentes Vue modulares para manejar la autenticación:
|
||||||
|
|
||||||
|
#### 1. **UserAvatar** (`app/components/auth/UserAvatar.vue`)
|
||||||
|
- Muestra el avatar del usuario (generado por UI Avatars)
|
||||||
|
- Información básica: nombre/username, email y UID
|
||||||
|
- Se renderiza solo cuando el usuario está autenticado
|
||||||
|
|
||||||
|
#### 2. **UserMetadata** (`app/components/auth/UserMetadata.vue`)
|
||||||
|
- Card detallada con todos los metadatos del usuario
|
||||||
|
- Muestra: username, email, nombre completo, UID y grupos
|
||||||
|
- Incluye badges para visualizar los grupos del usuario
|
||||||
|
|
||||||
|
#### 3. **Botones de Acción** (componentes individuales)
|
||||||
|
Cada botón es un componente independiente con su propia lógica:
|
||||||
|
|
||||||
|
- **SessionStatusButton**: Verifica el estado de la sesión contra Authentik
|
||||||
|
- Hace una petición a `/api/auth/status`
|
||||||
|
- Muestra notificaciones toast con el resultado
|
||||||
|
- Maneja casos offline y errores de conexión
|
||||||
|
|
||||||
|
- **ProfileButton**: Redirige al perfil de usuario en Authentik
|
||||||
|
- Abre el panel de usuario de Authentik en nueva pestaña
|
||||||
|
- URL: `{authentikUrl}/if/user/`
|
||||||
|
|
||||||
|
- **LogoutButton**: Cierra sesión en Authentik
|
||||||
|
- Invalida la sesión en todas las aplicaciones
|
||||||
|
- Redirige a: `{authentikUrl}/flows/-/default/invalidation/`
|
||||||
|
|
||||||
|
- **LoginButton**: Fuerza re-autenticación
|
||||||
|
- Recarga la página para activar el flujo de login de Authentik
|
||||||
|
|
||||||
|
### Composable `useAuthentik()`
|
||||||
|
|
||||||
|
Composable centralizado para manejar autenticación (`app/composables/useAuthentik.ts`):
|
||||||
|
|
||||||
|
**Funcionalidades:**
|
||||||
|
- Lee headers de Authentik en el servidor (SSR)
|
||||||
|
- Almacena información del usuario en `useState` (compartido entre cliente/servidor)
|
||||||
|
- Proporciona funciones reactivas: `user`, `isAuthenticated`
|
||||||
|
- Métodos: `logout()`, `goToProfile()`, `checkSessionStatus()`
|
||||||
|
|
||||||
|
**Headers leídos del Proxy:**
|
||||||
|
```typescript
|
||||||
|
X-authentik-username // Nombre de usuario
|
||||||
|
X-authentik-email // Email
|
||||||
|
X-authentik-name // Nombre completo
|
||||||
|
X-authentik-groups // Grupos (separados por |)
|
||||||
|
X-authentik-uid // ID único del usuario
|
||||||
|
```
|
||||||
|
|
||||||
|
## Despliegue
|
||||||
|
|
||||||
|
El proyecto incluye Gitea Actions que automáticamente:
|
||||||
|
1. Construye la imagen Docker
|
||||||
|
2. La sube al registro
|
||||||
|
3. Despliega usando docker-compose
|
||||||
|
|
||||||
|
### Variables Requeridas en Gitea
|
||||||
|
|
||||||
|
Para configurar el despliegue automático, ve a tu repositorio en Gitea:
|
||||||
|
- **Secrets**: `Settings > Actions > Secrets`
|
||||||
|
- **Variables**: `Settings > Actions > Variables`
|
||||||
|
|
||||||
|
**Secrets (valores sensibles):**
|
||||||
|
- `REGISTRY_USERNAME` - Usuario del registro Docker
|
||||||
|
- `REGISTRY_PASSWORD` - Contraseña del registro Docker
|
||||||
|
|
||||||
|
**Variables (valores públicos):**
|
||||||
|
- `REGISTRY_URL` - URL del registro Docker (ej: `gitea.nucleoriofrio.com`)
|
||||||
|
- El owner del repositorio se agrega automáticamente
|
||||||
|
- Imagen final: `REGISTRY_URL/owner/APP_NAME:latest`
|
||||||
|
- `APP_NAME` - Nombre de la aplicación (ej: `mi-app`) - usado para container, imagen y Traefik
|
||||||
|
- `APP_DOMAIN` - Dominio de la aplicación (ej: `miapp.ejemplo.com`)
|
||||||
|
- `NUXT_PUBLIC_APP_URL` - URL pública de la app (ej: `https://miapp.ejemplo.com`)
|
||||||
|
|
||||||
|
📄 Ver ejemplo completo en [`.env.example`](.env.example)
|
||||||
|
|
||||||
|
## Configuración de Traefik y Authentik
|
||||||
|
|
||||||
|
### 🔐 Cómo Funciona Authentik Proxy Outpost
|
||||||
|
|
||||||
|
Authentik Proxy Outpost actúa como un **Forward Auth** middleware que intercepta todas las peticiones antes de que lleguen a tu aplicación:
|
||||||
|
|
||||||
|
```
|
||||||
|
Usuario → Traefik → Authentik Forward Auth → Aplicación Nuxt
|
||||||
|
↓ (si no auth)
|
||||||
|
Redirect a Login
|
||||||
|
```
|
||||||
|
|
||||||
|
**Flujo de autenticación:**
|
||||||
|
|
||||||
|
1. **Usuario hace petición** → Traefik recibe la petición a tu dominio
|
||||||
|
2. **Traefik consulta Authentik** → Envía la petición al middleware de Forward Auth
|
||||||
|
3. **Authentik valida sesión:**
|
||||||
|
- ✅ **Con sesión válida**: Authentik agrega headers con info del usuario y envía la petición a tu app
|
||||||
|
- ❌ **Sin sesión**: Authentik redirige al usuario al flujo de login
|
||||||
|
4. **Tu app recibe la petición** → Con headers de usuario ya inyectados (SSR)
|
||||||
|
|
||||||
|
**Ventajas:**
|
||||||
|
- ✅ No necesitas implementar OAuth en tu app
|
||||||
|
- ✅ La autenticación se maneja completamente fuera de tu código
|
||||||
|
- ✅ Los headers llegan automáticamente en cada petición SSR
|
||||||
|
- ✅ Funciona con cualquier framework (Nuxt, Next.js, PHP, etc.)
|
||||||
|
|
||||||
|
### 🚦 Configuración de Reglas de Traefik
|
||||||
|
|
||||||
|
El `docker-compose.yml` configura **dos routers** en Traefik para balancear seguridad y funcionalidad PWA:
|
||||||
|
|
||||||
|
#### Router 1: Rutas Públicas (Sin Autenticación) - Prioridad 100
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
# Rutas que NO requieren autenticación
|
||||||
|
- PathPrefix(`/manifest.webmanifest`) # Manifest PWA
|
||||||
|
- PathPrefix(`/sw.js`) # Service Worker
|
||||||
|
- PathPrefix(`/workbox-`) # Workbox (PWA)
|
||||||
|
- PathPrefix(`/icon-`) # Iconos de la app
|
||||||
|
- PathPrefix(`/apple-touch-icon`) # Icono iOS
|
||||||
|
- PathPrefix(`/favicon.ico`) # Favicon
|
||||||
|
- PathPrefix(`/robots.txt`) # SEO
|
||||||
|
- PathPrefix(`/offline.html`) # Página offline PWA
|
||||||
|
- PathPrefix(`/api/_nuxt_icon/`) # API de iconos de Nuxt
|
||||||
|
```
|
||||||
|
|
||||||
|
**Middlewares aplicados:**
|
||||||
|
- `${APP_NAME}-headers`: Headers personalizados (X-Forwarded-Proto)
|
||||||
|
- `${APP_NAME}-cors`: Configuración CORS para recursos públicos
|
||||||
|
|
||||||
|
**¿Por qué sin autenticación?**
|
||||||
|
- Los Service Workers necesitan acceso sin auth para funcionar offline
|
||||||
|
- Los manifests PWA deben ser públicos para instalación
|
||||||
|
- Prioridad 100 asegura que estas rutas se evalúen primero
|
||||||
|
|
||||||
|
#### Router 2: Aplicación Protegida (Con Autenticación) - Prioridad 10
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
# Todas las demás rutas (Host match)
|
||||||
|
Host(`${APP_DOMAIN}`)
|
||||||
|
```
|
||||||
|
|
||||||
|
**Middlewares aplicados:**
|
||||||
|
- `authentik-forward-auth@file`: Forward Auth de Authentik
|
||||||
|
- `${APP_NAME}-headers`: Headers personalizados
|
||||||
|
|
||||||
|
**Características:**
|
||||||
|
- Prioridad menor (10) → se evalúa después de las rutas públicas
|
||||||
|
- Cualquier ruta no pública pasa por autenticación
|
||||||
|
- Authentik inyecta headers con información del usuario
|
||||||
|
|
||||||
|
### 📋 Configuración de Authentik Proxy Outpost
|
||||||
|
|
||||||
|
**Requisitos previos:**
|
||||||
|
- Traefik corriendo con las redes `traefik-network` y `principal`
|
||||||
|
- Authentik instalado y funcionando
|
||||||
|
|
||||||
|
**Pasos de configuración:**
|
||||||
|
|
||||||
|
#### 1. Crear el Middleware en Traefik
|
||||||
|
|
||||||
|
Crea o edita el archivo de configuración dinámica de Traefik (ej: `dynamic/middlewares.yml`):
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
http:
|
||||||
|
middlewares:
|
||||||
|
authentik-forward-auth:
|
||||||
|
forwardAuth:
|
||||||
|
address: http://authentik-server:9000/outpost.goauthentik.io/auth/traefik
|
||||||
|
trustForwardHeader: true
|
||||||
|
authResponseHeaders:
|
||||||
|
- X-authentik-username
|
||||||
|
- X-authentik-groups
|
||||||
|
- X-authentik-email
|
||||||
|
- X-authentik-name
|
||||||
|
- X-authentik-uid
|
||||||
|
```
|
||||||
|
|
||||||
|
**Importante:** Cambia `authentik-server` por el nombre de tu contenedor/servicio de Authentik.
|
||||||
|
|
||||||
|
#### 2. Configurar Authentik
|
||||||
|
|
||||||
|
**a) Crear un Proxy Provider:**
|
||||||
|
- Ve a **Admin > Applications > Providers**
|
||||||
|
- Click en **Create**
|
||||||
|
- Tipo: **Proxy Provider**
|
||||||
|
- Configuración:
|
||||||
|
- **Name**: `Mi App - Forward Auth`
|
||||||
|
- **Authorization flow**: Selecciona tu flujo (ej: `default-provider-authorization-implicit-consent`)
|
||||||
|
- **Type**: `Forward auth (single application)`
|
||||||
|
- **External host**: `https://miapp.ejemplo.com` (tu dominio)
|
||||||
|
|
||||||
|
**b) Crear una Application:**
|
||||||
|
- Ve a **Admin > Applications > Applications**
|
||||||
|
- Click en **Create**
|
||||||
|
- Configuración:
|
||||||
|
- **Name**: `Mi App`
|
||||||
|
- **Slug**: `mi-app`
|
||||||
|
- **Provider**: Selecciona el provider creado arriba
|
||||||
|
|
||||||
|
**c) Vincular al Outpost:**
|
||||||
|
- Ve a **Admin > Outposts > Outposts**
|
||||||
|
- Edita tu Outpost (o crea uno nuevo si no existe)
|
||||||
|
- En **Applications**: Agrega la aplicación creada
|
||||||
|
|
||||||
|
#### 3. Configurar las Redes en Docker Compose
|
||||||
|
|
||||||
|
Tu aplicación necesita estar en ambas redes:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
networks:
|
||||||
|
principal: # Red de tu infraestructura
|
||||||
|
external: true
|
||||||
|
traefik-network: # Red donde corre Traefik
|
||||||
|
external: true
|
||||||
|
```
|
||||||
|
|
||||||
|
Asegúrate de que estas redes existan:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker network create principal
|
||||||
|
docker network create traefik-network
|
||||||
|
```
|
||||||
|
|
||||||
|
### 🔍 Headers Disponibles en tu Aplicación
|
||||||
|
|
||||||
|
Una vez configurado, Authentik inyecta estos headers en cada petición:
|
||||||
|
|
||||||
|
| Header | Descripción | Ejemplo |
|
||||||
|
|--------|-------------|---------|
|
||||||
|
| `X-authentik-username` | Nombre de usuario | `nucleo000` |
|
||||||
|
| `X-authentik-email` | Email del usuario | `user@example.com` |
|
||||||
|
| `X-authentik-name` | Nombre completo | `John Doe` |
|
||||||
|
| `X-authentik-groups` | Grupos (separados por `\|`) | `admins\|users` |
|
||||||
|
| `X-authentik-uid` | ID único del usuario | `703cae063c59...` |
|
||||||
|
|
||||||
|
**En Nuxt**, estos headers se leen automáticamente en SSR mediante `useRequestHeaders()`.
|
||||||
|
|
||||||
|
### 🐛 Troubleshooting
|
||||||
|
|
||||||
|
**Problema: "Cannot find name 'process'"**
|
||||||
|
- ✅ Usa `import.meta.server` en lugar de `process.server` (Nuxt 4)
|
||||||
|
|
||||||
|
**Problema: Redirect loop infinito**
|
||||||
|
- Verifica que el middleware `authentik-forward-auth@file` esté correctamente configurado
|
||||||
|
- Revisa que la aplicación esté asociada al Outpost en Authentik
|
||||||
|
- Comprueba que el External host coincida con tu dominio
|
||||||
|
|
||||||
|
**Problema: Headers no llegan a la aplicación**
|
||||||
|
- Verifica que `authResponseHeaders` incluya todos los headers necesarios
|
||||||
|
- Asegúrate de que estés leyendo headers en SSR (`import.meta.server`)
|
||||||
|
|
||||||
|
**Problema: PWA no funciona offline**
|
||||||
|
- Verifica que las rutas públicas tengan prioridad 100
|
||||||
|
- Confirma que `/sw.js`, `/manifest.webmanifest` y `/offline.html` estén en el router público
|
||||||
|
|
||||||
|
## Licencia
|
||||||
|
|
||||||
|
MIT
|
||||||
55
docker-compose.yml
Normal file
55
docker-compose.yml
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
version: '3.8'
|
||||||
|
|
||||||
|
services:
|
||||||
|
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:
|
||||||
|
- principal
|
||||||
|
- traefik-network
|
||||||
|
labels:
|
||||||
|
# Traefik labels
|
||||||
|
- "traefik.enable=true"
|
||||||
|
- "traefik.docker.network=traefik-network"
|
||||||
|
|
||||||
|
# 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:
|
||||||
|
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.
|
||||||
229
nuxt4/app/app.vue
Normal file
229
nuxt4/app/app.vue
Normal file
@@ -0,0 +1,229 @@
|
|||||||
|
<template>
|
||||||
|
<UApp>
|
||||||
|
<NuxtRouteAnnouncer />
|
||||||
|
<UNotifications />
|
||||||
|
|
||||||
|
<UContainer class="py-8">
|
||||||
|
<div class="space-y-6 max-w-2xl mx-auto">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="text-center mb-8">
|
||||||
|
<div class="flex items-center justify-center gap-3 mb-2">
|
||||||
|
<UIcon name="i-heroicons-microphone" class="w-12 h-12 text-green-500" />
|
||||||
|
<h1 class="text-4xl font-bold">Nucleo Whisper</h1>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400">
|
||||||
|
Transcripción de audio con OpenAI Whisper
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contenido principal -->
|
||||||
|
<div v-if="isAuthenticated" class="space-y-6">
|
||||||
|
<!-- Información del usuario -->
|
||||||
|
<UCard>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<UIcon name="i-heroicons-user-circle" class="w-8 h-8 text-gray-500" />
|
||||||
|
<div>
|
||||||
|
<p class="font-semibold">{{ user?.name || user?.username }}</p>
|
||||||
|
<p class="text-sm text-gray-500">{{ user?.email }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</UCard>
|
||||||
|
|
||||||
|
<!-- Control de grabación -->
|
||||||
|
<UCard>
|
||||||
|
<template #header>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<UIcon name="i-heroicons-microphone" class="w-5 h-5" />
|
||||||
|
<h3 class="text-lg font-semibold">Grabación</h3>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div class="flex flex-col items-center gap-4">
|
||||||
|
<!-- Botón de grabación -->
|
||||||
|
<button
|
||||||
|
@click="toggleRecording"
|
||||||
|
:disabled="isTranscribing"
|
||||||
|
class="relative w-32 h-32 rounded-full transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-offset-2"
|
||||||
|
:class="isRecording
|
||||||
|
? 'bg-red-500 hover:bg-red-600 focus:ring-red-300 scale-110'
|
||||||
|
: 'bg-green-500 hover:bg-green-600 focus:ring-green-300'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<UIcon
|
||||||
|
:name="isRecording ? 'i-heroicons-stop' : 'i-heroicons-microphone'"
|
||||||
|
class="w-16 h-16 text-white mx-auto"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Animación de pulso cuando está grabando -->
|
||||||
|
<span
|
||||||
|
v-if="isRecording"
|
||||||
|
class="absolute inset-0 rounded-full bg-red-500 animate-ping opacity-75"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Estado -->
|
||||||
|
<div class="text-center">
|
||||||
|
<p v-if="isRecording" class="text-lg font-semibold text-red-600">
|
||||||
|
Grabando...
|
||||||
|
</p>
|
||||||
|
<p v-else-if="isTranscribing" class="text-lg font-semibold text-blue-600">
|
||||||
|
Transcribiendo...
|
||||||
|
</p>
|
||||||
|
<p v-else class="text-lg text-gray-600">
|
||||||
|
Presiona para grabar
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Instrucciones -->
|
||||||
|
<div class="text-sm text-gray-500 text-center">
|
||||||
|
<p>1. Presiona el botón para iniciar la grabación</p>
|
||||||
|
<p>2. Habla claramente</p>
|
||||||
|
<p>3. Presiona nuevamente para detener y transcribir</p>
|
||||||
|
<p class="mt-2 text-xs">El texto se copiará automáticamente al portapapeles</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</UCard>
|
||||||
|
|
||||||
|
<!-- Resultado de transcripción -->
|
||||||
|
<UCard v-if="transcription || error">
|
||||||
|
<template #header>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<UIcon name="i-heroicons-document-text" class="w-5 h-5" />
|
||||||
|
<h3 class="text-lg font-semibold">
|
||||||
|
{{ error ? 'Error' : 'Transcripción' }}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
v-if="transcription"
|
||||||
|
@click="copyText"
|
||||||
|
class="text-sm text-green-600 hover:text-green-700 flex items-center gap-1"
|
||||||
|
>
|
||||||
|
<UIcon name="i-heroicons-clipboard-document" class="w-4 h-4" />
|
||||||
|
Copiar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- Error -->
|
||||||
|
<div v-if="error" class="text-red-600">
|
||||||
|
<p class="font-semibold">Ha ocurrido un error:</p>
|
||||||
|
<p class="text-sm mt-1">{{ error }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Transcripción -->
|
||||||
|
<div v-else class="space-y-3">
|
||||||
|
<p class="text-gray-800 dark:text-gray-200 whitespace-pre-wrap">
|
||||||
|
{{ transcription }}
|
||||||
|
</p>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<UButton
|
||||||
|
icon="i-heroicons-clipboard-document"
|
||||||
|
size="sm"
|
||||||
|
color="green"
|
||||||
|
@click="copyText"
|
||||||
|
>
|
||||||
|
Copiar
|
||||||
|
</UButton>
|
||||||
|
<UButton
|
||||||
|
icon="i-heroicons-x-mark"
|
||||||
|
size="sm"
|
||||||
|
color="gray"
|
||||||
|
variant="soft"
|
||||||
|
@click="clear"
|
||||||
|
>
|
||||||
|
Limpiar
|
||||||
|
</UButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</UCard>
|
||||||
|
|
||||||
|
<!-- Sesión -->
|
||||||
|
<div class="flex justify-center gap-3">
|
||||||
|
<UButton
|
||||||
|
icon="i-heroicons-arrow-right-on-rectangle"
|
||||||
|
color="gray"
|
||||||
|
variant="soft"
|
||||||
|
@click="logout"
|
||||||
|
>
|
||||||
|
Cerrar Sesión
|
||||||
|
</UButton>
|
||||||
|
</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, user, logout } = useAuthentik()
|
||||||
|
const {
|
||||||
|
isRecording,
|
||||||
|
isTranscribing,
|
||||||
|
transcription,
|
||||||
|
error,
|
||||||
|
startRecording,
|
||||||
|
stopRecording,
|
||||||
|
clearTranscription,
|
||||||
|
copyToClipboard
|
||||||
|
} = useWhisper()
|
||||||
|
|
||||||
|
const toast = useToast()
|
||||||
|
|
||||||
|
const toggleRecording = () => {
|
||||||
|
if (isRecording.value) {
|
||||||
|
stopRecording()
|
||||||
|
} else {
|
||||||
|
startRecording()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const copyText = async () => {
|
||||||
|
const success = await copyToClipboard()
|
||||||
|
if (success) {
|
||||||
|
toast.add({
|
||||||
|
title: 'Copiado',
|
||||||
|
description: 'Texto copiado al portapapeles',
|
||||||
|
icon: 'i-heroicons-check-circle',
|
||||||
|
color: 'green'
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
toast.add({
|
||||||
|
title: 'Error',
|
||||||
|
description: 'No se pudo copiar al portapapeles',
|
||||||
|
icon: 'i-heroicons-x-circle',
|
||||||
|
color: 'red'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const clear = () => {
|
||||||
|
clearTranscription()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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: '#10b981' },
|
||||||
|
{ 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
|
||||||
|
}
|
||||||
|
}
|
||||||
137
nuxt4/app/composables/useWhisper.ts
Normal file
137
nuxt4/app/composables/useWhisper.ts
Normal file
@@ -0,0 +1,137 @@
|
|||||||
|
export const useWhisper = () => {
|
||||||
|
const isRecording = useState<boolean>('whisper_isRecording', () => false)
|
||||||
|
const isTranscribing = useState<boolean>('whisper_isTranscribing', () => false)
|
||||||
|
const transcription = useState<string>('whisper_transcription', () => '')
|
||||||
|
const error = useState<string | null>('whisper_error', () => null)
|
||||||
|
|
||||||
|
let mediaRecorder: MediaRecorder | null = null
|
||||||
|
let audioChunks: Blob[] = []
|
||||||
|
|
||||||
|
const startRecording = async () => {
|
||||||
|
try {
|
||||||
|
error.value = null
|
||||||
|
|
||||||
|
// Solicitar permisos de micrófono
|
||||||
|
const stream = await navigator.mediaDevices.getUserMedia({
|
||||||
|
audio: {
|
||||||
|
echoCancellation: true,
|
||||||
|
noiseSuppression: true,
|
||||||
|
sampleRate: 16000
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Crear MediaRecorder
|
||||||
|
const mimeType = MediaRecorder.isTypeSupported('audio/webm')
|
||||||
|
? 'audio/webm'
|
||||||
|
: 'audio/mp4'
|
||||||
|
|
||||||
|
mediaRecorder = new MediaRecorder(stream, {
|
||||||
|
mimeType
|
||||||
|
})
|
||||||
|
|
||||||
|
audioChunks = []
|
||||||
|
|
||||||
|
mediaRecorder.ondataavailable = (event) => {
|
||||||
|
if (event.data.size > 0) {
|
||||||
|
audioChunks.push(event.data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
mediaRecorder.onstop = async () => {
|
||||||
|
// Detener todos los tracks del stream
|
||||||
|
stream.getTracks().forEach(track => track.stop())
|
||||||
|
|
||||||
|
// Procesar la transcripción
|
||||||
|
await processTranscription()
|
||||||
|
}
|
||||||
|
|
||||||
|
mediaRecorder.start()
|
||||||
|
isRecording.value = true
|
||||||
|
|
||||||
|
console.log('[Whisper] Grabación iniciada')
|
||||||
|
} catch (err: any) {
|
||||||
|
console.error('[Whisper] Error al iniciar grabación:', err)
|
||||||
|
error.value = err.message || 'Error al acceder al micrófono'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const stopRecording = () => {
|
||||||
|
if (mediaRecorder && isRecording.value) {
|
||||||
|
mediaRecorder.stop()
|
||||||
|
isRecording.value = false
|
||||||
|
console.log('[Whisper] Grabación detenida')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const processTranscription = async () => {
|
||||||
|
try {
|
||||||
|
isTranscribing.value = true
|
||||||
|
error.value = null
|
||||||
|
|
||||||
|
// Crear blob del audio
|
||||||
|
const audioBlob = new Blob(audioChunks, { type: 'audio/webm' })
|
||||||
|
|
||||||
|
console.log('[Whisper] Enviando audio para transcripción:', {
|
||||||
|
size: audioBlob.size,
|
||||||
|
type: audioBlob.type
|
||||||
|
})
|
||||||
|
|
||||||
|
// Crear FormData
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append('file', audioBlob, 'recording.webm')
|
||||||
|
formData.append('language', 'es')
|
||||||
|
|
||||||
|
// Enviar al backend
|
||||||
|
const response = await $fetch('/api/whisper/transcribe', {
|
||||||
|
method: 'POST',
|
||||||
|
body: formData
|
||||||
|
})
|
||||||
|
|
||||||
|
if (response.success) {
|
||||||
|
transcription.value = response.transcription
|
||||||
|
console.log('[Whisper] Transcripción exitosa:', response.transcription)
|
||||||
|
|
||||||
|
// Copiar al clipboard automáticamente
|
||||||
|
if (navigator.clipboard) {
|
||||||
|
await navigator.clipboard.writeText(response.transcription)
|
||||||
|
console.log('[Whisper] Copiado al clipboard')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err: any) {
|
||||||
|
console.error('[Whisper] Error en transcripción:', err)
|
||||||
|
error.value = err.message || 'Error al procesar la transcripción'
|
||||||
|
} finally {
|
||||||
|
isTranscribing.value = false
|
||||||
|
audioChunks = []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const clearTranscription = () => {
|
||||||
|
transcription.value = ''
|
||||||
|
error.value = null
|
||||||
|
}
|
||||||
|
|
||||||
|
const copyToClipboard = async () => {
|
||||||
|
if (transcription.value && navigator.clipboard) {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(transcription.value)
|
||||||
|
return true
|
||||||
|
} catch (err) {
|
||||||
|
console.error('[Whisper] Error al copiar:', err)
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
isRecording: readonly(isRecording),
|
||||||
|
isTranscribing: readonly(isTranscribing),
|
||||||
|
transcription: readonly(transcription),
|
||||||
|
error: readonly(error),
|
||||||
|
startRecording,
|
||||||
|
stopRecording,
|
||||||
|
clearTranscription,
|
||||||
|
copyToClipboard
|
||||||
|
}
|
||||||
|
}
|
||||||
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
|
||||||
|
)
|
||||||
110
nuxt4/nuxt.config.ts
Normal file
110
nuxt4/nuxt.config.ts
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
// 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: 'Nucleo Whisper',
|
||||||
|
short_name: 'Whisper',
|
||||||
|
description: 'Aplicación de transcripción de audio usando OpenAI Whisper',
|
||||||
|
theme_color: '#10b981',
|
||||||
|
background_color: '#ffffff',
|
||||||
|
display: 'standalone',
|
||||||
|
display_override: ['window-controls-overlay'],
|
||||||
|
orientation: 'portrait',
|
||||||
|
scope: '/',
|
||||||
|
start_url: '/',
|
||||||
|
icons: [
|
||||||
|
{
|
||||||
|
src: '/icon-192x192.png',
|
||||||
|
sizes: '500x192',
|
||||||
|
type: 'image/png',
|
||||||
|
purpose: 'any'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: '/icon-512x512.png',
|
||||||
|
sizes: '512x512',
|
||||||
|
type: 'image/png',
|
||||||
|
purpose: 'any'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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
29
nuxt4/package.json
Normal file
29
nuxt4/package.json
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
{
|
||||||
|
"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",
|
||||||
|
"formdata-node": "^6.0.3",
|
||||||
|
"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-192x192.png
Normal file
BIN
nuxt4/public/icon-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 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: 146 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()
|
||||||
|
}
|
||||||
|
})
|
||||||
106
nuxt4/server/api/whisper/transcribe.post.ts
Normal file
106
nuxt4/server/api/whisper/transcribe.post.ts
Normal file
@@ -0,0 +1,106 @@
|
|||||||
|
import { FormData } from 'formdata-node'
|
||||||
|
|
||||||
|
export default defineEventHandler(async (event) => {
|
||||||
|
try {
|
||||||
|
// Verificar autenticación mediante headers de Authentik
|
||||||
|
const headers = getRequestHeaders(event)
|
||||||
|
const username = headers['x-authentik-username']
|
||||||
|
|
||||||
|
if (!username) {
|
||||||
|
throw createError({
|
||||||
|
statusCode: 401,
|
||||||
|
message: 'No autenticado'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Obtener la API key de OpenAI desde las variables de entorno
|
||||||
|
const apiKey = process.env.OPENAI_API_KEY
|
||||||
|
if (!apiKey) {
|
||||||
|
throw createError({
|
||||||
|
statusCode: 500,
|
||||||
|
message: 'API Key de OpenAI no configurada'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Leer el archivo de audio del request
|
||||||
|
const form = await readMultipartFormData(event)
|
||||||
|
if (!form || form.length === 0) {
|
||||||
|
throw createError({
|
||||||
|
statusCode: 400,
|
||||||
|
message: 'No se recibió ningún archivo de audio'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Encontrar el archivo de audio
|
||||||
|
const audioFile = form.find(part => part.name === 'file')
|
||||||
|
if (!audioFile) {
|
||||||
|
throw createError({
|
||||||
|
statusCode: 400,
|
||||||
|
message: 'No se encontró el archivo de audio en el formulario'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Obtener parámetros opcionales
|
||||||
|
const languageParam = form.find(part => part.name === 'language')
|
||||||
|
const promptParam = form.find(part => part.name === 'prompt')
|
||||||
|
|
||||||
|
const language = languageParam?.data.toString() || 'es'
|
||||||
|
const prompt = promptParam?.data.toString()
|
||||||
|
|
||||||
|
// Crear FormData para enviar a OpenAI
|
||||||
|
const formData = new FormData()
|
||||||
|
|
||||||
|
// Crear un Blob desde el buffer
|
||||||
|
const blob = new Blob([audioFile.data], {
|
||||||
|
type: audioFile.type || 'audio/webm'
|
||||||
|
})
|
||||||
|
|
||||||
|
formData.append('file', blob, audioFile.filename || 'audio.webm')
|
||||||
|
formData.append('model', 'whisper-1')
|
||||||
|
formData.append('language', language)
|
||||||
|
|
||||||
|
if (prompt) {
|
||||||
|
formData.append('prompt', prompt)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Enviar a OpenAI Whisper API
|
||||||
|
const response = await fetch('https://api.openai.com/v1/audio/transcriptions', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${apiKey}`
|
||||||
|
},
|
||||||
|
body: formData as any
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.text()
|
||||||
|
console.error('Error de OpenAI:', errorData)
|
||||||
|
throw createError({
|
||||||
|
statusCode: response.status,
|
||||||
|
message: `Error de OpenAI Whisper: ${response.statusText}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await response.json()
|
||||||
|
|
||||||
|
// Log para auditoría
|
||||||
|
console.log(`[Whisper] Transcripción exitosa para usuario: ${username}`)
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
transcription: result.text,
|
||||||
|
user: username
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('[Whisper] Error:', error)
|
||||||
|
|
||||||
|
if (error.statusCode) {
|
||||||
|
throw error
|
||||||
|
}
|
||||||
|
|
||||||
|
throw createError({
|
||||||
|
statusCode: 500,
|
||||||
|
message: error.message || 'Error al procesar la transcripción'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
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