my-profile, added configuration for auth-provider icons

This commit is contained in:
Sofia Papacharalampous 2024-03-22 14:15:01 +02:00
parent e6b4cd7786
commit c2c42297e5
6 changed files with 120 additions and 4 deletions

View File

@ -0,0 +1,65 @@
export class AuthProviders {
private _authProviders: AuthProvider[];
get authProviders(): AuthProvider[] {
return this._authProviders;
}
private _defaultAuthProvider: AuthProvider;
get defaultAuthProvider(): AuthProvider {
return this._defaultAuthProvider;
}
public static parseValue(value: any): AuthProviders {
const authProvidersObj: AuthProviders = new AuthProviders();
authProvidersObj._defaultAuthProvider = AuthProvider.parseValue(value.defaultAuthProvider);
authProvidersObj._authProviders = [];
for (let authProviderValue of value.authProviders) {
const authProviderObj: AuthProvider = AuthProvider.parseValue(authProviderValue);
authProvidersObj._authProviders.push(authProviderObj);
}
return authProvidersObj;
}
public findOrGetDefault(providerName: string, culture: string): AuthProvider {
const authProvider = this.find(providerName, culture);
if (authProvider === null) return this.defaultAuthProvider;
return authProvider;
}
public find(providerName: string, culture: string): AuthProvider | undefined {
return this.authProviders.find(p => p.name === providerName && p.cultures.includes(culture));
}
}
export class AuthProvider {
private _name: string;
get name(): string {
return this._name;
}
private _providerClass: string;
get providerClass(): string {
return this._providerClass;
}
private _cultures: string[];
get cultures(): string[] {
return this._cultures;
}
public static parseValue(value: any): AuthProvider {
const obj: AuthProvider = new AuthProvider();
obj._name = value.name;
obj._providerClass = value.providerClass;
obj._cultures = value.cultures;
return obj;
}
}

View File

@ -9,6 +9,7 @@ import { Logging } from '@app/core/model/configuration-models/logging.model';
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { KeycloakConfiguration } from '@app/core/model/configuration-models/keycloak-configuration.model'; import { KeycloakConfiguration } from '@app/core/model/configuration-models/keycloak-configuration.model';
import { Guid } from '@common/types/guid'; import { Guid } from '@common/types/guid';
import { AuthProviders } from '@app/core/model/configuration-models/auth-providers.model';
@Injectable({ @Injectable({
providedIn: 'root', providedIn: 'root',
@ -148,6 +149,11 @@ export class ConfigurationService extends BaseComponent {
return this._newReleaseNotificationVersionCode; return this._newReleaseNotificationVersionCode;
} }
private _authProviders: AuthProviders;
get authProviders(): AuthProviders {
return this._authProviders;
}
public loadConfiguration(): Promise<any> { public loadConfiguration(): Promise<any> {
return new Promise((r, e) => { return new Promise((r, e) => {
// We need to exclude all interceptors here, for the initial configuration request. // We need to exclude all interceptors here, for the initial configuration request.
@ -216,6 +222,7 @@ export class ConfigurationService extends BaseComponent {
this._newReleaseNotificationExpires = config.newReleaseNotification?.expires; this._newReleaseNotificationExpires = config.newReleaseNotification?.expires;
this._newReleaseNotificationLink = config.newReleaseNotification?.link; this._newReleaseNotificationLink = config.newReleaseNotification?.link;
this._newReleaseNotificationVersionCode = config.newReleaseNotification?.versionCode; this._newReleaseNotificationVersionCode = config.newReleaseNotification?.versionCode;
this._authProviders = AuthProviders.parseValue(config.authProviders);
} }
} }

View File

@ -38,5 +38,4 @@ export class UserProfileEditorModel {
return formGroup; return formGroup;
} }
} }

View File

@ -46,8 +46,11 @@
<div *ngFor="let userCredential of userCredentials | async; index as i"> <div *ngFor="let userCredential of userCredentials | async; index as i">
<div class="row user-credential" *ngIf="userCredential.data"> <div class="row user-credential" *ngIf="userCredential.data">
<div class="col-auto mail-text pr-0">{{userCredential.data.email}}</div> <div class="col-auto mail-text pr-0">{{userCredential.data.email}}</div>
<span *ngIf="hasProvider(userCredential, 'Google')" class="googleIcon"></span> <ng-container *ngFor="let providerIcon of getProviderIcons(userCredential, userLanguage)">
<span *ngIf="hasProvider(userCredential, 'Facebook')" class="facebookIcon"></span> <span class="providerIcon"></span>
</ng-container>
<!-- <span *ngIf="hasProvider(userCredential, 'Google')" class="googleIcon"></span> -->
<!-- <span *ngIf="hasProvider(userCredential, 'Facebook')" class="facebookIcon"></span> -->
<!-- <span *ngIf="hasProvider(userCredential.data.provider, authProviderEnum.Twitter)" class="twitterIcon"></span> <!-- <span *ngIf="hasProvider(userCredential.data.provider, authProviderEnum.Twitter)" class="twitterIcon"></span>
<span *ngIf="hasProvider(userCredential.data.provider, authProviderEnum.LinkedIn)" class="linkedInIcon"></span> <span *ngIf="hasProvider(userCredential.data.provider, authProviderEnum.LinkedIn)" class="linkedInIcon"></span>
<span *ngIf="hasProvider(userCredential.data.provider, authProviderEnum.B2Access)" class="b2AccessIcon"></span> <span *ngIf="hasProvider(userCredential.data.provider, authProviderEnum.B2Access)" class="b2AccessIcon"></span>

View File

@ -41,6 +41,7 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
//TODO: refactor //TODO: refactor
userCredentials: Observable<UserCredential[]>; userCredentials: Observable<UserCredential[]>;
firstEmail: String; firstEmail: String;
userLanguage: String;
currentUserId: string; currentUserId: string;
cultures: Observable<CultureInfo[]>; cultures: Observable<CultureInfo[]>;
timezones: Observable<any[]>; timezones: Observable<any[]>;
@ -80,6 +81,28 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
this.languages = this.languageService.getAvailableLanguagesCodes(); this.languages = this.languageService.getAvailableLanguagesCodes();
} }
public getProviderIcons(userCredential: UserCredential, culture:string): string[] {
if (userCredential.data.externalProviderNames === undefined || userCredential.data.externalProviderNames?.length === 0) {
return [this.configurationService.authProviders.defaultAuthProvider.providerClass];
}
const providerNames: string[] = [];
for (let providerName of userCredential.data.externalProviderNames) {
const providerImage = this.configurationService.authProviders.findOrGetDefault(providerName.toString(), culture).providerClass;
if (providerImage !== null) {
providerNames.push(providerImage);
}
}
return providerNames;
}
public getProviderIcon(providerName:string, culture:string): string {
return this.configurationService.authProviders.find(providerName, culture).providerClass;
}
ngOnInit() { ngOnInit() {
this.matomoService.trackPageView('User Profile'); this.matomoService.trackPageView('User Profile');
this.route.params this.route.params
@ -115,6 +138,7 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
// result.credentials.push(fakecredentials); // result.credentials.push(fakecredentials);
// result.credentials[0].data.externalProviderNames = ['Google']; // result.credentials[0].data.externalProviderNames = ['Google'];
this.userLanguage = result.additionalInfo.language;
this.firstEmail = result.credentials[0].data.email; this.firstEmail = result.credentials[0].data.email;
this.userCredentials = of(result.credentials); this.userCredentials = of(result.credentials);

View File

@ -47,5 +47,23 @@
"allowOrganizationCreator": true, "allowOrganizationCreator": true,
"useSplash": false, "useSplash": false,
"orcidPath": "https://orcid.org/", "orcidPath": "https://orcid.org/",
"maxFileSizeInMB": 10 "maxFileSizeInMB": 10,
"authProviders": {
"defaultAuthProvider": {
"name": "Default",
"providerClass": "defaultIcon"
},
"authProviders": [
{
"name": "Google",
"providerClass": "googleIcon",
"cultures": ["en"]
},
{
"name": "Facebook",
"providerClass": "facebookIcon",
"cultures": ["en"]
}
]
}
} }