Added tenant css configuration on login pipeline after principal/me

dmp-frontend/src/app/app.component.html

@@ -10,17 +10,6 @@
 			</div>
 		</mat-sidenav-content>
 	</mat-sidenav-container>
-	<!-- <div class="sidebar sidebar-shadow" data-color="danger" data-background-color="white" data-image="./assets/images/logan-troxell-9187-unsplash.jpg">
-		<app-sidebar></app-sidebar>
-		<div class="sidebar-background" style="background-image: url(./assets/images/logan-troxell-9187-unsplash.jpg)">
-		</div>
-	</div>
-	<div class="main-panel">
-		<app-navbar></app-navbar>
-		<div>
-			<router-outlet (activate)='onActivate($event)' (deactivate)='onDeactivate($event)'></router-outlet>
-		</div>
-	</div> -->
 </div>
 <app-notification *ngIf="!showOnlyRouterOutlet"></app-notification>
 <router-outlet *ngIf="showOnlyRouterOutlet"></router-outlet>

dmp-frontend/src/app/app.component.ts

@@ -23,6 +23,7 @@ import { SideNavService } from './core/services/sidenav/side-nav.sevice';
 import { TenantConfigurationService } from './core/services/tenant-configuration/tenant-configuration.service';
 import { TimezoneService } from './core/services/timezone/timezone-service';
 import { BreadcrumbService } from './ui/misc/breadcrumb/breadcrumb.service';
+import { TenantHandlingService } from './core/services/tenant/tenant-handling.service';
 
 
 declare const gapi: any;
@@ -41,6 +42,7 @@ export class AppComponent implements OnInit, AfterViewInit {
 	helpContentEnabled: boolean;
 	private statusChangeSubscription: Subscription;
 	showOnlyRouterOutlet = false;
+	cssConfigLoaded = false;
 
 	@ViewChild('sidenav') sidenav: MatSidenav;
 
@@ -58,7 +60,7 @@ export class AppComponent implements OnInit, AfterViewInit {
 		private language: LanguageService,
 		private configurationService: ConfigurationService,
 		private matomoService: MatomoService,
-		private tenantConfigurationService: TenantConfigurationService,
+		private tenantHandlingService: TenantHandlingService,
 		private sidenavService: SideNavService,
 		private breadcrumbService: BreadcrumbService
 	) {
@@ -260,33 +262,9 @@ export class AppComponent implements OnInit, AfterViewInit {
 
 		this.authentication.getAuthenticationStateObservable().subscribe(authenticationState => {
 			if (authenticationState.loginStatus === LoginStatus.LoggedIn) {
-				this.loadCssColors();
+				this.tenantHandlingService.loadAndApplyTenantCssColors();
 			}
 		});
-		this.loadCssColors();
-	}
-
-	private loadCssColors() {
-		if (this.authentication.currentAccountIsAuthenticated() && this.authentication.selectedTenant()) {
-			this.tenantConfigurationService.getCurrentTenantType(TenantConfigurationType.CssColors, [
-				nameof<TenantConfiguration>(x => x.type),
-				[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.primaryColor)].join('.'),
-				[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.primaryColor2)].join('.'),
-				[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.primaryColor3)].join('.'),
-				[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.secondaryColor)].join('.'),
-			])
-				.pipe(map(data => data as TenantConfiguration))
-				.subscribe(
-					data => {
-						if (data?.cssColors) {
-							if (data.cssColors.primaryColor) document.documentElement.style.setProperty(`--primary-color`, data.cssColors.primaryColor);
-							if (data.cssColors.primaryColor2) document.documentElement.style.setProperty(`--primary-color-2`, data.cssColors.primaryColor2);
-							if (data.cssColors.primaryColor3) document.documentElement.style.setProperty(`--primary-color-3`, data.cssColors.primaryColor3);
-							if (data.cssColors.secondaryColor) document.documentElement.style.setProperty(`--secondary-color`, data.cssColors.secondaryColor);
-						}
-					},
-				);
-		}
 	}
 
 	toggleNavbar(event) {

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

@@ -173,9 +173,11 @@ export class AuthService extends BaseService {
 			exhaustMap(() => forkJoin([
 				this.accessToken ? this.ensureTenant(tenantCode ?? this.selectedTenant() ?? 'default') : of(false),
 				this.accessToken ? this.principalService.me(httpParams) : of(null),
+				this.accessToken ? this.tenantHandlingService.loadTenantCssColors() : of(null),
 			])),
 			map((item) => {
 				this.currentAccount(item[1]);
+				this.tenantHandlingService.applyTenantCssColors(item[2]);
 				return true;
 			})
 		);

dmp-frontend/src/app/core/services/tenant/tenant-handling.service.ts

@@ -1,16 +1,24 @@
 import { DOCUMENT, LocationStrategy } from '@angular/common';
 import { Inject, Injectable } from '@angular/core';
 import { PRIMARY_OUTLET, Router, UrlSegment, UrlSegmentGroup, UrlSerializer, UrlTree } from '@angular/router';
+import { TenantConfigurationType } from '@app/core/common/enum/tenant-configuration-type';
+import { CssColorsTenantConfiguration, TenantConfiguration } from '@app/core/model/tenant-configuaration/tenant-configuration';
+import { BaseService } from '@common/base/base.service';
+import { Observable, takeUntil } from 'rxjs';
+import { nameof } from 'ts-simple-nameof';
+import { TenantConfigurationService } from '../tenant-configuration/tenant-configuration.service';
 
 @Injectable()
-export class TenantHandlingService {
+export class TenantHandlingService extends BaseService {
 
 	constructor(
 		@Inject(DOCUMENT) private readonly document: Document,
 		private readonly locationStrategy: LocationStrategy,
 		private readonly router: Router,
-		private urlSerializer: UrlSerializer
+		private urlSerializer: UrlSerializer,
+		private tenantConfigurationService: TenantConfigurationService
 	) {
+		super();
 	}
 
 	extractTenantCodeFromUrlPath(path: string): string {
@@ -56,4 +64,29 @@ export class TenantHandlingService {
 	getBaseUrl(): string {
 		return this.document.location.origin + this.locationStrategy.getBaseHref();
 	}
+
+
+	public loadAndApplyTenantCssColors() {
+		this.loadTenantCssColors().pipe(takeUntil(this._destroyed)).subscribe(x => this.applyTenantCssColors(x))
+	}
+
+	public loadTenantCssColors(): Observable<TenantConfiguration> {
+		return this.tenantConfigurationService.getCurrentTenantType(TenantConfigurationType.CssColors, [
+			nameof<TenantConfiguration>(x => x.type),
+			[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.primaryColor)].join('.'),
+			[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.primaryColor2)].join('.'),
+			[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.primaryColor3)].join('.'),
+			[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.secondaryColor)].join('.'),
+		]);
+	}
+
+	public applyTenantCssColors(data: TenantConfiguration) {
+
+		if (data?.cssColors) {
+			if (data.cssColors.primaryColor) document.documentElement.style.setProperty(`--primary-color`, data.cssColors.primaryColor);
+			if (data.cssColors.primaryColor2) document.documentElement.style.setProperty(`--primary-color-2`, data.cssColors.primaryColor2);
+			if (data.cssColors.primaryColor3) document.documentElement.style.setProperty(`--primary-color-3`, data.cssColors.primaryColor3);
+			if (data.cssColors.secondaryColor) document.documentElement.style.setProperty(`--secondary-color`, data.cssColors.secondaryColor);
+		}
+	}
 }

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

@@ -52,7 +52,6 @@
 	"lockInterval": 60000,
 	"guideAssets": "assets/images/guide",
 	"allowOrganizationCreator": true,
-	"useSplash": false,
 	"orcidPath": "https://orcid.org/",
 	"maxFileSizeInMB": 10,
 	"authProviders": {