# Cliente Saeplus Aplicación full stack para el proceso de onboarding de clientes del software SaaS Saeplus. Incluye autenticación con verificación por código, recuperación de contraseña, panel administrativo y un asistente (wizard) de varios pasos para recopilar la información empresarial necesaria. ## Tecnologías - **Frontend**: HTML5, JavaScript, Bootstrap 5 - **Backend**: Node.js 18, Express, PostgreSQL 15 - **Autenticación**: JWT con verificación de correo y recuperación de contraseña mediante código temporal - **Validaciones**: Librería `validator` aplicada en todas las entradas críticas ## Estructura del proyecto ``` saeplus_cliente_nuevo/ ├─ backend/ │ ├─ package.json Paquetes, scripts de npm y dependencias │ ├─ jest.config.js Configuración de pruebas unitarias │ ├─ .env.example Variables de entorno de referencia │ ├─ src/ │ │ ├─ app.js Configuración principal de Express │ │ ├─ server.js Punto de arranque del servidor │ │ ├─ config/ │ │ │ ├─ env.js Carga y validación de variables de entorno │ │ │ └─ db.js Pool de PostgreSQL y utilidades de transacción │ │ ├─ controllers/ │ │ │ ├─ adminController.js Endpoints administrativos │ │ │ ├─ authController.js Registro, login, verificación y recuperación │ │ │ └─ wizardController.js Operaciones del asistente paso a paso │ │ ├─ services/ │ │ │ ├─ adminService.js Lógica para nuevos administradores y listados │ │ │ ├─ authService.js Lógica de autenticación y códigos temporales │ │ │ └─ wizardService.js Persistencia de pasos, resumen y finalización │ │ ├─ middlewares/ │ │ │ ├─ authMiddleware.js Protección JWT y control de roles │ │ │ └─ errorMiddleware.js Manejo centralizado de errores │ │ ├─ routes/ │ │ │ ├─ adminRoutes.js Rutas protegidas para administradores │ │ │ ├─ authRoutes.js Rutas públicas de autenticación │ │ │ ├─ wizardRoutes.js Rutas protegidas del asistente │ │ │ └─ index.js Registro de rutas bajo `/api` │ │ ├─ validators/ │ │ │ ├─ authValidator.js Validaciones de registro, login y códigos │ │ │ └─ wizardValidator.js Validaciones por paso usando validator.js │ │ ├─ utils/ │ │ │ ├─ appError.js Clase de error controlado con status y código │ │ │ ├─ code.js Generador de códigos y constantes de caducidad │ │ │ ├─ email.js Cliente de correo con Nodemailer │ │ │ ├─ emailTemplates.js Plantillas HTML para notificaciones │ │ │ ├─ password.js Hash y comparación de contraseñas │ │ │ └─ token.js Firmado y validación de JWT │ │ └─ db/ │ │ ├─ migrate.js Script de migraciones (tablas e índices) │ │ └─ seed/index.js Creación del usuario administrador por defecto │ └─ tests/ │ └─ validators.test.js Pruebas unitarias de validadores y utilidades ├─ frontend/ │ ├─ index.html Landing con login, registro y modales │ ├─ wizard.html Asistente responsivo con resumen final │ ├─ css/styles.css Estilos propios (glassmorphism + Bootstrap) │ ├─ js/auth.js Lógica de login, registro y recuperación │ ├─ js/wizard.js Gestor de pasos, guardado y resumen descargable │ └─ assets/logo-saeplus.svg Logotipo vectorial utilizado en la UI ├─ .gitignore Exclusión de `.env` y `node_modules` └─ README.md Este archivo ``` ## Puesta en marcha ### Requisitos previos - Node.js 18.x - PostgreSQL 15+ - Cuenta SMTP o herramienta como [MailHog](https://github.com/mailhog/MailHog) para pruebas de correo ### Configuración backend 1. Copia el archivo `.env.example` dentro de `backend/` y renómbralo a `.env`. Ajusta: ```ini DATABASE_URL=postgresql://usuario:clave@localhost:5432/saeplus_cliente JWT_SECRET=una-clave-segura SMTP_HOST=localhost SMTP_PORT=1025 SMTP_USER=usuario SMTP_PASSWORD=clave EMAIL_FROM=soporte@saeplus.com APP_BASE_URL=http://localhost:5173 ``` 2. Instala dependencias: ```bash cd backend npm install ``` 3. Ejecuta las migraciones (ahora en SQL plano) y el seed del usuario administrador: ```bash npm run db:migrate # Internamente ejecuta: psql $DATABASE_URL -f src/db/migrate.sql npm run db:seed ``` > Usuario creado: `admin@saeplus.com` con clave `A123456`. 4. Inicia el servidor: ```bash npm run dev ``` El API estará disponible en `http://localhost:4000/api`. ### Ejecutar pruebas ```bash cd backend npm test ``` ### Frontend El frontend es estático, por lo que basta con servir la carpeta `frontend/`. Opciones: - Abrir `frontend/index.html` con Live Server (VSCode) o similar. - Usar un servidor simple: ```bash npx serve frontend ``` - Definir la variable opcional `saeplusApiUrl` en `localStorage` si el backend vive en otra URL: ```js localStorage.setItem('saeplusApiUrl', 'https://mi-servidor.com/api'); ``` - Si modificas los archivos JS/CSS locales, sube el campo `version` en `frontend/version.json`. El script `frontend/js/cache-buster.js` agrega ese valor como query param para que el navegador descargue los assets nuevos sin limpiar cache. ## Flujo funcional 1. **Registro**: crea usuario con rol `CLIENT`, envía código de 6 dígitos (caduca en 60 min, 5 intentos). 2. **Verificación**: valida código y habilita acceso al asistente. 3. **Wizard**: guarda cada paso mediante `PUT /api/wizard/step/:step`. La data se almacena por sección en formato JSONB. 4. **Resumen**: último paso muestra todos los datos y permite ejecutar `POST /api/wizard/complete`. Una vez completado, el estado pasa a `COMPLETED` y la cuenta queda bloqueada (login devuelve el mensaje requerido). 5. **Administrador**: `admin@saeplus.com` puede crear nuevos administradores y consultar/editar cualquier wizard a través de `/api/admin`. ## Endpoints principales - `POST /api/auth/register` - `POST /api/auth/login` - `POST /api/auth/verify-email` - `POST /api/auth/resend-code` - `POST /api/auth/password/request` - `POST /api/auth/password/reset` - `GET /api/wizard` (JWT requerido) - `PUT /api/wizard/step/:step` (JWT requerido) - `POST /api/wizard/complete` (JWT requerido) - `GET /api/admin/clients` (Admin) - `GET /api/admin/clients/:companyId` (Admin) - `PUT /api/admin/clients/:companyId/step/:step` (Admin) - `POST /api/admin/admins` (Admin) ## Notas adicionales - Las validaciones de cada paso utilizan `validator.js` para garantizar consistencia en correos, teléfonos, números y longitudes. - El asistente front-end genera un archivo JSON descargable con el progreso actual. - Todo el contenido está preparado para diseño responsivo, empleando Bootstrap 5 y estilos personalizados de glassmorphism. ¡Listo! Con esto tendrás la aplicación `Cliente Saeplus` funcionando de extremo a extremo.