Merge branch 'main' of github.com:geo-engine/geoengine-ui into geoengine-2-rework

Author: jdroenner

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

@@ -3,6 +3,7 @@ import {RouterModule, Routes} from '@angular/router';
 import {NavigationComponent} from './navigation/navigation.component';
 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 = [
     {path: '', redirectTo: 'navigation', pathMatch: 'full'},
@@ -14,6 +15,10 @@ const routes: Routes = [
         data: {loginRedirect: '/navigation'},
         canActivate: [BackendAvailableGuard, CanRegisterGuard],
     },
+    {
+        path: 'oidc-popup',
+        component: OidcPopupComponent,
+    },
 ];
 
 @NgModule({
@@ -23,6 +28,7 @@ const routes: Routes = [
             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,
+            // enableTracing: true, // TODO: remove after debugging
         }),
     ],
     exports: [RouterModule],

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

@@ -23,11 +23,13 @@ export class AppComponent implements OnInit {
         await firstValueFrom(this.userService.getSessionOrUndefinedStream());
 
         if (window.location.search.length > 0) {
+            const hashLocation = window.location.hash.slice(1); // remove the leading '#'
+
             // 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;
             window.history.replaceState(null, '', window.location.pathname);
-            this.location.go('/', search);
+            this.location.go(hashLocation, search);
         }
 
         this.router.initialNavigation();

projects/manager/src/app/oidc-popup/oidc-popup.component.html

@@ -0,0 +1,16 @@
+@if (isError()) {
+    <div class="error">An error occurred during authentication.</div>
+} @else {
+    <div class="info">You have been redirected here after authentication. You can close this window.</div>
+}
+
+@if (isDebugMode) {
+    <table class="debug">
+        @for (param of params() | keyvalue; track param.key) {
+            <tr>
+                <td>{{ param.key }}</td>
+                <td>{{ param.value }}</td>
+            </tr>
+        }
+    </table>
+}

projects/manager/src/app/oidc-popup/oidc-popup.component.scss

@@ -0,0 +1,9 @@
+div {
+    padding: 1rem;
+    text-align: justify;
+}
+
+.debug {
+    margin: 1rem;
+    font-family: monospace;
+}

projects/manager/src/app/oidc-popup/oidc-popup.component.ts

@@ -0,0 +1,44 @@
+import {AfterViewInit, Component, computed, effect, inject, isDevMode, signal} from '@angular/core';
+import {AppConfig} from '../app-config.service';
+import {KeyValuePipe, Location} from '@angular/common';
+import {ActivatedRoute, Router} from '@angular/router';
+
+export interface OidcPopupMessage {
+    oidcParams: [string, string][];
+}
+
+@Component({
+    selector: 'geoengine-oidc-popup',
+    templateUrl: './oidc-popup.component.html',
+    styleUrls: ['./oidc-popup.component.scss'],
+    imports: [KeyValuePipe],
+})
+export class OidcPopupComponent implements AfterViewInit {
+    protected readonly config = inject<AppConfig>(AppConfig);
+
+    readonly params = signal<Map<string, string>>(new Map());
+
+    protected readonly location = inject(Location);
+    protected readonly router = inject(Router);
+    protected readonly route = inject(ActivatedRoute);
+
+    readonly isError = computed(() => this.params().has('error'));
+    readonly isDebugMode = isDevMode();
+
+    constructor() {
+        effect(() => {
+            const params = this.params();
+            if (params.size === 0) return;
+
+            window.postMessage({oidcParams: Array.from(params.entries())} as OidcPopupMessage, '*');
+        });
+    }
+
+    ngAfterViewInit(): void {
+        const params = new Map<string, string>();
+        Object.entries(this.route.snapshot.queryParams).forEach(([key, value]) => {
+            params.set(key, value as string);
+        });
+        this.params.set(params);
+    }
+}

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

@@ -43,14 +43,11 @@
         <mat-form-field>
             <mat-label>Listing priority</mat-label>
             <input matInput formControlName="priority" [errorStateMatcher]="errorStateMatcher" />
-            @if (priority.hasError('min')) {
-                <mat-error> Priority must be at least -32768 </mat-error>
-            }
-            @if (priority.hasError('max')) {
-                <mat-error> Priority must not exceed 32767 </mat-error>
+            @if (priority.hasError('outOfRange')) {
+                <mat-error>Priority must be between -32768 and 32767</mat-error>
             }
             @if (priority.hasError('notInteger')) {
-                <mat-error> Priority must be a number </mat-error>
+                <mat-error>Priority must be a number</mat-error>
             }
         </mat-form-field>
     </mat-card-content>

projects/manager/src/app/providers/provider-editor/forms/aruna/aruna.component.ts

@@ -19,6 +19,7 @@ import {MatInput, MatLabel} from '@angular/material/input';
 import {CdkTextareaAutosize} from '@angular/cdk/text-field';
 import {MatTooltip} from '@angular/material/tooltip';
 import {ErrorStateMatcher} from '@angular/material/core';
+import {priorityValidator} from '../util/validators';
 
 @Component({
     selector: 'geoengine-manager-aruna-editor-form',
@@ -78,11 +79,7 @@ export class ArunaComponent {
                 Validators.max(31536000),
                 this.integerValidator(),
             ]),
-            priority: this.fb.nonNullable.control<number | null | undefined>(0, [
-                Validators.min(-32768),
-                Validators.max(32767),
-                this.integerValidator(),
-            ]),
+            priority: this.fb.nonNullable.control<number | null | undefined>(0, [priorityValidator()]),
         });
 
         effect(() => {

projects/manager/src/app/providers/provider-editor/forms/util/id-input/id-input.component.html

@@ -1,5 +1,5 @@
 <mat-form-field>
     <mat-label>Id</mat-label>
-    <input matInput readonly [formControl]="idControl" [disabled]="disabled" (blur)="onTouched()" />
-    <button mat-button (click)="generate()">Generate</button>
+    <input matInput readonly [formControl]="idControl" (blur)="onTouched()" />
+    <button mat-button (click)="generate()" [disabled]="isDisabled()">Generate</button>
 </mat-form-field>

projects/manager/src/app/providers/provider-editor/forms/util/id-input/id-input.component.ts

@@ -1,9 +1,11 @@
-import {AfterViewInit, Component, forwardRef} from '@angular/core';
+import {AfterViewInit, Component, effect, forwardRef, signal} from '@angular/core';
 import {v4 as uuidv4} from 'uuid';
 import {ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule} from '@angular/forms';
 import {MatFormField} from '@angular/material/form-field';
 import {MatInput, MatLabel} from '@angular/material/input';
 import {MatButton} from '@angular/material/button';
+import {UUID} from '@geoengine/common';
+import {toSignal} from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'geoengine-manager-id-input',
@@ -18,10 +20,21 @@ import {MatButton} from '@angular/material/button';
     ],
     imports: [ReactiveFormsModule, MatFormField, MatInput, MatButton, MatLabel],
 })
-export class IdInputComponent implements AfterViewInit, ControlValueAccessor {
-    idControl = new FormControl<string>('');
+export class IdInputComponent implements ControlValueAccessor, AfterViewInit {
+    readonly idControl = new FormControl<UUID>('', {nonNullable: true});
+
+    readonly isDisabled = signal(false);
+
+    constructor() {
+        const valueChanged = toSignal<UUID | undefined>(this.idControl.valueChanges, {initialValue: undefined});
+
+        effect(() => {
+            const newValue = valueChanged();
+            if (!newValue) return;
+            this.onChange(newValue);
+        });
+    }
 
-    protected disabled = false;
     protected onTouched: () => void = () => {
         /* do nothing */
     };
@@ -34,24 +47,19 @@ export class IdInputComponent implements AfterViewInit, ControlValueAccessor {
         if (!this.idControl.value) {
             this.generate();
         }
-
-        this.idControl.valueChanges.subscribe((value) => {
-            if (value) {
-                this.onChange(value);
-            }
-        });
     }
 
     generate(): void {
         const newId = uuidv4();
         this.idControl.patchValue(newId);
-        this.onChange(newId);
     }
 
-    writeValue(value: string): void {
-        if (value) {
-            this.idControl.patchValue(value, {emitEvent: false});
+    writeValue(value: unknown): void {
+        if (typeof value !== 'string') {
+            throw new Error('Value must be a string');
         }
+
+        this.idControl.patchValue(value, {emitEvent: false});
     }
 
     registerOnChange(fn: (value: string) => void): void {
@@ -63,7 +71,7 @@ export class IdInputComponent implements AfterViewInit, ControlValueAccessor {
     }
 
     setDisabledState(isDisabled: boolean): void {
-        this.disabled = isDisabled;
+        this.isDisabled.set(isDisabled);
         if (isDisabled) {
             this.idControl.disable();
         } else {

projects/manager/src/app/providers/provider-editor/forms/util/validators.ts

@@ -0,0 +1,17 @@
+import {AbstractControl, ValidationErrors, ValidatorFn} from '@angular/forms';
+
+export const priorityValidator =
+    (): ValidatorFn =>
+    (control: AbstractControl): ValidationErrors | null => {
+        const value = Number(control.value);
+
+        if (!Number.isInteger(value)) {
+            return {notInteger: true};
+        }
+
+        if (value < -32768 || value > 32767) {
+            return {outOfRange: true};
+        }
+
+        return null;
+    };