valtech-components 2.0.687 → 2.0.689

package/src/lib/services/auth/config.ts

@@ -0,0 +1,93 @@
+import {
+  EnvironmentProviders,
+  InjectionToken,
+  makeEnvironmentProviders,
+  APP_INITIALIZER,
+  inject,
+} from '@angular/core';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { ValtechAuthConfig } from './types';
+import { authInterceptor } from './interceptor';
+import { AuthService } from './auth.service';
+
+/**
+ * Token de inyección para la configuración de Auth.
+ */
+export const VALTECH_AUTH_CONFIG = new InjectionToken<ValtechAuthConfig>(
+  'ValtechAuthConfig'
+);
+
+/**
+ * Configuración por defecto.
+ */
+export const DEFAULT_AUTH_CONFIG: Partial<ValtechAuthConfig> = {
+  authPrefix: '/v2/auth',
+  storagePrefix: 'valtech_auth_',
+  refreshBeforeExpiry: 60,
+  enableTabSync: true,
+  loginRoute: '/login',
+  homeRoute: '/',
+  unauthorizedRoute: '/unauthorized',
+  enableFirebaseIntegration: false,
+  enableDeviceRegistration: false,
+};
+
+/**
+ * Factory para inicializar el AuthService.
+ */
+function initializeAuth(authService: AuthService): () => Promise<void> {
+  return () => authService.initialize();
+}
+
+/**
+ * Provee el servicio de autenticación a la aplicación Angular.
+ *
+ * @param config - Configuración de autenticación
+ * @returns EnvironmentProviders para usar en bootstrapApplication
+ *
+ * @example
+ * ```typescript
+ * // main.ts
+ * import { bootstrapApplication } from '@angular/platform-browser';
+ * import { provideValtechAuth } from 'valtech-components';
+ * import { environment } from './environments/environment';
+ *
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideValtechAuth({
+ *       apiUrl: environment.apiUrl,
+ *       enableFirebaseIntegration: true,
+ *     }),
+ *   ],
+ * });
+ * ```
+ */
+export function provideValtechAuth(
+  config: ValtechAuthConfig
+): EnvironmentProviders {
+  const mergedConfig: ValtechAuthConfig = {
+    ...DEFAULT_AUTH_CONFIG,
+    ...config,
+  };
+
+  return makeEnvironmentProviders([
+    { provide: VALTECH_AUTH_CONFIG, useValue: mergedConfig },
+    provideHttpClient(withInterceptors([authInterceptor])),
+    // Inicializar AuthService al arrancar la app
+    {
+      provide: APP_INITIALIZER,
+      useFactory: initializeAuth,
+      deps: [AuthService],
+      multi: true,
+    },
+  ]);
+}
+
+/**
+ * Provee solo el interceptor (para apps que ya tienen AuthService configurado manualmente).
+ */
+export function provideValtechAuthInterceptor(): EnvironmentProviders {
+  return makeEnvironmentProviders([
+    provideHttpClient(withInterceptors([authInterceptor])),
+  ]);
+}

package/src/lib/services/auth/device.service.ts

@@ -0,0 +1,163 @@
+import { Injectable, Inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { map, catchError } from 'rxjs/operators';
+
+import { VALTECH_AUTH_CONFIG } from './config';
+import {
+  ValtechAuthConfig,
+  DeviceInfo,
+  ListDevicesResponse,
+  DeviceActionResult,
+  DeviceActionRequest,
+  DeviceActionResponse,
+  ValidateActionResponse,
+} from './types';
+
+/**
+ * Servicio para gestión de dispositivos del usuario.
+ * Permite listar, aprobar, bloquear y eliminar dispositivos registrados.
+ *
+ * @example
+ * ```typescript
+ * import { DeviceService } from 'valtech-components';
+ *
+ * @Component({...})
+ * export class DevicesPage {
+ *   private deviceService = inject(DeviceService);
+ *
+ *   devices = signal<DeviceInfo[]>([]);
+ *
+ *   async ngOnInit() {
+ *     const devices = await firstValueFrom(this.deviceService.listDevices());
+ *     this.devices.set(devices);
+ *   }
+ *
+ *   async blockDevice(deviceId: string) {
+ *     await firstValueFrom(this.deviceService.blockDevice(deviceId));
+ *     // Recargar lista
+ *   }
+ * }
+ * ```
+ */
+@Injectable({ providedIn: 'root' })
+export class DeviceService {
+  constructor(
+    @Inject(VALTECH_AUTH_CONFIG) private config: ValtechAuthConfig,
+    private http: HttpClient
+  ) {}
+
+  private get baseUrl(): string {
+    return `${this.config.apiUrl}/v2/users/me/devices`;
+  }
+
+  /**
+   * Lista todos los dispositivos registrados del usuario.
+   */
+  listDevices(): Observable<DeviceInfo[]> {
+    return this.http.get<ListDevicesResponse>(this.baseUrl).pipe(
+      map(response => response.devices)
+    );
+  }
+
+  /**
+   * Obtiene información de un dispositivo específico.
+   */
+  getDevice(deviceId: string): Observable<DeviceInfo> {
+    return this.http.get<{ operationId: string; device: DeviceInfo }>(
+      `${this.baseUrl}/${deviceId}`
+    ).pipe(map(response => response.device));
+  }
+
+  /**
+   * Bloquea un dispositivo.
+   * Revoca todas las sesiones activas de ese dispositivo.
+   */
+  blockDevice(deviceId: string): Observable<DeviceActionResult> {
+    return this.http.post<DeviceActionResult>(
+      `${this.baseUrl}/${deviceId}/block`,
+      {}
+    );
+  }
+
+  /**
+   * Aprueba un dispositivo pendiente.
+   * Cambia el estado de pending_approval a active.
+   */
+  approveDevice(deviceId: string): Observable<DeviceActionResult> {
+    return this.http.post<DeviceActionResult>(
+      `${this.baseUrl}/${deviceId}/approve`,
+      {}
+    );
+  }
+
+  /**
+   * Elimina un dispositivo registrado.
+   */
+  deleteDevice(deviceId: string): Observable<DeviceActionResult> {
+    return this.http.delete<DeviceActionResult>(`${this.baseUrl}/${deviceId}`);
+  }
+
+  /**
+   * Valida un token de acción SIN ejecutarlo.
+   * Útil para mostrar confirmación al usuario antes de ejecutar.
+   * Este endpoint NO requiere autenticación.
+   *
+   * @param token Token JWT de acción
+   * @returns Información del token si es válido
+   *
+   * @example
+   * ```typescript
+   * const token = this.route.snapshot.queryParams['token'];
+   * if (token) {
+   *   const validation = await firstValueFrom(this.deviceService.validateAction(token));
+   *   if (validation.valid) {
+   *     // Mostrar confirmación al usuario
+   *     console.log(`Acción: ${validation.actionType}`);
+   *   }
+   * }
+   * ```
+   */
+  validateAction(token: string): Observable<ValidateActionResponse> {
+    return this.http.post<ValidateActionResponse>(
+      `${this.config.apiUrl}/v2/actions/validate`,
+      { token }
+    );
+  }
+
+  /**
+   * Ejecuta una acción de dispositivo desde un token de email.
+   * Este endpoint NO requiere autenticación.
+   * El token viene en la URL del email de alerta de nuevo inicio de sesión.
+   *
+   * @param token Token JWT de acción (24h, un solo uso)
+   *
+   * @example
+   * ```typescript
+   * // En la página de dispositivos, al detectar ?token=xxx en la URL:
+   * const token = this.route.snapshot.queryParams['token'];
+   * if (token) {
+   *   const result = await firstValueFrom(this.deviceService.executeAction(token));
+   *   if (result.success) {
+   *     console.log(`Dispositivo bloqueado, ${result.sessionsRevoked} sesiones cerradas`);
+   *   }
+   * }
+   * ```
+   */
+  executeAction(token: string): Observable<DeviceActionResponse> {
+    // Usa el endpoint unificado de acciones
+    return this.http.post<{ operationId: string; success: boolean; message: string; data?: Record<string, unknown> }>(
+      `${this.config.apiUrl}/v2/actions/execute`,
+      { token }
+    ).pipe(
+      map(response => ({
+        operationId: response.operationId,
+        success: response.success,
+        message: response.message,
+        action: (response.data?.['action'] as string) || 'refuse',
+        deviceId: (response.data?.['deviceId'] as string) || '',
+        sessionsRevoked: response.data?.['sessionsRevoked'] as number | undefined,
+      }))
+    );
+  }
+}

package/src/lib/services/auth/guards.ts

@@ -0,0 +1,234 @@
+import { inject } from '@angular/core';
+import {
+  Router,
+  CanActivateFn,
+  UrlTree,
+  ActivatedRouteSnapshot,
+} from '@angular/router';
+import { AuthService } from './auth.service';
+import { VALTECH_AUTH_CONFIG } from './config';
+
+/**
+ * Guard que verifica si el usuario está autenticado.
+ * Redirige a loginRoute si no está autenticado.
+ *
+ * @example
+ * ```typescript
+ * import { authGuard } from 'valtech-components';
+ *
+ * const routes: Routes = [
+ *   {
+ *     path: 'dashboard',
+ *     canActivate: [authGuard],
+ *     loadComponent: () => import('./dashboard.page'),
+ *   },
+ * ];
+ * ```
+ */
+export const authGuard: CanActivateFn = (): boolean | UrlTree => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
+  const config = inject(VALTECH_AUTH_CONFIG);
+
+  if (authService.isAuthenticated()) {
+    return true;
+  }
+
+  return router.createUrlTree([config.loginRoute]);
+};
+
+/**
+ * Guard que verifica si el usuario NO está autenticado.
+ * Redirige a homeRoute si ya está autenticado.
+ * Útil para páginas de login/registro.
+ *
+ * @example
+ * ```typescript
+ * import { guestGuard } from 'valtech-components';
+ *
+ * const routes: Routes = [
+ *   {
+ *     path: 'login',
+ *     canActivate: [guestGuard],
+ *     loadComponent: () => import('./login.page'),
+ *   },
+ * ];
+ * ```
+ */
+export const guestGuard: CanActivateFn = (): boolean | UrlTree => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
+  const config = inject(VALTECH_AUTH_CONFIG);
+
+  if (!authService.isAuthenticated()) {
+    return true;
+  }
+
+  return router.createUrlTree([config.homeRoute]);
+};
+
+/**
+ * Factory para crear guard de permisos.
+ * Verifica si el usuario tiene el permiso especificado.
+ *
+ * @param permissions - Permiso o lista de permisos requeridos (OR)
+ * @returns Guard function
+ *
+ * @example
+ * ```typescript
+ * import { authGuard, permissionGuard } from 'valtech-components';
+ *
+ * const routes: Routes = [
+ *   {
+ *     path: 'templates',
+ *     canActivate: [authGuard, permissionGuard('templates:read')],
+ *     loadComponent: () => import('./templates.page'),
+ *   },
+ *   {
+ *     path: 'admin',
+ *     canActivate: [authGuard, permissionGuard(['admin:*', 'super_admin'])],
+ *     loadComponent: () => import('./admin.page'),
+ *   },
+ * ];
+ * ```
+ */
+export function permissionGuard(
+  permissions: string | string[]
+): CanActivateFn {
+  return (): boolean | UrlTree => {
+    const authService = inject(AuthService);
+    const router = inject(Router);
+    const config = inject(VALTECH_AUTH_CONFIG);
+
+    const permArray = Array.isArray(permissions) ? permissions : [permissions];
+
+    if (authService.hasAnyPermission(permArray)) {
+      return true;
+    }
+
+    console.warn(
+      `[ValtechAuth] Permiso denegado. Requerido: ${permArray.join(' o ')}`
+    );
+    return router.createUrlTree([config.unauthorizedRoute]);
+  };
+}
+
+/**
+ * Guard que lee permisos desde route.data.
+ * Permite configurar permisos directamente en la definición de rutas.
+ *
+ * @example
+ * ```typescript
+ * import { authGuard, permissionGuardFromRoute } from 'valtech-components';
+ *
+ * const routes: Routes = [
+ *   {
+ *     path: 'admin/users',
+ *     canActivate: [authGuard, permissionGuardFromRoute],
+ *     data: {
+ *       permissions: ['users:read', 'users:manage'],
+ *       requireAll: false  // true = AND, false = OR (default)
+ *     },
+ *     loadComponent: () => import('./users.page'),
+ *   },
+ * ];
+ * ```
+ */
+export const permissionGuardFromRoute: CanActivateFn = (
+  route: ActivatedRouteSnapshot
+): boolean | UrlTree => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
+  const config = inject(VALTECH_AUTH_CONFIG);
+
+  const permissions = route.data['permissions'] as string[] | undefined;
+  const requireAll = route.data['requireAll'] as boolean | undefined;
+
+  if (!permissions || permissions.length === 0) {
+    return true;
+  }
+
+  const hasAccess = requireAll
+    ? authService.hasAllPermissions(permissions)
+    : authService.hasAnyPermission(permissions);
+
+  if (hasAccess) {
+    return true;
+  }
+
+  console.warn(
+    `[ValtechAuth] Permiso denegado. Requerido: ${permissions.join(
+      requireAll ? ' y ' : ' o '
+    )}`
+  );
+  return router.createUrlTree([config.unauthorizedRoute]);
+};
+
+/**
+ * Guard que verifica si el usuario es super admin.
+ *
+ * @example
+ * ```typescript
+ * import { authGuard, superAdminGuard } from 'valtech-components';
+ *
+ * const routes: Routes = [
+ *   {
+ *     path: 'super-admin',
+ *     canActivate: [authGuard, superAdminGuard],
+ *     loadComponent: () => import('./super-admin.page'),
+ *   },
+ * ];
+ * ```
+ */
+export const superAdminGuard: CanActivateFn = (): boolean | UrlTree => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
+  const config = inject(VALTECH_AUTH_CONFIG);
+
+  if (authService.isSuperAdmin()) {
+    return true;
+  }
+
+  console.warn('[ValtechAuth] Acceso de super admin requerido');
+  return router.createUrlTree([config.unauthorizedRoute]);
+};
+
+/**
+ * Guard que verifica si el usuario tiene un rol específico.
+ *
+ * @param roles - Rol o lista de roles requeridos (OR)
+ * @returns Guard function
+ *
+ * @example
+ * ```typescript
+ * import { authGuard, roleGuard } from 'valtech-components';
+ *
+ * const routes: Routes = [
+ *   {
+ *     path: 'editor',
+ *     canActivate: [authGuard, roleGuard(['editor', 'admin'])],
+ *     loadComponent: () => import('./editor.page'),
+ *   },
+ * ];
+ * ```
+ */
+export function roleGuard(roles: string | string[]): CanActivateFn {
+  return (): boolean | UrlTree => {
+    const authService = inject(AuthService);
+    const router = inject(Router);
+    const config = inject(VALTECH_AUTH_CONFIG);
+
+    const roleArray = Array.isArray(roles) ? roles : [roles];
+
+    const hasRole = roleArray.some((role) => authService.hasRole(role));
+
+    if (hasRole) {
+      return true;
+    }
+
+    console.warn(
+      `[ValtechAuth] Rol requerido: ${roleArray.join(' o ')}`
+    );
+    return router.createUrlTree([config.unauthorizedRoute]);
+  };
+}

package/src/lib/services/auth/index.ts

@@ -0,0 +1,111 @@
+/**
+ * Valtech Auth Service
+ *
+ * Servicio de autenticación reutilizable para aplicaciones Angular.
+ * Proporciona autenticación con AuthV2, MFA, sincronización entre pestañas,
+ * refresh proactivo de tokens, y registro automático de dispositivos para
+ * push notifications.
+ *
+ * @example
+ * ```typescript
+ * // En main.ts
+ * import { bootstrapApplication } from '@angular/platform-browser';
+ * import { provideValtechAuth, provideValtechFirebase } from 'valtech-components';
+ * import { environment } from './environments/environment';
+ *
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideValtechFirebase(environment.firebase),
+ *     provideValtechAuth({
+ *       apiUrl: environment.apiUrl,
+ *       enableFirebaseIntegration: true,
+ *       enableDeviceRegistration: true, // Auto-registra dispositivos para push
+ *     }),
+ *   ],
+ * });
+ *
+ * // En app.routes.ts
+ * import { authGuard, guestGuard, permissionGuard } from 'valtech-components';
+ *
+ * const routes: Routes = [
+ *   { path: 'login', canActivate: [guestGuard], loadComponent: () => import('./login.page') },
+ *   { path: 'dashboard', canActivate: [authGuard], loadComponent: () => import('./dashboard.page') },
+ *   { path: 'admin', canActivate: [authGuard, permissionGuard('admin:*')], loadComponent: () => import('./admin.page') },
+ * ];
+ *
+ * // En componentes
+ * import { AuthService } from 'valtech-components';
+ *
+ * @Component({...})
+ * export class LoginComponent {
+ *   private auth = inject(AuthService);
+ *
+ *   async login() {
+ *     await firstValueFrom(this.auth.signin({ email, password }));
+ *     if (this.auth.mfaPending().required) {
+ *       // Mostrar UI de MFA
+ *     } else {
+ *       this.router.navigate(['/dashboard']);
+ *     }
+ *   }
+ *
+ *   // Habilitar notificaciones push (solicita permisos + registra dispositivo)
+ *   async enableNotifications() {
+ *     const result = await this.auth.enableNotifications();
+ *     if (result.granted) {
+ *       console.log('Notificaciones habilitadas');
+ *     }
+ *   }
+ *
+ *   // Verificar estado de permisos
+ *   get canReceiveNotifications(): boolean {
+ *     return this.auth.getNotificationPermissionState() === 'granted';
+ *   }
+ *
+ *   // En template: usar signals directamente
+ *   // {{ auth.user()?.email }}
+ *   // @if (auth.hasPermission('templates:edit')) { ... }
+ * }
+ * ```
+ */
+
+// Tipos
+export * from './types';
+
+// Configuración
+export {
+  VALTECH_AUTH_CONFIG,
+  provideValtechAuth,
+  provideValtechAuthInterceptor,
+  DEFAULT_AUTH_CONFIG,
+} from './config';
+
+// Servicio principal
+export { AuthService } from './auth.service';
+
+// Guards
+export {
+  authGuard,
+  guestGuard,
+  permissionGuard,
+  permissionGuardFromRoute,
+  superAdminGuard,
+  roleGuard,
+} from './guards';
+
+// Interceptor (para uso avanzado)
+export { authInterceptor } from './interceptor';
+
+// Servicios internos (para testing o extensión)
+export { AuthStateService } from './auth-state.service';
+export { TokenService } from './token.service';
+export { AuthStorageService } from './storage.service';
+export { AuthSyncService } from './sync.service';
+
+// Servicios de gestión de dispositivos y sesiones
+export { DeviceService } from './device.service';
+export { SessionService } from './session.service';
+
+// OAuth (Login social)
+export { OAuthService } from './oauth.service';
+export { OAuthCallbackComponent } from './oauth-callback.component';