Theme support P1 (#256)

CHANGELOG.md

@@ -16,7 +16,8 @@ please see [changelog_updates.md](docs/dev/changelog_updates.md).
 #### Patch
 
 - Copyable contact email and subject fields on data offer detail dialogs
-- Fixed provider organization ID not showing up on CaaS connectors.
+- Fixed the close button on the self-hosted/CaaS connector choice page [#258](https://github.com/sovity/authority-portal/issues/258)
+- Fixed provider organization ID not showing up on CaaS connectors [#206](https://github.com/sovity/authority-portal/issues/206)
   - Keep in mind that sovity needs to be registered in the portal for the ID to show up.
   - Already registered connectors will be updated automatically, this process can take up to 24 hours
 
@@ -27,6 +28,7 @@ please see [changelog_updates.md](docs/dev/changelog_updates.md).
 Read the deployment migration notes carefully if you want to retain the portal's current behavior.
 If you configure the optional variables incorrectly, you might end up with an inconsistent configuration.
 
+#### Backend
 Environment variable changes:
 - Renamed variables:
   - `authority-portal.caas.sovity.limit-per-mdsid` to `authority-portal.caas.sovity.limit-per-organization`
@@ -37,6 +39,16 @@ Environment variable changes:
     authority-portal.organization.id.prefix: "MDS"
     authority-portal.organization.id.length: "4"
     ```
+    
+#### Frontend
+Environment variable changes:
+- New optional configuration variables - the values assigned here are the ones you should use to retain the current behavior:
+  - ```yaml
+    # UI Branding profile
+    AUTHORITY_PORTAL_FRONTEND_ACTIVE_PROFILE: mds-open-source
+    # Short Dataspace name, used in some explanatory texts
+    AUTHORITY_PORTAL_FRONTEND_DATASPACE_SHORT_NAME: MDS
+    ```
 
 #### Compatible Versions
 

authority-portal-frontend/.env.local-dev

@@ -6,6 +6,8 @@ AUTHORITY_PORTAL_FRONTEND_LOGOUT_URL=https://this-is-your-keycloak-logout-url
 AUTHORITY_PORTAL_FRONTEND_INVALIDATE_SESSION_COOKIES_URL=https://your-session-is-invalidated-now.com
 AUTHORITY_PORTAL_FRONTEND_USE_FAKE_BACKEND=true
 AUTHORITY_PORTAL_FRONTEND_IFRAME_URL=https://mobility-dataspa-5n9px2qi7r.live-website.com/mds-news
-AUTHORITY_PORTAL_FRONTEND_PRIVACY_POLICY_URL=https://mobility-dataspace.online/privacy-policy-mds-portal/
-AUTHORITY_PORTAL_FRONTEND_LEGAL_NOTICE_URL=https://mobility-dataspace.eu/legal-notice
-AUTHORITY_PORTAL_FRONTEND_SUPPORT_URL=https://support.mobility-dataspace.eu
+AUTHORITY_PORTAL_FRONTEND_PRIVACY_POLICY_URL=https://privacy-policy-url/
+AUTHORITY_PORTAL_FRONTEND_LEGAL_NOTICE_URL=https://legal-notice-url
+AUTHORITY_PORTAL_FRONTEND_SUPPORT_URL=https://support-url
+AUTHORITY_PORTAL_FRONTEND_ACTIVE_PROFILE=sovity-open-source
+AUTHORITY_PORTAL_FRONTEND_DATASPACE_SHORT_NAME=sovity Dataspace

authority-portal-frontend/.env.local-e2e-dev

@@ -9,3 +9,5 @@ AUTHORITY_PORTAL_FRONTEND_IFRAME_URL=https://mobility-dataspa-5n9px2qi7r.live-we
 AUTHORITY_PORTAL_FRONTEND_PRIVACY_POLICY_URL=https://mobility-dataspace.online/privacy-policy-mds-portal/
 AUTHORITY_PORTAL_FRONTEND_LEGAL_NOTICE_URL=https://mobility-dataspace.eu/legal-notice
 AUTHORITY_PORTAL_FRONTEND_SUPPORT_URL=https://support.mobility-dataspace.eu
+AUTHORITY_PORTAL_FRONTEND_ACTIVE_PROFILE=sovity-open-source
+AUTHORITY_PORTAL_FRONTEND_BRAND_SHORT_NAME=sovity

authority-portal-frontend/src/app/app-routing.module.ts

@@ -30,7 +30,7 @@ import {DashboardPageComponent} from './pages/dashboard-page/dashboard-page/dash
 import {LoadingPageComponent} from './pages/empty-pages/loading-page/loading-page/loading-page.component';
 import {PageNotFoundPageComponent} from './pages/empty-pages/page-not-found-page/page-not-found-page/page-not-found-page.component';
 import {UnauthenticatedPageComponent} from './pages/empty-pages/unauthenticated-page/unauthenticated-page/unauthenticated-page.component';
-import {MdsHomePageComponent} from './pages/mds-home/mds-home/mds-home.component';
+import {HomePageComponent} from './pages/home/home/home.component';
 import {ParticipantOwnConnectorDetailPageComponent} from './pages/participant-own-connector-detail-page/participant-own-connector-detail-page/participant-own-connector-detail-page.component';
 import {ParticipantOwnConnectorListPageComponent} from './pages/participant-own-connector-list-page/participant-own-connector-list-page/participant-own-connector-list-page.component';
 import {OrganizationCreatePageComponent} from './pages/registration-pages/organization-create-page/organization-create-page/organization-create-page.component';
@@ -73,16 +73,33 @@ export const LOADING_ROUTES: Routes = [
   },
 ];
 
+export const FEATURE_HOME_ROUTE: Routes = [
+  {
+    path: 'home',
+    component: HomePageComponent,
+    data: {
+      requiresRole: ['USER'] satisfies UserRoleDto[],
+    },
+    canActivate: [requiresRole],
+  },
+];
+
 const REDIRECT_TO_HOME: string[] = [
   '',
   'registration/pending',
   'registration/rejected',
   'onboard',
 ];
 
-const HOME_REDIRECTS: Routes = REDIRECT_TO_HOME.map((path) => ({
+export const CATALOG_REDIRECTS: Routes = REDIRECT_TO_HOME.map((path) => ({
   path,
-  redirectTo: 'mds-home',
+  redirectTo: 'catalog',
+  pathMatch: 'full',
+}));
+
+export const HOME_REDIRECTS: Routes = REDIRECT_TO_HOME.map((path) => ({
+  path,
+  redirectTo: 'home',
   pathMatch: 'full',
 }));
 
@@ -125,15 +142,6 @@ export const AUTHORITY_PORTAL_ROUTES: Routes = [
     path: '',
     component: PortalLayoutComponent,
     children: [
-      ...HOME_REDIRECTS,
-      {
-        path: 'mds-home',
-        component: MdsHomePageComponent,
-        data: {
-          requiresRole: ['USER'] satisfies UserRoleDto[],
-        },
-        canActivate: [requiresRole],
-      },
       {
         path: 'dashboard',
         component: DashboardPageComponent,

authority-portal-frontend/src/app/app.component.html

@@ -1,12 +1,12 @@
 <!-- Dev Utils -->
 <div
-  *ngIf="config.useFakeBackend"
+  *ngIf="appConfig.useFakeBackend"
   class="absolute t-[5px] w-full flex flex-row justify-end"
   style="z-index: 9999">
   <app-fake-backend-user-switcher></app-fake-backend-user-switcher>
 </div>
 <app-e2e-dev-user-switcher
-  *ngIf="config.useLocalBackend"></app-e2e-dev-user-switcher>
+  *ngIf="appConfig.useLocalBackend"></app-e2e-dev-user-switcher>
 
 <app-toast-notifications></app-toast-notifications>
 <router-outlet></router-outlet>

authority-portal-frontend/src/app/app.component.ts

@@ -24,17 +24,28 @@ import {GlobalStateImpl} from './core/global-state/global-state-impl';
 })
 export class AppComponent implements OnInit, OnDestroy {
   state!: GlobalState;
+  favicon: HTMLLinkElement | null = document.querySelector("link[rel*='icon']");
 
   private ngOnDestroy$ = new Subject();
 
   constructor(
-    @Inject(APP_CONFIG) public config: AppConfig,
+    @Inject(APP_CONFIG) public appConfig: AppConfig,
     private store: Store,
   ) {}
 
   ngOnInit() {
     this.startListeningToGlobalState();
     this.startPollingUserInfo();
+    this.setFavicon();
+  }
+
+  private setFavicon() {
+    if (!this.favicon) {
+      this.favicon = document.createElement('link');
+      this.favicon.rel = 'icon';
+      document.head.appendChild(this.favicon);
+    }
+    this.favicon.href = this.appConfig.brandFaviconSrc;
   }
 
   private startListeningToGlobalState() {

authority-portal-frontend/src/app/app.module.ts

@@ -49,7 +49,7 @@ import {DashboardPageModule} from './pages/dashboard-page/dashboard.module';
 import {LoadingPageModule} from './pages/empty-pages/loading-page/loading-page.module';
 import {PageNotFoundPageModule} from './pages/empty-pages/page-not-found-page/page-not-found-page.module';
 import {UnauthenticatedPageModule} from './pages/empty-pages/unauthenticated-page/unauthenticated-page.module';
-import {MdsHomePageModule} from './pages/mds-home/mds-home.module';
+import {MdsHomePageModule} from './pages/home/home.module';
 import {ParticipantOwnConnectorDetailPageModule} from './pages/participant-own-connector-detail-page/participant-own-connector-detail-page.module';
 import {ParticipantOwnConnectorListPageModule} from './pages/participant-own-connector-list-page/participant-own-connector-list-page.module';
 import {OrganizationCreatePageModule} from './pages/registration-pages/organization-create-page/organization-create-page.module';

authority-portal-frontend/src/app/core/api/fake-backend/impl/catalog-fake-impl.ts

@@ -16,7 +16,6 @@ import {
   CatalogPageResult,
   DataOfferDetailPageQuery,
   DataOfferDetailPageResult,
-  DataSourceAvailability,
 } from '@sovity.de/authority-portal-client';
 import {subDays, subMinutes} from 'date-fns';
 import {TestAssets} from './data/test-assets';

authority-portal-frontend/src/app/core/api/fake-backend/impl/data/test-policies.ts

@@ -11,12 +11,12 @@
  *      sovity GmbH - initial implementation
  */
 import {UiPolicy, UiPolicyExpression} from '@sovity.de/authority-portal-client';
+import {policyLeftExpressions} from '../../../../../pages/catalog-page/policy-editor/model/policy-left-expressions';
 import {
   constraint,
   constraintList,
-  multi
-} from "../../../../../pages/catalog-page/policy-editor/model/ui-policy-expression-utils";
-import {policyLeftExpressions} from "../../../../../pages/catalog-page/policy-editor/model/policy-left-expressions";
+  multi,
+} from '../../../../../pages/catalog-page/policy-editor/model/ui-policy-expression-utils';
 
 export namespace TestPolicies {
   const policy = (

authority-portal-frontend/src/app/core/global-state/global-state-impl.ts

@@ -42,14 +42,14 @@ import {RouteConfigService} from './routes/route-config-service';
 @Injectable()
 export class GlobalStateImpl implements NgxsOnInit {
   constructor(
-    @Inject(APP_CONFIG) public config: AppConfig,
+    @Inject(APP_CONFIG) public appConfig: AppConfig,
     private ngZone: NgZone,
     private apiService: ApiService,
     private routeConfigService: RouteConfigService,
   ) {}
 
   ngxsOnInit(ctx: StateContext<any>): void {
-    if (this.config.useLocalBackend) {
+    if (this.appConfig.useLocalBackend) {
       ctx.dispatch(new SwitchE2eDevUser(E2E_DEV_USERS[0]));
     }
     ctx.dispatch(RefreshDeploymentEnvironments);

authority-portal-frontend/src/app/core/global-state/routes/route-config-service.ts

@@ -16,12 +16,16 @@ import {UserInfo} from '@sovity.de/authority-portal-client';
 import {Fetched} from 'src/app/core/utils/fetched';
 import {
   AUTHORITY_PORTAL_ROUTES,
+  CATALOG_REDIRECTS,
+  FEATURE_HOME_ROUTE,
+  HOME_REDIRECTS,
   LOADING_ROUTES,
   ONBOARDING_ROUTES,
   PENDING_ROUTES,
   REJECTED_ROUTES,
   UNAUTHENTICATED_ROUTES,
 } from '../../../app-routing.module';
+import {ActiveFeatureSet} from '../../services/config/active-feature-set';
 import {AuthorityPortalPageSet} from './authority-portal-page-set';
 
 @Injectable({providedIn: 'root'})
@@ -35,7 +39,14 @@ export class RouteConfigService {
     AUTHORITY_PORTAL: AUTHORITY_PORTAL_ROUTES,
   };
 
-  constructor(private router: Router) {}
+  defaultRoute = this.activeFeatureSet.isHomePageEnabled()
+    ? '/home'
+    : '/catalog';
+
+  constructor(
+    private router: Router,
+    private activeFeatureSet: ActiveFeatureSet,
+  ) {}
 
   decidePageSet(userInfoFetched: Fetched<UserInfo>): AuthorityPortalPageSet {
     if (!userInfoFetched.isReady) {
@@ -69,7 +80,18 @@ export class RouteConfigService {
     }
 
     // Change routes
-    this.router.resetConfig(this.mapping[nextPageSet]);
+    const routes = this.mapping[nextPageSet];
+
+    if (nextPageSet === 'AUTHORITY_PORTAL') {
+      const apRouteChildren = routes.find((r) => r.path === '')?.children;
+      if (this.activeFeatureSet.isHomePageEnabled()) {
+        apRouteChildren?.push(...HOME_REDIRECTS, ...FEATURE_HOME_ROUTE);
+      } else {
+        apRouteChildren?.push(...CATALOG_REDIRECTS);
+      }
+    }
+
+    this.router.resetConfig(routes);
 
     if (
       previousPageSet === 'ONBOARDING_PROCESS' &&
@@ -79,7 +101,7 @@ export class RouteConfigService {
         .navigateByUrl('/random-redirect-for-force-refresh', {
           skipLocationChange: true,
         })
-        .then(() => this.router.navigate(['/mds-home']));
+        .then(() => this.router.navigate([this.defaultRoute]));
     } else {
       // Force refresh
       this.forceRefreshCurrentRoute();

authority-portal-frontend/src/app/core/services/config/active-feature-set.ts

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2024 sovity GmbH
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Contributors:
+ *      sovity GmbH - initial implementation
+ */
+import {Inject, Injectable} from '@angular/core';
+import {APP_CONFIG, AppConfig} from './app-config';
+import {UiFeature} from './profiles/ui-feature';
+
+@Injectable({providedIn: 'root'})
+export class ActiveFeatureSet {
+  constructor(@Inject(APP_CONFIG) private config: AppConfig) {}
+
+  usesMdsId(): boolean {
+    return this.has('mds-id');
+  }
+
+  usesBritishCatalogue(): boolean {
+    return this.has('catalogue');
+  }
+
+  isHomePageEnabled(): boolean {
+    return this.has('enable-home');
+  }
+
+  has(feature: UiFeature): boolean {
+    return this.config.features.has(feature);
+  }
+}

authority-portal-frontend/src/app/core/services/config/app-config.ts

@@ -11,6 +11,11 @@
  *      sovity GmbH - initial implementation
  */
 import {InjectionToken} from '@angular/core';
+import {getProfileOrFallback} from './profiles/get-profile-or-fallback';
+import {UiColorTheme} from './profiles/ui-color-theme';
+import {UiFeature} from './profiles/ui-feature';
+import {UiLogo} from './profiles/ui-logo';
+import {UiProfile} from './profiles/ui-profile';
 
 export const APP_CONFIG = new InjectionToken<AppConfig>('APP_CONFIG');
 /**
@@ -21,16 +26,36 @@ export const APP_CONFIG = new InjectionToken<AppConfig>('APP_CONFIG');
  * Values can be overridden via environment variables
  */
 export interface AppConfig {
+  // selected profile
+  profile: UiProfile;
+  features: Set<UiFeature>;
+
+  // theme by profile
+  theme: UiColorTheme;
+  brandFaviconSrc: string;
+  brandLogo: UiLogo;
+  brandLogoSmall: UiLogo;
+  brandLogoUnauthenticatedPage: UiLogo;
+  brandLogoOnboardingPage: UiLogo;
+  copyrightCompanyName: string;
+
+  // connector registration icons
+  connectorSelfOwnedIconSrc: string;
+  connectorCaasIconSrc: string;
+  caasResellerBrandLogoSrc: string;
+
+  privacyPolicyUrl: string;
+  legalNoticeUrl: string;
+  supportUrl: string;
+  iframeUrl: string;
+
   backendUrl: string;
   loginUrl: string;
   logoutUrl: string;
   invalidateSessionCookiesUrl: string;
   useFakeBackend: boolean;
   useLocalBackend: boolean;
-  iframeUrl: string;
-  privacyPolicyUrl: string;
-  legalNoticeUrl: string;
-  supportUrl: string;
+  brandDataspaceName: string;
 }
 
 /**
@@ -49,14 +74,23 @@ export interface AppConfigEnv {
   AUTHORITY_PORTAL_FRONTEND_PRIVACY_POLICY_URL: string;
   AUTHORITY_PORTAL_FRONTEND_LEGAL_NOTICE_URL: string;
   AUTHORITY_PORTAL_FRONTEND_SUPPORT_URL: string;
+  AUTHORITY_PORTAL_FRONTEND_ACTIVE_PROFILE: string;
+  AUTHORITY_PORTAL_FRONTEND_DATASPACE_SHORT_NAME: string;
 }
 
 /**
  * Build {@link AppConfig} from env vars
  * @param envVars env vars as gotten from /assets/config/config.json
  */
 export function buildAppConfig(envVars: AppConfigEnv): AppConfig {
+  const {profile, profileConfig} = getProfileOrFallback(
+    envVars.AUTHORITY_PORTAL_FRONTEND_ACTIVE_PROFILE,
+  );
+
   return {
+    profile,
+    ...profileConfig,
+
     backendUrl: envVars.AUTHORITY_PORTAL_FRONTEND_BACKEND_URL,
     loginUrl: envVars.AUTHORITY_PORTAL_FRONTEND_LOGIN_URL,
     logoutUrl: envVars.AUTHORITY_PORTAL_FRONTEND_LOGOUT_URL,
@@ -66,9 +100,11 @@ export function buildAppConfig(envVars: AppConfigEnv): AppConfig {
       envVars.AUTHORITY_PORTAL_FRONTEND_USE_FAKE_BACKEND === 'true',
     useLocalBackend:
       envVars.AUTHORITY_PORTAL_FRONTEND_USE_LOCAL_BACKEND === 'true',
+
     iframeUrl: envVars.AUTHORITY_PORTAL_FRONTEND_IFRAME_URL,
     privacyPolicyUrl: envVars.AUTHORITY_PORTAL_FRONTEND_PRIVACY_POLICY_URL,
     legalNoticeUrl: envVars.AUTHORITY_PORTAL_FRONTEND_LEGAL_NOTICE_URL,
     supportUrl: envVars.AUTHORITY_PORTAL_FRONTEND_SUPPORT_URL,
+    brandDataspaceName: envVars.AUTHORITY_PORTAL_FRONTEND_DATASPACE_SHORT_NAME,
   };
 }