feat: optional build with base_href for all projects

.github/workflows/containers.yml

@@ -36,7 +36,7 @@ jobs:
           - {project: ebv-analyzer}
           - {project: ecometrics}
           - {project: esg-indicator-service}
-          - {project: manager, angular_base_href: "/manager/"}
+          - {project: manager}
 
     runs-on: ubuntu-24.04
 
@@ -45,7 +45,6 @@ jobs:
       FULL_TAG_NAME: nightly
       CONTAINER_REPOSITORY_BRANCH: main
       BUILD_TAG: gis
-      ANGULAR_BASE_HREF:
 
     steps:
       - name: Modify TAG_NAME if on `tag_name` is set on `workflow_dispatch`
@@ -65,10 +64,7 @@ jobs:
       - name: Modify `BUILD_TAG` if dashboard
         if: env.BUILD_TAG != 'gis' && env.BUILD_TAG != 'manager'
         run: echo "BUILD_TAG=dashboards/${{env.BUILD_TAG}}" >> $GITHUB_ENV
-
-      - name: Set additional params
-        if: matrix.app.angular_base_href
-        run: echo "ANGULAR_BASE_HREF=${{matrix.app.angular_base_href}}" >> $GITHUB_ENV        
+
 
       - name: Checkout code
         uses: actions/checkout@v4
@@ -92,7 +88,6 @@ jobs:
           podman build \
             --tag "geoengine-ui:${{env.FULL_TAG_NAME}}" \
             --build-arg GEOENGINE_UI_PROJECT="${{env.BUILD_TAG}}" \
-            --build-arg GEOENGINE_UI_ANGULAR_BASE_HREF="${{env.ANGULAR_BASE_HREF}}" \
             -f container/geoengine-ui/Dockerfile \
             .
 

package.json

@@ -104,7 +104,6 @@
         "@types/jasminewd2": "~2.0.13",
         "@types/node": "^25.3.2",
         "@types/topojson-specification": "^1.0.5",
-        "@types/uuid": "^11.0.0",
         "@vitest/browser-playwright": "4.0.18",
         "angular-eslint": "^21.2.0",
         "eslint": "^9.39.3",

projects/common/src/lib/login/login.component.ts

@@ -88,28 +88,35 @@ export class LoginComponent implements OnInit {
 
     readonly loginRedirect = (): string => {
         // Priority: explicit returnUrl query param -> route data.loginRedirect -> default input
-        const qp = this.route.snapshot.queryParamMap.get('returnUrl');
-        if (qp) return qp;
+        const queryRedirect = this.route.snapshot.queryParamMap.get('returnUrl');
+        if (queryRedirect) {
+            return queryRedirect;
+        }
 
         const dataRedirect = this.route.snapshot.data['loginRedirect'];
-        if (dataRedirect) return dataRedirect as string;
+        if (dataRedirect) {
+            return dataRedirect as string;
+        }
+
+        const inputDefaultRedirect = this.defaultRedirect();
+        if (inputDefaultRedirect) {
+            return inputDefaultRedirect;
+        }
 
-        return this.defaultRedirect();
+        // if there is no redirect set, redirect to the application root.
+        return '/';
     };
 
     ngOnInit(): void {
         void this.onInit();
     }
 
     async onInit(): Promise<void> {
-        const usesHashNavigation = window.location.hash.startsWith('#/');
-        const hashPrefix = usesHashNavigation ? '#' : '';
-
-        const redirectUri = new URL(hashPrefix + this.loginRedirect(), window.location.href).toString();
-
         // check if OIDC login is enabled
         try {
-            const idr = await this.userService.oidcInit(redirectUri);
+            // resolve the route to restore after login
+            const oidcRestoreRoute = this.loginRedirect();
+            const idr = await this.userService.oidcInit(oidcRestoreRoute);
             this.oidcUrl = idr.url;
             this.formStatus.set(FormStatus.Oidc);
 
@@ -136,7 +143,7 @@ export class LoginComponent implements OnInit {
     }
 
     oidcLogin(): void {
-        this.formStatus.set(FormStatus.Loading);
+        this.formStatus.set(FormStatus.Oidc);
         window.location.href = this.oidcUrl;
     }
 

projects/common/src/lib/user/user.service.ts

@@ -26,6 +26,7 @@ import {
     mergeMap,
     of,
 } from 'rxjs';
+import {Location} from '@angular/common';
 import {UUID} from '../datasets/dataset.model';
 import {isDefined} from '../util/conversions';
 import {ActivatedRoute, Router} from '@angular/router';
@@ -36,19 +37,22 @@ import {utc} from 'moment';
 import {CommonConfig} from '../config.service';
 import {NotificationService} from '../notification.service';
 
-const PATH_PREFIX = window.location.pathname.replace(/\//g, '_').replace(/-/g, '_');
-
 /**
  * A service that is responsible for retrieving user information and modifying the current user.
  */
 @Injectable({
     providedIn: 'root',
 })
 export class UserService {
+    static readonly OIDC_RESTORE_ROUTE_KEY = 'oidcRestoreRoute';
+    static readonly IS_HASH_SUFFIX = '#/';
+    static readonly SESSION_KEY_SUFFIX = 'session';
+
     protected readonly config = inject(CommonConfig);
     protected readonly notificationService = inject(NotificationService);
     protected readonly router = inject(Router);
     protected readonly activatedRoute = inject(ActivatedRoute);
+    protected readonly location = inject(Location);
 
     protected readonly session$ = new ReplaySubject<Session | undefined>(1);
     protected readonly backendStatus$ = new BehaviorSubject<BackendStatus>({available: false, initial: true});
@@ -70,34 +74,29 @@ export class UserService {
         this.session$.subscribe((session) => {
             // storage of the session
             this.saveSessionInBrowser(session);
+            if (!session) return;
+            this.userApi.next(new UserApi(apiConfigurationWithAccessKey(session.sessionToken)));
+            this.sessionApi.next(new SessionApi(apiConfigurationWithAccessKey(session.sessionToken)));
         });
 
-        this.getBackendStatus().subscribe((status) => {
-            void this.tryLogin(status, oidcParams);
-        });
-
-        // update backend info when backend is available
-        // eslint-disable-next-line @typescript-eslint/no-misused-promises
-        this.getBackendStatus().subscribe(async (status) => {
-            if (status.available) {
-                const info = await this.backendApi.serverInfoHandler();
-                this.backendInfo$.next(info);
-            }
-        });
-
-        this.getSessionStream().subscribe({
-            next: (session) => {
-                this.userApi.next(new UserApi(apiConfigurationWithAccessKey(session.sessionToken)));
-                this.sessionApi.next(new SessionApi(apiConfigurationWithAccessKey(session.sessionToken)));
-            },
-        });
+        this.getBackendStatus()
+            .pipe(mergeMap((status, _index) => this.setBackendInfo(status).then(() => this.tryLogin(status, oidcParams))))
+            .subscribe();
 
         // update quota when session changes or update is triggered
         this.createSessionQuotaStream();
 
+        // now, trigger an update of the backend status once. While this is an async call, we don't need to await here.
         void this.triggerBackendStatusUpdate();
     }
 
+    async setBackendInfo(status: BackendStatus): Promise<void> {
+        if (status.available) {
+            const info = await this.backendApi.serverInfoHandler();
+            this.backendInfo$.next(info);
+        }
+    }
+
     async tryLogin(
         status: BackendStatus,
         oidcParams:
@@ -127,16 +126,11 @@ export class UserService {
 
         this.sessionInitialized = true;
 
-        if (oidcParams && sessionStorage.getItem('redirectUri')) {
-            this.oidcLogin(oidcParams)
-                .pipe(first())
-                .subscribe(() => {
-                    void this.router.navigate([], {
-                        // eslint-disable-next-line @typescript-eslint/naming-convention
-                        queryParams: {session_state: undefined, state: undefined, code: undefined},
-                        queryParamsHandling: 'merge',
-                    });
-                });
+        const oidcRestoreRoute = sessionStorage.getItem(UserService.OIDC_RESTORE_ROUTE_KEY);
+        if (oidcParams && oidcRestoreRoute) {
+            const sess = await this.oidcLogin(oidcParams);
+            this.session$.next(sess);
+            this.router.navigateByUrl(oidcRestoreRoute);
         } else {
             try {
                 // restore old session if possible
@@ -237,6 +231,61 @@ export class UserService {
         return this.backendInfo$;
     }
 
+    /**
+     * This calls Angulars prepareExternalUrl for route "/".
+     * @returns the url string
+     **/
+    getSpaExternalUrl(): string {
+        return this.location.prepareExternalUrl('/');
+    }
+
+    /**
+     * This returns the url incl. base path of the single page application.
+     * We use it for routung and restoring after OIDC login.
+     * In most cases it is 'https://abc.app.geoengine.io/'.
+     * If angulars '--base-href=something' is used, it is 'https://abc.app.geoengine.io/something/'.
+     *
+     * @returns the url string
+     */
+    getSpaExternalUrlWithDomain(): string {
+        return window.location.origin + this.getSpaBaseHref();
+    }
+
+    /**
+     * This returns only the APP_BASE_HREF of the application.
+     * Since the APP_BASE_HREF is not directly accessable, we get it from the external url.
+     * @returns the APP_BASE_HREF
+     */
+    getSpaBaseHref(): string {
+        const baseHrefUrl = this.getSpaExternalUrl();
+        if (!baseHrefUrl.startsWith('/')) {
+            // Angular allows to set APP_BASE_HREF to start with the origin. If that happens, this must be covered here!
+            throw new Error("base_href must start with '/'");
+        }
+        if (baseHrefUrl.endsWith('#')) {
+            return baseHrefUrl.substring(0, baseHrefUrl.length - 2);
+        }
+        return baseHrefUrl;
+    }
+
+    /**
+     * For local storage we use the APP_BASE_HREF as part of the key. (To be able to use multiple apps with one domain?)
+     * To get a uniform key, we replace '/' and '-' with '_'.
+     * @returns APP_BASE_HREF with '/' and '-' replaces by '_'.
+     */
+    getBaseHrefBasedKey(): string {
+        //
+        return this.getSpaBaseHref().replace(/\//g, '_').replace(/-/g, '_');
+    }
+
+    /**
+     * This allows to identify if hash or path routing is used.
+     * @returns 'true' if hash based routing is used.
+     */
+    isHashRouting(): boolean {
+        return this.getSpaExternalUrl().endsWith(UserService.IS_HASH_SUFFIX);
+    }
+
     isGuestUserStream(): Observable<boolean> {
         return this.getSessionStream().pipe(map((s) => !s.user?.email || !s.user.realName));
     }
@@ -342,40 +391,35 @@ export class UserService {
         this.logoutCallback = callback;
     }
 
-    oidcInit(redirectUri: string): Promise<AuthCodeRequestURL> {
-        sessionStorage.setItem('redirectUri', redirectUri);
+    oidcInit(oidcRestoreRoute: string): Promise<AuthCodeRequestURL> {
+        sessionStorage.setItem(UserService.OIDC_RESTORE_ROUTE_KEY, oidcRestoreRoute);
 
         return new SessionApi().oidcInit({
-            redirectUri: redirectUri,
+            redirectUri: this.getSpaExternalUrlWithDomain(),
         });
     }
 
-    oidcLogin(request: {sessionState: string; code: string; state: string}): Observable<Session> {
-        const result = new ReplaySubject<Session>();
-
-        new SessionApi()
+    oidcLogin(request: {sessionState: string; code: string; state: string}): Promise<Session> {
+        const sess = new SessionApi()
             .oidcLogin({
                 authCodeResponse: request,
-                redirectUri: sessionStorage.getItem('redirectUri')!,
+                redirectUri: this.getSpaExternalUrlWithDomain(),
             })
             .then((response) => {
                 const session = this.sessionFromDict(response);
-                this.session$.next(session);
-                result.next(session);
-                result.complete();
-                sessionStorage.removeItem('redirectUri');
-            })
-            .catch((error) => result.error(error));
+                sessionStorage.removeItem(UserService.OIDC_RESTORE_ROUTE_KEY);
+                return session;
+            });
 
-        return result.asObservable();
+        return sess;
     }
 
     saveSettingInLocalStorage(keyValue: string, setting: string): void {
-        localStorage.setItem(PATH_PREFIX + keyValue, setting);
+        localStorage.setItem(this.getBaseHrefBasedKey() + keyValue, setting);
     }
 
     getSettingFromLocalStorage(keyValue: string): string | null {
-        return localStorage.getItem(PATH_PREFIX + keyValue);
+        return localStorage.getItem(this.getBaseHrefBasedKey() + keyValue);
     }
 
     /**
@@ -396,14 +440,14 @@ export class UserService {
 
     protected saveSessionInBrowser(session: Session | undefined): void {
         if (session) {
-            localStorage.setItem(PATH_PREFIX + 'session', session.sessionToken);
+            localStorage.setItem(this.getBaseHrefBasedKey() + UserService.SESSION_KEY_SUFFIX, session.sessionToken);
         } else {
-            localStorage.removeItem(PATH_PREFIX + 'session');
+            localStorage.removeItem(this.getBaseHrefBasedKey() + UserService.SESSION_KEY_SUFFIX);
         }
     }
 
     protected restoreSessionFromBrowser(): Promise<Session> {
-        const sessionToken = localStorage.getItem(PATH_PREFIX + 'session') ?? '';
+        const sessionToken = localStorage.getItem(this.getBaseHrefBasedKey() + UserService.SESSION_KEY_SUFFIX) ?? '';
 
         return this.createSessionWithToken(sessionToken);
     }

projects/dashboards/esg-indicator-service/src/app/app.config.ts

@@ -1,5 +1,5 @@
 import {ApplicationConfig, inject, provideAppInitializer} from '@angular/core';
-import {provideRouter, withHashLocation} from '@angular/router';
+import {provideRouter} from '@angular/router';
 import {provideAnimations} from '@angular/platform-browser/animations';
 
 import {routes} from './app.routes';
@@ -10,7 +10,7 @@ import {provideHttpClient} from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
     providers: [
-        provideRouter(routes, withHashLocation()),
+        provideRouter(routes),
         provideAnimations(),
         provideHttpClient(),
         provideAppInitializer(() => {

projects/dashboards/esg-indicator-service/src/app/login/login.component.ts

@@ -53,11 +53,11 @@ export class LoginComponent implements OnInit {
     }
 
     async onInit(): Promise<void> {
-        const redirectUri = window.location.href.replace(/\/signin$/, '/dashboard');
+        const restoreRoute = 'dashboard';
 
         // check if OIDC login is enabled
         try {
-            const idr = await this.userService.oidcInit(redirectUri);
+            const idr = await this.userService.oidcInit(restoreRoute);
             this.oidcUrl = idr.url;
             this.formStatus.set(FormStatus.Oidc);
         } catch {