Login / Logout

src/app/auth/keycloak.service.ts

@@ -15,8 +15,6 @@ export class KeycloakService {
   async init(): Promise<void> {
     try {
       const authenticated = await this.keycloak.init({
-        onLoad: 'check-sso',
-        silentCheckSsoRedirectUri: `${window.location.origin}/assets/silent-check-sso.html`,
         pkceMethod: 'S256',
       });
       this.isAuthenticated.set(authenticated);

src/app/menu/menu.css

@@ -34,6 +34,11 @@
   letter-spacing: -0.02em;
 }
 
+.sidebar-version {
+  font-size: 0.72rem;
+  color: #9ca3af;
+}
+
 .sidebar-nav {
   display: flex;
   flex-direction: column;
@@ -64,6 +69,24 @@
   font-weight: 600;
 }
 
+.sidebar-login {
+  margin-top: auto;
+  width: 100%;
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #ffffff;
+  background: #2563eb;
+  border: none;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+
+.sidebar-login:hover {
+  background: #1d4ed8;
+}
+
 .sidebar-user {
   display: flex;
   flex-direction: column;
@@ -101,9 +124,3 @@
   border-color: #fca5a5;
 }
 
-.sidebar-footer {
-  padding: 0 0.5rem;
-  font-size: 0.72rem;
-  color: #9ca3af;
-  text-align: center;
-}

src/app/menu/menu.html

@@ -25,27 +25,28 @@
       <circle cx="18" cy="16" r="6" fill="#48BB78"/>
     </svg>
     <span class="sidebar-logo-text">Bonsai</span>
+    <span class="sidebar-version">v{{ version }}</span>
   </div>
 
-  <nav class="sidebar-nav">
-    @for (item of menuItems; track item.path) {
-      <a
-        class="sidebar-link"
-        [routerLink]="item.path"
-        routerLinkActive="sidebar-link--active"
-        [routerLinkActiveOptions]="{ exact: true }"
-      >
-        {{ item.label }}
-      </a>
-    }
-  </nav>
-
   @if (keycloak.isAuthenticated()) {
+    <nav class="sidebar-nav">
+      @for (item of menuItems; track item.path) {
+        <a
+          class="sidebar-link"
+          [routerLink]="item.path"
+          routerLinkActive="sidebar-link--active"
+          [routerLinkActiveOptions]="{ exact: true }"
+        >
+          {{ item.label }}
+        </a>
+      }
+    </nav>
+
     <div class="sidebar-user">
       <span class="sidebar-user-name">{{ keycloak.username() }}</span>
       <button class="sidebar-logout" (click)="logout()">Déconnexion</button>
     </div>
+  } @else {
+    <button class="sidebar-login" (click)="keycloak.login()">Connexion</button>
   }
-
-  <footer class="sidebar-footer">v{{ version }}</footer>
 </aside>