my-profile, added configuration for auth-provider icons

dmp-frontend/src/app/core/model/configuration-models/auth-providers.model.ts

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

dmp-frontend/src/app/core/services/configuration/configuration.service.ts

@@ -9,6 +9,7 @@ import { Logging } from '@app/core/model/configuration-models/logging.model';
 import { HttpClient } from '@angular/common/http';
 import { KeycloakConfiguration } from '@app/core/model/configuration-models/keycloak-configuration.model';
 import { Guid } from '@common/types/guid';
+import { AuthProviders } from '@app/core/model/configuration-models/auth-providers.model';
 
 @Injectable({
 	providedIn: 'root',
@@ -148,6 +149,11 @@ export class ConfigurationService extends BaseComponent {
 		return this._newReleaseNotificationVersionCode;
 	}
 
+	private _authProviders: AuthProviders;
+	get authProviders(): AuthProviders {
+		return this._authProviders;
+	}
+
 	public loadConfiguration(): Promise<any> {
 		return new Promise((r, e) => {
 			// 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._newReleaseNotificationLink = config.newReleaseNotification?.link;
 		this._newReleaseNotificationVersionCode = config.newReleaseNotification?.versionCode;
+		this._authProviders = AuthProviders.parseValue(config.authProviders);
 	}
 
 }

dmp-frontend/src/app/ui/user-profile/user-profile-editor.model.ts

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

dmp-frontend/src/app/ui/user-profile/user-profile.component.html

@@ -46,8 +46,11 @@
 										<div *ngFor="let userCredential of userCredentials | async; index as i">
 											<div class="row user-credential" *ngIf="userCredential.data">
 												<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.LinkedIn)" class="linkedInIcon"></span>
 												<span *ngIf="hasProvider(userCredential.data.provider, authProviderEnum.B2Access)" class="b2AccessIcon"></span>

dmp-frontend/src/app/ui/user-profile/user-profile.component.ts

@@ -41,6 +41,7 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
 	//TODO: refactor
 	userCredentials: Observable<UserCredential[]>;
 	firstEmail: String;
+	userLanguage: String;
 	currentUserId: string;
 	cultures: Observable<CultureInfo[]>;
 	timezones: Observable<any[]>;
@@ -80,6 +81,28 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
 		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() {
 		this.matomoService.trackPageView('User Profile');
 		this.route.params
@@ -115,6 +138,7 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
 						// result.credentials.push(fakecredentials);
 						// result.credentials[0].data.externalProviderNames = ['Google'];
 						
+						this.userLanguage = result.additionalInfo.language;
 						this.firstEmail = result.credentials[0].data.email;
 						this.userCredentials = of(result.credentials);
 

dmp-frontend/src/assets/config/config.json

@@ -47,5 +47,23 @@
 	"allowOrganizationCreator": true,
 	"useSplash": false,
 	"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"]
+			}
+		]
+	}
 }