fix: dialog lazy loading

security-c4po-angular/src/app/app-routing.module.ts

@@ -2,17 +2,18 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import {HomeComponent} from './home/home.component';
 import {AuthGuardService} from '../shared/guards/auth-guard.service';
+import {Route} from '@shared/models/route.enum';
 
-export const START_PAGE = 'projects';
+export const START_PAGE = Route.PROJECT_OVERVIEW;
 
 const routes: Routes = [
   {
-    path: 'home',
+    path: Route.HOME,
     component: HomeComponent,
     canActivate: [AuthGuardService]
   },
   {
-    path: 'projects',
+    path: Route.PROJECT_OVERVIEW,
     loadChildren: () => import('./project-overview').then(mod => mod.ProjectOverviewModule),
     canActivate: [AuthGuardService]
   },

security-c4po-angular/src/app/app.module.ts

@@ -6,7 +6,13 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {
   NbLayoutModule,
   NbToastrModule,
-  NbIconModule, NbCardModule, NbButtonModule, NbDialogService, NbDialogModule, NbSelectModule
+  NbIconModule,
+  NbCardModule,
+  NbButtonModule,
+  NbSelectModule,
+  NbThemeModule,
+  NbOverlayContainerAdapter,
+  NbDialogModule,
 } from '@nebular/theme';
 import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
 import {HttpClient, HttpClientModule} from '@angular/common/http';
@@ -25,11 +31,11 @@ import {HomeModule} from './home/home.module';
 import {KeycloakService} from 'keycloak-angular';
 import {httpInterceptorProviders} from '@shared/interceptors';
 import {FlexLayoutModule} from '@angular/flex-layout';
-import {DialogService} from '@shared/services/dialog-service/dialog.service';
-import {ConfirmDialogModule} from '@shared/modules/confirm-dialog/confirm-dialog.module';
-import {OverlayContainer} from '@angular/cdk/overlay';
 import {NgxsLoggerPluginModule} from '@shared/stores/plugins/store-logger-plugin';
 import {ProjectState} from '@shared/stores/project-state/project-state';
+import {CustomOverlayContainer} from '@shared/modules/custom-overlay-container.component';
+import {DialogService} from '@shared/services/dialog-service/dialog.service';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -40,16 +46,19 @@ import {ProjectState} from '@shared/stores/project-state/project-state';
     AppRoutingModule,
     RouterModule,
     NbLayoutModule,
-    NbDialogModule.forRoot(),
     NbCardModule,
     NbIconModule,
     NbButtonModule,
+    NbDialogModule.forRoot(),
+    NbThemeModule.forRoot(),
     NbToastrModule.forRoot(), // used for notification service
+    FlexLayoutModule,
+    ReactiveFormsModule,
+    FormsModule,
     FontAwesomeModule,
     BrowserAnimationsModule,
     ThemeModule.forRoot(),
     NbSelectModule,
-    ConfirmDialogModule,
     NgxsModule.forRoot([SessionState, ProjectState], {developmentMode: !environment.production}),
     NgxsLoggerPluginModule.forRoot({developmentMode: !environment.production}),
     HttpClientModule,
@@ -62,7 +71,6 @@ import {ProjectState} from '@shared/stores/project-state/project-state';
     }),
     HeaderModule,
     HomeModule,
-    FlexLayoutModule
   ],
   providers: [
     HttpClient,
@@ -72,12 +80,11 @@ import {ProjectState} from '@shared/stores/project-state/project-state';
       multi: true,
       deps: [KeycloakService]
     },
-    OverlayContainer,
     KeycloakService,
     httpInterceptorProviders,
     NotificationService,
     DialogService,
-    NbDialogService,
+    {provide: NbOverlayContainerAdapter, useClass: CustomOverlayContainer}
   ],
   bootstrap: [
     AppComponent

security-c4po-angular/src/app/common-app.module.ts

@@ -6,9 +6,9 @@ import {HttpClient, HttpClientModule} from '@angular/common/http';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {FlexLayoutModule, FlexModule} from '@angular/flex-layout';
 import {MomentModule} from 'ngx-moment';
-import {NotificationService} from '../shared/services/notification.service';
-import {NbToastrModule} from '@nebular/theme';
-import {ThemeModule} from '../assets/@theme/theme.module';
+import {NotificationService} from '@shared/services/notification.service';
+import {NbOverlayContainerAdapter, NbSpinnerModule, NbToastrModule} from '@nebular/theme';
+import {ThemeModule} from '@assets/@theme/theme.module';
 import {LoadingSpinnerComponent} from '@shared/widgets/loading-spinner/loading-spinner.component';
 
 export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
@@ -22,6 +22,7 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
   imports: [
     CommonModule,
     NbToastrModule, // used for notification service
+    NbSpinnerModule,
     FontAwesomeModule,
     FlexLayoutModule,
     ThemeModule.forRoot(),
@@ -37,7 +38,8 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
   ],
   providers: [
     HttpClient,
-    NotificationService
+    NotificationService,
+    NbOverlayContainerAdapter
   ],
   exports: [
     LoadingSpinnerComponent,

security-c4po-angular/src/app/objective-overview/objective-overview.module.ts

@@ -20,18 +20,18 @@ import {RouterModule} from '@angular/router';
 import {FormsModule} from '@angular/forms';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {FlexLayoutModule} from '@angular/flex-layout';
-import {LoadingSpinnerComponent} from '@shared/widgets/loading-spinner/loading-spinner.component';
 import {CommonAppModule} from '../common-app.module';
+import {ObjectiveOverviewRoutingModule} from './objective-overview-routing.module';
 
 @NgModule({
   declarations: [
     ObjectiveHeaderComponent,
     ObjectiveCategoriesComponent,
     ObjectiveTableComponent,
-    // LoadingSpinnerComponent
   ],
   imports: [
     CommonModule,
+    CommonAppModule,
     NbLayoutModule,
     NbCardModule,
     NbMenuModule.forRoot(),
@@ -50,13 +50,12 @@ import {CommonAppModule} from '../common-app.module';
     FontAwesomeModule,
     FlexLayoutModule,
     NbActionsModule,
-        CommonAppModule
+    ObjectiveOverviewRoutingModule
   ],
   exports: [
     ObjectiveHeaderComponent,
     ObjectiveCategoriesComponent,
     ObjectiveTableComponent,
-    // LoadingSpinnerComponent
   ]
 })
 export class ObjectiveOverviewModule {

security-c4po-angular/src/app/pentest/pentest-header/pentest-header.component.ts

@@ -53,7 +53,8 @@ export class PentestHeaderComponent implements OnInit {
   }
 
   onClickRouteBack(): void {
-    this.router.navigate([Route.PENTEST_OVERVIEW])
+    // ToDo: Change to Objective Overview after routing is fixed
+    this.router.navigate([Route.PROJECT_OVERVIEW])
       .then(
         () => {
           this.store.dispatch(new ChangePentest(null));

security-c4po-angular/src/app/pentest/pentest.module.ts

@@ -27,6 +27,7 @@ import {FindingDialogModule} from '@shared/modules/finding-dialog/finding-dialog
   ],
   imports: [
     CommonModule,
+    CommonAppModule,
     RouterModule.forChild([{
       path: '',
       component: PentestComponent
@@ -40,7 +41,6 @@ import {FindingDialogModule} from '@shared/modules/finding-dialog/finding-dialog
     StatusTagModule,
     NbTabsetModule,
     NbTreeGridModule,
-    CommonAppModule,
     SeverityTagModule,
     FindingDialogModule
   ]

security-c4po-angular/src/app/project-overview/project-overview-routing.module.ts

@@ -5,7 +5,7 @@ import {ProjectOverviewComponent} from './project-overview.component';
 const routes: Routes = [
   {
     path: '',
-    component: ProjectOverviewComponent
+    component: ProjectOverviewComponent,
   },
   {
     path: 'id',

security-c4po-angular/src/app/project-overview/project-overview.component.ts

@@ -24,10 +24,10 @@ export class ProjectOverviewComponent implements OnInit {
   projects$: BehaviorSubject<Project[]> = new BehaviorSubject<Project[]>([]);
 
   constructor(
-    private readonly projectService: ProjectService,
-    private readonly dialogService: DialogService,
-    private readonly projectDialogService: ProjectDialogService,
-    private readonly notificationService: NotificationService) {
+    private readonly notificationService: NotificationService,
+    private projectService: ProjectService,
+    private dialogService: DialogService,
+    private projectDialogService: ProjectDialogService) {
   }
 
   ngOnInit(): void {
@@ -37,8 +37,8 @@ export class ProjectOverviewComponent implements OnInit {
   loadProjects(): void {
     this.projectService.getProjects()
       .pipe(
-        untilDestroyed(this),
-        tap(() => this.loading$.next(true))
+        tap(() => this.loading$.next(true)),
+        untilDestroyed(this)
       )
       .subscribe({
         next: (projects: Project[]) => {
@@ -72,8 +72,8 @@ export class ProjectOverviewComponent implements OnInit {
         this.loadProjects();
         this.notificationService.showPopup('project.popup.save.success', PopupType.SUCCESS);
       },
-      error: error => {
-        console.error(error);
+      error: err => {
+        console.error(err);
         this.notificationService.showPopup('project.popup.save.failed', PopupType.FAILURE);
       }
     });

security-c4po-angular/src/app/project-overview/project-overview.module.ts

@@ -2,31 +2,32 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {ProjectOverviewComponent} from './project-overview.component';
 import {ProjectOverviewRoutingModule} from './project-overview-routing.module';
-import {NbButtonModule, NbCardModule, NbProgressBarModule, NbSpinnerModule} from '@nebular/theme';
+import {NbButtonModule, NbCardModule, NbProgressBarModule} from '@nebular/theme';
 import {FlexLayoutModule} from '@angular/flex-layout';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {TranslateModule} from '@ngx-translate/core';
 import {DateTimeFormatPipe} from '@shared/pipes/date-time-format.pipe';
 import {ProjectDialogModule} from '@shared/modules/project-dialog/project-dialog.module';
 import {CommonAppModule} from '../common-app.module';
+import {ConfirmDialogModule} from '@shared/modules/confirm-dialog/confirm-dialog.module';
 
 @NgModule({
   declarations: [
     ProjectOverviewComponent,
-    DateTimeFormatPipe,
+    DateTimeFormatPipe
   ],
   imports: [
     CommonModule,
+    CommonAppModule,
     NbCardModule,
     NbButtonModule,
-    NbSpinnerModule,
     NbProgressBarModule,
     ProjectOverviewRoutingModule,
     FlexLayoutModule,
     FontAwesomeModule,
     TranslateModule,
-    ProjectDialogModule,
-    CommonAppModule
+    ConfirmDialogModule,
+    ProjectDialogModule
   ]
 })
 export class ProjectOverviewModule {

security-c4po-angular/src/app/project-overview/project/project.module.ts

@@ -5,9 +5,9 @@ import {ProjectComponent} from './project.component';
 import {NbCardModule, NbLayoutModule} from '@nebular/theme';
 import {FlexLayoutModule} from '@angular/flex-layout';
 import {TranslateModule} from '@ngx-translate/core';
-import {ProjectDialogModule} from '@shared/modules/project-dialog/project-dialog.module';
 import {ProjectRoutingModule} from './project-routing.module';
 import {ObjectiveOverviewModule} from '../../objective-overview';
+import {CommonAppModule} from '../../common-app.module';
 
 @NgModule({
   declarations: [
@@ -15,6 +15,7 @@ import {ObjectiveOverviewModule} from '../../objective-overview';
   ],
   imports: [
     CommonModule,
+    CommonAppModule,
     NbCardModule,
     NbLayoutModule,
     RouterModule.forChild([{
@@ -24,7 +25,6 @@ import {ObjectiveOverviewModule} from '../../objective-overview';
     ProjectRoutingModule,
     TranslateModule,
     FlexLayoutModule,
-    ProjectDialogModule,
     ObjectiveOverviewModule
   ],
   exports: [

security-c4po-angular/src/assets/@theme/styles/_dialog.scss

@@ -1,5 +1,5 @@
 .dialog-header {
-  height: 6.75vh;
+  height: 6.75vh !important;
   font-size: 1.5rem;
 
   .dialog-headline {
@@ -8,11 +8,12 @@
 }
 
 .dialog-body {
-  font-size: 1.15rem;
+  font-size: 1rem;
 }
 
 .dialog-button {
-  width: 5.25rem;
-  height: 2.5rem;
-  // font-size: 0.85rem;
+  width: 5.75rem !important;
+  height: 2.15rem !important;
+  text-transform: none !important;
+  font-size: 0.85rem;
 }

security-c4po-angular/src/shared/models/comment.model.ts

@@ -1,5 +1,4 @@
 import {v4 as UUID} from 'uuid';
-import {Severity} from '@shared/models/severity.enum';
 
 export class Comment {
   id?: string;

security-c4po-angular/src/shared/modules/confirm-dialog/confirm-dialog.component.scss

@@ -1 +1,4 @@
 @import "../../../assets/@theme/styles/_dialog.scss";
+
+* {
+}

security-c4po-angular/src/shared/modules/confirm-dialog/confirm-dialog.module.ts

@@ -1,9 +1,10 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {ConfirmDialogComponent} from '@shared/modules/confirm-dialog/confirm-dialog.component';
-import {NbButtonModule, NbCardModule} from '@nebular/theme';
+import {NbButtonModule, NbCardModule, NbLayoutModule, NbSelectModule} from '@nebular/theme';
 import {FlexLayoutModule} from '@angular/flex-layout';
 import {TranslateModule} from '@ngx-translate/core';
+import {CommonAppModule} from '../../../app/common-app.module';
 
 @NgModule({
   declarations: [
@@ -11,13 +12,17 @@ import {TranslateModule} from '@ngx-translate/core';
   ],
   imports: [
     CommonModule,
+    CommonAppModule,
     NbCardModule,
     NbButtonModule,
     FlexLayoutModule,
-    TranslateModule
+    TranslateModule,
+    NbLayoutModule,
+    NbSelectModule
   ],
   entryComponents: [
     ConfirmDialogComponent
   ]
 })
-export class ConfirmDialogModule { }
+export class ConfirmDialogModule {
+}

security-c4po-angular/src/shared/modules/custom-overlay-container.component.ts

@@ -0,0 +1,26 @@
+import {Inject, Injectable, OnDestroy} from '@angular/core';
+import {DOCUMENT} from '@angular/common';
+import {Platform} from '@angular/cdk/platform';
+import {NbOverlayContainerAdapter} from '@nebular/theme';
+
+@Injectable()
+export class CustomOverlayContainer extends NbOverlayContainerAdapter implements OnDestroy {
+  // tslint:disable-next-line:variable-name
+  constructor(@Inject(DOCUMENT) document: Document, _platform: Platform) {
+    super(document, _platform);
+  }
+
+  protected _createContainer(): void {
+    super._createContainer();
+    if (!this._containerElement) {
+      return;
+    }
+    const parent = document.body;
+    parent.appendChild(this._containerElement);
+  }
+
+  ngOnDestroy(): void {
+    super.ngOnDestroy();
+    this._containerElement = null;
+  }
+}

security-c4po-angular/src/shared/modules/finding-dialog/finding-dialog.component.html

@@ -79,7 +79,7 @@
             </label>
             <nb-select class="severities" placeholder="{{formArray[1].placeholder | translate}} *"
                        [(selected)]="formArray[1].controlsConfig[0].value"
-                       status="{{getSeverityFillStatus(formArray[1].controlsConfig[0].value)}}" filled>
+                       shape="round" status="{{getSeverityFillStatus(formArray[1].controlsConfig[0].value)}}" filled>
               <nb-option *ngFor="let severity of severityTexts" [value]="severity.value">
                 {{ severity.translationText | translate }}
               </nb-option>

security-c4po-angular/src/shared/modules/finding-dialog/finding-dialog.module.ts

@@ -2,11 +2,21 @@ import { NgModule } from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {FindingDialogComponent} from '@shared/modules/finding-dialog/finding-dialog.component';
 import {DialogService} from '@shared/services/dialog-service/dialog.service';
-import {NbButtonModule, NbCardModule, NbDialogService, NbFormFieldModule, NbInputModule, NbSelectModule, NbTagModule} from '@nebular/theme';
+import {
+  NbButtonModule,
+  NbCardModule,
+  NbDialogModule,
+  NbDialogService,
+  NbFormFieldModule,
+  NbInputModule,
+  NbSelectModule,
+  NbTagModule
+} from '@nebular/theme';
 import {FindingDialogService} from '@shared/modules/finding-dialog/service/finding-dialog.service';
 import {FlexLayoutModule} from '@angular/flex-layout';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {TranslateModule} from '@ngx-translate/core';
+import {CommonAppModule} from '../../../app/common-app.module';
 import {ReactiveFormsModule} from '@angular/forms';
 
 @NgModule({
@@ -15,6 +25,7 @@ import {ReactiveFormsModule} from '@angular/forms';
   ],
   imports: [
     CommonModule,
+    CommonAppModule,
     NbCardModule,
     NbButtonModule,
     NbFormFieldModule,
@@ -22,17 +33,16 @@ import {ReactiveFormsModule} from '@angular/forms';
     FlexLayoutModule,
     FontAwesomeModule,
     TranslateModule,
-        ReactiveFormsModule,
     NbSelectModule,
-        NbTagModule
+    NbTagModule,
+    ReactiveFormsModule,
   ],
   providers: [
-    DialogService,
     FindingDialogService,
-    NbDialogService
   ],
   entryComponents: [
     FindingDialogComponent
   ]
 })
-export class FindingDialogModule { }
+export class FindingDialogModule {
+}

security-c4po-angular/src/shared/modules/finding-dialog/service/finding-dialog.service.spec.ts

@@ -14,7 +14,7 @@ describe('FindingDialogService', () => {
       imports: [
         HttpClientTestingModule,
         BrowserAnimationsModule,
-        NbDialogModule.forRoot()
+        NbDialogModule.forChild()
       ],
       providers: [
         {provide: FindingDialogService, useClass: FindingDialogServiceMock},

security-c4po-angular/src/shared/modules/project-dialog/project-dialog.module.ts

@@ -1,13 +1,13 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {ProjectDialogComponent} from '@shared/modules/project-dialog/project-dialog.component';
-import {NbButtonModule, NbCardModule, NbDialogService, NbFormFieldModule, NbInputModule} from '@nebular/theme';
+import {NbButtonModule, NbCardModule, NbFormFieldModule, NbInputModule} from '@nebular/theme';
 import {FlexLayoutModule} from '@angular/flex-layout';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {TranslateModule} from '@ngx-translate/core';
-import {DialogService} from '@shared/services/dialog-service/dialog.service';
-import {ReactiveFormsModule} from '@angular/forms';
 import {ProjectDialogService} from '@shared/modules/project-dialog/service/project-dialog.service';
+import {CommonAppModule} from '../../../app/common-app.module';
+import {ReactiveFormsModule} from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -15,6 +15,7 @@ import {ProjectDialogService} from '@shared/modules/project-dialog/service/proje
   ],
   imports: [
     CommonModule,
+    CommonAppModule,
     NbCardModule,
     NbButtonModule,
     NbFormFieldModule,
@@ -22,12 +23,10 @@ import {ProjectDialogService} from '@shared/modules/project-dialog/service/proje
     FlexLayoutModule,
     FontAwesomeModule,
     TranslateModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
   ],
   providers: [
-    DialogService,
     ProjectDialogService,
-    NbDialogService
   ],
   entryComponents: [
     ProjectDialogComponent

security-c4po-angular/src/shared/modules/project-dialog/service/project-dialog.service.spec.ts

@@ -14,7 +14,7 @@ describe('ProjectDialogService', () => {
       imports: [
         HttpClientTestingModule,
         BrowserAnimationsModule,
-        NbDialogModule.forRoot()
+        NbDialogModule.forChild()
       ],
       providers: [
         {provide: ProjectDialogService, useClass: ProjectDialogServiceMock},

security-c4po-angular/src/shared/services/dialog-service/dialog.service.spec.ts

@@ -14,7 +14,7 @@ describe('DialogService', () => {
       imports: [
         HttpClientTestingModule,
         BrowserAnimationsModule,
-        NbDialogModule.forRoot()
+        NbDialogModule.forChild()
       ],
       providers: [
         {provide: DialogService, useClass: DialogServiceMock},