Analysis and diagrams - Josecgh/diagAuto-frontend GitHub Wiki

Roles and routes:

Rol Valor en backend Descripción
GUEST null (no session) Usuario no autenticado. Solo ve páginas públicas de bienvenida.
USER ROLE_USER Usuario registrado. Dueño y gestor de su propia agenda de vehículos.
Ruta Vista (component) Roles permitidos Propósito
/ HomeViewComponent Todos Página de bienvenida, presentación de la herramienta y características.
/login LoginViewComponent GUEST Formulario de inicio de sesión.
/register RegisterViewComponent GUEST Formulario de registro para nuevos usuarios.
/dashboard VehicleAgendaComponent USER Panel principal: Agenda visual, listado privado de coches y estados de avería.
/vehicles/new VehicleFormComponent USER Formulario para registrar un coche. Se bloquea dinámicamente si ya tiene 4 vehículos.
/checkout PaywallComponent USER Pantalla de pago/suscripción. Se activa al intentar registrar el 5.º vehículo.

Notas de implementación en Angular:

  • Protección de rutas: Las rutas privadas (/dashboard, /vehicles/new, /checkout) están protegidas mediante una guarda funcional authGuard que verifica que el rol sea ROLE_USER.
  • Protección inversa: Las rutas /login y /register usan una guarda que redirige automáticamente al /dashboard si un usuario ya autenticado intenta entrar en ellas.

Rutas de navegación:

flowchart TD
    A[Usuario navega a una URL] --> B{¿La ruta existe?}
    
    %% Ruta No Existe
    B -->|No| C{¿Tiene sesión?}
    C -->|No| L[Vista Login]
    C -->|Yes| D_Dash[Vista Dashboard / Agenda]
    
    %% Ruta Existe
    B -->|Yes| D{¿Requiere autenticación?}
    
    %% Rutas Públicas (Home, Login, Register)
    D -->|No| F{¿Es ruta exclusiva de Invitados?<br/>login, register}
    F -->|Yes| F_Check{¿Ya inició sesión?}
    F_Check -->|Yes| D_Dash
    F_Check -->|No| V_Pub[Mostrar vista pública]
    F -->|No| V_Pub
    
    %% Rutas Privadas (Dashboard, New Vehicle, Checkout)
    D -->|Yes| E{¿Tiene sesión activa?}
    E -->|No| L
    E -->|Yes| G{¿Intenta añadir vehículo?<br/>/vehicles/new}
    
    %% Control Freemium (Paywall)
    G -->|No| V_Priv[Mostrar vista privada / Agenda]
    G -->|Yes| H{¿Tiene 4 o más vehículos<br/>y plan básico?}
    H -->|Yes| P[Pantalla de Pago / Paywall]
    H -->|No| V_Form[Mostrar Formulario de Registro]

    %% Estilos Visuales para el diagrama
    classDef public fill:#f9f,stroke:#333,stroke-width:2px;
    classDef private fill:#bbf,stroke:#333,stroke-width:2px;
    classDef paywall fill:#fbb,stroke:#333,stroke-width:2px;
    class L,V_Pub public;
    class D_Dash,V_Priv,V_Form private;
    class P paywall;
Loading
⚠️ **GitHub.com Fallback** ⚠️