diff --git a/src/Ombi/ClientApp/src/app/app.component.html b/src/Ombi/ClientApp/src/app/app.component.html index 351b8ef49..81572869f 100644 --- a/src/Ombi/ClientApp/src/app/app.component.html +++ b/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();" diff --git a/src/Ombi/ClientApp/src/app/app.component.ts b/src/Ombi/ClientApp/src/app/app.component.ts index dc5207164..64a59ea4a 100644 --- a/src/Ombi/ClientApp/src/app/app.component.ts +++ b/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; - } } }); } diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html index 86ffa2910..7a59be582 100644 --- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html +++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html @@ -89,8 +89,10 @@
-
{{username}}
-
+
{{userName}}
+
+ +
diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts index 37c093e38..2f96e8760 100644 --- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts +++ b/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,7 +63,6 @@ export class MyNavComponent implements OnInit { } public async ngOnInit() { - this.searchFilter = { movies: true, music: false, @@ -71,11 +70,7 @@ export class MyNavComponent implements OnInit { 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,9 +139,27 @@ 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) { @@ -148,6 +167,5 @@ export class MyNavComponent implements OnInit { const url = `ombi://${this.applicationUrl}|${this.accessToken}`; window.location.assign(url); -} - + } } diff --git a/src/Ombi/ClientApp/src/app/user-preferences/components/user-preference/user-preference.component.html b/src/Ombi/ClientApp/src/app/user-preferences/components/user-preference/user-preference.component.html index d513c1f63..7d466d972 100644 --- a/src/Ombi/ClientApp/src/app/user-preferences/components/user-preference/user-preference.component.html +++ b/src/Ombi/ClientApp/src/app/user-preferences/components/user-preference/user-preference.component.html @@ -1,8 +1,8 @@
- +

{{username}} - ({{user.emailAddress}}) + ({{user.emailAddress}})

@@ -15,7 +15,7 @@ User Type:
- {{UserType[user.userType]}} + {{UserType[user?.userType]}}
@@ -75,7 +75,7 @@ - +

Change Details

diff --git a/src/Ombi/ClientApp/src/app/user-preferences/components/user-preference/user-preference.component.ts b/src/Ombi/ClientApp/src/app/user-preferences/components/user-preference/user-preference.component.ts index b4cfa6709..c9d3d2eb1 100644 --- a/src/Ombi/ClientApp/src/app/user-preferences/components/user-preference/user-preference.component.ts +++ b/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() { diff --git a/src/Ombi/ClientApp/src/app/usermanagement/usermanagement-user.component.html b/src/Ombi/ClientApp/src/app/usermanagement/usermanagement-user.component.html index c8eda1a87..a4b79d21d 100644 --- a/src/Ombi/ClientApp/src/app/usermanagement/usermanagement-user.component.html +++ b/src/Ombi/ClientApp/src/app/usermanagement/usermanagement-user.component.html @@ -182,7 +182,7 @@ - +