angular/ems-frontend
angular/ems-frontend
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add logout button and update title in header #50

Merged
jleibl merged 1 commits from task/add-logout-functionality into main 2025-01-23 12:00:51 +00:00
Conversation 1 Commits 1 Files Changed 5 +22 -4
5 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/app/app.component.css
View File

8
src/app/app.component.html
View File

@ -1,4 +1,10 @@
<main class="container mx-auto px-4 py-8 max-w-6xl"> <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> <router-outlet></router-outlet>
</main> </main>

12
src/app/app.component.ts
View File

@ -1,14 +1,22 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router'; import { RouterOutlet } from '@angular/router';
import { AuthService } from './services/auth.service';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
imports: [CommonModule, RouterOutlet], imports: [CommonModule, RouterOutlet, MatButtonModule, MatIconModule],
templateUrl: './app.component.html', templateUrl: './app.component.html',
standalone: true, standalone: true,
styleUrl: './app.component.css',
}) })
export class AppComponent { export class AppComponent {
title = 'Employee Management System'; title = 'Employee Management System';
constructor(private authService: AuthService) {}
logout(): void {
this.authService.logout();
}
} }

4
src/app/services/auth.service.ts
View File

@ -16,4 +16,8 @@ export class AuthService {
return false; return false;
} }
public logout(): void {
this.keycloakService.logout();
}
} }

2
src/index.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Lf10StarterNew</title> <title>Employee Management System</title>
<base href="/" /> <base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" /> <link rel="icon" type="image/x-icon" href="favicon.ico" />