fix(4153): 🐛 fixed gravitar issues

Replaces Gravatar's fallback image with custom 404 error handling.

src/Ombi/ClientApp/src/app/app.component.html

@@ -175,8 +175,8 @@
         [isAdmin]="isAdmin"
         [applicationName]="applicationName"
         [applicationLogo]="customizationSettings?.logo"
-        [username]="username"
-        [email]="user?.email"
+        [userName]="userName"
+        [userEmail]="userEmail"
         [accessToken]="accessToken"
         [applicationUrl]="customizationSettings?.applicationUrl"
         (logoutClick)="logOut();"

src/Ombi/ClientApp/src/app/app.component.ts

@@ -24,14 +24,14 @@ export class AppComponent implements OnInit {
 
     public customizationSettings: ICustomizationSettings;
     public customPageSettings: ICustomPage;
-    public user: ILocalUser;
     public showNav: boolean;
     public updateAvailable: boolean;
     public currentUrl: string;
     public voteEnabled = false;
     public applicationName: string = "Ombi"
     public isAdmin: boolean;
-    public username: string;
+    public userName: string;
+    public userEmail: string;
     public accessToken: string;
 
     private hubConnected: boolean;
@@ -53,8 +53,6 @@ export class AppComponent implements OnInit {
         this.translate.addLangs(["da", "de", "en", "es", "fr", "it", "hu", "nl", "no", "pl", "pt", "sk", "sv", "bg", "ru"]);
 
         if (this.authService.loggedIn()) {
-            this.user = this.authService.claims();
-            this.username = this.user.name;
             this.identity.getAccessToken().subscribe(x => this.accessToken = x);
             if (!this.hubConnected) {
                 this.signalrNotification.initialize();
@@ -67,6 +65,8 @@ export class AppComponent implements OnInit {
                 });
             }
             this.identity.getUser().subscribe(u => {
+                this.userEmail = u.emailAddress;
+                this.userName = u.userName;
                 if (u.language) {
                     this.translate.use(u.language);
                 }
@@ -116,10 +116,6 @@ export class AppComponent implements OnInit {
             if (event instanceof NavigationStart) {
                 this.isAdmin = this.authService.hasRole("admin");
                 this.showNav = this.authService.loggedIn();
-                if (this.showNav) {
-                    this.user = this.authService.claims();
-                    this.username = this.user.name;
-                }
             }
         });
     }

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html

@@ -89,8 +89,10 @@
             </div>
             <div class="profile-block">
                 <a routerLink="/user-preferences">
-                <div class="profile-username" data-test="profile-username">{{username}}</div>
-                <div class="profile-img" data-test="profile-image"><img [src]="getUserImage()" /></div>
+                <div class="profile-username" data-test="profile-username">{{userName}}</div>
+                <div class="profile-img" data-test="profile-image">
+                    <img [src]="userProfileImageUrl" (error)="onProfileImageError()" >
+                </div>
             </a>
             </div>
 

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts

@@ -1,5 +1,5 @@
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
 import { IUser, RequestType, UserType } from '../interfaces';
 import { SettingsService, SettingsStateService } from '../services';
 
@@ -40,16 +40,16 @@ export class MyNavComponent implements OnInit {
   @Input() public applicationLogo: string;
   @Input() public applicationUrl: string;
   @Input() public accessToken: string;
-  @Input() public username: string;
+  @Input() public userName: string;
+  @Input() public userEmail: string;
   @Input() public isAdmin: string;
-  @Input() public email: string;
   @Output() public logoutClick = new EventEmitter();
   public theme: string;
   public issuesEnabled: boolean = false;
   public navItems: INavBar[];
   public searchFilter: SearchFilter;
   public SearchFilterType = SearchFilterType;
-  public emailHash: string | Int32Array;
+  public userProfileImageUrl: string;
   public welcomeText: string;
   public RequestType = RequestType;
 
@@ -63,19 +63,14 @@ export class MyNavComponent implements OnInit {
   }
 
   public async ngOnInit() {
-
     this.searchFilter = {
       movies: true,
       music: false,
       people: false,
       tvShows: true
     }
 
-    if (this.email) {
-      const md5 = new Md5();
-      this.emailHash = md5.appendStr(this.email).end();
-    }
-
+    this.setProfileImageUrl(this.userEmail)
     this.issuesEnabled = await this.settingsService.issueEnabled().toPromise();
     this.settingState.setIssue(this.issuesEnabled);
 
@@ -103,6 +98,12 @@ export class MyNavComponent implements OnInit {
       ];
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    if(changes?.userEmail || changes?.applicationLogo){
+      this.setProfileImageUrl(this.userEmail)
+    }
+  }
+
   public logOut() {
     this.logoutClick.emit();
   }
@@ -138,16 +139,33 @@ export class MyNavComponent implements OnInit {
     });
   }
 
-  public getUserImage(): string {
-    var fallback = this.applicationLogo ? this.applicationLogo : 'https://raw.githubusercontent.com/Ombi-app/Ombi/gh-pages/img/android-chrome-512x512.png';
-    return `https://www.gravatar.com/avatar/${this.emailHash}?d=${fallback}`;
+  private setProfileImageUrl(email: string): void {
+    if (email) {
+        const md5 = new Md5();
+        const emailHash = md5.appendStr(email).end();
+        this.userProfileImageUrl = `https://www.gravatar.com/avatar/${emailHash}?d=404`;;
+    }
+    else{
+        this.userProfileImageUrl = this.getFallbackProfileImageUrl();
+    }
+  }
+
+  public onProfileImageError(): void {
+      const fallbackLogo = this.getFallbackProfileImageUrl();
+      if (this.userProfileImageUrl === fallbackLogo) return;        
+      this.userProfileImageUrl = fallbackLogo;
+  }
+
+  private getFallbackProfileImageUrl() {
+      return this.applicationLogo
+        ? this.applicationLogo
+        : "https://raw.githubusercontent.com/Ombi-app/Ombi/gh-pages/img/android-chrome-512x512.png";
   }
 
   public openMobileApp(event: any) {
     event.preventDefault();
 
     const url = `ombi://${this.applicationUrl}|${this.accessToken}`;
     window.location.assign(url);
-}
-
+  }
 }

src/Ombi/ClientApp/src/app/user-preferences/components/user-preference/user-preference.component.html

@@ -1,8 +1,8 @@
 <div class="small-middle-container" *ngIf="username">
   <div class="d-flex">
-    <img class="profile-img" [src]="getProfileImage()">
+    <img class="profile-img" [src]="userProfileImageUrl" (error)="onProfileImageError()" >
     <h2 id="usernameTitle">{{username}}
-      <small id="emailTitle" *ngIf="user.emailAddress">({{user.emailAddress}})</small>
+      <small id="emailTitle" *ngIf="user?.emailAddress">({{user.emailAddress}})</small>
     </h2>
   </div>
 
@@ -15,7 +15,7 @@ <h2 id="usernameTitle">{{username}}
             User Type:
           </div>
           <div class="col-7 col-sm-9 col-md-10">
-            {{UserType[user.userType]}}
+            {{UserType[user?.userType]}}
           </div>
         </div>
 
@@ -75,7 +75,7 @@ <h2 id="usernameTitle">{{username}}
       </div>
 
     </mat-tab>
-    <mat-tab *ngIf="user.userType === UserType.LocalUser" label="Security">
+    <mat-tab *ngIf="user?.userType === UserType.LocalUser" label="Security">
       <div class="tab-content">
         <h2>Change Details</h2>
         <form novalidate [formGroup]="passwordForm" (ngSubmit)="updatePassword()">

src/Ombi/ClientApp/src/app/user-preferences/components/user-preference/user-preference.component.ts

@@ -15,6 +15,7 @@ import { APP_BASE_HREF } from "@angular/common";
 export class UserPreferenceComponent implements OnInit {
 
     public username: string;
+    public userProfileImageUrl: string;
     public selectedLang: string;
     public availableLanguages = AvailableLanguages;
     public qrCode: string;
@@ -61,6 +62,7 @@ export class UserPreferenceComponent implements OnInit {
 
         this.user = await this.identityService.getUser().toPromise();
         this.selectedCountry = this.user.streamingCountry;
+        this.setProfileImageUrl(this.user);
         this.identityService.getSupportedStreamingCountries().subscribe(x => this.countries = x);
         this.settingsService.getCustomization().subscribe(x => this.customizationSettings = x);
 
@@ -92,14 +94,27 @@ export class UserPreferenceComponent implements OnInit {
         this.identityService.updateStreamingCountry(this.selectedCountry).subscribe(x => this.notification.success(this.translate.instant("UserPreferences.Updated")));
     }
 
-    public getProfileImage(): string {
-        let emailHash: string|Int32Array;
-        if (this.user.emailAddress) {
-          const md5 = new Md5();
-          emailHash = md5.appendStr(this.user.emailAddress).end();
+    private setProfileImageUrl(user: IUser): void {
+        if (user?.emailAddress) {
+            const md5 = new Md5();
+            const emailHash = md5.appendStr(this.user.emailAddress).end();
+            this.userProfileImageUrl = `https://www.gravatar.com/avatar/${emailHash}?d=404`;;
         }
-        var fallback = this.customizationSettings.logo ? this.customizationSettings.logo : 'https://raw.githubusercontent.com/Ombi-app/Ombi/gh-pages/img/android-chrome-512x512.png';
-        return `https://www.gravatar.com/avatar/${emailHash}?d=${fallback}`;
+        else{
+            this.userProfileImageUrl = this.getFallbackProfileImageUrl();
+        }
+    }
+
+    public onProfileImageError(): void {
+        const fallbackLogo = this.getFallbackProfileImageUrl();
+        if (this.userProfileImageUrl === fallbackLogo) return;        
+        this.userProfileImageUrl = fallbackLogo;
+    }
+
+    private getFallbackProfileImageUrl() {
+        return this.customizationSettings?.logo
+          ? this.customizationSettings.logo
+          : "https://raw.githubusercontent.com/Ombi-app/Ombi/gh-pages/img/android-chrome-512x512.png";
     }
 
     public updatePassword() {

src/Ombi/ClientApp/src/app/usermanagement/usermanagement-user.component.html

@@ -182,7 +182,7 @@
       <button type="button" data-test="deletebtn" mat-raised-button color="warn" class="btn btn-danger-outline" (click)="delete()">Delete</button>
       <button type="button" style="float:right;" mat-raised-button color="primary" class="btn btn-info-outline" (click)="resetPassword()" matTooltip="You need your SMTP settings setup">Send
         Reset Password Link</button>
-        <button *ngIf="customization.applicationUrl" type="button" mat-raised-button color="accent" class="btn btn-info-outline" (click)="appLink()" matTooltip="Send this link to the user and they can then open the app and directly login">Copy users App Link</button>
+        <button *ngIf="customization?.applicationUrl" type="button" mat-raised-button color="accent" class="btn btn-info-outline" (click)="appLink()" matTooltip="Send this link to the user and they can then open the app and directly login">Copy users App Link</button>
 
     </div>