sacg-cronogramas/src/app/components/sidebar/sidebar.component.html
luis cespedes 6b351ff5b3 Control de acceso basado en funciones
Añade a la aplicación el control de acceso basado en roles mediante guardias.
Introduce guardias de acceso, administración, grupo y rol para la protección de rutas.
Actualiza la barra lateral para incluir elementos de menú basados en roles.
Configura el cliente Keycloak para incluir información de grupo en el token de acceso, habilitando la autorización basada en grupos.
Añade la página de acceso denegado.
2025-05-20 10:42:24 -04:00

94 lines
3.8 KiB
HTML

<div class="sidebar">
<!-- Logo container -->
<div class="logo-container">
<!-- Imagen del logo con posicionamiento para el badge -->
<div class="logo-image-container">
<img src="img/SAC-2.jpeg" alt="SISS Logo" class="logo-image">
<div class="version-badge">1.0</div>
</div>
<!-- Subtítulo del logo -->
</div>
<!-- Separador -->
<div class="separator"></div>
<!-- Navigation Menu -->
<div class="menu-container">
<ul class="sidebar-menu">
<li class="menu-item" routerLinkActive="active">
<a routerLink="/inicio" class="menu-link">
<i class="menu-icon pi pi-home"></i>
<span class="menu-text">Inicio</span>
<span class="active-indicator"></span>
</a>
</li>
<li class="menu-item" routerLinkActive="active">
<a routerLink="/unidad-concesiones" class="menu-link">
<i class="menu-icon pi pi-building"></i>
<span class="menu-text">Unidad de Concesiones</span>
<span class="active-indicator"></span>
</a>
</li>
<li class="menu-item" routerLinkActive="active">
<a routerLink="/ct-actualizacion" class="menu-link">
<i class="menu-icon pi pi-flag"></i>
<span class="menu-text">CT Actualización de PD</span>
<span class="active-indicator"></span>
</a>
</li>
<li class="menu-item" routerLinkActive="active">
<a routerLink="/ct-ajuste" class="menu-link">
<i class="menu-icon pi pi-sliders-h"></i>
<span class="menu-text">CT Ajuste de PD</span>
<span class="active-indicator"></span>
</a>
</li>
<li class="menu-item" routerLinkActive="active">
<a routerLink="/resumen" class="menu-link">
<i class="menu-icon pi pi-list"></i>
<span class="menu-text">Resumen</span>
<span class="active-indicator"></span>
</a>
</li>
<li class="menu-item" routerLinkActive="active">
<a routerLink="/unidad-informacion" class="menu-link">
<i class="menu-icon pi pi-box"></i>
<span class="menu-text">Unidad de Información</span>
<span class="active-indicator"></span>
</a>
</li>
<!-- Menú desplegable para Prueba de Roles -->
<li class="menu-item" [class.active]="isRolesMenuOpen">
<div class="menu-link" (click)="toggleRolesMenu()">
<i class="menu-icon pi pi-shield"></i>
<span class="menu-text">Prueba de Roles</span>
<i class="pi" [class.pi-chevron-down]="isRolesMenuOpen" [class.pi-chevron-right]="!isRolesMenuOpen"
style="margin-left: auto;"></i>
<span class="active-indicator"></span>
</div>
</li>
<!-- Submenú de Roles (visible cuando isRolesMenuOpen es true) -->
<div *ngIf="isRolesMenuOpen" class="submenu">
<li class="menu-item" routerLinkActive="active">
<a routerLink="/grupos/admin" class="menu-link" style="padding-left: 2.5rem;">
<i class="menu-icon pi pi-user-plus"></i>
<span class="menu-text">Solo Admin</span>
<span class="active-indicator"></span>
</a>
</li>
<li class="menu-item" routerLinkActive="active">
<a routerLink="/grupos/user" class="menu-link" style="padding-left: 2.5rem;">
<i class="menu-icon pi pi-user"></i>
<span class="menu-text">Solo Usuario</span>
<span class="active-indicator"></span>
</a>
</li>
<li class="menu-item" routerLinkActive="active">
<a routerLink="/roles/public" class="menu-link" style="padding-left: 2.5rem;">
<i class="menu-icon pi pi-users"></i>
<span class="menu-text">Acceso Público</span>
<span class="active-indicator"></span>
</a>
</li>
</div>
</ul>
</div>
</div>