From 1187ee9fd64425b396501dcd68bd99e0cb6a090f Mon Sep 17 00:00:00 2001
From: Willem Dantuma <willem.dantuma@dobs.nl>
Date: Wed, 24 Jun 2020 13:08:13 +0200
Subject: [PATCH] Implement logout

---
 .../user-menu/user-menu.component.html        | 10 ++++++-
 .../user-menu/user-menu.component.scss        | 28 +++++++++++++++++--
 .../user-menu/user-menu.component.ts          | 21 +++++++++++++-
 .../src/fm/reducers/app-common.reducer.ts     |  2 +-
 4 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/projects/common/src/fm/components/user-menu/user-menu.component.html b/projects/common/src/fm/components/user-menu/user-menu.component.html
index 45f2612..266fbb7 100644
--- a/projects/common/src/fm/components/user-menu/user-menu.component.html
+++ b/projects/common/src/fm/components/user-menu/user-menu.component.html
@@ -1,3 +1,11 @@
 <div *ngIf="user">
-    <span class="rounded-circle menu-button" [title]="user.name">{{getLetter()}}</span>
+    <div (click)="toggle($event)" class="rounded-circle menu-button" [title]="user.name">
+        <span>{{getLetter()}}</span>
+        <div *ngIf="showMenu" class="card">           
+            <div class="card-body">
+                <div class="username">{{user.name}}</div>
+                <div><a href="#" (click)="logout($event)" i18n>logout</a></div>
+            </div>
+        </div>
+    </div>
 </div>
diff --git a/projects/common/src/fm/components/user-menu/user-menu.component.scss b/projects/common/src/fm/components/user-menu/user-menu.component.scss
index 6ea726b..9c51c10 100644
--- a/projects/common/src/fm/components/user-menu/user-menu.component.scss
+++ b/projects/common/src/fm/components/user-menu/user-menu.component.scss
@@ -1,10 +1,34 @@
 .menu-button {
-    background-color: purple;
-    color:white;
+    background-color: purple;  
     display: inline-block;
     width: 2.5em;
     height: 2.5em;
     line-height: 2.5em;
     text-align: center;
     font-size: 1rem;
+    position: relative;
+    display: inline-block;
+}
+
+div.menu-button > span {
+    color:white;
+}
+
+.card {
+    position: absolute;
+    top: 3rem;
+    right:0;
+    padding:0.5rem;
+    min-width: 10rem;
+}
+
+.username {
+    white-space: nowrap;
+    font-weight: 500;
+    font-size: 1.2rem;
+    line-height: 1.2rem;
+}
+
+.card-body {
+    text-align: left;
 }
\ No newline at end of file
diff --git a/projects/common/src/fm/components/user-menu/user-menu.component.ts b/projects/common/src/fm/components/user-menu/user-menu.component.ts
index ddbbbce..6729774 100644
--- a/projects/common/src/fm/components/user-menu/user-menu.component.ts
+++ b/projects/common/src/fm/components/user-menu/user-menu.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit,Input } from '@angular/core';
+import { OAuthService} from 'angular-oauth2-oidc'
 import { IUser } from '../../models/user';
 
 @Component({
@@ -9,8 +10,9 @@ import { IUser } from '../../models/user';
 export class UserMenuComponent implements OnInit {
 
   @Input() user:IUser;
+  public showMenu:boolean = false
 
-  constructor() { }
+  constructor(private oauthService:OAuthService) { }
 
   ngOnInit(): void {
   }
@@ -18,4 +20,21 @@ export class UserMenuComponent implements OnInit {
   getLetter():string {
       return this.user.name ? this.user.name.substr(0,1).toUpperCase():"";
   }
+
+  logout(event:MouseEvent) {
+    event.preventDefault();
+    this.oauthService.logOut();
+  }
+
+  hide(event:MouseEvent) {
+    this.showMenu = false;
+  }
+
+  show(event:MouseEvent) {
+    this.showMenu=true;
+  }
+
+  toggle(event:MouseEvent) {
+    this.showMenu=!this.showMenu;
+  }
 }
diff --git a/projects/common/src/fm/reducers/app-common.reducer.ts b/projects/common/src/fm/reducers/app-common.reducer.ts
index 426f523..de1f378 100644
--- a/projects/common/src/fm/reducers/app-common.reducer.ts
+++ b/projects/common/src/fm/reducers/app-common.reducer.ts
@@ -17,7 +17,7 @@ export interface State {
   fullScreen: boolean,
   routeLoading:boolean,
   menuVisible: boolean,
-  userPackages: IPackages
+  userPackages: IPackages,
 }
 
 export const initialState: State = {