Porra Mundial 2026

Aplicación web de gestión de usuarios con autenticación, roles y sistema de solicitudes de acceso. Construida con Vue 3 y PocketBase.

Características

• Autenticación: Login con username o email + contraseña
• Roles: Administrador y Usuario
• Primer login: Obliga a cambiar la contraseña en el primer acceso
• Panel de administración: Gestión de usuarios (crear, editar, eliminar, activar/desactivar, resetear contraseña)
• Solicitudes de acceso: Los visitantes pueden solicitar acceso mediante un formulario
• Protección de rutas: Guardias de navegación basados en autenticación y roles

Tecnologías

Frontend

• Vue 3 - Framework progresivo con Composition API y <script setup>
• Vite - Build tool y dev server rápido
• Vue Router - Enrutamiento con guardias de navegación
• PocketBase JS SDK - Cliente para la API de PocketBase

Backend

• PocketBase - Backend open-source en Go con base de datos SQLite embebida

Estructura del proyecto

./
├── src/
│   ├── components/       # Componentes reutilizables
│   ├── composables/      # Composables de Vue (useAuth)
│   ├── router/           # Configuración de rutas
│   ├── services/         # Servicios (PocketBase client)
│   └── views/            # Vistas de la aplicación
│       ├── Login.vue
│       ├── ChangePassword.vue
│       ├── AdminPanel.vue
│       └── UnderConstruction.vue
├── pb_data/              # Datos de PocketBase (generado)
├── setup.cjs             # Script de inicialización
├── start.sh              # Script de arranque
├── .env                  # Variables de entorno
├── vite.config.js        # Configuración de Vite
└── package.json

Colecciones de PocketBase

users

Campo	Tipo	Descripción
username	text	Nombre de usuario (único, 3-32 caracteres)
email	email	Correo electrónico
role	select	admin o user
firstLogin	bool	Indica si debe cambiar la contraseña
active	bool	Estado de la cuenta
name	text	Nombre completo

access_requests

Campo	Tipo	Descripción
email	email	Correo del solicitante
reason	text	Motivo de la solicitud
status	select	pending, approved, rejected
approvedBy	relation	Usuario que aprobó/rechazó

Requisitos

• Node.js >= 18
• PocketBase binario descargado en el proyecto

Instalación

1. Instalar dependencias:

   npm install
   

2. Descargar PocketBase (si no está presente):

   # Linux
    wget https://github.com/pocketbase/pocketbase/releases/download/v0.38.0/pocketbase_0.38.0_linux_amd64.zip
    unzip pocketbase_0.38.0_linux_amd64.zip
   
    # macOS
    wget https://github.com/pocketbase/pocketbase/releases/download/v0.38.0/pocketbase_0.38.0_darwin_amd64.zip
    unzip pocketbase_0.38.0_darwin_amd64.zip
   

Desarrollo

Arranque completo (recomendado)

Inicia PocketBase + Vue dev server + inicialización automática:

./start.sh          # Conserva datos existentes (modo persistente)
./start.sh --reset  # Borra la BBDD y reinicia desde cero (útil en desarrollo)

• Frontend: http://localhost:3000
• PocketBase Admin UI: http://localhost:8090/_/
• Admin por defecto: admin / admin12345

Servicios por separado

PocketBase:

pocketbase serve --dir=pb_data --dev

Inicializar datos:

node setup.cjs

Frontend Vue:

npm run dev

Scripts disponibles

Comando	Descripción
npm run dev	Inicia el dev server de Vite
npm run build	Genera build de producción
npm run preview	Previsualiza el build de producción

Variables de entorno

Variable	Valor por defecto	Descripción
VITE_PB_URL	http://127.0.0.1:8090	URL de la API de PocketBase

Credenciales por defecto

Acceso a la aplicación (login en /)

Rol	Usuario	Contraseña
Admin	admin	admin12345

Acceso a PocketBase Admin UI (:8090/_/)

Rol	Email	Contraseña
Superuser	admin@admin.com	admin123

⚠️ Cambia estas credenciales en producción.

Flujo de autenticación

1. Usuario accede a / → ve el formulario de login
2. Introduce credenciales → se valida contra PocketBase
3. Si es primer login (firstLogin: true) → redirige a cambio de contraseña
4. Si es admin → redirige a /admin
5. Si es usuario normal → redirige a /inicio

Solicitar acceso

Los visitantes sin cuenta pueden:

1. Hacer clic en "Solicitar acceso" en el login
2. Rellenar email y motivo
3. La solicitud queda registrada para que el admin la revise