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