From 28074a7f17648e913ccc8d36945aa5387cbe9466 Mon Sep 17 00:00:00 2001
From: George Kalampokis <gkalampokis@cite.gr>
Date: Mon, 17 Feb 2020 17:39:33 +0200
Subject: [PATCH] Add User Avatar fallback to placeholder

---
 .../ui/misc/navigation/user-dialog/user-dialog.component.html | 4 ++--
 .../ui/misc/navigation/user-dialog/user-dialog.component.ts   | 4 ++++
 dmp-frontend/src/app/ui/navbar/navbar.component.html          | 4 ++--
 dmp-frontend/src/app/ui/navbar/navbar.component.ts            | 4 ++++
 .../src/app/ui/user-profile/user-profile.component.html       | 2 +-
 .../src/app/ui/user-profile/user-profile.component.ts         | 4 ++++
 6 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.html b/dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.html
index df07a6a64..4b71766a6 100644
--- a/dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.html
+++ b/dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.html
@@ -2,8 +2,8 @@
 	<div mat-dialog-title>
 		<div class="row">
 			<div class="col-auto">
-				<img mat-card-avatar class="my-mat-card-avatar" *ngIf="this.principalHasAvatar()" [src]="this.getPrincipalAvatar()">
-				<img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()">
+				<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="applyFallbackAvatar($event)">
+				<!-- <img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()"> -->
 			</div>
 			<span class="user-label col">{{this.getPrincipalName()}}</span>
 		</div>
diff --git a/dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.ts b/dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.ts
index 80404784a..326dd5280 100644
--- a/dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.ts
+++ b/dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.ts
@@ -47,6 +47,10 @@ export class UserDialogComponent implements OnInit {
 		return 'assets/images/profile-placeholder.png';
 	}
 
+	public applyFallbackAvatar(ev: Event) {
+		(ev.target as HTMLImageElement).src = this.getDefaultAvatar();
+	}
+
 	public navigateToProfile() {
 		this.dialogRef.close();
 		this.router.navigate(['/profile']);
diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.html b/dmp-frontend/src/app/ui/navbar/navbar.component.html
index aaff6823d..a16ca4119 100644
--- a/dmp-frontend/src/app/ui/navbar/navbar.component.html
+++ b/dmp-frontend/src/app/ui/navbar/navbar.component.html
@@ -79,8 +79,8 @@
 
 				<!-- Login -->
 				<li class="nav-item" *ngIf="isAuthenticated();else loginoption">
-					<img mat-card-avatar class="my-mat-card-avatar" *ngIf="this.principalHasAvatar()" [src]="this.getPrincipalAvatar()" (click)="openProfile()">
-					<img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()" (click)="openProfile()">
+					<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="this.applyFallbackAvatar($event)" (click)="openProfile()">
+				<!--	<img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()" (click)="openProfile()"> -->
 				</li>
 				<ng-template #loginoption>
 					<button mat-button [routerLink]=" ['/login'] ">
diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.ts b/dmp-frontend/src/app/ui/navbar/navbar.component.ts
index 261aa8ecd..7155ca41d 100644
--- a/dmp-frontend/src/app/ui/navbar/navbar.component.ts
+++ b/dmp-frontend/src/app/ui/navbar/navbar.component.ts
@@ -178,6 +178,10 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 		return 'assets/images/profile-placeholder.png';
 	}
 
+	public applyFallbackAvatar(ev: Event) {
+		(ev.target as HTMLImageElement).src = this.getDefaultAvatar();
+	}
+
 	public isAdmin(): boolean {
 		if (!this.authentication.current()) { return false; }
 		const principalRoles = this.authentication.current().authorities;
diff --git a/dmp-frontend/src/app/ui/user-profile/user-profile.component.html b/dmp-frontend/src/app/ui/user-profile/user-profile.component.html
index 2a61dc7f6..f3661a928 100644
--- a/dmp-frontend/src/app/ui/user-profile/user-profile.component.html
+++ b/dmp-frontend/src/app/ui/user-profile/user-profile.component.html
@@ -6,7 +6,7 @@
 					<div class="row">
 						<div class="col-12">
 							<div class="row profile-card-center-row">
-								<div class="col-auto"><img mat-card-avatar [src]="userProfile.additionalinfo.avatarUrl">
+								<div class="col-auto"><img mat-card-avatar [src]="userProfile.additionalinfo.avatarUrl" (error)="applyFallbackAvatar($event)">
 								</div>
 							</div>
 							<div class="row profile-card-center-row">
diff --git a/dmp-frontend/src/app/ui/user-profile/user-profile.component.ts b/dmp-frontend/src/app/ui/user-profile/user-profile.component.ts
index de33e2857..fda3c1818 100644
--- a/dmp-frontend/src/app/ui/user-profile/user-profile.component.ts
+++ b/dmp-frontend/src/app/ui/user-profile/user-profile.component.ts
@@ -146,4 +146,8 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
 				});
 	}
 
+	public applyFallbackAvatar(ev: Event) {
+		(ev.target as HTMLImageElement).src = 'assets/images/profile-placeholder.png';
+	}
+
 }