feat: embed manager in GIS

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

@@ -69,7 +69,7 @@ export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
 
     readonly FormStatus = FormStatus;
 
-    loginRedirect = input('/map');
+    readonly loginRedirect = input('/map');
 
     formStatus$ = new BehaviorSubject<FormStatus>(FormStatus.Loading);
     canRegister = this.config.USER.REGISTRATION_AVAILABLE;
@@ -94,7 +94,10 @@ export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
     }
 
     ngOnInit(): void {
-        const redirectUri = window.location.href.replace(/\/signin$/, this.loginRedirect());
+        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
         this.userService.oidcInit(redirectUri).subscribe(
@@ -180,7 +183,7 @@ export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
         );
     }
 
-    redirectToMainView(): void {
-        this.router.navigate([this.loginRedirect()]);
+    async redirectToMainView(): Promise<void> {
+        await this.router.navigate([this.loginRedirect()]);
     }
 }

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

@@ -53,7 +53,7 @@ export class RegisterComponent implements AfterViewInit {
 
     PASSWORD_MIN_LENGTH = 8;
 
-    loginRedirect = input('/map');
+    readonly loginRedirect = input('/map');
 
     loading$ = new BehaviorSubject<boolean>(false);
     notLoading$ = this.loading$.pipe(map((loading) => !loading));

projects/core/src/lib/util/components/not-found/not-found-page.component.ts

@@ -24,7 +24,7 @@ import {MatButton} from '@angular/material/button';
 export class NotFoundPageComponent {
     private router = inject(Router);
 
-    goBack(): void {
-        this.router.navigate(['/']);
+    async goBack(): Promise<void> {
+        await this.router.navigate(['/']);
     }
 }

projects/gis/src/app/app-config.service.ts

@@ -11,8 +11,13 @@ interface Components {
     };
 }
 
+interface Routes {
+    readonly MANAGER: boolean;
+}
+
 interface AppConfigStructure extends CoreConfigStructure {
     readonly COMPONENTS: Components;
+    readonly ROUTES: Routes;
 }
 
 const APP_CONFIG_DEFAULTS = mergeDeepOverrideLists(DEFAULT_CORE_CONFIG, {
@@ -33,6 +38,9 @@ const APP_CONFIG_DEFAULTS = mergeDeepOverrideLists(DEFAULT_CORE_CONFIG, {
         LOGO_ALT_URL: 'assets/geoengine-white.svg',
         PAGE_TITLE: 'Geo Engine',
     },
+    ROUTES: {
+        MANAGER: true,
+    },
 }) as AppConfigStructure;
 
 @Injectable()
@@ -43,6 +51,10 @@ export class AppConfig extends CoreConfig {
         return this.config.COMPONENTS;
     }
 
+    get ROUTES(): Routes {
+        return this.config.ROUTES;
+    }
+
     override load(): Promise<void> {
         return super.load(APP_CONFIG_DEFAULTS);
     }

projects/gis/src/app/app-routing.module.ts

@@ -1,8 +1,14 @@
-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
+import {inject, NgModule} from '@angular/core';
+import {ActivatedRouteSnapshot, CanActivateFn, RouterModule, RouterStateSnapshot, Routes} from '@angular/router';
 import {BackendStatusPageComponent, NotFoundPageComponent} from '@geoengine/core';
 import {MainComponent} from './main/main.component';
 import {BackendAvailableGuard, CanRegisterGuard, LoginComponent, LogInGuard, RegisterComponent} from '@geoengine/common';
+import {AppConfig} from './app-config.service';
+
+export const routeToManager: CanActivateFn = (_route: ActivatedRouteSnapshot, _state: RouterStateSnapshot) => {
+    const config = inject(AppConfig);
+    return config.ROUTES.MANAGER;
+};
 
 const routes: Routes = [
     {path: '', redirectTo: 'map', pathMatch: 'full'},
@@ -11,6 +17,12 @@ const routes: Routes = [
     {path: 'register', component: RegisterComponent, canActivate: [BackendAvailableGuard, CanRegisterGuard]},
     {path: '404', component: NotFoundPageComponent},
     {path: 'backend-status', component: BackendStatusPageComponent},
+    // manager
+    {
+        path: 'manager',
+        loadChildren: () => import('@geoengine/manager').then((m) => (m as {routes: (subdir?: string) => Routes}).routes('/manager')),
+        canActivate: [routeToManager, BackendAvailableGuard],
+    },
     // fallback to not found page
     {path: '**', redirectTo: '404', pathMatch: 'full'},
 ];
@@ -21,6 +33,7 @@ const routes: Routes = [
             useHash: true,
             initialNavigation: 'disabled', // navigation is enabled in app component after removing query params before the hash
             onSameUrlNavigation: 'reload', // for reload the page and checking if the user is logged in again
+            bindToComponentInputs: true,
         }),
     ],
     providers: [BackendAvailableGuard, LogInGuard, CanRegisterGuard],

projects/gis/src/app/app.component.ts

@@ -36,8 +36,14 @@ export class AppComponent implements OnInit {
             // remove the query parameters before the hash from the url because they are not part of the app and cannot be removed later on
             // services can get the original query parameters from the `URLSearchParams` in their constructor which is called before the routing is initialized.
             const search = window.location.search;
+
+            let path = '/';
+            if (window.location.hash.length > 0) {
+                path = window.location.hash.substring(1); // remove the leading #
+            }
+
             window.history.replaceState(null, '', window.location.pathname);
-            this.location.go('/', search);
+            this.location.go(path, search);
         }
 
         this.router.initialNavigation();
@@ -68,7 +74,7 @@ export class AppComponent implements OnInit {
 
     private setupLogoutCallback(): void {
         this.userService.setLogoutCallback(() => {
-            this.router.navigate(['signin']);
+            void this.router.navigate(['signin']);
         });
     }
 }

projects/gis/src/main.ts

@@ -16,11 +16,13 @@ import {provideAnimations} from '@angular/platform-browser/animations';
 import {BrowserModule, bootstrapApplication} from '@angular/platform-browser';
 import {AppRoutingModule} from './app/app-routing.module';
 import {AppComponent} from './app/app.component';
+import {AppConfig as ManagerAppConfig} from '@geoengine/manager';
 
 bootstrapApplication(AppComponent, {
     providers: [
         importProvidersFrom(BrowserModule, AppRoutingModule, CoreModule),
         AppConfig,
+        ManagerAppConfig,
         {
             provide: CoreConfig,
             useExisting: AppConfig,
@@ -31,9 +33,9 @@ bootstrapApplication(AppComponent, {
         },
         provideAppInitializer(() => {
             const initializerFn = (
-                (config: AppConfig) => (): Promise<void> =>
-                    config.load()
-            )(inject(AppConfig));
+                (config: AppConfig, managerConfig: ManagerAppConfig) => (): Promise<void> =>
+                    Promise.all([config.load(), managerConfig.load()]).then(() => void 0)
+            )(inject(AppConfig), inject(ManagerAppConfig));
             return initializerFn();
         }),
         LayoutService,

projects/manager/src/app/app-routing.module.ts

@@ -5,14 +5,14 @@ import {LogInGuard} from './util/guards/log-in.guard';
 import {BackendAvailableGuard, CanRegisterGuard, LoginComponent, RegisterComponent} from '@geoengine/common';
 import {OidcPopupComponent} from './oidc-popup/oidc-popup.component';
 
-const routes: Routes = [
+export const routes: (subdir: string) => Routes = (subdir) => [
     {path: '', redirectTo: 'navigation', pathMatch: 'full'},
-    {path: 'navigation', component: NavigationComponent, canActivate: [LogInGuard]},
-    {path: 'signin', component: LoginComponent, data: {loginRedirect: '/navigation'}},
+    {path: 'navigation', component: NavigationComponent, data: {logoutNavigation: subdir + '/signin'}, canActivate: [LogInGuard]},
+    {path: 'signin', component: LoginComponent, data: {loginRedirect: subdir + '/navigation'}},
     {
         path: 'register',
         component: RegisterComponent,
-        data: {loginRedirect: '/navigation'},
+        data: {loginRedirect: subdir + '/navigation'},
         canActivate: [BackendAvailableGuard, CanRegisterGuard],
     },
     {
@@ -23,7 +23,7 @@ const routes: Routes = [
 
 @NgModule({
     imports: [
-        RouterModule.forRoot(routes, {
+        RouterModule.forRoot(routes(''), {
             useHash: true,
             initialNavigation: 'disabled', // navigation is enabled in app component after removing query params before the hash
             onSameUrlNavigation: 'reload', // for reload the page and checking if the user is logged in again

projects/manager/src/app/navigation/navigation.component.ts

@@ -1,4 +1,4 @@
-import {Component, inject} from '@angular/core';
+import {Component, inject, input} from '@angular/core';
 import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
 import {Observable} from 'rxjs';
 import {map, shareReplay} from 'rxjs/operators';
@@ -42,6 +42,8 @@ export class NavigationComponent {
     private router = inject(Router);
     readonly config = inject<AppConfig>(AppConfig);
 
+    readonly logoutNavigation = input('/signin');
+
     isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
         map((result) => result.matches),
         shareReplay(),
@@ -51,9 +53,9 @@ export class NavigationComponent {
 
     selectedType: NavigationType = NavigationType.Datasets;
 
-    logout(): void {
+    async logout(): Promise<void> {
         this.userService.logout();
-        this.router.navigate(['/signin']);
+        await this.router.navigate([this.logoutNavigation()]);
     }
 
     toggleSelection(selection: NavigationType): void {

projects/manager/src/app/providers/provider-editor/provider-editor.component.html

@@ -1,26 +1,28 @@
-@if (provider) {
+@if (provider.value(); as provider) {
     <div class="container">
         <mat-card class="top">
             <mat-card-header>
                 <mat-card-title>{{ providerListing().name }}</mat-card-title>
                 <mat-card-subtitle>Type: {{ provider.type }}, ID: {{ providerListing().id }}</mat-card-subtitle>
             </mat-card-header>
             <mat-card-content style="white-space: pre-wrap">
-                @if (readonly) {
+                @if (isReadonly.value()) {
                     <mat-hint>You do not have permission to edit this provider</mat-hint>
                 }
                 @if (provider) {
                     <geoengine-manager-provider-input
-                        (updated)="setUpdatedDefinition($event)"
-                        [providerType]="providerType"
+                        (updated)="updatedDefinition.set($event)"
+                        [providerType]="providerType()"
                         [provider]="provider"
-                        [readonly]="readonly"
+                        [readonly]="isReadonly.value()"
                     />
                 }
             </mat-card-content>
             <div class="actions">
-                <button mat-raised-button color="primary" [disabled]="!updatedDefinition" (click)="submitUpdate()">Save changes</button>
-                <button mat-raised-button color="warn" [disabled]="readonly" (click)="delete()">Delete provider</button>
+                <button mat-raised-button color="primary" [disabled]="isReadonly.value() || !updatedDefinition()" (click)="submitUpdate()">
+                    Save changes
+                </button>
+                <button mat-raised-button color="warn" [disabled]="isReadonly.value()" (click)="delete()">Delete provider</button>
             </div>
         </mat-card>
         <mat-card>