feat(frontend): authentification frontend

ajout de la page login, changement de mot de passe forcé, rafraîchissement de session en mémoire, intercepteur, déconnexion, bouton logout sur le dashboard

apps/frontend/src/app/features/dashboard/dashboard.html

@@ -1,3 +1,10 @@
+<header class="dashboard__header">
+  <div>
+    <h1>Vue d'ensemble</h1>
+    <p class="dashboard__subtitle">Consommation instantanée du parc</p>
+  </div>
+  <button type="button" class="logout-button" (click)="onLogout()">Déconnexion</button>
+</header>
 <div class="dashboard">
   <header class="dashboard__header">
     <h1>Vue d'ensemble</h1>

apps/frontend/src/app/features/dashboard/dashboard.scss

@@ -144,3 +144,30 @@ h2 {
 .alert-item__message {
   font-size: 0.9rem;
 }
+.dashboard__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+
+  h1 {
+    margin: 0;
+    font-size: 1.75rem;
+    font-weight: 700;
+  }
+}
+
+.logout-button {
+  padding: 0.5rem 1rem;
+  background: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: #374151;
+  cursor: pointer;
+
+  &:hover {
+    background: #f3f4f6;
+  }
+}

apps/frontend/src/app/features/dashboard/dashboard.spec.ts

@@ -4,6 +4,8 @@ import { of, throwError } from 'rxjs';
 import { Dashboard } from './dashboard';
 import { StatsService } from '../../core/services/stats.service';
 import { AlertsService } from '../../core/services/alerts.service';
+import {AuthService} from '../../core/services/auth.service';
+import {Router} from '@angular/router';
 
 vi.mock('chart.js', () => {
   class ChartMock {
@@ -92,4 +94,58 @@ describe('Dashboard', () => {
 
     expect(fixture.componentInstance.alerts().length).toBe(0);
   });
+
+  it('appelle logout et redirige vers /login au clic sur le bouton de déconnexion', () => {
+  const statsMock = { getSummary: vi.fn().mockReturnValue(of({ total_sites: 7, sites: [] })) };
+  const alertsMock = { getAlerts: vi.fn().mockReturnValue(of([])) };
+  const authMock = { logout: vi.fn().mockReturnValue(of(undefined)), clearSession: vi.fn() };
+  const routerMock = { navigate: vi.fn() };
+
+  TestBed.configureTestingModule({
+    imports: [Dashboard],
+    providers: [
+      { provide: StatsService, useValue: statsMock },
+      { provide: AlertsService, useValue: alertsMock },
+      { provide: AuthService, useValue: authMock },
+      { provide: Router, useValue: routerMock },
+    ],
+  });
+
+  const fixture = TestBed.createComponent(Dashboard);
+  fixture.detectChanges();
+
+  const button = fixture.nativeElement.querySelector('.logout-button');
+  button.click();
+
+  expect(authMock.logout).toHaveBeenCalled();
+  expect(routerMock.navigate).toHaveBeenCalledWith(['/login']);
+  });
+  it('déconnecte localement et redirige vers /login même si logout échoue côté réseau', () => {
+  const statsMock = { getSummary: vi.fn().mockReturnValue(of({ total_sites: 7, sites: [] })) };
+  const alertsMock = { getAlerts: vi.fn().mockReturnValue(of([])) };
+  const authMock = {
+    logout: vi.fn().mockReturnValue(throwError(() => new Error('réseau indisponible'))),
+    clearSession: vi.fn(),
+  };
+  const routerMock = { navigate: vi.fn() };
+
+  TestBed.configureTestingModule({
+    imports: [Dashboard],
+    providers: [
+      { provide: StatsService, useValue: statsMock },
+      { provide: AlertsService, useValue: alertsMock },
+      { provide: AuthService, useValue: authMock },
+      { provide: Router, useValue: routerMock },
+    ],
+  });
+
+  const fixture = TestBed.createComponent(Dashboard);
+  fixture.detectChanges();
+
+  const button = fixture.nativeElement.querySelector('.logout-button');
+  button.click();
+
+  expect(authMock.clearSession).toHaveBeenCalled();
+  expect(routerMock.navigate).toHaveBeenCalledWith(['/login']);
+});
 });

apps/frontend/src/app/features/dashboard/dashboard.ts

@@ -2,10 +2,12 @@ import { Component, OnInit, inject, signal, DestroyRef } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { timer, switchMap, catchError, EMPTY, Observable } from 'rxjs';
 import { DecimalPipe } from '@angular/common';
+import { Router } from '@angular/router';
 import { StatsService } from '../../core/services/stats.service';
 import { ConsumptionGauge } from '../../shared/components/consumption-gauge/consumption-gauge';
 import { SiteLoadChart } from '../../shared/components/site-load-chart/site-load-chart';
 import { AlertsService } from '../../core/services/alerts.service';
+import { AuthService } from '../../core/services/auth.service';
 import { StatsSummary } from '../../shared/models/stats.model';
 import { Alert } from '../../shared/models/alert.model';
 
@@ -23,6 +25,8 @@ const UNAVAILABLE_MESSAGE =
 export class Dashboard implements OnInit {
   private statsService = inject(StatsService);
   private alertsService = inject(AlertsService);
+  private auth = inject(AuthService);
+  private router = inject(Router);
   private destroyRef = inject(DestroyRef);
 
   stats = signal<StatsSummary | null>(null);
@@ -50,6 +54,17 @@ export class Dashboard implements OnInit {
       });
   }
 
+  onLogout(): void {
+    this.auth.logout().subscribe({
+      next: () => this.router.navigate(['/login']),
+      error: () => {
+        // Même si l'appel réseau échoue, on considère l'utilisateur déconnecté localement.
+        this.auth.clearSession();
+        this.router.navigate(['/login']);
+      },
+    });
+  }
+
   private reportUnavailable(): Observable<never> {
     this.error.set(UNAVAILABLE_MESSAGE);
     return EMPTY;