Add Logout component and fix redirect URI issue

Author: pavankjadda

src/main/webapp/spring-data-ui/package-lock.json

@@ -19,6 +19,8 @@
     "@angular/platform-browser": "~8.0.3",
     "@angular/platform-browser-dynamic": "~8.0.3",
     "@angular/router": "~8.0.3",
+    "bootstrap": "^4.3.1",
+    "jquery": "^3.4.1",
     "keycloak-js": "^6.0.1",
     "rxjs": "~6.4.0",
     "tslib": "^1.9.0",

src/main/webapp/spring-data-ui/package.json

@@ -1,17 +1,17 @@
 import {NgModule} from "@angular/core";
 import {RouterModule, Routes} from "@angular/router";
-import {CategoryListComponent} from "./category-list/category-list.component";
 import {EmployeeListComponent} from "./employee-list/employee-list.component";
+import {LogoutComponent} from "./logout/logout.component";
 
 const routes: Routes = [
-  {
-    path: 'category/list',
-    component: CategoryListComponent
-  },
   {
     path: 'employee/list',
     component: EmployeeListComponent
   },
+  {
+    path: 'logout',
+    component:LogoutComponent
+  },
 ];
 
 @NgModule({

src/main/webapp/spring-data-ui/src/app/app-routing.module.ts

@@ -1,13 +1,14 @@
 <!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
+<div style="text-align:center" class="container container-fluid">
   <h1>
     Welcome to {{ title }}!
   </h1>
+
+  <ul>
+    <li>
+      <h2><a [routerLink]="['/employee/list']">Employees</a></h2>
+    </li>
+  </ul>
 </div>
-<ul>
-  <li>
-    <h2><a [routerLink]="['/employee/list']">Employees</a></h2>
-  </li>
-</ul>
 
 <router-outlet></router-outlet>

src/main/webapp/spring-data-ui/src/app/app.component.html

@@ -5,6 +5,8 @@ import {Component} from "@angular/core";
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
+export class AppComponent
+{
   title = 'spring-data-ui';
+
 }

src/main/webapp/spring-data-ui/src/app/app.component.ts

@@ -7,14 +7,16 @@ import {AppComponent} from "./app.component";
 import {EmployeeListComponent} from "./employee-list/employee-list.component";
 import {TokenInterceptor} from "./interceptors/token-interceptor";
 import {KeycloakService} from "./keycloak/keycloak.service";
+import {LogoutComponent} from "./logout/logout.component";
 
 export function kcFactory(keycloakService: KeycloakService) {
   return () => keycloakService.init();
 }
 @NgModule({
   declarations: [
     AppComponent,
-    EmployeeListComponent
+    EmployeeListComponent,
+    LogoutComponent
   ],
   imports: [
     BrowserModule,

src/main/webapp/spring-data-ui/src/app/app.module.ts

@@ -1,9 +1,26 @@
-<div class="">
-  <div *ngFor="let employee of employees" >
-    <p>{{employee.id}}</p>
-    <p>{{employee.firstName}}</p>
-    <p>{{employee.lastName}}</p>
-    <p>{{employee.email}}</p>
-    <p>{{employee.phone}}</p>
-  </div>
+<div class="container container-fluid">
+  <table class="table">
+    <thead>
+      <tr>
+        <th scope="col">Id</th>
+        <th scope="col">First Name</th>
+        <th scope="col">Last Name</th>
+        <th scope="col">Email</th>
+        <th scope="col">Phone</th>
+      </tr>
+    </thead>
+    <tbody *ngFor="let employee of employees" >
+      <tr>
+        <td>{{employee.id}}</td>
+        <td>{{employee.firstName}}</td>
+        <td>{{employee.lastName}}</td>
+        <td>{{employee.email}}</td>
+        <td>{{employee.phone}}</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <br/>
+  <h2><a [routerLink]="['/logout']">Logout</a></h2>
 </div>
+

src/main/webapp/spring-data-ui/src/app/employee-list/employee-list.component.html

@@ -1,4 +1,5 @@
 import {Component, OnInit} from "@angular/core";
+import {KeycloakService} from "../keycloak/keycloak.service";
 import {Employee} from "./employee";
 import {EmployeeService} from "./employee.service";
 
@@ -11,7 +12,8 @@ export class EmployeeListComponent implements OnInit
 {
   employees: Array<Employee>;
 
-  constructor(private employeeService:EmployeeService) { }
+  constructor(private employeeService:EmployeeService,
+              private keycloakService:KeycloakService) { }
 
   ngOnInit()
   {
@@ -27,4 +29,9 @@ export class EmployeeListComponent implements OnInit
       }
     );
   }
+
+  logout()
+  {
+    this.keycloakService.logout();
+  }
 }

src/main/webapp/spring-data-ui/src/app/employee-list/employee-list.component.ts

@@ -1,12 +1,13 @@
 import {Injectable} from "@angular/core";
 import * as Keycloak from "keycloak-js";
+import {KeycloakInstance} from "keycloak-js";
 
 @Injectable({
   providedIn: 'root'
 })
 export class KeycloakService
 {
-  private keycloakAuth: any;
+  private keycloakAuth: KeycloakInstance;
 
   constructor()
   {
@@ -39,4 +40,14 @@ export class KeycloakService
   {
     return this.keycloakAuth.token;
   }
+
+  logout()
+  {
+    const options = {
+      'redirectUri': 'http://localhost:4200',
+      'realm': 'nci',
+      'clientId': 'angular-app'
+    };
+    this.keycloakAuth.logout(options);
+  }
 }