From e684381d13abf2af796e159200def29b47b40f16 Mon Sep 17 00:00:00 2001
From: Melvin Luong <melvin.luong@gmail.com>
Date: Tue, 3 Dec 2019 16:56:06 +1100
Subject: [PATCH] Updated header/banner profile icon to include the user's
username if user has logged in.
---
src/app/app.component.css | 5 ++++-
src/app/app.component.html | 6 +++---
src/app/app.component.ts | 8 ++++++++
3 files changed, 15 insertions(+), 4 deletions(-)
diff --git a/src/app/app.component.css b/src/app/app.component.css
index 309dd81..c85157c 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -26,4 +26,7 @@
color: #f0f0f0;
font-size: smaller;
}
-
\ No newline at end of file
+
+.profile-button {
+ padding: 30px 0px 0px 0px;
+}
\ No newline at end of file
diff --git a/src/app/app.component.html b/src/app/app.component.html
index bfcb63d..352fa0f 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -15,10 +15,10 @@
<span class="banner">STRUDEL</span>
<span fxFlex></span>
<span class="fill-horizontal-space"></span>
- <button mat-icon-button [matMenuTriggerFor]="actionmenu">
- <mat-icon>person</mat-icon>
+ <button mat-button [matMenuTriggerFor]="actionmenu" disableRipple="true" class="profile-button">
+ {{ displayUsername() }}
+ <mat-icon>expand_more</mat-icon>
</button>
-
<mat-menu #actionmenu="matMenu">
<div *ngFor="let az of (authService.loggedInAuthZ | async)">
<button mat-menu-item routerLink="/logout"><mat-icon>logout</mat-icon>Log out of {{ az.name }}</button>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index e6cb945..268a2d6 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -107,6 +107,14 @@ export class AppComponent {
return count;
}
+ displayUsername() {
+ let ids = this.computeSitesService.appidentities.value;
+
+ if (Array.isArray(ids) && ids.length) {
+ return ids[0].username;
+ }
+ }
+
// login() {
// console.log("login");
--
GitLab