Updated header/banner profile icon to include the user's username if user has logged in.

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

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>

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");