From 8d8dce89736e83904c7b25cf9f31e21fd8794b40 Mon Sep 17 00:00:00 2001
From: apapachristou <apapachristou@cite.gr>
Date: Mon, 9 Nov 2020 11:34:24 +0200
Subject: [PATCH] Adds logout option on smaller screen account menu

---
 .../src/app/ui/navbar/navbar.component.html       | 15 +++++++++------
 .../src/app/ui/navbar/navbar.component.ts         |  4 ++++
 dmp-frontend/src/assets/css/demo.css              | 14 ++++++++++++++
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.html b/dmp-frontend/src/app/ui/navbar/navbar.component.html
index 9d8cab229..fc9fc300b 100644
--- a/dmp-frontend/src/app/ui/navbar/navbar.component.html
+++ b/dmp-frontend/src/app/ui/navbar/navbar.component.html
@@ -9,9 +9,9 @@
 			</div>
 			<a class="logo" [routerLink]="['home']"><img src="../../../assets/splash/assets/img/argos-logo-2.svg"></a>
 
-			<div class="navbar-toggler ml-auto" *ngIf="isAuthenticated();else loginoption">
-				<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="this.applyFallbackAvatar($event)" [matMenuTriggerFor]="toggleMenu" [matTooltip]="this.getPrincipalName()">
-			</div>
+			<button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu">
+				<img *ngIf="this.isAuthenticated();else loginoption" mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="this.applyFallbackAvatar($event)">
+			</button>
 			<!-- <button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu" (mouseenter)="openMyMenu()">
 				<mat-icon class="toggle-icon">view_headline</mat-icon>
 			</button> -->
@@ -50,11 +50,11 @@
 
 			<mat-menu #toggleMenu="matMenu">
 				<div *ngIf="!(isAuthenticated() && onInvalidUrl())">
-				<!-- <div *ngIf="!(isAuthenticated() && onInvalidUrl())" (mouseleave)="closeMyMenu()"> -->
+					<!-- <div *ngIf="!(isAuthenticated() && onInvalidUrl())" (mouseleave)="closeMyMenu()"> -->
 					<ul class="list m-2">
 						<!-- <li *ngIf="isAuthenticated();else loginoption" class="d-flex justify-content-center avatar"> -->
-							<!-- <img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="this.applyFallbackAvatar($event)" (click)="openProfile()" [matTooltip]="this.getPrincipalName()"> -->
-							<!--<img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()" (click)="openProfile()"> -->
+						<!-- <img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="this.applyFallbackAvatar($event)" (click)="openProfile()" [matTooltip]="this.getPrincipalName()"> -->
+						<!--<img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()" (click)="openProfile()"> -->
 						<!-- </li> -->
 						<ng-template #loginoption>
 							<li class="d-flex justify-content-center avatar">
@@ -76,6 +76,9 @@
 						<li class="d-flex justify-content-center">
 							<button type="button" class="normal-btn" (click)="openNewDmpDialog()">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button>
 						</li>
+						<li *ngIf="isAuthenticated()">
+							<button type="button" class="default-btn" (click)="logout()">{{ 'USER-DIALOG.LOG-OUT' | translate }}</button>
+						</li>
 					</ul>
 				</div>
 			</mat-menu>
diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.ts b/dmp-frontend/src/app/ui/navbar/navbar.component.ts
index 2f68bfbbf..b1708bf82 100644
--- a/dmp-frontend/src/app/ui/navbar/navbar.component.ts
+++ b/dmp-frontend/src/app/ui/navbar/navbar.component.ts
@@ -270,4 +270,8 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 		}
 	}
 
+	logout() {
+		this.authentication.logout();
+	}
+
 }
diff --git a/dmp-frontend/src/assets/css/demo.css b/dmp-frontend/src/assets/css/demo.css
index f904db6c4..4667d7906 100644
--- a/dmp-frontend/src/assets/css/demo.css
+++ b/dmp-frontend/src/assets/css/demo.css
@@ -576,6 +576,20 @@ hr {
 	padding: 0.62rem 1.87rem;
 }
 
+.default-btn {
+	background: #ffffff 0% 0% no-repeat padding-box;
+	box-shadow: 0px 3px 6px #1E202029;
+	border: 1px solid #B5B5B5;
+	border-radius: 30px;
+	opacity: 1;
+	min-width: 162px;
+	max-width: 256px;
+	height: 40px;
+	color: #212121;
+	font-size: 0.87rem;
+	font-weight: 500;
+}
+
 .mirror {
 	-webkit-transform: scaleX(-1);
 	transform: scaleX(-1);