From 301c8f94ec4cebdc66f8c747bad2127178b01505 Mon Sep 17 00:00:00 2001
From: Neil MacDougall <neil.macdougall@suse.com>
Date: Sat, 29 Feb 2020 10:03:22 +0000
Subject: [PATCH 1/7] Refinements to the user profile and avatar

---
 .../packages/core/sass/_all-theme.scss        |   2 +
 .../packages/core/src/core/core.module.ts     |  11 +-
 .../user-profile.service.ts                   |  24 +-
 .../edit-profile-info.component.spec.ts       |   2 +-
 .../edit-profile-info.component.ts            |   2 +-
 .../profile-info/profile-info.component.html  |  66 +++--
 .../profile-info/profile-info.component.scss  |   8 +-
 .../profile-info.component.spec.ts            |   2 +-
 .../profile-info/profile-info.component.ts    |  45 +--
 .../user-profile/user-profile.module.ts       |   2 +-
 .../components/confirmation-dialog.service.ts |   8 +
 .../page-header/page-header.component.html    |   5 +-
 .../page-header/page-header.component.scss    |  25 +-
 .../page-header.component.theme.scss          |  26 +-
 .../page-header/page-header.component.ts      |  30 +-
 .../src/shared/components/user-avatar/md5.ts  | 276 ++++++++++++++++++
 .../user-avatar/user-avatar.component.html    |   5 +
 .../user-avatar/user-avatar.component.scss    |  43 +++
 .../user-avatar/user-avatar.component.spec.ts |  25 ++
 .../user-avatar.component.theme.scss          |  10 +
 .../user-avatar/user-avatar.component.ts      |  56 ++++
 .../user-profile-banner.component.html        |   2 +-
 .../user-profile-banner.component.ts          |  32 +-
 .../packages/core/src/shared/shared.module.ts |   2 +-
 .../store/src/actions/dashboard-actions.ts    |   5 +
 .../store/src/reducers/dashboard-reducer.ts   |   9 +
 .../store/testing/src/store-test-helper.ts    |   1 +
 27 files changed, 601 insertions(+), 123 deletions(-)
 rename src/frontend/packages/core/src/{features/user-profile => core}/user-profile.service.ts (83%)
 create mode 100644 src/frontend/packages/core/src/shared/components/user-avatar/md5.ts
 create mode 100644 src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.html
 create mode 100644 src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.scss
 create mode 100644 src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.spec.ts
 create mode 100644 src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.theme.scss
 create mode 100644 src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.ts

diff --git a/src/frontend/packages/core/sass/_all-theme.scss b/src/frontend/packages/core/sass/_all-theme.scss
index 53ac5f27ea..3daaa41180 100644
--- a/src/frontend/packages/core/sass/_all-theme.scss
+++ b/src/frontend/packages/core/sass/_all-theme.scss
@@ -45,6 +45,7 @@
 @import './components/mat-snack-bar.theme';
 @import './components/ngx-charts-gauge.theme';
 @import '../src/shared/components/sidepanel-preview/sidepanel-preview.component.theme';
+@import '../src/shared/components/user-avatar/user-avatar.component.theme';
 @import './components/text-status.theme';
 @import './components/hyperlinks.theme';
 @import './mat-themes';
@@ -157,6 +158,7 @@ $side-nav-light-active: #484848;
   @include error-page-theme($theme, $app-theme);
   @include code-block-theme($theme, $app-theme);
   @include copy-to-clipboard-theme($theme, $app-theme);
+  @include app-user-avatar-theme($theme, $app-theme);
 }
 
 @function app-generate-nav-theme($theme, $nav-theme: null) {
diff --git a/src/frontend/packages/core/src/core/core.module.ts b/src/frontend/packages/core/src/core/core.module.ts
index 3f73ebdb6f..0c5547ad70 100644
--- a/src/frontend/packages/core/src/core/core.module.ts
+++ b/src/frontend/packages/core/src/core/core.module.ts
@@ -2,6 +2,7 @@ import { PortalModule } from '@angular/cdk/portal';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
+import { Title } from '@angular/platform-browser';
 import { MomentModule } from 'ngx-moment';
 
 import { NoContentMessageComponent } from '../shared/components/no-content-message/no-content-message.component';
@@ -31,7 +32,8 @@ import { UserService } from './user.service';
 import { UtilsService } from './utils.service';
 import { WindowRef } from './window-ref/window-ref.service';
 import { APP_TITLE, appTitleFactory } from './core.types';
-import { Title } from '@angular/platform-browser';
+import { UserProfileService } from './user-profile.service';
+import { UserAvatarComponent } from './../shared/components/user-avatar/user-avatar.component';
 
 @NgModule({
   imports: [
@@ -58,10 +60,11 @@ import { Title } from '@angular/platform-browser';
     PortalModule,
     EntityFavoriteStarComponent,
     RecentEntitiesComponent,
+    UserAvatarComponent,
     DisableRouterLinkDirective,
     StatefulIconComponent,
     NoContentMessageComponent,
-    DisableRouterLinkDirective
+    DisableRouterLinkDirective,
   ],
   providers: [
     AuthGuardService,
@@ -74,6 +77,7 @@ import { Title } from '@angular/platform-browser';
     EndpointsService,
     UserService,
     EntityServiceFactory,
+    UserProfileService,
     CurrentUserPermissionsService,
     {
       provide: APP_TITLE,
@@ -96,7 +100,8 @@ import { Title } from '@angular/platform-browser';
     EntityFavoriteStarComponent,
     RecentEntitiesComponent,
     DisableRouterLinkDirective,
-    NoContentMessageComponent
+    NoContentMessageComponent,
+    UserAvatarComponent,
   ],
   entryComponents: [
     LogOutDialogComponent
diff --git a/src/frontend/packages/core/src/features/user-profile/user-profile.service.ts b/src/frontend/packages/core/src/core/user-profile.service.ts
similarity index 83%
rename from src/frontend/packages/core/src/features/user-profile/user-profile.service.ts
rename to src/frontend/packages/core/src/core/user-profile.service.ts
index bd521ff78a..7e7bacc82d 100644
--- a/src/frontend/packages/core/src/features/user-profile/user-profile.service.ts
+++ b/src/frontend/packages/core/src/core/user-profile.service.ts
@@ -7,25 +7,24 @@ import {
   FetchUserProfileAction,
   UpdateUserPasswordAction,
   UpdateUserProfileAction,
-} from '../../../../store/src/actions/user-profile.actions';
-import { AppState } from '../../../../store/src/app-state';
-import { UserProfileEffect, userProfilePasswordUpdatingKey } from '../../../../store/src/effects/user-profile.effects';
-import { userProfileSchemaKey } from '../../../../store/src/helpers/entity-factory';
+} from '../../../store/src/actions/user-profile.actions';
+import { AppState } from '../../../store/src/app-state';
+import { UserProfileEffect, userProfilePasswordUpdatingKey } from '../../../store/src/effects/user-profile.effects';
 import {
   ActionState,
   getDefaultActionState,
   rootUpdatingKey,
-} from '../../../../store/src/reducers/api-request-reducer/types';
-import { AuthState } from '../../../../store/src/reducers/auth.reducer';
-import { selectRequestInfo, selectUpdateInfo } from '../../../../store/src/selectors/api.selectors';
+} from '../../../store/src/reducers/api-request-reducer/types';
+import { AuthState } from '../../../store/src/reducers/auth.reducer';
+import { selectRequestInfo, selectUpdateInfo } from '../../../store/src/selectors/api.selectors';
 import {
   UserProfileInfo,
   UserProfileInfoEmail,
   UserProfileInfoUpdates,
-} from '../../../../store/src/types/user-profile.types';
-import { userProfileEntitySchema } from '../../base-entity-schemas';
-import { entityCatalog } from '../../../../store/src/entity-catalog/entity-catalog.service';
-import { EntityMonitor } from '../../../../store/src/monitors/entity-monitor';
+} from '../../../store/src/types/user-profile.types';
+import { userProfileEntitySchema } from '../base-entity-schemas';
+import { entityCatalog } from '../../../store/src/entity-catalog/entity-catalog.service';
+import { EntityMonitor } from '../../../store/src/monitors/entity-monitor';
 
 
 @Injectable()
@@ -50,7 +49,8 @@ export class UserProfileService {
     );
     this.isFetching$ = this.entityMonitor.isFetchingEntity$;
 
-    this.isError$ = this.store.select(selectRequestInfo(userProfileSchemaKey, UserProfileEffect.guid)).pipe(
+    const stratosUserConfig = entityCatalog.getEntity(userProfileEntitySchema.endpointType, userProfileEntitySchema.entityType);
+    this.isError$ = this.store.select(selectRequestInfo(stratosUserConfig.entityKey, UserProfileEffect.guid)).pipe(
       filter(requestInfo => !!requestInfo && !requestInfo.fetching),
       map(requestInfo => requestInfo.error)
     );
diff --git a/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.spec.ts b/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.spec.ts
index 16b2fd5145..1b22dc0366 100644
--- a/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.spec.ts
+++ b/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.spec.ts
@@ -8,7 +8,7 @@ import { CoreTestingModule } from '../../../../test-framework/core-test.modules'
 import { createBasicStoreModule } from '@stratos/store/testing';
 import { CoreModule } from '../../../core/core.module';
 import { SharedModule } from '../../../shared/shared.module';
-import { UserProfileService } from '../user-profile.service';
+import { UserProfileService } from '../../../core/user-profile.service';
 import { EditProfileInfoComponent } from './edit-profile-info.component';
 
 describe('EditProfileInfoComponent', () => {
diff --git a/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.ts b/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.ts
index 29f096b078..bfbb522036 100644
--- a/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.ts
+++ b/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.ts
@@ -8,7 +8,7 @@ import { UserProfileInfo, UserProfileInfoUpdates } from '../../../../../store/sr
 import { CurrentUserPermissions } from '../../../core/current-user-permissions.config';
 import { CurrentUserPermissionsService } from '../../../core/current-user-permissions.service';
 import { StepOnNextFunction } from '../../../shared/components/stepper/step/step.component';
-import { UserProfileService } from '../user-profile.service';
+import { UserProfileService } from '../../../core/user-profile.service';
 
 
 @Component({
diff --git a/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.html b/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.html
index 7e807d5687..3ceba4ad8e 100644
--- a/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.html
+++ b/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.html
@@ -1,19 +1,17 @@
 <app-page-header>
   <h1>User Profile</h1>
   <div class="page-header-right">
-    <button mat-icon-button name="edit" routerLink="/user-profile/edit" matTooltip="Edit">
+    <button *ngIf="canEdit$ | async" mat-icon-button name="edit" routerLink="/user-profile/edit" matTooltip="Edit">
       <mat-icon>edit</mat-icon>
     </button>
   </div>
 </app-page-header>
 <div class="user-profile">
-  <app-no-content-message *ngIf="isError$ | async" [icon]="'error'"
-    [firstLine]="'An error occurred retrieving the User Profile'" [secondLine]="{
+  <app-no-content-message *ngIf="isError$ | async" icon="error"
+    firstLine="An error occurred retrieving the User Profile" [secondLine]="{
     text: ''
   }"></app-no-content-message>
-  <app-user-profile-banner *ngIf="userProfile$ | async as profile"
-    name="{{ profile.name.givenName }} {{ profile.name.familyName }}" email="{{ primaryEmailAddress$ | async }}"
-    username="{{ profile.userName }}">
+  <app-user-profile-banner *ngIf="userProfile$ | async as profile" [user]="profile" [allowGravatar]="allowGravatar$ | async">
   </app-user-profile-banner>
   <div class="user-profile__info" *ngIf="userProfile$ | async as profile">
     <div class="user-profile__content">
@@ -54,56 +52,64 @@ <h1>User Profile</h1>
           <mat-card-title>Settings</mat-card-title>
         </mat-card-header>
         <div class="user-profile__options">
+
+          <div class="user-profile__option" *ngIf="gravatarEnabled$ | async as enableGravatar">
+            <div class="user-profile__option-inner">
+              <mat-slide-toggle [checked]="enableGravatar === 'true'" (change)="updateGravatarEnabled(enableGravatar)">
+                <div class="user-profile__option-header">Use Gravatar for user icon</div>
+              </mat-slide-toggle>
+              <div class="user-profile__option-subtext">Use image from Gravatar for the user profile icon when email address is available</div>
+            </div>
+          </div>
+
           <div class="user-profile__option" *ngIf="timeoutSession$ | async as timeoutSession"
             [ngClass]="{'user-profile__option-warning': timeoutSession === 'false'}">
             <div class="user-profile__option-inner">
-              <div class="user-profile__option-header">
-                Session timeout
+              <mat-slide-toggle color="warn" [checked]="timeoutSession === 'false'"
+              (change)="updateSessionKeepAlive(timeoutSession)">
+              <div class="user-profile__option-header">Disable session timeout
                 <mat-icon *ngIf="timeoutSession === 'false'"
                   matTooltip="Session timeout is disabled, you are now at a greater security risk."
                   matTooltipPosition="right" class="user-profile__option-warning-icon" inline="true">
                   warning
                 </mat-icon>
               </div>
-              <button mat-flat-button (click)="updateSessionKeepAlive(timeoutSession !== 'true')"
-                [color]="timeoutSession === 'true' ? 'warn' : 'primary'">
-                {{ timeoutSession === 'true' ? 'Disable' : 'Enable' }} session timeout
-              </button>
-              <div class="user-profile__option-subtext">Automatically log you out of the application if you are inactive
+              </mat-slide-toggle>
+              <div class="user-profile__option-subtext">Disable automatic logout if you are inactive
                 for a long period of time. Disabling session timeout is considered a security risk.</div>
             </div>
           </div>
+
           <div class="user-profile__option" *ngIf="pollingEnabled$ | async as pollingEnabled"
             [ngClass]="{'user-profile__option-warning': pollingEnabled === 'false'}">
             <div class="user-profile__option-inner">
-              <div class="user-profile__option-header">
-                Polling
+              <mat-slide-toggle color="warn" [checked]="pollingEnabled === 'false'">
+              <div class="user-profile__option-header">Disable polling
                 <mat-icon *ngIf="pollingEnabled === 'false'"
+                  #tooltip="matTooltip"
                   matTooltip="Polling is disabled, some pages may not automatically update." matTooltipPosition="right"
                   class="user-profile__option-warning-icon" inline="true">
                   warning
                 </mat-icon>
               </div>
-              <button mat-flat-button (click)="setPollingEnabled(pollingEnabled !== 'true')"
-                [color]="pollingEnabled === 'true' ? 'warn' : 'primary'">
-                {{ pollingEnabled === 'true' ? 'Disable' : 'Enable' }} polling
-              </button>
-              <div class="user-profile__option-subtext">Automatically refresh data throughout the application. Disabling
+            </mat-slide-toggle>
+            <div class="user-profile__option-subtext">Disable automatically refreshing data throughout the application. Disabling
                 polling may result in some pages showing out-of-date information.</div>
             </div>
           </div>
-          <div class="user-profile__option" *ngIf="hasMultipleThemes">
-            <div class="user-profile__option-inner">
-              <div class="user-profile__option-header">
-                Theme
+
+          <div class="user-profile__sectiom" *ngIf="hasMultipleThemes">
+            <mat-card-title class="user-profile__section">Theme</mat-card-title>
+            <div class="user-profile__option">
+              <div class="user-profile__option-inner">
+                <mat-button-toggle-group [value]="(themeService.getTheme() | async).key"
+                  (change)="themeService.setTheme($event.value)" name="theme" aria-label="Theme">
+                  <mat-button-toggle *ngFor="let theme of themeService.getThemes()" [value]="theme.key"> {{ theme.label }}
+                  </mat-button-toggle>
+                </mat-button-toggle-group>
               </div>
-              <mat-button-toggle-group [value]="(themeService.getTheme() | async).key"
-                (change)="themeService.setTheme($event.value)" name="theme" aria-label="Theme">
-                <mat-button-toggle *ngFor="let theme of themeService.getThemes()" [value]="theme.key"> {{ theme.label }}
-                </mat-button-toggle>
-              </mat-button-toggle-group>
             </div>
-          </div>
+        </div>
         </div>
       </mat-card>
       <mat-card *ngIf="profile.origin === 'uaa'">
diff --git a/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.scss b/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.scss
index ef294d6b67..ba56f7161a 100644
--- a/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.scss
+++ b/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.scss
@@ -15,18 +15,23 @@ $user-profile-avatar-size: 48px;
   &__options {
     margin-top: -($option-margin-top);
   }
+  &__section {
+    margin-top: 10px;
+  }
   &__option {
-    $margin: 10px;
+    $margin: 4px;
     border-radius: 5px;
     display: flex;
     flex-direction: column;
     margin-top: $option-margin-top;
     padding: 10px;
     &-warning-icon {
+      font-size: 18px;
       padding-left: 5px;
     }
     &-subtext {
       font-size: 12px;
+      margin-left: 44px;
       margin-top: $margin;
       opacity: .6;
     }
@@ -35,7 +40,6 @@ $user-profile-avatar-size: 48px;
       display: flex;
       font-size: 14px;
       font-weight: bold;
-      margin-bottom: $margin;
     }
   }
   &__info {
diff --git a/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.spec.ts b/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.spec.ts
index fccacf4fa6..849f04870e 100644
--- a/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.spec.ts
+++ b/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.spec.ts
@@ -8,7 +8,7 @@ import { CoreTestingModule } from '../../../../test-framework/core-test.modules'
 import { createBasicStoreModule } from '@stratos/store/testing';
 import { CoreModule } from '../../../core/core.module';
 import { SharedModule } from '../../../shared/shared.module';
-import { UserProfileService } from '../user-profile.service';
+import { UserProfileService } from '../../../core/user-profile.service';
 import { ProfileInfoComponent } from './profile-info.component';
 
 describe('ProfileInfoComponent', () => {
diff --git a/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.ts b/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.ts
index b504c6832f..a1a2082280 100644
--- a/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.ts
+++ b/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.ts
@@ -1,3 +1,4 @@
+import { SetGravatarEnabledAction } from './../../../../../store/src/actions/dashboard-actions';
 import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
@@ -9,9 +10,7 @@ import { selectDashboardState } from '../../../../../store/src/selectors/dashboa
 import { UserProfileInfo } from '../../../../../store/src/types/user-profile.types';
 import { ThemeService } from '../../../core/theme.service';
 import { UserService } from '../../../core/user.service';
-import { ConfirmationDialogConfig } from '../../../shared/components/confirmation-dialog.config';
-import { ConfirmationDialogService } from '../../../shared/components/confirmation-dialog.service';
-import { UserProfileService } from '../user-profile.service';
+import { UserProfileService } from '../../../core/user-profile.service';
 
 @Component({
   selector: 'app-profile-info',
@@ -25,30 +24,38 @@ export class ProfileInfoComponent implements OnInit {
   );
 
   public pollingEnabled$ = this.store.select(selectDashboardState).pipe(
-    map(dashboardState => dashboardState.pollingEnabled ? 'true' : 'false'),
+    map(dashboardState => dashboardState.pollingEnabled ? 'true' : 'false')
+  );
+
+  public gravatarEnabled$ = this.store.select(selectDashboardState).pipe(
+    map(dashboardState => dashboardState.gravatarEabled ? 'true' : 'false')
+  );
+
+  public allowGravatar$ =  this.store.select(selectDashboardState).pipe(
+    map(dashboardState => dashboardState.gravatarEabled)
   );
 
   isError$: Observable<boolean>;
+  canEdit$: Observable<boolean>;
   userProfile$: Observable<UserProfileInfo>;
 
   primaryEmailAddress$: Observable<string>;
   hasMultipleThemes: boolean;
 
-  private sessionDialogConfig = new ConfirmationDialogConfig(
-    'Disable session timeout',
-    'We recommend keeping automatic session timeout enabled to improve the security of your data.',
-    'Disable',
-    true
-  );
+  public updateSessionKeepAlive(timeoutSession: string) {
+    const newVal = !(timeoutSession === 'true');
+    this.setSessionTimeout(newVal);
+  }
 
-  public updateSessionKeepAlive(timeoutSession: boolean) {
-    if (!timeoutSession) {
-      this.confirmDialog.open(this.sessionDialogConfig, () => this.setSessionTimeout(timeoutSession));
-    } else {
-      this.setSessionTimeout(timeoutSession);
-    }
+  public updatePolling(pollingEnabled: string) {
+    const newVal = !(pollingEnabled === 'true');
+    this.setPollingEnabled(newVal);
   }
 
+  public updateGravatarEnabled(gravatarEnabled: string) {
+    const newVal = !(gravatarEnabled === 'true');
+    this.setGravatarEnabled(newVal);
+  }
   private setSessionTimeout(timeoutSession: boolean) {
     this.store.dispatch(new SetSessionTimeoutAction(timeoutSession));
   }
@@ -57,15 +64,19 @@ export class ProfileInfoComponent implements OnInit {
     this.store.dispatch(new SetPollingEnabledAction(pollingEnabled));
   }
 
+  public setGravatarEnabled(gravatarEnabled: boolean) {
+    this.store.dispatch(new SetGravatarEnabledAction(gravatarEnabled));
+  }
+
   constructor(
     private userProfileService: UserProfileService,
     private store: Store<DashboardOnlyAppState>,
-    private confirmDialog: ConfirmationDialogService,
     public userService: UserService,
     public themeService: ThemeService
   ) {
     this.isError$ = userProfileService.isError$;
     this.userProfile$ = userProfileService.userProfile$;
+    this.canEdit$ = this.isError$.pipe(map(e => !e));
 
     this.primaryEmailAddress$ = this.userProfile$.pipe(
       map((profile: UserProfileInfo) => userProfileService.getPrimaryEmailAddress(profile))
diff --git a/src/frontend/packages/core/src/features/user-profile/user-profile.module.ts b/src/frontend/packages/core/src/features/user-profile/user-profile.module.ts
index 595303daa6..d3c772f7ef 100644
--- a/src/frontend/packages/core/src/features/user-profile/user-profile.module.ts
+++ b/src/frontend/packages/core/src/features/user-profile/user-profile.module.ts
@@ -5,7 +5,7 @@ import { UserProfileRoutingModule } from './user-profile.routing';
 import { SharedModule } from '../../shared/shared.module';
 import { CoreModule } from '../../core/core.module';
 import { EditProfileInfoComponent } from './edit-profile-info/edit-profile-info.component';
-import { UserProfileService } from './user-profile.service';
+import { UserProfileService } from '../../core/user-profile.service';
 
 @NgModule({
   imports: [
diff --git a/src/frontend/packages/core/src/shared/components/confirmation-dialog.service.ts b/src/frontend/packages/core/src/shared/components/confirmation-dialog.service.ts
index d559c6d604..61639d052d 100644
--- a/src/frontend/packages/core/src/shared/components/confirmation-dialog.service.ts
+++ b/src/frontend/packages/core/src/shared/components/confirmation-dialog.service.ts
@@ -13,6 +13,11 @@ export class ConfirmationDialogService {
   constructor(private dialog: MatDialog) { }
 
   open(dialog: ConfirmationDialogConfig, doFn: (res?: any) => void): void {
+    this.openWithCancel(dialog, doFn, () => {});
+  }
+
+  // Open the dialog and report back to the function for both okay and cancel
+  openWithCancel(dialog: ConfirmationDialogConfig, doFn: (res?: any) => void, cancelFn: (res?: any) => void): void {
 
     const dialogRef = this.dialog.open(DialogConfirmComponent, {
       maxWidth: '400px',
@@ -22,7 +27,10 @@ export class ConfirmationDialogService {
     dialogRef.afterClosed().pipe(take(1)).subscribe(result => {
       if (result) {
         doFn(result);
+      } else {
+        cancelFn();
       }
     });
   }
+
 }
diff --git a/src/frontend/packages/core/src/shared/components/page-header/page-header.component.html b/src/frontend/packages/core/src/shared/components/page-header/page-header.component.html
index 6578010cb5..9bdf8c84ee 100644
--- a/src/frontend/packages/core/src/shared/components/page-header/page-header.component.html
+++ b/src/frontend/packages/core/src/shared/components/page-header/page-header.component.html
@@ -51,14 +51,13 @@ <h3>Recent</h3>
             </button>
             <button id="userMenu" *ngIf="!hideMenu" class="page-header__menu-button page-header__usermenu"
               mat-icon-button [matMenuTriggerFor]="menu">
-              <div class="page-header__menu-button-icon"> {{ userNameFirstLetter$ | async }} </div>
+              <app-user-avatar [allowGravatar]="allowGravatar$ | async" fallback="initials" [user]="user$ | async"></app-user-avatar>
             </button>
             <mat-menu #menu="matMenu" [overlapTrigger]="false" class="page-header__menu">
               <div class="page-header__menu-inner">
                 <div class="page-header__username">
-                  <div class="page-header__username-icon"> {{ userNameFirstLetter$ | async }} </div>
+                  <app-user-avatar [allowGravatar]="allowGravatar$ | async" fallback="initials" [user]="user$ | async"></app-user-avatar>
                   <div class="page-header__username-text">
-                    <div class="page-header__username-subtext">user</div>
                     <div>{{ username$ | async }}</div>
                   </div>
                 </div>
diff --git a/src/frontend/packages/core/src/shared/components/page-header/page-header.component.scss b/src/frontend/packages/core/src/shared/components/page-header/page-header.component.scss
index 510558e628..2a24c93c12 100644
--- a/src/frontend/packages/core/src/shared/components/page-header/page-header.component.scss
+++ b/src/frontend/packages/core/src/shared/components/page-header/page-header.component.scss
@@ -86,37 +86,18 @@ $bottom-index: $top-index - 1;
     opacity: .3;
     padding: 0 10px 0 5px;
   }
-  &__menu-button-icon {
-    $menu-button-height: 30px;
-    border-radius: 50%;
-    height: $menu-button-height;
-    line-height: $menu-button-height;
-    width: $menu-button-height;
-  }
-  &__username-icon {
-    $menu-button-height: 50px;
-    border-radius: 50%;
-    font-size: 24px;
-    height: $menu-button-height;
-    line-height: $menu-button-height;
-    text-align: center;
-    width: $menu-button-height;
-  }
-  &__username-subtext {
-    font-size: 12px;
-    opacity: .6;
-  }
   &__menu-button {
     display: flex;
     justify-content: center;
   }
   &__usermenu {
-    padding: 5px 0;
+    margin-left: 8px;
   }
   &__username {
     align-items: center;
     display: flex;
-    padding: 5px 15px 15px 12px;
+    margin-top: -8px;
+    padding: 15px;
   }
   &__username-text {
     margin-left: 10px;
diff --git a/src/frontend/packages/core/src/shared/components/page-header/page-header.component.theme.scss b/src/frontend/packages/core/src/shared/components/page-header/page-header.component.theme.scss
index 65ed55245f..41bc0a4962 100644
--- a/src/frontend/packages/core/src/shared/components/page-header/page-header.component.theme.scss
+++ b/src/frontend/packages/core/src/shared/components/page-header/page-header.component.theme.scss
@@ -8,6 +8,17 @@
   $warning: map-get($status-colors, warning);
   $info: lighten($primmary-color, 20%);
   $subdued: map-get($app-theme, subdued-color);
+  $background: map-get($theme, background);
+  $menu-background-color: mat-color($background, card);
+  $is-dark: map-get($theme, is-dark);
+  $username-background: $menu-background-color;
+  @if $is-dark == true {
+    $username-background: lighten($menu-background-color, 5%);
+  } @else {
+    $username-background: darken($menu-background-color, 5%);
+  }
+  $username-color: mat-color($foreground, text);
+
   .page-header {
     &__warning-count {
       background-color: mat-color($primary);
@@ -19,9 +30,6 @@
     &__menu-separator {
       background-color: mat-color($foreground, divider);
     }
-    &__menu-inner {
-      color: mat-contrast($primary, 500);
-    }
     &__history {
       color: $subdued;
     }
@@ -31,16 +39,12 @@
     &__divider {
       color: mat-contrast($primary, 500);
     }
-    &__menu-button-icon {
-      background-color: mat-contrast($primary, 500);
-      color: mat-color($primary);
-    }
-    &__username-icon {
-      background-color: mat-color($primary);
-      color: mat-contrast($primary, 500);
-    }
     &__menu-icon {
       background-color: mat-contrast($primary, 500);
     }
+    &__username {
+      background-color: $username-background;
+      color: $username-color;
+    }
   }
 }
diff --git a/src/frontend/packages/core/src/shared/components/page-header/page-header.component.ts b/src/frontend/packages/core/src/shared/components/page-header/page-header.component.ts
index 1fee17fa9d..ba814535a3 100644
--- a/src/frontend/packages/core/src/shared/components/page-header/page-header.component.ts
+++ b/src/frontend/packages/core/src/shared/components/page-header/page-header.component.ts
@@ -1,3 +1,4 @@
+import { selectDashboardState } from './../../../../../store/src/selectors/dashboard.selectors';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { AfterViewInit, Component, Input, OnDestroy, TemplateRef, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -20,6 +21,8 @@ import { GlobalEventService, IGlobalEvent } from '../../global-events.service';
 import { StratosStatus } from '../../shared.types';
 import { FavoritesConfigMapper } from '../favorites-meta-card/favorite-config-mapper';
 import { BREADCRUMB_URL_PARAM, IHeaderBreadcrumb, IHeaderBreadcrumbLink } from './page-header.types';
+import { UserProfileService } from '../../../core/user-profile.service';
+import { UserProfileInfo } from './../../../../../store/src/types/user-profile.types';
 
 @Component({
   selector: 'app-page-header',
@@ -108,8 +111,10 @@ export class PageHeaderComponent implements OnDestroy, AfterViewInit {
     }
   }
 
-  public userNameFirstLetter$: Observable<string>;
   public username$: Observable<string>;
+  public user$: Observable<UserProfileInfo>;
+  public allowGravatar$: Observable<boolean>;
+
   public actionsKey: string;
 
   @Input()
@@ -150,7 +155,8 @@ export class PageHeaderComponent implements OnDestroy, AfterViewInit {
     private tabNavService: TabNavService,
     private router: Router,
     eventService: GlobalEventService,
-    private favoritesConfigMapper: FavoritesConfigMapper
+    private favoritesConfigMapper: FavoritesConfigMapper,
+    private userProfileService: UserProfileService,
   ) {
     this.events$ = eventService.events$.pipe(
       startWith([])
@@ -163,11 +169,23 @@ export class PageHeaderComponent implements OnDestroy, AfterViewInit {
 
     this.actionsKey = this.route.snapshot.data ? this.route.snapshot.data.extensionsActionsKey : null;
     this.breadcrumbKey = route.snapshot.queryParams[BREADCRUMB_URL_PARAM] || null;
-    this.username$ = store.select(s => s.auth).pipe(
-      map((auth: AuthState) => auth && auth.sessionData && auth.sessionData.user ? auth.sessionData.user.name : 'Unknown')
+
+    this.user$ = this.userProfileService.userProfile$;
+    this.userProfileService.fetchUserProfile();
+
+    this.username$ = this.user$.pipe(
+      map(profile => {
+        let name = profile.userName;
+        if (profile.name) {
+          name = profile.name.givenName + ' ' + profile.name.familyName;
+          name = name.trim();
+        }
+        return name ? name : profile.userName;
+      })
     );
-    this.userNameFirstLetter$ = this.username$.pipe(
-      map(name => name[0].toLocaleUpperCase())
+
+    this.allowGravatar$ = this.store.select(selectDashboardState).pipe(
+      map(dashboardState => dashboardState.gravatarEabled)
     );
   }
 
diff --git a/src/frontend/packages/core/src/shared/components/user-avatar/md5.ts b/src/frontend/packages/core/src/shared/components/user-avatar/md5.ts
new file mode 100644
index 0000000000..b92c749b30
--- /dev/null
+++ b/src/frontend/packages/core/src/shared/components/user-avatar/md5.ts
@@ -0,0 +1,276 @@
+/*eslint-disable*/
+/*tslint:disabled*/
+
+export class MD5 {
+
+  private static _string: string;
+  private static x: Array<number> = <Array<number>>Array();
+  private static k: number;
+  private static AA: number;
+  private static BB: number;
+  private static CC: number;
+  private static DD: number;
+  private static a: number;
+  private static b: number;
+  private static c: number;
+  private static d: number;
+  private static S11: number = 7;
+  private static S12: number = 12;
+  private static S13: number = 17;
+  private static S14: number = 22;
+  private static S21: number = 5;
+  private static S22: number = 9;
+  private static S23: number = 14;
+  private static S24: number = 20;
+  private static S31: number = 4;
+  private static S32: number = 11;
+  private static S33: number = 16;
+  private static S34: number = 23;
+  private static S41: number = 6;
+  private static S42: number = 10;
+  private static S43: number = 15;
+  private static S44: number = 21;
+
+  private static RotateLeft: Function = ( lValue: number, iShiftBits: number ) : number => (lValue << iShiftBits) | (lValue >>> (32 - iShiftBits));
+
+  private static AddUnsigned( lX: number, lY: number ) : number
+  {
+      let lX4: number,
+          lY4: number,
+          lX8: number,
+          lY8: number,
+          lResult: number;
+
+      lX8 = (lX & 0x80000000);
+      lY8 = (lY & 0x80000000);
+      lX4 = (lX & 0x40000000);
+      lY4 = (lY & 0x40000000);
+      lResult = (lX & 0x3FFFFFFF) + (lY & 0x3FFFFFFF);
+
+      if ( !!(lX4 & lY4) )
+      {
+          return (lResult ^ 0x80000000 ^ lX8 ^ lY8);
+      }
+
+      if ( !!(lX4 | lY4) )
+      {
+          if ( !!(lResult & 0x40000000) )
+          {
+              return (lResult ^ 0xC0000000 ^ lX8 ^ lY8);
+          }
+          else
+          {
+              return (lResult ^ 0x40000000 ^ lX8 ^ lY8);
+          }
+      }
+      else
+      {
+          return (lResult ^ lX8 ^ lY8);
+      }
+  }
+
+  private static F: Function = ( x: number, y: number, z: number ) : number => (x & y) | ((~x) & z);
+
+  private static G: Function = ( x: number, y: number, z: number ) : number => (x & z) | (y & (~z));
+
+  private static H: Function = ( x: number, y: number, z: number ) : number => (x ^ y ^ z);
+
+  private static I: Function = ( x: number, y: number, z: number ) : number => (y ^ (x | (~z)));
+
+  private static FF( a: number, b: number, c: number, d: number, x: number, s: number, ac: number ) : number
+  {
+      a = this.AddUnsigned(a, this.AddUnsigned(this.AddUnsigned(this.F(b, c, d), x), ac));
+      return this.AddUnsigned(this.RotateLeft(a, s), b);
+  }
+
+  private static GG( a: number, b: number, c: number, d: number, x: number, s: number, ac: number) : number
+  {
+      a = this.AddUnsigned(a, this.AddUnsigned(this.AddUnsigned(this.G(b, c, d), x), ac));
+      return this.AddUnsigned(this.RotateLeft(a, s), b);
+  }
+
+  private static HH( a: number, b: number, c: number, d: number, x: number, s: number, ac: number ) : number
+  {
+      a = this.AddUnsigned(a, this.AddUnsigned(this.AddUnsigned(this.H(b, c, d), x), ac));
+      return this.AddUnsigned(this.RotateLeft(a, s), b);
+  }
+
+  private static II(a: number, b: number, c: number, d: number, x: number, s: number, ac: number) : number
+  {
+      a = this.AddUnsigned(a, this.AddUnsigned(this.AddUnsigned(this.I(b, c, d), x), ac));
+      return this.AddUnsigned(this.RotateLeft(a, s), b);
+  }
+
+  private static ConvertToWordArray( string: string ) : Array<number>
+  {
+      let lWordCount: number,
+          lMessageLength: number = string.length,
+          lNumberOfWords_temp1: number = lMessageLength + 8,
+          lNumberOfWords_temp2: number = (lNumberOfWords_temp1 - (lNumberOfWords_temp1 % 64)) / 64,
+          lNumberOfWords: number = (lNumberOfWords_temp2 + 1) * 16,
+          lWordArray: Array<number> = Array(lNumberOfWords - 1),
+          lBytePosition: number = 0,
+          lByteCount: number = 0;
+
+      while ( lByteCount < lMessageLength )
+      {
+          lWordCount = (lByteCount - (lByteCount % 4)) / 4;
+          lBytePosition = (lByteCount % 4) * 8;
+          lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount) << lBytePosition));
+          lByteCount++;
+      }
+
+      lWordCount = (lByteCount - (lByteCount % 4)) / 4;
+      lBytePosition = (lByteCount % 4) * 8;
+      lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80 << lBytePosition);
+      lWordArray[lNumberOfWords - 2] = lMessageLength << 3;
+      lWordArray[lNumberOfWords - 1] = lMessageLength >>> 29;
+
+      return lWordArray;
+  }
+
+  private static WordToHex( lValue: number ) : string
+  {
+      let WordToHexValue: string = "",
+          WordToHexValue_temp: string = "",
+          lByte: number,
+          lCount: number;
+
+      for ( lCount = 0; lCount <= 3; lCount++ )
+      {
+          lByte = (lValue >>> (lCount * 8)) & 255;
+          WordToHexValue_temp = "0" + lByte.toString(16);
+          WordToHexValue = WordToHexValue + WordToHexValue_temp.substr(WordToHexValue_temp.length - 2, 2);
+      }
+
+      return WordToHexValue;
+  }
+
+  private static Utf8Encode( string: string ) : string
+  {
+      let utftext: string = "",
+          c: number;
+
+      string = string.replace(/\r\n/g, "\n");
+
+      for ( let n = 0; n < string.length; n++ )
+      {
+          c = string.charCodeAt(n);
+
+          if ( c < 128 )
+          {
+              utftext += String.fromCharCode(c);
+          }
+          else if ( (c > 127) && (c < 2048) )
+          {
+              utftext += String.fromCharCode((c >> 6) | 192);
+              utftext += String.fromCharCode((c & 63) | 128);
+          }
+          else
+          {
+              utftext += String.fromCharCode((c >> 12) | 224);
+              utftext += String.fromCharCode(((c >> 6) & 63) | 128);
+              utftext += String.fromCharCode((c & 63) | 128);
+          }
+
+      }
+
+      return utftext;
+  }
+
+  public static hash( string: any ) : string
+  {
+      let temp: string;
+
+      if ( typeof string !== 'string' )
+          string = JSON.stringify(string);
+
+      this._string = this.Utf8Encode(string);
+      this.x = this.ConvertToWordArray(this._string);
+
+      this.a = 0x67452301;
+      this.b = 0xEFCDAB89;
+      this.c = 0x98BADCFE;
+      this.d = 0x10325476;
+
+      for ( this.k = 0; this.k < this.x.length; this.k += 16 )
+      {
+          this.AA = this.a;
+          this.BB = this.b;
+          this.CC = this.c;
+          this.DD = this.d;
+          this.a = this.FF(this.a, this.b, this.c, this.d, this.x[this.k], this.S11, 0xD76AA478);
+          this.d = this.FF(this.d, this.a, this.b, this.c, this.x[this.k + 1], this.S12, 0xE8C7B756);
+          this.c = this.FF(this.c, this.d, this.a, this.b, this.x[this.k + 2], this.S13, 0x242070DB);
+          this.b = this.FF(this.b, this.c, this.d, this.a, this.x[this.k + 3], this.S14, 0xC1BDCEEE);
+          this.a = this.FF(this.a, this.b, this.c, this.d, this.x[this.k + 4], this.S11, 0xF57C0FAF);
+          this.d = this.FF(this.d, this.a, this.b, this.c, this.x[this.k + 5], this.S12, 0x4787C62A);
+          this.c = this.FF(this.c, this.d, this.a, this.b, this.x[this.k + 6], this.S13, 0xA8304613);
+          this.b = this.FF(this.b, this.c, this.d, this.a, this.x[this.k + 7], this.S14, 0xFD469501);
+          this.a = this.FF(this.a, this.b, this.c, this.d, this.x[this.k + 8], this.S11, 0x698098D8);
+          this.d = this.FF(this.d, this.a, this.b, this.c, this.x[this.k + 9], this.S12, 0x8B44F7AF);
+          this.c = this.FF(this.c, this.d, this.a, this.b, this.x[this.k + 10], this.S13, 0xFFFF5BB1);
+          this.b = this.FF(this.b, this.c, this.d, this.a, this.x[this.k + 11], this.S14, 0x895CD7BE);
+          this.a = this.FF(this.a, this.b, this.c, this.d, this.x[this.k + 12], this.S11, 0x6B901122);
+          this.d = this.FF(this.d, this.a, this.b, this.c, this.x[this.k + 13], this.S12, 0xFD987193);
+          this.c = this.FF(this.c, this.d, this.a, this.b, this.x[this.k + 14], this.S13, 0xA679438E);
+          this.b = this.FF(this.b, this.c, this.d, this.a, this.x[this.k + 15], this.S14, 0x49B40821);
+          this.a = this.GG(this.a, this.b, this.c, this.d, this.x[this.k + 1], this.S21, 0xF61E2562);
+          this.d = this.GG(this.d, this.a, this.b, this.c, this.x[this.k + 6], this.S22, 0xC040B340);
+          this.c = this.GG(this.c, this.d, this.a, this.b, this.x[this.k + 11], this.S23, 0x265E5A51);
+          this.b = this.GG(this.b, this.c, this.d, this.a, this.x[this.k], this.S24, 0xE9B6C7AA);
+          this.a = this.GG(this.a, this.b, this.c, this.d, this.x[this.k + 5], this.S21, 0xD62F105D);
+          this.d = this.GG(this.d, this.a, this.b, this.c, this.x[this.k + 10], this.S22, 0x2441453);
+          this.c = this.GG(this.c, this.d, this.a, this.b, this.x[this.k + 15], this.S23, 0xD8A1E681);
+          this.b = this.GG(this.b, this.c, this.d, this.a, this.x[this.k + 4], this.S24, 0xE7D3FBC8);
+          this.a = this.GG(this.a, this.b, this.c, this.d, this.x[this.k + 9], this.S21, 0x21E1CDE6);
+          this.d = this.GG(this.d, this.a, this.b, this.c, this.x[this.k + 14], this.S22, 0xC33707D6);
+          this.c = this.GG(this.c, this.d, this.a, this.b, this.x[this.k + 3], this.S23, 0xF4D50D87);
+          this.b = this.GG(this.b, this.c, this.d, this.a, this.x[this.k + 8], this.S24, 0x455A14ED);
+          this.a = this.GG(this.a, this.b, this.c, this.d, this.x[this.k + 13], this.S21, 0xA9E3E905);
+          this.d = this.GG(this.d, this.a, this.b, this.c, this.x[this.k + 2], this.S22, 0xFCEFA3F8);
+          this.c = this.GG(this.c, this.d, this.a, this.b, this.x[this.k + 7], this.S23, 0x676F02D9);
+          this.b = this.GG(this.b, this.c, this.d, this.a, this.x[this.k + 12], this.S24, 0x8D2A4C8A);
+          this.a = this.HH(this.a, this.b, this.c, this.d, this.x[this.k + 5], this.S31, 0xFFFA3942);
+          this.d = this.HH(this.d, this.a, this.b, this.c, this.x[this.k + 8], this.S32, 0x8771F681);
+          this.c = this.HH(this.c, this.d, this.a, this.b, this.x[this.k + 11], this.S33, 0x6D9D6122);
+          this.b = this.HH(this.b, this.c, this.d, this.a, this.x[this.k + 14], this.S34, 0xFDE5380C);
+          this.a = this.HH(this.a, this.b, this.c, this.d, this.x[this.k + 1], this.S31, 0xA4BEEA44);
+          this.d = this.HH(this.d, this.a, this.b, this.c, this.x[this.k + 4], this.S32, 0x4BDECFA9);
+          this.c = this.HH(this.c, this.d, this.a, this.b, this.x[this.k + 7], this.S33, 0xF6BB4B60);
+          this.b = this.HH(this.b, this.c, this.d, this.a, this.x[this.k + 10], this.S34, 0xBEBFBC70);
+          this.a = this.HH(this.a, this.b, this.c, this.d, this.x[this.k + 13], this.S31, 0x289B7EC6);
+          this.d = this.HH(this.d, this.a, this.b, this.c, this.x[this.k], this.S32, 0xEAA127FA);
+          this.c = this.HH(this.c, this.d, this.a, this.b, this.x[this.k + 3], this.S33, 0xD4EF3085);
+          this.b = this.HH(this.b, this.c, this.d, this.a, this.x[this.k + 6], this.S34, 0x4881D05);
+          this.a = this.HH(this.a, this.b, this.c, this.d, this.x[this.k + 9], this.S31, 0xD9D4D039);
+          this.d = this.HH(this.d, this.a, this.b, this.c, this.x[this.k + 12], this.S32, 0xE6DB99E5);
+          this.c = this.HH(this.c, this.d, this.a, this.b, this.x[this.k + 15], this.S33, 0x1FA27CF8);
+          this.b = this.HH(this.b, this.c, this.d, this.a, this.x[this.k + 2], this.S34, 0xC4AC5665);
+          this.a = this.II(this.a, this.b, this.c, this.d, this.x[this.k], this.S41, 0xF4292244);
+          this.d = this.II(this.d, this.a, this.b, this.c, this.x[this.k + 7], this.S42, 0x432AFF97);
+          this.c = this.II(this.c, this.d, this.a, this.b, this.x[this.k + 14], this.S43, 0xAB9423A7);
+          this.b = this.II(this.b, this.c, this.d, this.a, this.x[this.k + 5], this.S44, 0xFC93A039);
+          this.a = this.II(this.a, this.b, this.c, this.d, this.x[this.k + 12], this.S41, 0x655B59C3);
+          this.d = this.II(this.d, this.a, this.b, this.c, this.x[this.k + 3], this.S42, 0x8F0CCC92);
+          this.c = this.II(this.c, this.d, this.a, this.b, this.x[this.k + 10], this.S43, 0xFFEFF47D);
+          this.b = this.II(this.b, this.c, this.d, this.a, this.x[this.k + 1], this.S44, 0x85845DD1);
+          this.a = this.II(this.a, this.b, this.c, this.d, this.x[this.k + 8], this.S41, 0x6FA87E4F);
+          this.d = this.II(this.d, this.a, this.b, this.c, this.x[this.k + 15], this.S42, 0xFE2CE6E0);
+          this.c = this.II(this.c, this.d, this.a, this.b, this.x[this.k + 6], this.S43, 0xA3014314);
+          this.b = this.II(this.b, this.c, this.d, this.a, this.x[this.k + 13], this.S44, 0x4E0811A1);
+          this.a = this.II(this.a, this.b, this.c, this.d, this.x[this.k + 4], this.S41, 0xF7537E82);
+          this.d = this.II(this.d, this.a, this.b, this.c, this.x[this.k + 11], this.S42, 0xBD3AF235);
+          this.c = this.II(this.c, this.d, this.a, this.b, this.x[this.k + 2], this.S43, 0x2AD7D2BB);
+          this.b = this.II(this.b, this.c, this.d, this.a, this.x[this.k + 9], this.S44, 0xEB86D391);
+
+          this.a = this.AddUnsigned(this.a, this.AA);
+          this.b = this.AddUnsigned(this.b, this.BB);
+          this.c = this.AddUnsigned(this.c, this.CC);
+          this.d = this.AddUnsigned(this.d, this.DD);
+      }
+
+      temp = this.WordToHex(this.a) + this.WordToHex(this.b) + this.WordToHex(this.c) + this.WordToHex(this.d);
+      return temp.toLowerCase();
+  }
+}
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.html b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.html
new file mode 100644
index 0000000000..8b3c48e56e
--- /dev/null
+++ b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.html
@@ -0,0 +1,5 @@
+<div class="user-avatar" [ngClass]="{'user-avatar__large': size === 'large'}">
+  <mat-icon *ngIf="!initials && !gravatar" class="user-avatar__placeholder">account_circle</mat-icon>
+  <div *ngIf="initials" class="user-avatar__initials">{{ initials }}</div>
+  <img class="user-avatar__gravatar" *ngIf="gravatar" [src]="gravatar">
+</div>
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.scss b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.scss
new file mode 100644
index 0000000000..80ee525f0a
--- /dev/null
+++ b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.scss
@@ -0,0 +1,43 @@
+.user-avatar {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+
+  &__placeholder {
+    font-size: 36px;
+    height: 36px;
+    line-height: initial;
+    width: 36px;
+  }
+  &__initials {
+    border-radius: 50%;
+    font-size: 14px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    width: 30px;
+  }
+  &__gravatar {
+    border-radius: 50%;
+    height: 36px;
+    width: 36px;
+  }
+  &__large {
+    height: 64px;
+    width: 64px;
+
+    .user-avatar { 
+      &__initials {
+        font-size: 26px;
+        line-height: 60px;
+        height: 60px;
+        width: 60px;
+      }
+      &__gravatar {
+        border-radius: 50%;
+        height: 64px;
+        width: 64px;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.spec.ts b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.spec.ts
new file mode 100644
index 0000000000..613ac46a9a
--- /dev/null
+++ b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserAvatarComponent } from './user-avatar.component';
+
+describe('UserAvatarComponent', () => {
+  let component: UserAvatarComponent;
+  let fixture: ComponentFixture<UserAvatarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UserAvatarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserAvatarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.theme.scss b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.theme.scss
new file mode 100644
index 0000000000..ca694f6b49
--- /dev/null
+++ b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.theme.scss
@@ -0,0 +1,10 @@
+@mixin app-user-avatar-theme($theme, $app-theme) {
+  $primary: map-get($theme, primary);
+
+  .user-avatar {
+    &__initials {
+      background-color: mat-contrast($primary, 500);
+      color: mat-color($primary);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.ts b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.ts
new file mode 100644
index 0000000000..2c4ef27c9f
--- /dev/null
+++ b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.ts
@@ -0,0 +1,56 @@
+import { Component, Input } from '@angular/core';
+import { UserProfileInfo } from 'frontend/packages/store/src/types/user-profile.types';
+import { MD5 } from './md5';
+
+@Component({
+  selector: 'app-user-avatar',
+  templateUrl: './user-avatar.component.html',
+  styleUrls: ['./user-avatar.component.scss']
+})
+export class UserAvatarComponent {
+
+  public initials: string;
+  public gravatar: string;
+
+  private canUseGravatar = false;
+  private userInfo = null;
+
+  @Input() size = 'small';
+
+  @Input()
+  set allowGravatar(allowed: boolean) {
+    this.canUseGravatar = allowed;
+    this.update();
+  }
+
+  @Input() fallback = 'initials';
+  @Input() email: string;
+
+  @Input('user')
+  set user(user: UserProfileInfo) {
+    this.userInfo = user;
+    this.update();
+  }
+
+  private update() {
+    this.initials = null;
+    this.gravatar = null;
+    const user = this.userInfo;
+
+    if (user) {
+      if (user.name) {
+        this.initials = user.name.givenName ? user.name.givenName.charAt(0) : '';
+        this.initials += user.name.familyName ? user.name.familyName.charAt(0) : '';
+      }
+
+      if (user.emails && user.emails.length > 0) {
+        const email = user.emails[0].value;
+        if (email.length > 0 && this.canUseGravatar) {
+          const hash = MD5.hash(email.toLocaleLowerCase().trim());
+          this.gravatar = `//gravatar.com/avatar/${hash}?s=64`;
+          this.initials = null;
+        }
+      }
+    }
+  }
+}
diff --git a/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.html b/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.html
index e46a59b0f6..087f4b23b4 100644
--- a/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.html
+++ b/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.html
@@ -1,6 +1,6 @@
 <div class="user-profile-banner">
   <div class="user-profile-banner__avatar">
-    <mat-icon>account_circle</mat-icon>
+    <app-user-avatar size="large" [allowGravatar]="canUseGravatar" fallback="initials" [user]="userProfile"></app-user-avatar>
   </div>
   <div class="user-profile-banner__title" *ngIf="(name || email); else noNameOrEmail">
     <div>{{ name }}</div>
diff --git a/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.ts b/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.ts
index 85fc1dd52a..439607ab96 100644
--- a/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.ts
+++ b/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.ts
@@ -1,26 +1,36 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { UserProfileInfo } from 'frontend/packages/store/src/types/user-profile.types';
 
 @Component({
   selector: 'app-user-profile-banner',
   templateUrl: './user-profile-banner.component.html',
   styleUrls: ['./user-profile-banner.component.scss']
 })
-export class UserProfileBannerComponent implements OnInit {
+export class UserProfileBannerComponent {
 
-  private uName: string;
+  name: string;
+  email: string;
+  username: string;
+  userProfile: any;
+  canUseGravatar: boolean;
 
   @Input()
-  get name(): string { return this.uName; }
-  set name(name: string) {
-    this.uName = name.trim();
+  set allowGravatar(allowed: boolean) {
+    this.canUseGravatar = allowed;
   }
 
-  @Input() email: string;
-  @Input() username: string;
+  @Input('user')
+  set user(user: UserProfileInfo) {
+    this.userProfile = user;
+    if (user) {
+      this.username = user.userName;
+      this.name = user.name.givenName + ' ' + user.name.familyName;
+      this.name = this.name.trim();
 
-  constructor() { }
-
-  ngOnInit() {
+      if (user.emails.length > 0) {
+        this.email = user.emails[0].value;
+      }
+    }
   }
 
 }
diff --git a/src/frontend/packages/core/src/shared/shared.module.ts b/src/frontend/packages/core/src/shared/shared.module.ts
index 4d01a3d4e2..29737a85a6 100644
--- a/src/frontend/packages/core/src/shared/shared.module.ts
+++ b/src/frontend/packages/core/src/shared/shared.module.ts
@@ -227,7 +227,7 @@ import { UserPermissionDirective } from './user-permission.directive';
     CopyToClipboardComponent,
     SidepanelPreviewComponent,
     TileSelectorTileComponent,
-    TableCellSidePanelComponent
+    TableCellSidePanelComponent,
   ],
   exports: [
     ApplicationStateIconPipe,
diff --git a/src/frontend/packages/store/src/actions/dashboard-actions.ts b/src/frontend/packages/store/src/actions/dashboard-actions.ts
index cd43d3912e..946b291c16 100644
--- a/src/frontend/packages/store/src/actions/dashboard-actions.ts
+++ b/src/frontend/packages/store/src/actions/dashboard-actions.ts
@@ -13,6 +13,7 @@ export const DISABLE_SIDE_NAV_MOBILE_MODE = '[Dashboard] Disable mobile nav';
 export const TIMEOUT_SESSION = '[Dashboard] Timeout Session';
 export const ENABLE_POLLING = '[Dashboard] Enable Polling';
 export const SET_STRATOS_THEME = '[Dashboard] Set Theme';
+export const GRAVATAR_ENABLED = '[Dashboard] Gravatar ENabled';
 
 export const HYDRATE_DASHBOARD_STATE = '[Dashboard] Hydrate dashboard state';
 
@@ -51,6 +52,10 @@ export class SetPollingEnabledAction implements Action {
   type = ENABLE_POLLING;
 }
 
+export class SetGravatarEnabledAction implements Action {
+  constructor(public enableGravatar = true) { }
+  type = GRAVATAR_ENABLED;
+}
 export class HydrateDashboardStateAction implements Action {
   constructor(public dashboardState: DashboardState) { }
   type = HYDRATE_DASHBOARD_STATE;
diff --git a/src/frontend/packages/store/src/reducers/dashboard-reducer.ts b/src/frontend/packages/store/src/reducers/dashboard-reducer.ts
index 11d12bd198..d1b9faf708 100644
--- a/src/frontend/packages/store/src/reducers/dashboard-reducer.ts
+++ b/src/frontend/packages/store/src/reducers/dashboard-reducer.ts
@@ -1,3 +1,4 @@
+import { GRAVATAR_ENABLED, SetGravatarEnabledAction } from './../actions/dashboard-actions';
 import {
   CLOSE_SIDE_NAV,
   DISABLE_SIDE_NAV_MOBILE_MODE,
@@ -23,6 +24,7 @@ export interface DashboardState {
   sideNavPinned: boolean;
   themeKey: string;
   headerEventMinimized: boolean;
+  gravatarEabled: boolean;
 }
 
 export const defaultDashboardState: DashboardState = {
@@ -34,6 +36,7 @@ export const defaultDashboardState: DashboardState = {
   sideNavPinned: true,
   themeKey: null,
   headerEventMinimized: false,
+  gravatarEabled: false,
 };
 
 export function dashboardReducer(state: DashboardState = defaultDashboardState, action): DashboardState {
@@ -69,6 +72,12 @@ export function dashboardReducer(state: DashboardState = defaultDashboardState,
         ...state,
         pollingEnabled: pollingAction.enablePolling
       };
+    case GRAVATAR_ENABLED:
+      const gravatarAction = action as SetGravatarEnabledAction;
+      return {
+        ...state,
+        gravatarEabled: gravatarAction.enableGravatar
+      };
     case HYDRATE_DASHBOARD_STATE:
       const hydrateDashboardStateAction = action as HydrateDashboardStateAction;
       return {
diff --git a/src/frontend/packages/store/testing/src/store-test-helper.ts b/src/frontend/packages/store/testing/src/store-test-helper.ts
index d463c1b7a1..9aad5b8ae2 100644
--- a/src/frontend/packages/store/testing/src/store-test-helper.ts
+++ b/src/frontend/packages/store/testing/src/store-test-helper.ts
@@ -165,6 +165,7 @@ function getDefaultInitialTestStratosStoreState() {
       pollingEnabled: true,
       themeKey: null,
       headerEventMinimized: true,
+      gravatarEnabled: false,
     },
     actionHistory: [],
     lists: {},

From eb4e585a2b5644d46c618ec28a6ccad104cb2cc1 Mon Sep 17 00:00:00 2001
From: Neil MacDougall <nwmac@users.noreply.github.com>
Date: Sat, 29 Feb 2020 17:03:46 +0000
Subject: [PATCH 2/7] Fix code climate issues

---
 .../components/user-avatar/user-avatar.component.scss       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.scss b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.scss
index 80ee525f0a..457bbd18d3 100644
--- a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.scss
+++ b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.scss
@@ -26,11 +26,11 @@
     height: 64px;
     width: 64px;
 
-    .user-avatar { 
+    .user-avatar {
       &__initials {
         font-size: 26px;
-        line-height: 60px;
         height: 60px;
+        line-height: 60px;
         width: 60px;
       }
       &__gravatar {
@@ -40,4 +40,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}

From 75c69d5cfb5d493a0dbe24323978764bb938ae2e Mon Sep 17 00:00:00 2001
From: Neil MacDougall <nwmac@users.noreply.github.com>
Date: Sat, 29 Feb 2020 17:04:18 +0000
Subject: [PATCH 3/7] Fix code climate issue

---
 .../components/user-avatar/user-avatar.component.theme.scss     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.theme.scss b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.theme.scss
index ca694f6b49..bc5856b7f3 100644
--- a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.theme.scss
+++ b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.theme.scss
@@ -7,4 +7,4 @@
       color: mat-color($primary);
     }
   }
-}
\ No newline at end of file
+}

From 61fc85ef157852ddd769de66743845eda32128a9 Mon Sep 17 00:00:00 2001
From: Neil MacDougall <neil.macdougall@suse.com>
Date: Sun, 1 Mar 2020 09:19:09 +0000
Subject: [PATCH 4/7] Fixes and tweaks

---
 .../user-profile/profile-info/profile-info.component.ts     | 4 ++--
 .../components/page-header/page-header.component.html       | 4 ++--
 .../shared/components/page-header/page-header.component.ts  | 2 +-
 .../components/user-avatar/user-avatar.component.html       | 2 +-
 .../shared/components/user-avatar/user-avatar.component.ts  | 4 +---
 .../packages/store/src/reducers/dashboard-reducer.ts        | 6 +++---
 6 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.ts b/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.ts
index a1a2082280..de1f19f360 100644
--- a/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.ts
+++ b/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.ts
@@ -28,11 +28,11 @@ export class ProfileInfoComponent implements OnInit {
   );
 
   public gravatarEnabled$ = this.store.select(selectDashboardState).pipe(
-    map(dashboardState => dashboardState.gravatarEabled ? 'true' : 'false')
+    map(dashboardState => dashboardState.gravatarEnabled ? 'true' : 'false')
   );
 
   public allowGravatar$ =  this.store.select(selectDashboardState).pipe(
-    map(dashboardState => dashboardState.gravatarEabled)
+    map(dashboardState => dashboardState.gravatarEnabled)
   );
 
   isError$: Observable<boolean>;
diff --git a/src/frontend/packages/core/src/shared/components/page-header/page-header.component.html b/src/frontend/packages/core/src/shared/components/page-header/page-header.component.html
index 9bdf8c84ee..efbb6f120a 100644
--- a/src/frontend/packages/core/src/shared/components/page-header/page-header.component.html
+++ b/src/frontend/packages/core/src/shared/components/page-header/page-header.component.html
@@ -51,12 +51,12 @@ <h3>Recent</h3>
             </button>
             <button id="userMenu" *ngIf="!hideMenu" class="page-header__menu-button page-header__usermenu"
               mat-icon-button [matMenuTriggerFor]="menu">
-              <app-user-avatar [allowGravatar]="allowGravatar$ | async" fallback="initials" [user]="user$ | async"></app-user-avatar>
+              <app-user-avatar color="header" [allowGravatar]="allowGravatar$ | async" [user]="user$ | async"></app-user-avatar>
             </button>
             <mat-menu #menu="matMenu" [overlapTrigger]="false" class="page-header__menu">
               <div class="page-header__menu-inner">
                 <div class="page-header__username">
-                  <app-user-avatar [allowGravatar]="allowGravatar$ | async" fallback="initials" [user]="user$ | async"></app-user-avatar>
+                  <app-user-avatar [allowGravatar]="allowGravatar$ | async" [user]="user$ | async"></app-user-avatar>
                   <div class="page-header__username-text">
                     <div>{{ username$ | async }}</div>
                   </div>
diff --git a/src/frontend/packages/core/src/shared/components/page-header/page-header.component.ts b/src/frontend/packages/core/src/shared/components/page-header/page-header.component.ts
index ba814535a3..530c4f2903 100644
--- a/src/frontend/packages/core/src/shared/components/page-header/page-header.component.ts
+++ b/src/frontend/packages/core/src/shared/components/page-header/page-header.component.ts
@@ -185,7 +185,7 @@ export class PageHeaderComponent implements OnDestroy, AfterViewInit {
     );
 
     this.allowGravatar$ = this.store.select(selectDashboardState).pipe(
-      map(dashboardState => dashboardState.gravatarEabled)
+      map(dashboardState => dashboardState.gravatarEnabled)
     );
   }
 
diff --git a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.html b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.html
index 8b3c48e56e..3ed921fca5 100644
--- a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.html
+++ b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.html
@@ -1,5 +1,5 @@
 <div class="user-avatar" [ngClass]="{'user-avatar__large': size === 'large'}">
   <mat-icon *ngIf="!initials && !gravatar" class="user-avatar__placeholder">account_circle</mat-icon>
-  <div *ngIf="initials" class="user-avatar__initials">{{ initials }}</div>
+  <div *ngIf="initials" [ngClass]="{'user-avatar__header': color == 'header'}" class="user-avatar__initials">{{ initials }}</div>
   <img class="user-avatar__gravatar" *ngIf="gravatar" [src]="gravatar">
 </div>
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.ts b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.ts
index 2c4ef27c9f..f60246cab8 100644
--- a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.ts
+++ b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.ts
@@ -16,6 +16,7 @@ export class UserAvatarComponent {
   private userInfo = null;
 
   @Input() size = 'small';
+  @Input() color = 'normal';
 
   @Input()
   set allowGravatar(allowed: boolean) {
@@ -23,9 +24,6 @@ export class UserAvatarComponent {
     this.update();
   }
 
-  @Input() fallback = 'initials';
-  @Input() email: string;
-
   @Input('user')
   set user(user: UserProfileInfo) {
     this.userInfo = user;
diff --git a/src/frontend/packages/store/src/reducers/dashboard-reducer.ts b/src/frontend/packages/store/src/reducers/dashboard-reducer.ts
index d1b9faf708..a1737e8cd9 100644
--- a/src/frontend/packages/store/src/reducers/dashboard-reducer.ts
+++ b/src/frontend/packages/store/src/reducers/dashboard-reducer.ts
@@ -24,7 +24,7 @@ export interface DashboardState {
   sideNavPinned: boolean;
   themeKey: string;
   headerEventMinimized: boolean;
-  gravatarEabled: boolean;
+  gravatarEnabled: boolean;
 }
 
 export const defaultDashboardState: DashboardState = {
@@ -36,7 +36,7 @@ export const defaultDashboardState: DashboardState = {
   sideNavPinned: true,
   themeKey: null,
   headerEventMinimized: false,
-  gravatarEabled: false,
+  gravatarEnabled: false,
 };
 
 export function dashboardReducer(state: DashboardState = defaultDashboardState, action): DashboardState {
@@ -76,7 +76,7 @@ export function dashboardReducer(state: DashboardState = defaultDashboardState,
       const gravatarAction = action as SetGravatarEnabledAction;
       return {
         ...state,
-        gravatarEabled: gravatarAction.enableGravatar
+        gravatarEnabled: gravatarAction.enableGravatar
       };
     case HYDRATE_DASHBOARD_STATE:
       const hydrateDashboardStateAction = action as HydrateDashboardStateAction;

From b28c2b5cea8a55659cd56f5328f459af64c7a041 Mon Sep 17 00:00:00 2001
From: Neil MacDougall <neil.macdougall@suse.com>
Date: Sun, 1 Mar 2020 16:43:46 +0000
Subject: [PATCH 5/7] Fix unit test

---
 .../components/user-avatar/user-avatar.component.spec.ts    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.spec.ts b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.spec.ts
index 613ac46a9a..096818b8c8 100644
--- a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.spec.ts
+++ b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.spec.ts
@@ -1,6 +1,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { UserAvatarComponent } from './user-avatar.component';
+import { MDAppModule } from '../../../core/md.module';
 
 describe('UserAvatarComponent', () => {
   let component: UserAvatarComponent;
@@ -8,7 +9,10 @@ describe('UserAvatarComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ UserAvatarComponent ]
+      declarations: [ UserAvatarComponent ],
+      imports: [
+        MDAppModule,
+      ]
     })
     .compileComponents();
   }));

From 90cf3f645fdf2c79eb80753eb9c188fc5f1b0642 Mon Sep 17 00:00:00 2001
From: Neil MacDougall <neil.macdougall@suse.com>
Date: Mon, 2 Mar 2020 09:35:49 +0000
Subject: [PATCH 6/7] Fix for unit tests

---
 .../packages/core/src/core/user-profile.service.ts     | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/frontend/packages/core/src/core/user-profile.service.ts b/src/frontend/packages/core/src/core/user-profile.service.ts
index 7e7bacc82d..e94424eef2 100644
--- a/src/frontend/packages/core/src/core/user-profile.service.ts
+++ b/src/frontend/packages/core/src/core/user-profile.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { combineLatest, Observable, of as observableOf } from 'rxjs';
+import { combineLatest, Observable, of as observableOf, of } from 'rxjs';
 import { filter, first, map } from 'rxjs/operators';
 
 import {
@@ -41,6 +41,11 @@ export class UserProfileService {
   private stratosUserConfig = entityCatalog.getEntity(userProfileEntitySchema.endpointType, userProfileEntitySchema.entityType);
 
   constructor(private store: Store<AppState>) {
+    if (!this.stratosUserConfig) {
+      console.error('Can not get user profile entity');
+      this.userProfile$ = of({} as UserProfileInfo);
+      return;
+    }
 
     this.entityMonitor = this.stratosUserConfig.getEntityMonitor(this.store, UserProfileEffect.guid);
 
@@ -49,8 +54,7 @@ export class UserProfileService {
     );
     this.isFetching$ = this.entityMonitor.isFetchingEntity$;
 
-    const stratosUserConfig = entityCatalog.getEntity(userProfileEntitySchema.endpointType, userProfileEntitySchema.entityType);
-    this.isError$ = this.store.select(selectRequestInfo(stratosUserConfig.entityKey, UserProfileEffect.guid)).pipe(
+    this.isError$ = this.store.select(selectRequestInfo(this.stratosUserConfig.entityKey, UserProfileEffect.guid)).pipe(
       filter(requestInfo => !!requestInfo && !requestInfo.fetching),
       map(requestInfo => requestInfo.error)
     );

From 186d07240e8abeca28aab2db54be8d15b675a257 Mon Sep 17 00:00:00 2001
From: Neil MacDougall <neil.macdougall@suse.com>
Date: Tue, 17 Mar 2020 08:40:17 +0000
Subject: [PATCH 7/7] Minor fixes

---
 .../packages/core/src/core/user-profile.service.ts   | 12 +++++++++---
 .../user-avatar/user-avatar.component.scss           |  5 +++++
 .../user-profile-banner.component.ts                 |  2 +-
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/frontend/packages/core/src/core/user-profile.service.ts b/src/frontend/packages/core/src/core/user-profile.service.ts
index e94424eef2..95fd5c5a4b 100644
--- a/src/frontend/packages/core/src/core/user-profile.service.ts
+++ b/src/frontend/packages/core/src/core/user-profile.service.ts
@@ -97,7 +97,9 @@ export class UserProfileService {
   * Update profile
   */
   updateProfile(profile: UserProfileInfo, profileChanges: UserProfileInfoUpdates): Observable<[ActionState, ActionState]> {
-    const didChangeProfile = !!(profileChanges.givenName || profileChanges.familyName || profileChanges.emailAddress);
+    const didChangeProfile = (profileChanges.givenName !== undefined ||
+      profileChanges.familyName !== undefined ||
+      profileChanges.emailAddress !== undefined );
     const didChangePassword = !!(profileChanges.newPassword && profileChanges.currentPassword);
     const profileObs$ = didChangeProfile ? this.updateProfileInfo(profile, profileChanges) : observableOf(getDefaultActionState());
     const passwordObs$ = didChangePassword ? this.updatePassword(profile, profileChanges) : observableOf(getDefaultActionState());
@@ -112,8 +114,12 @@ export class UserProfileService {
       ...profile,
       name: { ...profile.name },
     };
-    updatedProfile.name.givenName = profileChanges.givenName || updatedProfile.name.givenName;
-    updatedProfile.name.familyName = profileChanges.familyName || updatedProfile.name.familyName;
+    if (profileChanges.givenName !== undefined) {
+      updatedProfile.name.givenName = profileChanges.givenName;
+    }
+    if (profileChanges.familyName !== undefined) {
+      updatedProfile.name.familyName = profileChanges.familyName;
+    }
     if (profileChanges.emailAddress) {
       this.setPrimaryEmailAddress(updatedProfile, profileChanges.emailAddress);
     }
diff --git a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.scss b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.scss
index 457bbd18d3..eae71a5163 100644
--- a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.scss
+++ b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.scss
@@ -38,6 +38,11 @@
         height: 64px;
         width: 64px;
       }
+      &__placeholder {
+        font-size: 64px;
+        height: 64px;
+        width: 64px;
+      }
     }
   }
 }
diff --git a/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.ts b/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.ts
index 439607ab96..e198687778 100644
--- a/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.ts
+++ b/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.ts
@@ -28,7 +28,7 @@ export class UserProfileBannerComponent {
       this.name = this.name.trim();
 
       if (user.emails.length > 0) {
-        this.email = user.emails[0].value;
+        this.email = user.emails[0].value.trim();
       }
     }
   }