Adding a more icon when the user does not have a profile picture

src/app/app.component.html

@@ -25,8 +25,8 @@
 					</a>
 				</li>
 				<ng-template #accountDrop>
-					<li class="nav-item icon" style="opacity: 1 !important;">
-						<img matRipple [src]="authManager.user.picture" [matMenuTriggerFor]="accountMenu" class="profilePicture" matTooltipPosition="below" [matTooltip]="authManager.user.name" />
+					<li #accountParent class="nav-item icon" style="opacity: 1 !important;">
+						<img matRipple [src]="authManager.user.picture" [matMenuTriggerFor]="accountMenu" class="profilePicture" matTooltipPosition="below" [matTooltip]="authManager.user.name" fallback="more.svg" (error)="accountParent.style.removeProperty('opacity');" />
 					</li>
 					<mat-menu #accountMenu="matMenu">
 						<button class="dropButton" mat-menu-item (click)="this.openAccountDialog()">Settings</button>

src/app/app.component.ts

@@ -84,7 +84,8 @@ export class AppComponent
 		const dialog = this.dialog.open(AccountComponent, {width: "500px", data: this.account});
 		dialog.afterClosed().subscribe((result: Account) => 
 		{
-			this.account = result;
+			if (result)
+				this.account = result;
 		});
 	}
 }

src/app/app.module.ts

@@ -93,7 +93,7 @@ export function loadConfig(oidcConfigService: OidcConfigService)
 		AuthModule.forRoot()
 	],
 	entryComponents: [
-		AccountComponent	
+		AccountComponent
 	],
 	providers: [
 		OidcConfigService,

src/app/services/auth.service.ts

@@ -56,6 +56,7 @@ export class AuthService
 	{
 		if (!this.isAuthenticated)
 			return null;
+		console.log("Running get account");
 		console.log(this.user);
 		return {email: this.user.email, username: this.user.username, picture: this.user.picture};
 	}

static/more.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" fill="#ffffff"/></svg>