Ajout auth

src/app/app.config.ts

@@ -1,8 +1,13 @@
-import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { ApplicationConfig, inject, provideBrowserGlobalErrorListeners, provideAppInitializer } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
+import { KeycloakService } from './auth/keycloak.service';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideBrowserGlobalErrorListeners(), provideRouter(routes)],
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideRouter(routes),
+    provideAppInitializer(() => inject(KeycloakService).init()),
+  ],
 };

src/app/app.routes.ts

@@ -3,14 +3,15 @@ import { Home } from './home/home';
 import { IssueDetail } from './issues/issue-detail/issue-detail';
 import { Issues } from './issues/issues';
 import { Projects } from './projects/projects';
+import { authGuard } from './auth/auth.guard';
 
 export const routes: Routes = [
   { path: '', pathMatch: 'full', redirectTo: 'home' },
   { path: 'home', component: Home },
-  { path: 'project', component: Projects },
+  { path: 'project', component: Projects, canActivate: [authGuard] },
   { path: 'projects', redirectTo: 'project' },
-  { path: 'issues/new', component: IssueDetail },
-  { path: 'issues/:id', component: IssueDetail },
-  { path: 'issues', component: Issues },
+  { path: 'issues/new', component: IssueDetail, canActivate: [authGuard] },
+  { path: 'issues/:id', component: IssueDetail, canActivate: [authGuard] },
+  { path: 'issues', component: Issues, canActivate: [authGuard] },
   { path: '**', redirectTo: 'home' },
 ];

src/app/menu/menu.css

@@ -64,8 +64,44 @@
   font-weight: 600;
 }
 
-.sidebar-footer {
+.sidebar-user {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  padding: 0.6rem 0.75rem;
+  border-top: 1px solid #e5e7eb;
   margin-top: auto;
+}
+
+.sidebar-user-name {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: #374151;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sidebar-logout {
+  width: 100%;
+  padding: 0.35rem 0.5rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: #6b7280;
+  background: transparent;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s, border-color 0.1s;
+}
+
+.sidebar-logout:hover {
+  background: #fee2e2;
+  color: #dc2626;
+  border-color: #fca5a5;
+}
+
+.sidebar-footer {
   padding: 0 0.5rem;
   font-size: 0.72rem;
   color: #9ca3af;

src/app/menu/menu.html

@@ -40,5 +40,12 @@
     }
   </nav>
 
+  @if (keycloak.isAuthenticated()) {
+    <div class="sidebar-user">
+      <span class="sidebar-user-name">{{ keycloak.username() }}</span>
+      <button class="sidebar-logout" (click)="logout()">Déconnexion</button>
+    </div>
+  }
+
   <footer class="sidebar-footer">v{{ version }}</footer>
 </aside>

src/app/menu/menu.ts

@@ -1,6 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 import { version } from '../../../package.json';
+import { KeycloakService } from '../auth/keycloak.service';
 
 @Component({
   selector: 'app-menu',
@@ -10,10 +11,15 @@ import { version } from '../../../package.json';
 })
 export class Menu {
   protected readonly version = version;
+  protected readonly keycloak = inject(KeycloakService);
 
   protected readonly menuItems = [
     { label: 'Accueil', path: '/home' },
     { label: 'Projet', path: '/project' },
     { label: 'Issues', path: '/issues' },
   ];
+
+  protected logout(): void {
+    this.keycloak.logout();
+  }
 }