feat: create api routes for /admin

.github/workflows/main.yml

@@ -29,7 +29,7 @@ jobs:
       - name: "Run npm install"
         run: |
           npm install
-          npx nx run-many --all --target=lint
+          npx nx run-many --all --target=lint --skip-nx-cache
         # npx nx run-many --all --target=test --configuration=ci
         env:
           TZ: Europe/Zurich

apps/dateAdapter/src/app/app.component.ts

@@ -111,7 +111,7 @@ export class AppComponent {
   `,
   styleUrls: [],
 })
-export class HeaderComponent<D> implements OnInit {
+export class HeaderComponent implements OnInit {
   constructor(
     private _calendar: MatCalendar<JDNConvertibleCalendar>,
     private _dateAdapter: DateAdapter<JDNConvertibleCalendar>,

apps/dsp-app/src/app/app-routing.module.ts

@@ -92,7 +92,8 @@ const routes: Routes = [
             },
             {
                 path: `${RouteConstants.list}/:${RouteConstants.listParameter}`,
-                component: ListComponent
+                component: ListComponent,
+                canActivate: [AuthGuard]
             },
             {
                 path: RouteConstants.settings,

apps/dsp-app/src/app/app.module.ts

@@ -1,7 +1,11 @@
 /* eslint-disable max-len */
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
-import { HttpClient, HttpClientModule } from '@angular/common/http';
+import {
+    HTTP_INTERCEPTORS,
+    HttpClient,
+    HttpClientModule,
+} from '@angular/common/http';
 import { ErrorHandler, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
@@ -13,7 +17,14 @@
 import { MatJDNConvertibleCalendarDateAdapterModule } from '@dasch-swiss/jdnconvertiblecalendardateadapter';
 import { PdfViewerModule } from 'ng2-pdf-viewer';
 import { ColorPickerModule } from 'ngx-color-picker';
-import { AppConfigService } from '@dasch-swiss/vre/shared/app-config';
+import {
+    AppConfigService,
+    buildTagFactory,
+    BuildTagToken,
+    DspApiConfigToken,
+    DspAppConfigToken,
+    DspInstrumentationToken,
+} from '@dasch-swiss/vre/shared/app-config';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { ConfirmationDialogComponent } from './main/action/confirmation-dialog/confirmation-dialog.component';
@@ -22,11 +33,6 @@
 import { SelectedResourcesComponent } from './main/action/selected-resources/selected-resources.component';
 import { SortButtonComponent } from './main/action/sort-button/sort-button.component';
 import { CookiePolicyComponent } from './main/cookie-policy/cookie-policy.component';
-import {
-    DspApiConfigToken,
-    DspAppConfigToken,
-    DspInstrumentationToken,
-} from '@dasch-swiss/vre/shared/app-config';
 import { DialogHeaderComponent } from './main/dialog/dialog-header/dialog-header.component';
 import { DialogComponent } from './main/dialog/dialog.component';
 import { AdminImageDirective } from './main/directive/admin-image/admin-image.directive';
@@ -148,21 +154,19 @@
 import { ProjectTileComponent } from './system/project-tile/project-tile.component';
 import { CommentFormComponent } from './workspace/resource/values/comment-form/comment-form.component';
 import { DataModelsComponent } from './project/data-models/data-models.component';
 import { ResourceClassPropertyInfoComponent } from '@dsp-app/src/app/project/ontology/resource-class-info/resource-class-property-info/resource-class-property-info.component';
 import { AppLoggingService } from '@dasch-swiss/vre/shared/app-logging';
-import {
-    buildTagFactory,
-    BuildTagToken,
-} from '@dasch-swiss/vre/shared/app-config';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { AppDatePickerComponent } from '@dasch-swiss/vre/shared/app-date-picker';
 import { AdvancedSearchComponent } from '@dasch-swiss/vre/advanced-search';
 import { NgxsStoragePluginModule } from '@ngxs/storage-plugin';
 import { apiConnectionTokenProvider } from './providers/api-connection-token.provider';
 import { NgxsStoreModule } from '@dasch-swiss/vre/shared/app-state';
-import { AppProgressIndicatorComponent } from "@dasch-swiss/vre/shared/app-progress-indicator";
-import {AppStringLiteralComponent} from "@dasch-swiss/vre/shared/app-string-literal";
+import { AppProgressIndicatorComponent } from '@dasch-swiss/vre/shared/app-progress-indicator';
+import { AppStringLiteralComponent } from '@dasch-swiss/vre/shared/app-string-literal';
 import { IsFalsyPipe } from './main/pipes/isFalsy.piipe';
+import { AuthGuardComponent } from '@dsp-app/src/app/main/guard/auth-guard.component';
+import { AuthInterceptor } from './main/http-interceptors/auth-interceptor';
 
 // translate: AoT requires an exported function for factories
 export function httpLoaderFactory(httpClient: HttpClient) {
@@ -180,6 +184,7 @@
         AppComponent,
         ArchiveComponent,
         AudioComponent,
+        AuthGuardComponent,
         AvTimelineComponent,
         DescriptionComponent,
         BooleanValueComponent,
@@ -360,6 +365,11 @@
             useClass: AppErrorHandler,
             deps: [AppLoggingService],
         },
+        {
+            provide: HTTP_INTERCEPTORS,
+            useClass: AuthInterceptor,
+            multi: true,
+        },
     ],
     bootstrap: [AppComponent],
 })

apps/dsp-app/src/app/main/action/confirmation-dialog/confirmation-dialog.component.ts

@@ -31,7 +31,6 @@ export class ConfirmationDialogComponent {
     }
 
     onConfirmClick(): void {
-        const z = 0;
         const payload = new ConfirmationDialogValueDeletionPayload();
         payload.confirmed = true;
         payload.deletionComment = this.confirmationMessageComponent.comment

apps/dsp-app/src/app/main/guard/auth-guard.component.ts

@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { RouteConstants } from '@dasch-swiss/vre/shared/app-config';
+
+// empty component used as a redirect when the user logs in
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: ''
+})
+export class AuthGuardComponent {
+  constructor(private router: Router) {
+    this.router.navigate([RouteConstants.home], { replaceUrl: true });
+  }
+}

apps/dsp-app/src/app/main/guard/auth.guard.ts

@@ -1,75 +1,58 @@
-import { ChangeDetectionStrategy, Component, Inject, Injectable } from '@angular/core';
-import { CanActivate, Router } from '@angular/router';
+import { Inject, Injectable } from '@angular/core';
+import { CanActivate } from '@angular/router';
 import { DOCUMENT } from '@angular/common';
 import { Actions, ofActionCompleted, Select, Store } from '@ngxs/store';
-import { Observable } from 'rxjs';
-import { concatMap, map, switchMap } from 'rxjs/operators';
+import { Observable, of } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
 import { ReadUser } from '@dasch-swiss/dsp-js';
 import { AuthService } from '@dasch-swiss/vre/shared/app-session';
-import { RouteConstants } from '@dasch-swiss/vre/shared/app-config';
-import { CurrentPageSelectors, SetUserAction, UserSelectors } from '@dasch-swiss/vre/shared/app-state';
-
+import {
+    CurrentPageSelectors,
+    SetUserAction,
+    UserSelectors,
+} from '@dasch-swiss/vre/shared/app-state';
 
 @Injectable({
-    providedIn: 'root'
+    providedIn: 'root',
 })
 export class AuthGuard implements CanActivate {
-
-    isLoggedIn$: Observable<boolean> = this._authService.isLoggedIn$;
-
     @Select(UserSelectors.user) user$: Observable<ReadUser>;
 
     constructor(
         private store: Store,
         private _authService: AuthService,
         private actions$: Actions,
         @Inject(DOCUMENT) private document: Document
-    ) {
-    }
+    ) {}
 
     canActivate(): Observable<boolean> {
         return this.user$.pipe(
             switchMap((user) => {
-                if (!user) {
-                    if (this.store.selectSnapshot(UserSelectors.isLoading)) {
-                        return this.actions$.pipe(
-                            ofActionCompleted(SetUserAction),
-                            concatMap(() => {
-                                return this.isLoggedIn$;
-                            })
-                        );
-                    } else {
-                        return this.store.dispatch(new SetUserAction(user)).pipe(
-                            concatMap(() => {
-                                return this.isLoggedIn$;
-                            })
-                        );
-                    }
+                if (user) return of(null);
+
+                if (this.store.selectSnapshot(UserSelectors.isLoading)) {
+                    return this.actions$.pipe(ofActionCompleted(SetUserAction));
+                } else {
+                    return this.store.dispatch(new SetUserAction(user));
                 }
-                return this.isLoggedIn$;
             }),
+            switchMap(() => this._authService.isLoggedIn$),
             map((isLoggedIn) => {
                 if (isLoggedIn) {
                     return true;
+                } else {
+                    this._goToHomePage();
+                    return false;
                 }
-                this.document.defaultView.location.href =
-                    `${this.document.defaultView.location.href}?` +
-                    `returnLink=${this.store.selectSnapshot(
-                        CurrentPageSelectors.loginReturnLink
-                    )}`;
-                return false;
             })
         );
     }
-}
 
-// empty component used as a redirect when the user logs in
-@Component({
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    template: ''
-})
-export class AuthGuardComponent {
-    constructor(private router: Router) {
-        this.router.navigate([RouteConstants.home], { replaceUrl: true });
+    private _goToHomePage() {
+        this.document.defaultView.location.href =
+            `${this.document.defaultView.location.href}?` +
+            `returnLink=${this.store.selectSnapshot(
+                CurrentPageSelectors.loginReturnLink
+            )}`;
     }
 }

apps/dsp-app/src/app/main/http-interceptors/auth-interceptor.ts

@@ -0,0 +1,33 @@
+import {
+    HttpHandler,
+    HttpInterceptor,
+    HttpRequest,
+} from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { AuthService } from '@dasch-swiss/vre/shared/app-session';
+import { AppConfigService } from '@dasch-swiss/vre/shared/app-config';
+
+@Injectable()
+export class AuthInterceptor implements HttpInterceptor {
+    constructor(
+        private _authService: AuthService,
+        private _appConfigService: AppConfigService
+    ) {}
+
+    intercept(req: HttpRequest<any>, next: HttpHandler) {
+        if (!req.url.startsWith(this._appConfigService.dspApiConfig.apiUrl)) {
+            return next.handle(req);
+        }
+
+        const authToken = this._authService.getAccessToken();
+        if (!authToken) return next.handle(req);
+
+        const authReq = req.clone({
+            headers: req.headers.set(
+                'Authorization',
+                `Bearer ${this._authService.getAccessToken()}`
+            ),
+        });
+        return next.handle(authReq);
+    }
+}

apps/dsp-app/src/app/project/data-models/data-models.component.ts

@@ -34,7 +34,7 @@ export class DataModelsComponent extends ProjectBase implements OnInit {
         if (!uuid) {
             return of({} as OntologyMetadata[]);
         }
-        
+
         return this._store.select(OntologiesSelectors.projectOntologies)
             .pipe(
                 map(ontologies => {
@@ -66,9 +66,6 @@ export class DataModelsComponent extends ProjectBase implements OnInit {
 
     ngOnInit(): void {
         super.ngOnInit();
-        const uuid = this._route.parent.snapshot.params.uuid;
-        //TODO Soft or Hard loading?
-        //this._store.dispatch(new LoadListsInProjectAction(uuid)); 
     }
 
     trackByFn = (index: number, item: ListNodeInfo) => `${index}-${item.id}`;