From ca893507c644d37e1528f9420e1937274c8e2f5d Mon Sep 17 00:00:00 2001
From: Jan-Marlon Leibl <jleibl@proton.me>
Date: Thu, 23 Jan 2025 12:59:59 +0100
Subject: [PATCH] feat: add logout button and update title in header

---
 src/app/app.component.css        |  0
 src/app/app.component.html       |  8 +++++++-
 src/app/app.component.ts         | 12 ++++++++++--
 src/app/services/auth.service.ts |  4 ++++
 src/index.html                   |  2 +-
 5 files changed, 22 insertions(+), 4 deletions(-)
 delete mode 100644 src/app/app.component.css
diff --git a/src/app/app.component.css b/src/app/app.component.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/app.component.html b/src/app/app.component.html
index a972e3e..c011255 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,4 +1,10 @@
 <main class="container mx-auto px-4 py-8 max-w-6xl">
-  <h1 class="text-3xl font-bold text-gray-900 mb-8">{{ title }}</h1>
+  <div class="flex justify-between items-center mb-8">
+    <h1 class="text-3xl font-extrabold text-gray-900">{{ title }}</h1>
+    <button mat-flat-button class="!bg-red-600 !text-white" (click)="logout()">
+      <mat-icon>logout</mat-icon>
+      <span class="ml-1">Logout</span>
+    </button>
+  </div>
   <router-outlet></router-outlet>
 </main>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 71801fe..20f300c 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,14 +1,22 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterOutlet } from '@angular/router';
+import { AuthService } from './services/auth.service';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   selector: 'app-root',
-  imports: [CommonModule, RouterOutlet],
+  imports: [CommonModule, RouterOutlet, MatButtonModule, MatIconModule],
   templateUrl: './app.component.html',
   standalone: true,
-  styleUrl: './app.component.css',
 })
 export class AppComponent {
   title = 'Employee Management System';
+
+  constructor(private authService: AuthService) {}
+
+  logout(): void {
+    this.authService.logout();
+  }
 }
diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts
index d6fa206..ab05941 100644
--- a/src/app/services/auth.service.ts
+++ b/src/app/services/auth.service.ts
@@ -16,4 +16,8 @@ export class AuthService {
 
     return false;
   }
+
+  public logout(): void {
+    this.keycloakService.logout();
+  }
 }
diff --git a/src/index.html b/src/index.html
index db6e104..ea50a44 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Lf10StarterNew</title>
+    <title>Employee Management System</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
-- 
2.47.2

