github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-08-14 02:26:55 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Victor Usoltsev 2021-10-08 23:27:21 +13:00
commit 8178dc6f58
7 changed files with 70 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/Ombi/ClientApp/src/app/app.component.html
View file

@ -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();"

12
src/Ombi/ClientApp/src/app/app.component.ts
View file

@ -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;
}
}
});
}

6
src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html
View file

@ -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>

48
src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts
View file

@ -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);
}
}
}

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

@ -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 @@
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 @@
</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()">

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

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

2
src/Ombi/ClientApp/src/app/usermanagement/usermanagement-user.component.html
View file

@ -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>