Add support for showing Gravatar for the user icon

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) {

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

src/frontend/packages/core/src/features/user-profile/user-profile.service.ts → src/frontend/packages/core/src/core/user-profile.service.ts

@@ -1,31 +1,30 @@
 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 {
   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()
@@ -42,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);
 
@@ -50,7 +54,7 @@ export class UserProfileService {
     );
     this.isFetching$ = this.entityMonitor.isFetchingEntity$;
 
-    this.isError$ = this.store.select(selectRequestInfo(userProfileSchemaKey, UserProfileEffect.guid)).pipe(
+    this.isError$ = this.store.select(selectRequestInfo(this.stratosUserConfig.entityKey, UserProfileEffect.guid)).pipe(
       filter(requestInfo => !!requestInfo && !requestInfo.fetching),
       map(requestInfo => requestInfo.error)
     );
@@ -93,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());
@@ -108,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);
     }

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', () => {

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({

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'">

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 {

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', () => {