feat(web): login, sesión, interceptor, guards y layout con menú por permisos
- Login contra POST /api/auth/login; SessionStore en localStorage con el timeout deslizante que informa el servidor (sessionTimeoutMinutes). - Interceptor: Bearer en /api, renueva actividad y, ante 401, cierra la sesión y vuelve al login recordando la ruta (solo rutas internas). - Guards: sesión, invitado y permiso por pantalla (data.path). Corrige que inject() no puede usarse tras un await en permissionGuard. - Layout con barra superior (empresa, usuario, tema, salir) y menú lateral filtrado por GET /api/user/menu; plegable y con botón en pantallas angostas. - Menú único en libs/sap-types (MENU, filterMenu); el backend verifica por test que las rutas de permiso de sus recursos existan en él. - Una ruta por pantalla del menú; las no construidas muestran "no disponible". - Verificado en Chrome headless contra el backend y SAP reales: redirección sin sesión, menú de 20 pantallas, navegación, plegado, tema oscuro y persistencia, vista móvil, salir, token inválido y credenciales malas. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
GeorgeandClaude Sonnet 5.5 committed
1 parent
f1156929c7
commit
4c8c499a72
36 files changed
+1291
-52
No files matched your search
@@ -0,0 +1,133 @@
|
||||
.app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
.shell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 6px 12px;
|
||||
background: var(--shell);
|
||||
color: var(--shell-ink);
|
||||
flex: none;
|
||||
}
|
||||
.brand {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
.brand small {
|
||||
font-weight: 400;
|
||||
margin-left: 8px;
|
||||
color: var(--shell-quiet);
|
||||
}
|
||||
.sp {
|
||||
flex: 1;
|
||||
}
|
||||
.user {
|
||||
font-size: 12px;
|
||||
color: var(--shell-quiet);
|
||||
}
|
||||
.out,
|
||||
.burger {
|
||||
background: transparent;
|
||||
color: var(--shell-ink);
|
||||
border: 1px solid var(--shell-quiet);
|
||||
border-radius: 3px;
|
||||
padding: 2px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.burger {
|
||||
display: none;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
.out:hover,
|
||||
.burger:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.body {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
.side {
|
||||
width: 224px;
|
||||
flex: none;
|
||||
overflow-y: auto;
|
||||
background: var(--panel);
|
||||
border-right: 1px solid var(--line);
|
||||
padding: 6px 0;
|
||||
}
|
||||
.mod {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 5px 12px;
|
||||
background: none;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mod:hover {
|
||||
background: var(--btn-h);
|
||||
}
|
||||
.caret {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
color: var(--quiet);
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
li a {
|
||||
display: block;
|
||||
padding: 4px 12px 4px 28px;
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
}
|
||||
li a:hover {
|
||||
background: var(--btn-h);
|
||||
}
|
||||
li a.active {
|
||||
background: var(--row-sel);
|
||||
border-left: 3px solid var(--focus);
|
||||
padding-left: 25px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.note {
|
||||
margin: 8px 12px;
|
||||
color: var(--quiet);
|
||||
font-size: 12px;
|
||||
}
|
||||
.note.err {
|
||||
color: var(--err);
|
||||
}
|
||||
.content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: auto;
|
||||
padding: 16px;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.burger {
|
||||
display: inline-block;
|
||||
}
|
||||
.user {
|
||||
display: none;
|
||||
}
|
||||
.side {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
bottom: 0;
|
||||
z-index: 30;
|
||||
box-shadow: var(--shadow-pop);
|
||||
}
|
||||
.side.open {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
<div class="app">
|
||||
<header class="shell">
|
||||
<button class="burger" type="button" aria-label="Mostrar u ocultar el menú" (click)="sidebarOpen.set(!sidebarOpen())">
|
||||
☰
|
||||
</button>
|
||||
<a class="brand" routerLink="/">Basic ERP <small>{{ session.company() }}</small></a>
|
||||
<span class="sp"></span>
|
||||
<sbo-theme-switcher />
|
||||
<span class="user">{{ session.fullName() }}</span>
|
||||
<button class="out" type="button" (click)="logout()">Salir</button>
|
||||
</header>
|
||||
|
||||
<div class="body">
|
||||
<nav class="side" [class.open]="sidebarOpen()" aria-label="Menú principal">
|
||||
@for (m of menu.modules(); track m.id) {
|
||||
<section>
|
||||
<button class="mod" type="button" [attr.aria-expanded]="isOpen(m.id)" (click)="toggle(m.id)">
|
||||
<span class="caret">{{ isOpen(m.id) ? '▾' : '▸' }}</span>{{ m.label }}
|
||||
</button>
|
||||
@if (isOpen(m.id)) {
|
||||
<ul>
|
||||
@for (i of m.items; track i.path) {
|
||||
<li>
|
||||
<a [routerLink]="i.path" routerLinkActive="active" (click)="sidebarOpen.set(false)">{{ i.label }}</a>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
</section>
|
||||
} @empty {
|
||||
@if (menu.failed()) {
|
||||
<p class="note err">
|
||||
No se pudo cargar el menú.
|
||||
<button type="button" (click)="retryMenu()">Reintentar</button>
|
||||
</p>
|
||||
} @else {
|
||||
<p class="note">No tiene pantallas asignadas. Solicite acceso al administrador.</p>
|
||||
}
|
||||
}
|
||||
</nav>
|
||||
|
||||
<main class="content">
|
||||
<router-outlet />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,43 @@
|
||||
import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
|
||||
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
|
||||
import { AuthService } from '../core/auth/auth.service';
|
||||
import { SessionStore } from '../core/auth/session.store';
|
||||
import { MenuService } from '../core/menu/menu.service';
|
||||
import { ThemeSwitcher } from '../core/theme/theme-switcher';
|
||||
|
||||
/** Marco de la aplicación: barra superior, menú lateral filtrado por permisos y contenido. */
|
||||
@Component({
|
||||
selector: 'sbo-main-layout',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [RouterOutlet, RouterLink, RouterLinkActive, ThemeSwitcher],
|
||||
templateUrl: './main-layout.html',
|
||||
styleUrl: './main-layout.css',
|
||||
})
|
||||
export class MainLayout {
|
||||
private readonly auth = inject(AuthService);
|
||||
protected readonly session = inject(SessionStore);
|
||||
protected readonly menu = inject(MenuService);
|
||||
|
||||
protected readonly sidebarOpen = signal(false);
|
||||
private readonly collapsed = signal<ReadonlySet<string>>(new Set());
|
||||
|
||||
protected isOpen(moduleId: string): boolean {
|
||||
return !this.collapsed().has(moduleId);
|
||||
}
|
||||
|
||||
protected toggle(moduleId: string): void {
|
||||
this.collapsed.update((s) => {
|
||||
const next = new Set(s);
|
||||
if (!next.delete(moduleId)) next.add(moduleId);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
protected retryMenu(): void {
|
||||
void this.menu.ensureLoaded();
|
||||
}
|
||||
|
||||
protected logout(): void {
|
||||
void this.auth.logout();
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user