feat: upgraded angular version from 12 to 15

.github/workflows/c4po-ci.yml

@@ -7,7 +7,7 @@
 # To get a newer version, you will need to update the SHA.
 # You can also reference a tag or branch, but the action may change without warning.
 
-name: "Security C4PO CI"
+name: "CI: Clean Build C4PO"
 
 on:
   pull_request:
@@ -20,7 +20,7 @@ env:
   REPORTING_PATH: security-c4po-reporting
   CFG_PATH: security-c4po-cfg
 
-  ANGULAR_CLI_VERSION: 13
+  ANGULAR_CLI_VERSION: 15
 
 
 jobs:
@@ -34,10 +34,10 @@ jobs:
       - name: "Check out code"
         uses: actions/checkout@v3
 
-      - name: "Use Node.js 14.x"
+      - name: "Use Node.js 16.x"
         uses: actions/setup-node@v1
         with:
-          node-version: '14.x'
+          node-version: '16.x'
           cache: 'npm'
           
       - name: "Install NPM dependencies"

.github/workflows/c4po-release.yml

@@ -7,7 +7,7 @@
 # To get a newer version, you will need to update the SHA.
 # You can also reference a tag or branch, but the action may change without warning.
 
-name: "Publish C4PO Docker Hub"
+name: "CD: Publish C4PO to Docker Hub"
 
 on:
   push:
@@ -30,10 +30,10 @@ jobs:
       - name: "Check out code"
         uses: actions/checkout@v3
 
-      - name: "Use Node.js 14.x"
+      - name: "Use Node.js 16.x"
         uses: actions/setup-node@v1
         with:
-          node-version: '14.x'
+          node-version: '16.x'
           cache: 'npm'
           
       - name: "Install NPM dependencies"

README.md

@@ -1,5 +1,7 @@
 ![workflow_badge](https://github.com/Marcel-Haag/security-c4po/actions/workflows/c4po-ci.yml/badge.svg?branch=main)
 ![workflow_badge](https://github.com/Marcel-Haag/security-c4po/actions/workflows/c4po-release.yml/badge.svg?branch=main)
+[![OWASP Incubator](https://img.shields.io/badge/owasp-incubator%20project-3267fe.svg)](https://owasp.org/other_projects/)<!-- @IGNORE PREVIOUS: link -->
+
 
 ![alt architecture](./wiki/repository-owasp-guide-c4po.png)
 
@@ -63,7 +65,7 @@ You can reach the application by entering http://localhost:4200 in you browser.
 ### Technical Requirements
 * Docker / Docker-compose
 * OpenJDK 11
-* Node 14.15.1 / npm 6.14.8
+* Node 16.20.2 / npm 8.19.4
 * MongoDB 4.4.6
 
 ### Tools

security-c4po-angular/.browserslistrc

@@ -1,18 +0,0 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-
-# For the full list of supported browsers by the Angular framework, please see:
-# https://angular.io/guide/browser-support
-
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
-
-last 1 Chrome version
-last 1 Firefox version
-last 2 Edge major versions
-last 2 Safari major versions
-last 2 iOS major versions
-Firefox ESR
-not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
-not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

security-c4po-angular/.gitignore

@@ -44,3 +44,6 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+# Chache
+.angular/*

security-c4po-angular/angular.json

@@ -155,7 +155,6 @@
       }
     }
   },
-  "defaultProject": "security-c4po-angular",
   "cli": {
     "analytics": false
   }

security-c4po-angular/package.json

@@ -11,67 +11,67 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^11.2.14",
+    "@angular/animations": "^15.2.10",
-    "@angular/cdk": "^12.2.7",
+    "@angular/cdk": "^15.2.9",
-    "@angular/common": "^12.2.16",
+    "@angular/common": "^15.2.10",
-    "@angular/compiler": "~12.2.16",
+    "@angular/compiler": "^15.2.10",
-    "@angular/core": "~12.2.16",
+    "@angular/core": "^15.2.10",
-    "@angular/flex-layout": "^11.0.0-beta.33",
+    "@angular/flex-layout": "^15.0.0-beta.42",
-    "@angular/forms": "~12.2.16",
+    "@angular/forms": "^15.2.10",
-    "@angular/localize": "^12.2.16",
+    "@angular/localize": "^15.2.10",
-    "@angular/platform-browser": "~12.2.16",
+    "@angular/platform-browser": "^15.2.10",
-    "@angular/platform-browser-dynamic": "~12.2.16",
+    "@angular/platform-browser-dynamic": "^15.2.10",
-    "@angular/router": "~12.2.16",
+    "@angular/router": "^15.2.10",
-    "@fortawesome/angular-fontawesome": "^0.8.2",
+    "@fortawesome/angular-fontawesome": "^0.10.0",
     "@fortawesome/fontawesome-common-types": "^0.2.36",
     "@fortawesome/fontawesome-svg-core": "^6.3.0",
     "@fortawesome/free-regular-svg-icons": "^6.3.0",
     "@fortawesome/free-solid-svg-icons": "^6.3.0",
     "@glidejs/glide": "^3.6.0",
-    "@nebular/eva-icons": "^8.0.0",
+    "@nebular/eva-icons": "^11.0.1",
-    "@nebular/theme": "^8.0.0",
+    "@nebular/theme": "^11.0.1",
     "@ngneat/until-destroy": "^9.2.3",
-    "@ngx-translate/core": "^13.0.0",
+    "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
     "@ngxs/storage-plugin": "^3.7.3",
     "@ngxs/store": "^3.7.3",
     "chart.js": "^4.2.1",
+    "deep-equal": "^2.0.5",
     "eva-icons": "^1.1.3",
     "font-awesome": "^4.7.0",
     "i18n-iso-countries": "^6.8.0",
     "jwt-decode": "^3.1.2",
-    "keycloak-angular": "^8.3.0",
+    "keycloak-angular": "^13.1.0",
-    "keycloak-js": "^14.0.0",
+    "keycloak-js": "^18.0.0",
     "moment": "^2.29.1",
     "moment-timezone": "latest",
-    "ng-mocks": "^13.4.2",
+    "ng-mocks": "^14.12.2",
-    "ngx-glide": "^12.0.0",
+    "ngx-glide": "^15.0.0",
     "ngx-moment": "^5.0.0",
-    "ngx-take-until-destroy": "^5.4.0",
+    "ngx-translate-testing": "^6.0.0",
-    "ngx-translate-testing": "^5.2.0",
     "roboto-fontface": "^0.10.0",
-    "rxjs": "^6.6.7",
+    "rxjs": "^7.8.0",
     "tslib": "^2.3.1",
     "uuid": "^8.3.1",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-builders/jest": "14.0.0",
+    "@angular-builders/jest": "^15.0.0",
-    "@angular-devkit/build-angular": "~12.2.16",
+    "@angular-devkit/build-angular": "^15.2.11",
-    "@angular/cli": "^12.2.16",
+    "@angular/cli": "^15.2.11",
-    "@angular/compiler-cli": "~12.2.16",
+    "@angular/compiler-cli": "^15.2.10",
     "@babel/preset-typescript": "^7.18.6",
-    "@briebug/jest-schematic": "^3.0.0",
+    "@briebug/jest-schematic": "^2.1.1",
     "@fortawesome/fontawesome-free": "^6.4.0",
     "@schematics/angular": "^10.2.4",
     "@types/jest": "28.1.1",
     "@types/node": "^12.20.47",
     "codelyzer": "^6.0.2",
     "jest": "28.1.1",
-    "protractor": "~7.0.0",
+    "protractor": "^7.0.0",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
-    "typescript": "~4.3.5"
+    "typescript": "~4.9.5"
   },
   "resolutions": {
     "webpack": "^5.0.0"

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

@@ -38,7 +38,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
+  imports: [RouterModule.forRoot(routes, {})],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

security-c4po-angular/src/app/header/header.component.scss

@@ -1,4 +1,4 @@
-@import '~@nebular/theme/styles/global/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
 @import "../../assets/@theme/styles/_variables.scss";
 
 .header {

security-c4po-angular/src/app/login/login.component.scss

@@ -1,4 +1,4 @@
-@import '~@nebular/theme/styles/theming';
+@import '@nebular/theme/styles/theming';
 
 $login-width: 24em;
 $input-width: 16rem;

security-c4po-angular/src/app/login/login.component.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {AbstractControl, FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
 import {Store} from '@ngxs/store';
 import {NotificationService, PopupType} from '@shared/services/toaster-service/notification.service';
@@ -29,7 +29,7 @@ export class LoginComponent implements OnInit {
   version: string;
 
   // form control elements
-  loginFormGroup: FormGroup;
+  loginFormGroup: UntypedFormGroup;
   loginUsernameCtrl: AbstractControl;
   loginPasswordCtrl: AbstractControl;
 
@@ -39,7 +39,7 @@ export class LoginComponent implements OnInit {
 
   formCtrlStatus = FieldStatus.BASIC;
 
-  constructor(private fb: FormBuilder,
+  constructor(private fb: UntypedFormBuilder,
               private router: Router,
               private store: Store,
               private readonly httpClient: HttpClient,

security-c4po-angular/src/app/objective-overview/objective-categories/objective-categories.component.ts

@@ -3,10 +3,9 @@ import {NbMenuItem, NbMenuService} from '@nebular/theme';
 import {Store} from '@ngxs/store';
 import {ChangeCategory} from '@shared/stores/project-state/project-state.actions';
 import {Category} from '@shared/models/category.model';
-import {untilDestroyed} from 'ngx-take-until-destroy';
 import {TranslateService} from '@ngx-translate/core';
 import {ProjectState} from '@shared/stores/project-state/project-state';
-import {UntilDestroy} from '@ngneat/until-destroy';
+import {UntilDestroy, untilDestroyed} from '@ngneat/until-destroy';
 
 @Component({
   selector: 'app-objective-categories',

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

@@ -11,10 +11,8 @@ import {ProjectDialogComponent} from '@shared/modules/project-dialog/project-dia
 import {ProjectDialogService} from '@shared/modules/project-dialog/service/project-dialog.service';
 import {Router} from '@angular/router';
 import {Store} from '@ngxs/store';
-import {FormControl} from '@angular/forms';
+import {UntypedFormControl} from '@angular/forms';
 import {ProjectState} from '@shared/stores/project-state/project-state';
-import {Pentest} from '@shared/models/pentest.model';
-import {Route} from '@shared/models/route.enum';
 import {SetAvailableProjects} from '@shared/stores/project-state/project-state.actions';
 
 @UntilDestroy()
@@ -32,7 +30,7 @@ export class ProjectOverviewComponent implements OnInit {
   allProjects$: BehaviorSubject<Project[]> = new BehaviorSubject<Project[]>([]);
 
   // Search
-  projectSearch: FormControl;
+  projectSearch: UntypedFormControl = new UntypedFormControl();
   protected filter$: Observable<string>;
   allProjectsCount$: BehaviorSubject<any> = new BehaviorSubject<any>({allProjectsCount: 0});
 
@@ -53,18 +51,18 @@ export class ProjectOverviewComponent implements OnInit {
       untilDestroyed(this)
     ).subscribe({
       next: (projects: Project[]) => {
+        // tslint:disable-next-line:no-console
         if (projects && projects.length === 0) {
           this.loadProjects();
-        } else {
         }
+        // Setup Search Form
+        this.projectSearch = new UntypedFormControl({value: '', disabled: projects?.length === 0});
+        this.setFilterObserverForProjects();
       },
       error: err => {
         console.error(err);
-      }
+      },
     });
-    // Setup Search
-    this.projectSearch = new FormControl({value: '', disabled: this.allProjects$.getValue() === []});
-    this.setFilterObserverForProjects();
   }
 
   loadProjects(): void {

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

@@ -2,7 +2,7 @@
 @import 'themes';
 
 // framework component themes (styles tied to theme variables)
-@import '~@nebular/theme/styles/globals';
+@import '@nebular/theme/styles/globals';
 
 // loading progress bar theme
 @import './pace.theme';
@@ -10,8 +10,8 @@
 @import './variables';
 
 // loading glide
-@import "~@glidejs/glide/src/assets/sass/glide.core";
+@import "@glidejs/glide/src/assets/sass/glide.core";
-@import "~@glidejs/glide/src/assets/sass/glide.theme";
+@import "@glidejs/glide/src/assets/sass/glide.theme";
 
 * {
   font-family: Roboto, "Helvetica Neue", sans-serif;

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

@@ -1,7 +1,7 @@
 // @nebular theming framework
-@import '~@nebular/theme/styles/theming';
+@import '@nebular/theme/styles/theming';
 // @nebular out of the box themes
-@import '~@nebular/theme/styles/themes';
+@import '@nebular/theme/styles/themes';
 // enable custom css properties
 $nb-enable-css-custom-properties: true;
 

security-c4po-angular/src/shared/modules/comment-dialog/comment-dialog.component.ts

@@ -1,5 +1,5 @@
 import {ChangeDetectionStrategy, Component, Inject, OnInit} from '@angular/core';
-import {FormBuilder, FormGroup} from '@angular/forms';
+import {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
 import {GenericDialogData, GenericFormFieldConfig} from '@shared/models/generic-dialog-data';
 import * as FA from '@fortawesome/free-solid-svg-icons';
 import deepEqual from 'deep-equal';
@@ -21,7 +21,7 @@ import {CommentService} from '@shared/services/api/comment.service';
 @UntilDestroy()
 export class CommentDialogComponent implements OnInit {
   // form control elements
-  commentFormGroup: FormGroup;
+  commentFormGroup: UntypedFormGroup;
   formArray: GenericFormFieldConfig[];
 
   dialogData: GenericDialogData;
@@ -32,7 +32,7 @@ export class CommentDialogComponent implements OnInit {
 
   constructor(
     @Inject(NB_DIALOG_CONFIG) private data: GenericDialogData,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     protected dialogRef: NbDialogRef<CommentDialogComponent>,
     private commentService: CommentService,
     private readonly notificationService: NotificationService,
@@ -46,7 +46,7 @@ export class CommentDialogComponent implements OnInit {
     this.commentFormGroup = this.generateFormCreationFieldArray();
   }
 
-  generateFormCreationFieldArray(): FormGroup {
+  generateFormCreationFieldArray(): UntypedFormGroup {
     this.formArray = Object.values(this.data.form);
     const config = this.formArray?.reduce((accumulator: {}, currentValue: GenericFormFieldConfig) => ({
       ...accumulator,

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

@@ -11,29 +11,26 @@ import {ReactiveFormsModule} from '@angular/forms';
 
 
 @NgModule({
-  declarations: [
+    declarations: [
-    CommentDialogComponent
+        CommentDialogComponent
-  ],
+    ],
-  imports: [
+    imports: [
-    CommonModule,
+        CommonModule,
-    CommonAppModule,
+        CommonAppModule,
-    NbCardModule,
+        NbCardModule,
-    NbButtonModule,
+        NbButtonModule,
-    NbFormFieldModule,
+        NbFormFieldModule,
-    NbInputModule,
+        NbInputModule,
-    FlexLayoutModule,
+        FlexLayoutModule,
-    FontAwesomeModule,
+        FontAwesomeModule,
-    TranslateModule,
+        TranslateModule,
-    NbSelectModule,
+        NbSelectModule,
-    NbTagModule,
+        NbTagModule,
-    ReactiveFormsModule,
+        ReactiveFormsModule,
-  ],
+    ],
-  providers: [
+    providers: [
-    CommentDialogService,
+        CommentDialogService,
-  ],
+    ]
-  entryComponents: [
-    CommentDialogComponent
-  ]
 })
 export class CommentDialogModule {
 }

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

@@ -7,22 +7,19 @@ import {TranslateModule} from '@ngx-translate/core';
 import {CommonAppModule} from '../../../app/common-app.module';
 
 @NgModule({
-  declarations: [
+    declarations: [
-    ConfirmDialogComponent
+        ConfirmDialogComponent
-  ],
+    ],
-  imports: [
+    imports: [
-    CommonModule,
+        CommonModule,
-    CommonAppModule,
+        CommonAppModule,
-    NbCardModule,
+        NbCardModule,
-    NbButtonModule,
+        NbButtonModule,
-    FlexLayoutModule,
+        FlexLayoutModule,
-    TranslateModule,
+        TranslateModule,
-    NbLayoutModule,
+        NbLayoutModule,
-    NbSelectModule
+        NbSelectModule
-  ],
+    ]
-  entryComponents: [
-    ConfirmDialogComponent
-  ]
 })
 export class ConfirmDialogModule {
 }

security-c4po-angular/src/shared/modules/export-report-dialog/export-report-dialog.component.ts

@@ -1,5 +1,5 @@
 import {Component, Inject, OnInit} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {UntypedFormControl} from '@angular/forms';
 import {GenericDialogData} from '@shared/models/generic-dialog-data';
 import {NB_DIALOG_CONFIG, NbDialogRef} from '@nebular/theme';
 import {ReportingService} from '@shared/services/reporting/reporting.service';
@@ -35,8 +35,8 @@ export class ExportReportDialogComponent implements OnInit {
   // HTML
   readonly fa = FA;
   // form control elements
-  exportReportFormatControl = new FormControl(ExportFormatOptions.PDF);
+  exportReportFormatControl = new UntypedFormControl(ExportFormatOptions.PDF);
-  exportReportLanguageControl = new FormControl(LanguageOptions.ENGLISH);
+  exportReportLanguageControl = new UntypedFormControl(LanguageOptions.ENGLISH);
   // exports
   exportFormats = ExportFormatOptions;
   exportLanguages = LanguageOptions;

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

@@ -14,9 +14,9 @@ import {LoadingBarModule} from '@shared/widgets/loading-bar/loading-bar.module';
 import {VersionTagModule} from '@shared/widgets/version-tag/version-tag.module';
 
 @NgModule({
-  declarations: [
+    declarations: [
-    ExportReportDialogComponent
+        ExportReportDialogComponent
-  ],
+    ],
     imports: [
         CommonModule,
         CommonAppModule,
@@ -33,12 +33,9 @@ import {VersionTagModule} from '@shared/widgets/version-tag/version-tag.module';
         LoadingBarModule,
         VersionTagModule
     ],
-  providers: [
+    providers: [
-    ExportReportDialogService,
+        ExportReportDialogService,
-    ReportingService
+        ReportingService
-  ],
+    ]
-  entryComponents: [
-    ExportReportDialogComponent
-  ]
 })
 export class ExportReportDialogModule { }

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

@@ -1,5 +1,5 @@
 import {ChangeDetectionStrategy, Component, Inject, OnInit} from '@angular/core';
-import {FormBuilder, FormGroup} from '@angular/forms';
+import {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
 import {GenericDialogData, GenericFormFieldConfig} from '@shared/models/generic-dialog-data';
 import {NB_DIALOG_CONFIG, NbDialogRef, NbTagComponent} from '@nebular/theme';
 import deepEqual from 'deep-equal';
@@ -24,7 +24,7 @@ export class FindingDialogComponent implements OnInit {
 
   constructor(
     @Inject(NB_DIALOG_CONFIG) private data: GenericDialogData,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     protected dialogRef: NbDialogRef<FindingDialogComponent>,
     private findingService: FindingService,
     private readonly notificationService: NotificationService,
@@ -33,7 +33,7 @@ export class FindingDialogComponent implements OnInit {
   ) {
   }
   // form control elements
-  findingFormGroup: FormGroup;
+  findingFormGroup: UntypedFormGroup;
   formArray: GenericFormFieldConfig[];
 
   dialogData: GenericDialogData;
@@ -61,7 +61,7 @@ export class FindingDialogComponent implements OnInit {
     this.findingFormGroup.controls['findingAffectedUrls'].reset('');
   }
 
-  generateFormCreationFieldArray(): FormGroup {
+  generateFormCreationFieldArray(): UntypedFormGroup {
     this.formArray = Object.values(this.data.form);
     const config = this.formArray?.reduce((accumulator: {}, currentValue: GenericFormFieldConfig) => ({
       ...accumulator,

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

@@ -17,29 +17,26 @@ import {CommonAppModule} from '../../../app/common-app.module';
 import {ReactiveFormsModule} from '@angular/forms';
 
 @NgModule({
-  declarations: [
+    declarations: [
-    FindingDialogComponent
+        FindingDialogComponent
-  ],
+    ],
-  imports: [
+    imports: [
-    CommonModule,
+        CommonModule,
-    CommonAppModule,
+        CommonAppModule,
-    NbCardModule,
+        NbCardModule,
-    NbButtonModule,
+        NbButtonModule,
-    NbFormFieldModule,
+        NbFormFieldModule,
-    NbInputModule,
+        NbInputModule,
-    FlexLayoutModule,
+        FlexLayoutModule,
-    FontAwesomeModule,
+        FontAwesomeModule,
-    TranslateModule,
+        TranslateModule,
-    NbSelectModule,
+        NbSelectModule,
-    NbTagModule,
+        NbTagModule,
-    ReactiveFormsModule,
+        ReactiveFormsModule,
-  ],
+    ],
-  providers: [
+    providers: [
-    FindingDialogService,
+        FindingDialogService,
-  ],
+    ]
-  entryComponents: [
-    FindingDialogComponent
-  ]
 })
 export class FindingDialogModule {
 }

security-c4po-angular/src/shared/modules/profile-settings/password-input-from/password-input-from.component.ts

@@ -1,9 +1,9 @@
 import {Component, EventEmitter, forwardRef, Input, OnInit, Output} from '@angular/core';
 import {
   AbstractControl,
-  FormBuilder,
+  UntypedFormBuilder,
-  FormControl,
+  UntypedFormControl,
-  FormGroup,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
@@ -37,7 +37,7 @@ import * as FA from '@fortawesome/free-solid-svg-icons';
 })
 export class PasswordInputFromComponent implements OnInit {
 
-  constructor(private fb: FormBuilder) { }
+  constructor(private fb: UntypedFormBuilder) { }
   // Emits true if password is strong
   @Output() passwordStrong: EventEmitter<boolean> = new EventEmitter();
   // Handle erros
@@ -48,7 +48,7 @@ export class PasswordInputFromComponent implements OnInit {
   // show the criteria of the new password
   showDetails = false;
 
-  passwordFormGroup: FormGroup;
+  passwordFormGroup: UntypedFormGroup;
   // form control elements
   oldPasswordCtrl: AbstractControl;
   newPasswordCtrl: AbstractControl;
@@ -62,7 +62,7 @@ export class PasswordInputFromComponent implements OnInit {
    * tests value of control for empty-spaces
    * @param control FormControl
    */
-  static containsBlankSpaceValidator(control: FormControl): ValidationErrors | null {
+  static containsBlankSpaceValidator(control: UntypedFormControl): ValidationErrors | null {
     const containsEmptySpacesRegex: RegExp = new RegExp(/\s+/);
     return containsEmptySpacesRegex.test(control.value) ? {passwordContainsBlankSpace: true} : null;
   }

security-c4po-angular/src/shared/modules/profile-settings/password-input-from/util/password-error-state-matcher.ts

@@ -1,4 +1,4 @@
-import {FormControl, FormGroupDirective, NgForm} from '@angular/forms';
+import {UntypedFormControl, FormGroupDirective, NgForm} from '@angular/forms';
 import {BehaviorSubject} from 'rxjs';
 
 export class PasswordErrorStateMatcher {
@@ -12,7 +12,7 @@ export class PasswordErrorStateMatcher {
   /**
    * @return true if new and confirm password do not match.
    */
-  isErrorState(ctrl: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(ctrl: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const passwordCtrl = form.control.get('newPassword');
     this.passwordsDoNotMatch = passwordCtrl.value !== ctrl.value;
     return this.passwordsDoNotMatch || this.userServiceError.value;
@@ -25,7 +25,7 @@ export class OldPasswordEmptyError {
   /**
    * @return true if old password is empty and new password is not.
    */
-  isErrorState(ctrl: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(ctrl: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const passwordCtrl = form.control.get('newPassword');
     this.oldPasswordEmpty = passwordCtrl.value.length !== 0 && ctrl.value.length === 0;
     return this.oldPasswordEmpty;

security-c4po-angular/src/shared/modules/profile-settings/profile-settings.component.ts

@@ -2,7 +2,7 @@ import {Component, Input, OnInit, Output} from '@angular/core';
 import {NbDialogRef} from '@nebular/theme';
 import * as FA from '@fortawesome/free-solid-svg-icons';
 import {TranslateService} from '@ngx-translate/core';
-import {AbstractControl, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
+import {AbstractControl, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
 import {ProfilePasswordFormData} from '@shared/modules/profile-settings/password-input-from/util/profile-password-form-data.model';
 import {Patterns} from '@shared/modules/profile-settings/patterns';
 import {LanguageOptions} from '@shared/modules/export-report-dialog/export-report-dialog.component';
@@ -39,7 +39,7 @@ export class ProfileSettingsComponent implements OnInit {
   readonly USER_IMG = 'assets/images/demo/anon-user-icon.png';
 
   // User form
-  userFormGroup: FormGroup;
+  userFormGroup: UntypedFormGroup;
   userNameControl: AbstractControl;
   userFirstNameControl: AbstractControl;
   userLastNameControl: AbstractControl;
@@ -47,7 +47,7 @@ export class ProfileSettingsComponent implements OnInit {
   oldUserData: UserProfileFormData;
 
   // Password form
-  passwordFormGroup: FormGroup;
+  passwordFormGroup: UntypedFormGroup;
   userPasswordInputControl: AbstractControl;
   private readonly initialPasswordInput: ProfilePasswordFormData = {oldPassword: '', newPassword: '', confirmNewPassword: ''};
   passwordStrong: boolean;
@@ -55,11 +55,11 @@ export class ProfileSettingsComponent implements OnInit {
 
 
   // Language change
-  profileLanguageControl = new FormControl(LanguageOptions.ENGLISH);
+  profileLanguageControl = new UntypedFormControl(LanguageOptions.ENGLISH);
   profileLanguages = LanguageOptions;
 
   constructor(protected dialogRef: NbDialogRef<any>,
-              private fb: FormBuilder,
+              private fb: UntypedFormBuilder,
               private store: Store,
               private userService: UserService,
               private translateService: TranslateService) {

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

@@ -1,6 +1,6 @@
 import {Component, Inject, OnInit} from '@angular/core';
 import {NB_DIALOG_CONFIG, NbDialogRef} from '@nebular/theme';
-import {FormBuilder, FormGroup} from '@angular/forms';
+import {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
 import {GenericFormFieldConfig, GenericDialogData} from '@shared/models/generic-dialog-data';
 import deepEqual from 'deep-equal';
 import {UntilDestroy, untilDestroyed} from '@ngneat/until-destroy';
@@ -19,7 +19,7 @@ import {Project, transformProjectToRequestBody} from '@shared/models/project.mod
 })
 export class ProjectDialogComponent implements OnInit {
   // form control elements
-  projectFormGroup: FormGroup;
+  projectFormGroup: UntypedFormGroup;
   formArray: GenericFormFieldConfig[];
 
   dialogData: GenericDialogData;
@@ -32,7 +32,7 @@ export class ProjectDialogComponent implements OnInit {
 
   constructor(
     @Inject(NB_DIALOG_CONFIG) private data: GenericDialogData,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private dialogService: DialogService,
     private projectService: ProjectService,
     private readonly notificationService: NotificationService,
@@ -45,7 +45,7 @@ export class ProjectDialogComponent implements OnInit {
     this.dialogData = this.data;
   }
 
-  generateFormCreationFieldArray(): FormGroup {
+  generateFormCreationFieldArray(): UntypedFormGroup {
     this.formArray = Object.values(this.data.form);
     const config = this.formArray?.reduce((accumulator: {}, currentValue: GenericFormFieldConfig) => ({
       ...accumulator,

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

@@ -10,9 +10,9 @@ import {CommonAppModule} from '../../../app/common-app.module';
 import {ReactiveFormsModule} from '@angular/forms';
 
 @NgModule({
-  declarations: [
+    declarations: [
-    ProjectDialogComponent
+        ProjectDialogComponent
-  ],
+    ],
     imports: [
         CommonModule,
         CommonAppModule,
@@ -26,12 +26,9 @@ import {ReactiveFormsModule} from '@angular/forms';
         ReactiveFormsModule,
         NbSelectModule,
     ],
-  providers: [
+    providers: [
-    ProjectDialogService,
+        ProjectDialogService,
-  ],
+    ]
-  entryComponents: [
-    ProjectDialogComponent
-  ]
 })
 export class ProjectDialogModule {
 }

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

@@ -1,6 +1,6 @@
 import {Component, Inject, Input, OnInit} from '@angular/core';
 import {NB_DIALOG_CONFIG, NbDialogRef} from '@nebular/theme';
-import {FormControl} from '@angular/forms';
+import {UntypedFormControl} from '@angular/forms';
 import {acceptableInputValidator} from '@shared/modules/security-confirm-dialog/acceptableInputValidator';
 import {UntilDestroy} from '@ngneat/until-destroy';
 import {SecurityDialogMessage} from '@shared/services/dialog-service/dialog-message';
@@ -13,7 +13,7 @@ import {SecurityDialogMessage} from '@shared/services/dialog-service/dialog-mess
 @UntilDestroy()
 export class SecurityConfirmDialogComponent implements OnInit{
 
-  inputCtrl: FormControl;
+  inputCtrl: UntypedFormControl;
 
   constructor(/**
                * @param data contains all relevant information the dialog needs
@@ -28,7 +28,7 @@ export class SecurityConfirmDialogComponent implements OnInit{
 
   ngOnInit(): void {
     // Setup FormControl and custom validator
-    this.inputCtrl = new FormControl('', acceptableInputValidator(this.data.confirmString));
+    this.inputCtrl = new UntypedFormControl('', acceptableInputValidator(this.data.confirmString));
   }
 
   onClickConfirm(): void {

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

@@ -8,24 +8,21 @@ import {SecurityConfirmDialogComponent} from '@shared/modules/security-confirm-d
 import {ReactiveFormsModule} from '@angular/forms';
 
 @NgModule({
-  declarations: [
+    declarations: [
-    SecurityConfirmDialogComponent
+        SecurityConfirmDialogComponent
-  ],
+    ],
-  imports: [
+    imports: [
-    CommonModule,
+        CommonModule,
-    CommonAppModule,
+        CommonAppModule,
-    NbCardModule,
+        NbCardModule,
-    NbButtonModule,
+        NbButtonModule,
-    FlexLayoutModule,
+        FlexLayoutModule,
-    TranslateModule,
+        TranslateModule,
-    NbLayoutModule,
+        NbLayoutModule,
-    NbSelectModule,
+        NbSelectModule,
-    NbInputModule,
+        NbInputModule,
-    NbFormFieldModule,
+        NbFormFieldModule,
-    ReactiveFormsModule
+        ReactiveFormsModule
-  ],
+    ]
-  entryComponents: [
-    SecurityConfirmDialogComponent
-  ]
 })
 export class SecurityConfirmDialogModule { }

security-c4po-angular/tsconfig.json

@@ -12,13 +12,22 @@
     "allowSyntheticDefaultImports": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2015",
+    "target": "ES2022",
     "module": "esNext",
-    "lib": ["es2019", "es2018", "dom"],
+    "lib": [
+      "es2019",
+      "es2018",
+      "dom"
+    ],
     "paths": {
-      "@shared/*": ["./src/shared/*"],
+      "@shared/*": [
-      "@assets/*": ["./src/assets/*"]
+        "./src/shared/*"
-    }
+      ],
+      "@assets/*": [
+        "./src/assets/*"
+      ]
+    },
+    "useDefineForClassFields": false
   },
   "include": [
     "src/**/*.ts",