Merge branch 'master-3.0' into bugfix-1398

2024-12-18 20:47:51 +00:00 · 2023-08-18 16:48:19 +10:00 · 2023-08-18 16:48:19 +10:00 · 8731f78808
commit 8731f78808
parent ce252461bd 6322fea306
121 changed files with 4242 additions and 3623 deletions
--- a/.github/workflows/add-new-issues-to-project.yml
+++ b/.github/workflows/add-new-issues-to-project.yml
@ -0,0 +1,16 @@
+name: Add new issues to GNS3 project
+
+on:
+  issues:
+    types:
+      - opened
+
+jobs:
+  add-to-project:
+    name: Add issue to project
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/add-to-project@v0.4.0
+        with:
+          project-url: https://github.com/orgs/GNS3/projects/3
+          github-token: ${{ secrets.ADD_NEW_ISSUES_TO_PROJECT }}
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@ -0,0 +1,76 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ "master", "master-3.0" ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ "master", "master-3.0" ]
+  schedule:
+    - cron: '38 18 * * 6'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript', 'python' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Use only 'java' to analyze code written in Java, Kotlin or both
+        # Use only 'javascript' to analyze code written in JavaScript, TypeScript or both
+        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v3
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v2
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, Go, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v2
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+
+    #   If the Autobuild fails above, remove it and uncomment the following three lines.
+    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+
+    # - run: |
+    #   echo "Run, Build Application using script"
+    #   ./location_of_script_within_repo/buildscript.sh
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v2
+      with:
+        category: "/language:${{matrix.language}}"
--- a/.whitesource
+++ b/.whitesource
@ -2,7 +2,8 @@
  "scanSettings": {
    "configMode": "AUTO",
    "configExternalURL": "",
-    "projectToken" : ""
+    "projectToken" : "",
+    "baseBranches": ["master", "master-3.0"]
  },
  "checkRunSettings": {
    "vulnerableCheckRunConclusionLevel": "failure"
@ -10,4 +11,4 @@
  "issueSettings": {
    "minSeverityLevel": "LOW"
  }
-}
+}
--- a/.yarnclean
+++ b/.yarnclean
@ -3,11 +3,11 @@ __tests__
 node_modules/*/test
 node_modules/*/tests
 powered-test
-e2e
+#e2e

 # asset directories
 docs
-doc
+#doc
 website
 images

--- a/SECURITY.md
+++ b/SECURITY.md
@ -0,0 +1,5 @@
+# Security Policy
+
+## Reporting a Vulnerability
+
+Please use GitHub's report a vulnerability feature. More information can be found in https://docs.github.com/en/code-security/security-advisories/guidance-on-reporting-and-writing/privately-reporting-a-security-vulnerability
--- a/angular.json
+++ b/angular.json
@ -27,7 +27,11 @@
                            "rxjs-compat/add/operator/map",
                            "classnames",
                            "stylenames",
-                            "source-map-js"
+                            "source-map-js",
+                            "spark-md5",
+                            "xterm",
+                            "xterm-addon-attach",
+                            "xterm-addon-fit"
                        ],
                        "outputPath": "dist",
                        "index": "src/index.html",
@ -215,7 +219,6 @@
            }
        }
    },
-    "defaultProject": "gns3-web-ui",
    "schematics": {
        "@schematics/angular:component": {
            "prefix": "app",
@ -228,4 +231,4 @@
    "cli": {
        "analytics": false
    }
-}
+}
--- a/karma.conf.js
+++ b/karma.conf.js
@ -19,7 +19,7 @@ module.exports = function (config) {
      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
-    
+
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "gns3-web-ui",
-  "version": "3.0.0dev5",
+  "version": "3.0.0.dev7",
  "author": {
    "name": "GNS3 Technology Inc.",
    "email": "developers@gns3.com"
@ -17,7 +17,7 @@
    "start": "ng serve",
    "startforelectron": "ng serve --configuration=electronDev",
    "build": "ng build",
-    "buildforproduction": "ng build --source-map=false --configuration=production --base-href /static/web-ui/",
+    "buildforproduction": "ng build --source-map=false --build-optimizer --configuration=production --base-href /static/web-ui/",
    "buildforelectron": "ng build --configuration=electronProd",
    "buildforgithub": "ng build --configuration=githubProd",
    "test": "ng test",
@ -36,22 +36,22 @@
    "generate-licenses-file": "yarn license-checker --production --csv --out licenses.csv",
    "prebuildforelectron": "node set-variables-in-env.js --set src/environments/environment.electron.prod.ts",
    "postbuildforelectron": "node set-variables-in-env.js --unset src/environments/environment.electron.prod.ts",
-    "postinstall": "ngcc --properties es5 browser module main --first-only --create-ivy-entry-points --tsconfig \"./src/tsconfig.app.json\" && ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points --tsconfig \"./src/tsconfig.app.json\"",
+    "postinstall": "ngcc --properties es2020 browser module main --first-only --create-ivy-entry-points --tsconfig \"./src/tsconfig.app.json\" && ngcc --properties es2020 browser module main --first-only --create-ivy-entry-points --tsconfig \"./src/tsconfig.app.json\"",
    "snyk-protect": "snyk-protect",
    "prepare": "yarn run snyk-protect"
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "^13.3.5",
-    "@angular/cdk": "^13.3.5",
-    "@angular/common": "^13.3.5",
-    "@angular/compiler": "^13.3.5",
-    "@angular/core": "^13.3.5",
-    "@angular/forms": "^13.3.5",
-    "@angular/material": "^13.3.5",
-    "@angular/platform-browser": "^13.3.5",
-    "@angular/platform-browser-dynamic": "^13.3.5",
-    "@angular/router": "^13.3.5",
+    "@angular/animations": "^14.3.0",
+    "@angular/cdk": "^14.2.7",
+    "@angular/common": "^14.3.0",
+    "@angular/compiler": "^14.3.0",
+    "@angular/core": "^14.3.0",
+    "@angular/forms": "^14.3.0",
+    "@angular/material": "^14.2.7",
+    "@angular/platform-browser": "^14.3.0",
+    "@angular/platform-browser-dynamic": "^14.3.0",
+    "@angular/router": "^14.3.0",
    "@sentry/browser": "^6.14.1",
    "@snyk/protect": "^1.972.0",
    "@types/jest": "^27.0.2",
@ -72,9 +72,9 @@
    "material-design-icons": "^3.0.1",
    "mousetrap": "^1.6.5",
    "ng-circle-progress": "^1.6.0",
-    "ng2-file-upload": "^1.4.0",
+    "ng2-file-upload": "^3.0.0",
    "ngx-childprocess": "^0.0.6",
-    "ngx-device-detector": "^3.0.0",
+    "ngx-device-detector": "4.0.1",
    "ngx-electron": "^2.2.0",
    "node-fetch": "^3.2.10",
    "notosans-fontface": "^1.3.0",
@ -95,10 +95,10 @@
    "zone.js": "^0.11.5"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "^13.3.4",
-    "@angular/cli": "^13.3.4",
-    "@angular/compiler-cli": "^13.3.5",
-    "@angular/language-service": "^13.3.5",
+    "@angular-devkit/build-angular": "^14.2.12",
+    "@angular/cli": "^14.2.12",
+    "@angular/compiler-cli": "^14.3.0",
+    "@angular/language-service": "^14.3.0",
    "@sentry/cli": "^2.0.4",
    "@sentry/electron": "^3.0.7",
    "@types/jasmine": "^4.0.3",
@ -137,4 +137,4 @@
    ]
  },
  "snyk": true
-}
+}
--- a/scripts/requirements.txt
+++ b/scripts/requirements.txt
@ -1,6 +1,6 @@
-setuptools==54.2.0
+setuptools==65.5.1
 cx_Freeze==5.1.1
-requests==2.25.1
+requests==2.31.0
 packaging==20.9
 appdirs==1.4.4
 psutil==5.8.0
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -326,393 +326,346 @@ import { ConfirmationDeleteAllProjectsComponent } from './components/projects/co
 import { ProjectMapLockConfirmationDialogComponent } from './components/project-map/project-map-menu/project-map-lock-confirmation-dialog/project-map-lock-confirmation-dialog.component';

@NgModule({
-  declarations: [
-    AppComponent,
-    LoggedUserComponent,
-    ProjectMapComponent,
-    LoginComponent,
-    ControllersComponent,
-    AddControllerDialogComponent,
-    CreateSnapshotDialogComponent,
-    SnapshotMenuItemComponent,
-    ProjectsComponent,
-    AddBlankProjectDialogComponent,
-    ImportProjectDialogComponent,
-    ConfirmationDialogComponent,
-    DefaultLayoutComponent,
-    ProgressDialogComponent,
-    ContextMenuComponent,
-    ContextConsoleMenuComponent,
-    StartNodeActionComponent,
-    IsolateNodeActionComponent,
-    UnisolateNodeActionComponent,
-    StopNodeActionComponent,
-    TemplateComponent,
-    TemplateListDialogComponent,
-    MoveLayerDownActionComponent,
-    MoveLayerUpActionComponent,
-    EditStyleActionComponent,
-    EditLinkStyleActionComponent,
-    EditTextActionComponent,
-    DeleteActionComponent,
-    DuplicateActionComponent,
-    PacketFiltersActionComponent,
-    StartCaptureActionComponent,
-    StopCaptureActionComponent,
-    ResumeLinkActionComponent,
-    SuspendLinkActionComponent,
-    SettingsComponent,
-    PreferencesComponent,
-    BundledControllerFinderComponent,
-    ProgressComponent,
-    ControllerDiscoveryComponent,
-    NodeSelectInterfaceComponent,
-    DrawLinkToolComponent,
-    InstalledSoftwareComponent,
-    DrawingAddedComponent,
-    DrawingResizedComponent,
-    TextAddedComponent,
-    TextEditedComponent,
-    NodeDraggedComponent,
-    NodeLabelDraggedComponent,
-    DrawingDraggedComponent,
-    LinkCreatedComponent,
-    InterfaceLabelDraggedComponent,
-    InstallSoftwareComponent,
-    StyleEditorDialogComponent,
-    LinkStyleEditorDialogComponent,
-    TextEditorDialogComponent,
-    PacketFiltersDialogComponent,
-    QemuPreferencesComponent,
-    QemuVmTemplatesComponent,
-    AddQemuVmTemplateComponent,
-    QemuVmTemplateDetailsComponent,
-    GeneralPreferencesComponent,
-    VpcsPreferencesComponent,
-    VpcsTemplatesComponent,
-    AddVpcsTemplateComponent,
-    VpcsTemplateDetailsComponent,
-    VirtualBoxPreferencesComponent,
-    VirtualBoxTemplatesComponent,
-    VirtualBoxTemplateDetailsComponent,
-    AddVirtualBoxTemplateComponent,
-    BuiltInPreferencesComponent,
-    EthernetHubsTemplatesComponent,
-    EthernetHubsAddTemplateComponent,
-    EthernetHubsTemplateDetailsComponent,
-    CloudNodesTemplatesComponent,
-    CloudNodesAddTemplateComponent,
-    CloudNodesTemplateDetailsComponent,
-    EthernetSwitchesTemplatesComponent,
-    EthernetSwitchesAddTemplateComponent,
-    EthernetSwitchesTemplateDetailsComponent,
-    DynamipsPreferencesComponent,
-    IosTemplatesComponent,
-    IosTemplateDetailsComponent,
-    AddIosTemplateComponent,
-    SymbolsComponent,
-    VmwarePreferencesComponent,
-    VmwareTemplatesComponent,
-    VmwareTemplateDetailsComponent,
-    AddVmwareTemplateComponent,
-    DeleteConfirmationDialogComponent,
-    HelpDialogComponent,
-    StartCaptureDialogComponent,
-    DeleteTemplateComponent,
-    DockerTemplatesComponent,
-    AddDockerTemplateComponent,
-    DockerTemplateDetailsComponent,
-    IouTemplatesComponent,
-    AddIouTemplateComponent,
-    IouTemplateDetailsComponent,
-    CopyQemuVmTemplateComponent,
-    CopyIosTemplateComponent,
-    CopyIouTemplateComponent,
-    CopyDockerTemplateComponent,
-    EmptyTemplatesListComponent,
-    SymbolsMenuComponent,
-    SearchFilter,
-    DateFilter,
-    NameFilter,
-    DataSourceFilter,
-    TemplateFilter,
-    ProjectsFilter,
-    AuthImageFilter,
-    ListOfSnapshotsComponent,
-    CustomAdaptersComponent,
-    NodesMenuComponent,
-    AdbutlerComponent,
-    ConsoleDeviceActionComponent,
-    ShowNodeActionComponent,
-    ConsoleComponent,
-    NodesMenuComponent,
-    ProjectMapMenuComponent,
-    HelpComponent,
-    ConfigEditorDialogComponent,
-    EditConfigActionComponent,
-    LogConsoleComponent,
-    SaveProjectDialogComponent,
-    TopologySummaryComponent,
-    InfoDialogComponent,
-    BringToFrontActionComponent,
-    ExportConfigActionComponent,
-    ImportConfigActionComponent,
-    ConsoleDeviceActionBrowserComponent,
-    ChangeSymbolDialogComponent,
-    ChangeSymbolActionComponent,
-    EditProjectDialogComponent,
-    ReloadNodeActionComponent,
-    SuspendNodeActionComponent,
-    ConfigActionComponent,
-    ConfiguratorDialogVpcsComponent,
-    ConfiguratorDialogEthernetHubComponent,
-    ConfiguratorDialogEthernetSwitchComponent,
-    PortsComponent,
-    ConfiguratorDialogSwitchComponent,
-    ConfiguratorDialogVirtualBoxComponent,
-    CustomAdaptersTableComponent,
-    ConfiguratorDialogQemuComponent,
-    ConfiguratorDialogCloudComponent,
-    UdpTunnelsComponent,
-    ConfiguratorDialogAtmSwitchComponent,
-    ConfiguratorDialogVmwareComponent,
-    ConfiguratorDialogIouComponent,
-    ConfiguratorDialogIosComponent,
-    ConfiguratorDialogDockerComponent,
-    ConfiguratorDialogNatComponent,
-    QemuImageCreatorComponent,
-    ChooseNameDialogComponent,
-    StartCaptureOnStartedLinkActionComponent,
-    LockActionComponent,
-    NavigationDialogComponent,
-    ScreenshotDialogComponent,
-    PageNotFoundComponent,
-    AlignHorizontallyActionComponent,
-    AlignVerticallyActionComponent,
-    ConfirmationBottomSheetComponent,
-    ConfigDialogComponent,
-    ImportApplianceComponent,
-    DirectLinkComponent,
-    SystemStatusComponent,
-    StatusInfoComponent,
-    StatusChartComponent,
-    OpenFileExplorerActionComponent,
-    HttpConsoleActionComponent,
-    WebConsoleComponent,
-    ConsoleWrapperComponent,
-    HttpConsoleNewTabActionComponent,
-    WebConsoleFullWindowComponent,
-    NewTemplateDialogComponent,
-    ChangeHostnameActionComponent,
-    ChangeHostnameDialogComponent,
-    ApplianceInfoDialogComponent,
-    ReadmeEditorComponent,
-    MarkedDirective,
-    InformationDialogComponent,
-    TemplateNameDialogComponent,
-    ConfigureCustomAdaptersDialogComponent,
-    EditNetworkConfigurationDialogComponent,
-    UserManagementComponent,
-    ProjectReadmeComponent,
-    AddGroupDialogComponent,
-    GroupFilterPipe,
-    GroupManagementComponent,
-    AddUserDialogComponent,
-    UserFilterPipe,
-    DeleteGroupDialogComponent,
-    DeleteUserDialogComponent,
-    GroupDetailsComponent,
-    UserDetailComponent,
-    AddUserToGroupDialogComponent,
-    RemoveToGroupDialogComponent,
-    PaginatorPipe,
-    MembersFilterPipe,
-    ManagementComponent,
-    RoleManagementComponent,
-    RoleFilterPipe,
-    AddRoleDialogComponent,
-    DeleteRoleDialogComponent,
-    RoleDetailComponent,
-    PermissionEditorComponent,
-    EditablePermissionComponent,
-    PermissionEditorValidateDialogComponent,
-    RemoveToGroupDialogComponent,
-    PermissionsManagementComponent,
-    AddRoleToGroupComponent,
-    PermissionEditLineComponent,
-    AddPermissionLineComponent,
-    MethodButtonComponent,
-    ActionButtonComponent,
-    DeletePermissionDialogComponent,
-    PathAutoCompleteComponent,
-    FilterCompletePipe,
-    UserPermissionsComponent,
-    PermissionsFilterPipe,
-    RolePermissionsComponent,
-    DisplayPathPipe,
-    ChangeUserPasswordComponent,
-    FilterCompletePipe,
-    DisplayPathPipe,
-    ChangeUserPasswordComponent,
-    ProjectReadmeComponent,
-    ImageManagerComponent,
-    AddImageDialogComponent,
-    DeleteAllImageFilesDialogComponent,
-    UploadingProcessbarComponent,
-    ExportPortableProjectComponent,
-    NodesMenuConfirmationDialogComponent,
-    ConfirmationDeleteAllProjectsComponent,
-    ProjectMapLockConfirmationDialogComponent,
-  ],
-  imports: [
-    BrowserModule,
-    HttpClientModule,
-    AppRoutingModule,
-    FormsModule,
-    ReactiveFormsModule,
-    BrowserAnimationsModule,
-    CdkTableModule,
-    CartographyModule,
-    NgxElectronModule,
-    FileUploadModule,
-    MatSidenavModule,
-    MatFormFieldModule,
-    MatMenuModule,
-    ResizableModule,
-    DragAndDropModule,
-    DragDropModule,
-    NgxChildProcessModule,
-    MATERIAL_IMPORTS,
-    NgCircleProgressModule.forRoot(),
-    OverlayModule,
-    MatSlideToggleModule,
-    MatCheckboxModule,
-    MatAutocompleteModule,
-  ],
-  providers: [
-    SettingsService,
-    {provide: ErrorHandler, useClass: ToasterErrorHandler},
-    {provide: HTTP_INTERCEPTORS, useClass: HttpRequestsInterceptor, multi: true},
-    D3Service,
-    VersionService,
-    ProjectService,
-    SymbolService,
-    ControllerService,
-    TemplateService,
-    NodeService,
-    LinkService,
-    DrawingService,
-    HttpController,
-    SnapshotService,
-    ProgressDialogService,
-    ToasterService,
-    ProgressService,
-    ProjectWebServiceHandler,
-    LinksDataSource,
-    NodesDataSource,
-    SymbolsDataSource,
-    LogEventsDataSource,
-    SelectionManager,
-    InRectangleHelper,
-    DrawingsDataSource,
-    ControllerErrorHandler,
-    ControllerDatabase,
-    ProjectNameValidator,
-    ToolsService,
-    ControllerSettingsService,
-    QemuService,
-    VpcsService,
-    TemplateMocksService,
-    VirtualBoxService,
-    BuiltInTemplatesService,
-    IosService,
-    InstalledSoftwareService,
-    ExternalSoftwareDefinitionService,
-    PlatformService,
-    IosConfigurationService,
-    QemuConfigurationService,
-    VirtualBoxConfigurationService,
-    VpcsConfigurationService,
-    BuiltInTemplatesConfigurationService,
-    VmwareService,
-    VmwareConfigurationService,
-    DockerService,
-    DockerConfigurationService,
-    IouService,
-    IouConfigurationService,
-    RecentlyOpenedProjectService,
-    ControllerManagementService,
-    MapScaleService,
-    ConsoleService,
-    DefaultConsoleService,
-    NodeCreatedLabelStylesFixer,
-    NonNegativeValidator,
-    RotationValidator,
-    MapSettingsService,
-    InfoService,
-    ComputeService,
-    PacketCaptureService,
-    NotificationService,
-    ThemeService,
-    GoogleAnalyticsService,
-    NodeConsoleService,
-    ControllerResolve,
-    LoginGuard,
-    ConsoleGuard,
-    Title,
-    ApplianceService,
-    UpdatesService,
-    LoginService,
-    UserService
-  ],
-  entryComponents: [
-    AddControllerDialogComponent,
-    CreateSnapshotDialogComponent,
-    ProgressDialogComponent,
-    TemplateListDialogComponent,
-    AddBlankProjectDialogComponent,
-    ImportProjectDialogComponent,
-    ConfirmationDialogComponent,
-    StyleEditorDialogComponent,
-    PacketFiltersDialogComponent,
-    TextEditorDialogComponent,
-    SymbolsComponent,
-    DeleteConfirmationDialogComponent,
-    HelpDialogComponent,
-    StartCaptureDialogComponent,
-    ConfigEditorDialogComponent,
-    SaveProjectDialogComponent,
-    InfoDialogComponent,
-    ChangeSymbolDialogComponent,
-    EditProjectDialogComponent,
-    ConfiguratorDialogVpcsComponent,
-    ConfiguratorDialogEthernetHubComponent,
-    ConfiguratorDialogEthernetSwitchComponent,
-    ConfiguratorDialogSwitchComponent,
-    ConfiguratorDialogVirtualBoxComponent,
-    ConfiguratorDialogQemuComponent,
-    ConfiguratorDialogCloudComponent,
-    ConfiguratorDialogAtmSwitchComponent,
-    ConfiguratorDialogVmwareComponent,
-    ConfiguratorDialogIouComponent,
-    ConfiguratorDialogIosComponent,
-    ConfiguratorDialogDockerComponent,
-    ConfiguratorDialogNatComponent,
-    QemuImageCreatorComponent,
-    ChooseNameDialogComponent,
-    NavigationDialogComponent,
-    ScreenshotDialogComponent,
-    ConfirmationBottomSheetComponent,
-    ConfigDialogComponent,
-    AdbutlerComponent,
-    NewTemplateDialogComponent,
-    ChangeHostnameDialogComponent,
-    ApplianceInfoDialogComponent,
-    ConfigureCustomAdaptersDialogComponent,
-    EditNetworkConfigurationDialogComponent,
-    ProjectReadmeComponent
-  ],
-  bootstrap: [AppComponent],
+    declarations: [
+        AppComponent,
+        LoggedUserComponent,
+        ProjectMapComponent,
+        LoginComponent,
+        ControllersComponent,
+        AddControllerDialogComponent,
+        CreateSnapshotDialogComponent,
+        SnapshotMenuItemComponent,
+        ProjectsComponent,
+        AddBlankProjectDialogComponent,
+        ImportProjectDialogComponent,
+        ConfirmationDialogComponent,
+        DefaultLayoutComponent,
+        ProgressDialogComponent,
+        ContextMenuComponent,
+        ContextConsoleMenuComponent,
+        StartNodeActionComponent,
+        IsolateNodeActionComponent,
+        UnisolateNodeActionComponent,
+        StopNodeActionComponent,
+        TemplateComponent,
+        TemplateListDialogComponent,
+        MoveLayerDownActionComponent,
+        MoveLayerUpActionComponent,
+        EditStyleActionComponent,
+        EditLinkStyleActionComponent,
+        EditTextActionComponent,
+        DeleteActionComponent,
+        DuplicateActionComponent,
+        PacketFiltersActionComponent,
+        StartCaptureActionComponent,
+        StopCaptureActionComponent,
+        ResumeLinkActionComponent,
+        SuspendLinkActionComponent,
+        SettingsComponent,
+        PreferencesComponent,
+        BundledControllerFinderComponent,
+        ProgressComponent,
+        ControllerDiscoveryComponent,
+        NodeSelectInterfaceComponent,
+        DrawLinkToolComponent,
+        InstalledSoftwareComponent,
+        DrawingAddedComponent,
+        DrawingResizedComponent,
+        TextAddedComponent,
+        TextEditedComponent,
+        NodeDraggedComponent,
+        NodeLabelDraggedComponent,
+        DrawingDraggedComponent,
+        LinkCreatedComponent,
+        InterfaceLabelDraggedComponent,
+        InstallSoftwareComponent,
+        StyleEditorDialogComponent,
+        LinkStyleEditorDialogComponent,
+        TextEditorDialogComponent,
+        PacketFiltersDialogComponent,
+        QemuPreferencesComponent,
+        QemuVmTemplatesComponent,
+        AddQemuVmTemplateComponent,
+        QemuVmTemplateDetailsComponent,
+        GeneralPreferencesComponent,
+        VpcsPreferencesComponent,
+        VpcsTemplatesComponent,
+        AddVpcsTemplateComponent,
+        VpcsTemplateDetailsComponent,
+        VirtualBoxPreferencesComponent,
+        VirtualBoxTemplatesComponent,
+        VirtualBoxTemplateDetailsComponent,
+        AddVirtualBoxTemplateComponent,
+        BuiltInPreferencesComponent,
+        EthernetHubsTemplatesComponent,
+        EthernetHubsAddTemplateComponent,
+        EthernetHubsTemplateDetailsComponent,
+        CloudNodesTemplatesComponent,
+        CloudNodesAddTemplateComponent,
+        CloudNodesTemplateDetailsComponent,
+        EthernetSwitchesTemplatesComponent,
+        EthernetSwitchesAddTemplateComponent,
+        EthernetSwitchesTemplateDetailsComponent,
+        DynamipsPreferencesComponent,
+        IosTemplatesComponent,
+        IosTemplateDetailsComponent,
+        AddIosTemplateComponent,
+        SymbolsComponent,
+        VmwarePreferencesComponent,
+        VmwareTemplatesComponent,
+        VmwareTemplateDetailsComponent,
+        AddVmwareTemplateComponent,
+        DeleteConfirmationDialogComponent,
+        HelpDialogComponent,
+        StartCaptureDialogComponent,
+        DeleteTemplateComponent,
+        DockerTemplatesComponent,
+        AddDockerTemplateComponent,
+        DockerTemplateDetailsComponent,
+        IouTemplatesComponent,
+        AddIouTemplateComponent,
+        IouTemplateDetailsComponent,
+        CopyQemuVmTemplateComponent,
+        CopyIosTemplateComponent,
+        CopyIouTemplateComponent,
+        CopyDockerTemplateComponent,
+        EmptyTemplatesListComponent,
+        SymbolsMenuComponent,
+        SearchFilter,
+        DateFilter,
+        NameFilter,
+        DataSourceFilter,
+        TemplateFilter,
+        ProjectsFilter,
+        AuthImageFilter,
+        ListOfSnapshotsComponent,
+        CustomAdaptersComponent,
+        NodesMenuComponent,
+        AdbutlerComponent,
+        ConsoleDeviceActionComponent,
+        ShowNodeActionComponent,
+        ConsoleComponent,
+        NodesMenuComponent,
+        ProjectMapMenuComponent,
+        HelpComponent,
+        ConfigEditorDialogComponent,
+        EditConfigActionComponent,
+        LogConsoleComponent,
+        SaveProjectDialogComponent,
+        TopologySummaryComponent,
+        InfoDialogComponent,
+        BringToFrontActionComponent,
+        ExportConfigActionComponent,
+        ImportConfigActionComponent,
+        ConsoleDeviceActionBrowserComponent,
+        ChangeSymbolDialogComponent,
+        ChangeSymbolActionComponent,
+        EditProjectDialogComponent,
+        ReloadNodeActionComponent,
+        SuspendNodeActionComponent,
+        ConfigActionComponent,
+        ConfiguratorDialogVpcsComponent,
+        ConfiguratorDialogEthernetHubComponent,
+        ConfiguratorDialogEthernetSwitchComponent,
+        PortsComponent,
+        ConfiguratorDialogSwitchComponent,
+        ConfiguratorDialogVirtualBoxComponent,
+        CustomAdaptersTableComponent,
+        ConfiguratorDialogQemuComponent,
+        ConfiguratorDialogCloudComponent,
+        UdpTunnelsComponent,
+        ConfiguratorDialogAtmSwitchComponent,
+        ConfiguratorDialogVmwareComponent,
+        ConfiguratorDialogIouComponent,
+        ConfiguratorDialogIosComponent,
+        ConfiguratorDialogDockerComponent,
+        ConfiguratorDialogNatComponent,
+        QemuImageCreatorComponent,
+        ChooseNameDialogComponent,
+        StartCaptureOnStartedLinkActionComponent,
+        LockActionComponent,
+        NavigationDialogComponent,
+        ScreenshotDialogComponent,
+        PageNotFoundComponent,
+        AlignHorizontallyActionComponent,
+        AlignVerticallyActionComponent,
+        ConfirmationBottomSheetComponent,
+        ConfigDialogComponent,
+        ImportApplianceComponent,
+        DirectLinkComponent,
+        SystemStatusComponent,
+        StatusInfoComponent,
+        StatusChartComponent,
+        OpenFileExplorerActionComponent,
+        HttpConsoleActionComponent,
+        WebConsoleComponent,
+        ConsoleWrapperComponent,
+        HttpConsoleNewTabActionComponent,
+        WebConsoleFullWindowComponent,
+        NewTemplateDialogComponent,
+        ChangeHostnameActionComponent,
+        ChangeHostnameDialogComponent,
+        ApplianceInfoDialogComponent,
+        ReadmeEditorComponent,
+        MarkedDirective,
+        InformationDialogComponent,
+        TemplateNameDialogComponent,
+        ConfigureCustomAdaptersDialogComponent,
+        EditNetworkConfigurationDialogComponent,
+        UserManagementComponent,
+        ProjectReadmeComponent,
+        AddGroupDialogComponent,
+        GroupFilterPipe,
+        GroupManagementComponent,
+        AddUserDialogComponent,
+        UserFilterPipe,
+        DeleteGroupDialogComponent,
+        DeleteUserDialogComponent,
+        GroupDetailsComponent,
+        UserDetailComponent,
+        AddUserToGroupDialogComponent,
+        RemoveToGroupDialogComponent,
+        PaginatorPipe,
+        MembersFilterPipe,
+        ManagementComponent,
+        RoleManagementComponent,
+        RoleFilterPipe,
+        AddRoleDialogComponent,
+        DeleteRoleDialogComponent,
+        RoleDetailComponent,
+        PermissionEditorComponent,
+        EditablePermissionComponent,
+        PermissionEditorValidateDialogComponent,
+        RemoveToGroupDialogComponent,
+        PermissionsManagementComponent,
+        AddRoleToGroupComponent,
+        PermissionEditLineComponent,
+        AddPermissionLineComponent,
+        MethodButtonComponent,
+        ActionButtonComponent,
+        DeletePermissionDialogComponent,
+        PathAutoCompleteComponent,
+        FilterCompletePipe,
+        UserPermissionsComponent,
+        PermissionsFilterPipe,
+        RolePermissionsComponent,
+        DisplayPathPipe,
+        ChangeUserPasswordComponent,
+        FilterCompletePipe,
+        DisplayPathPipe,
+        ChangeUserPasswordComponent,
+        ProjectReadmeComponent,
+        ImageManagerComponent,
+        AddImageDialogComponent,
+        DeleteAllImageFilesDialogComponent,
+        UploadingProcessbarComponent,
+        ExportPortableProjectComponent,
+        NodesMenuConfirmationDialogComponent,
+        ConfirmationDeleteAllProjectsComponent,
+        ProjectMapLockConfirmationDialogComponent,
+    ],
+    imports: [
+        BrowserModule,
+        HttpClientModule,
+        AppRoutingModule,
+        FormsModule,
+        ReactiveFormsModule,
+        BrowserAnimationsModule,
+        CdkTableModule,
+        CartographyModule,
+        NgxElectronModule,
+        FileUploadModule,
+        MatSidenavModule,
+        MatFormFieldModule,
+        MatMenuModule,
+        ResizableModule,
+        DragAndDropModule,
+        DragDropModule,
+        NgxChildProcessModule,
+        MATERIAL_IMPORTS,
+        NgCircleProgressModule.forRoot(),
+        OverlayModule,
+        MatSlideToggleModule,
+        MatCheckboxModule,
+        MatAutocompleteModule,
+    ],
+    providers: [
+        SettingsService,
+        { provide: ErrorHandler, useClass: ToasterErrorHandler },
+        { provide: HTTP_INTERCEPTORS, useClass: HttpRequestsInterceptor, multi: true },
+        VersionService,
+        D3Service,
+        ProjectService,
+        SymbolService,
+        ControllerService,
+        TemplateService,
+        NodeService,
+        LinkService,
+        DrawingService,
+        HttpController,
+        SnapshotService,
+        ProgressDialogService,
+        ToasterService,
+        ProgressService,
+        ProjectWebServiceHandler,
+        LinksDataSource,
+        NodesDataSource,
+        SymbolsDataSource,
+        LogEventsDataSource,
+        SelectionManager,
+        InRectangleHelper,
+        DrawingsDataSource,
+        ControllerErrorHandler,
+        ControllerDatabase,
+        ProjectNameValidator,
+        ToolsService,
+        ControllerSettingsService,
+        QemuService,
+        VpcsService,
+        TemplateMocksService,
+        VirtualBoxService,
+        BuiltInTemplatesService,
+        IosService,
+        InstalledSoftwareService,
+        ExternalSoftwareDefinitionService,
+        PlatformService,
+        IosConfigurationService,
+        QemuConfigurationService,
+        VirtualBoxConfigurationService,
+        VpcsConfigurationService,
+        BuiltInTemplatesConfigurationService,
+        VmwareService,
+        VmwareConfigurationService,
+        DockerService,
+        DockerConfigurationService,
+        IouService,
+        IouConfigurationService,
+        RecentlyOpenedProjectService,
+        ControllerManagementService,
+        MapScaleService,
+        ConsoleService,
+        DefaultConsoleService,
+        NodeCreatedLabelStylesFixer,
+        NonNegativeValidator,
+        RotationValidator,
+        MapSettingsService,
+        InfoService,
+        ComputeService,
+        PacketCaptureService,
+        NotificationService,
+        ThemeService,
+        GoogleAnalyticsService,
+        NodeConsoleService,
+        ControllerResolve,
+        LoginGuard,
+        ConsoleGuard,
+        Title,
+        ApplianceService,
+        UpdatesService,
+        LoginService,
+        UserService
+    ],
+    bootstrap: [AppComponent]
 })
 export class AppModule {
  constructor(protected _googleAnalyticsService: GoogleAnalyticsService) {}
--- a/src/app/cartography/components/experimental-map/drawing/drawings/rect/rect.component.html
+++ b/src/app/cartography/components/experimental-map/drawing/drawings/rect/rect.component.html
@ -7,4 +7,6 @@
  [attr.stroke-dasharray]="stroke_dasharray"
  [attr.width]="rect?.width"
  [attr.height]="rect?.height"
+  [attr.rx]="rect?.rx"
+  [attr.ry]="rect?.ry"
 />
--- a/src/app/cartography/converters/map/map-drawing-to-svg-converter.ts
+++ b/src/app/cartography/converters/map/map-drawing-to-svg-converter.ts
@ -14,7 +14,7 @@ export class MapDrawingToSvgConverter implements Converter<MapDrawing, string> {
    let elem = ``;

    if (mapDrawing.element instanceof RectElement) {
-      elem = `${mapDrawing.element.stroke_dasharray == '' ? `<rect fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\"/>` :`<rect fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" stroke-dasharray=\"${mapDrawing.element.stroke_dasharray}\" />`}`;
+      elem = `${mapDrawing.element.stroke_dasharray == '' ? `<rect fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\" />` :`<rect fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" stroke-dasharray=\"${mapDrawing.element.stroke_dasharray}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\" />`}`;
    } else if (mapDrawing.element instanceof EllipseElement) {
      elem = `${mapDrawing.element.stroke_dasharray == '' ? `<ellipse fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" cx=\"${mapDrawing.element.cx}\" cy=\"${mapDrawing.element.cy}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\"/>` :`<ellipse fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" cx=\"${mapDrawing.element.cx}\" cy=\"${mapDrawing.element.cy}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" stroke-dasharray=\"${mapDrawing.element.stroke_dasharray}\" />`}`;
    } else if (mapDrawing.element instanceof LineElement) {
--- a/src/app/cartography/helpers/drawings-factory/rectangle-element-factory.ts
+++ b/src/app/cartography/helpers/drawings-factory/rectangle-element-factory.ts
@ -13,6 +13,8 @@ export class RectangleElementFactory implements DrawingElementFactory {
    rectElement.stroke_width = 2;
    rectElement.width = 200;
    rectElement.height = 100;
+    rectElement.rx = 0;
+    rectElement.ry = 0;
    return rectElement;
  }
 }
--- a/src/app/cartography/helpers/svg-to-drawing-converter/rect-converter.spec.ts
+++ b/src/app/cartography/helpers/svg-to-drawing-converter/rect-converter.spec.ts
@ -17,6 +17,8 @@ describe('RectConverter', () => {

    element.setAttribute('width', '100px');
    element.setAttribute('height', '200px');
+    element.setAttribute('rx', '0');
+    element.setAttribute('ry', '0');

    const drawing = rectConverter.convert(element);
    expect(drawing.fill).toEqual('#ffffff');
@ -25,6 +27,8 @@ describe('RectConverter', () => {
    expect(drawing.stroke_dasharray).toEqual('5,25,25');
    expect(drawing.width).toEqual(100);
    expect(drawing.height).toEqual(200);
+    expect(drawing.rx).toEqual(0);
+    expect(drawing.ry).toEqual(0);
  });

  it('should parse with no attributes', () => {
@ -37,5 +41,7 @@ describe('RectConverter', () => {
    expect(drawing.stroke_dasharray).toBeUndefined();
    expect(drawing.width).toBeUndefined();
    expect(drawing.height).toBeUndefined();
+    expect(drawing.rx).toBeUndefined();
+    expect(drawing.ry).toBeUndefined();
  });
 });
--- a/src/app/cartography/helpers/svg-to-drawing-converter/rect-converter.ts
+++ b/src/app/cartography/helpers/svg-to-drawing-converter/rect-converter.ts
@ -40,6 +40,16 @@ export class RectConverter implements SvgConverter {
      drawing.height = parseInt(height.value, 10);
    }

+    const rx = element.attributes.getNamedItem('rx');
+    if (rx) {
+      drawing.rx = parseInt(rx.value, 0);
+    }
+
+    const ry = element.attributes.getNamedItem('ry');
+    if (ry) {
+      drawing.ry = parseInt(ry.value, 0);
+    }
+
    return drawing;
  }
 }
--- a/src/app/cartography/models/drawings/rect-element.ts
+++ b/src/app/cartography/models/drawings/rect-element.ts
@ -8,4 +8,6 @@ export class RectElement implements DrawingElement {
  stroke: string;
  stroke_width: number;
  stroke_dasharray: string;
+  rx: number;
+  ry: number;
 }
--- a/src/app/cartography/models/node.ts
+++ b/src/app/cartography/models/node.ts
@ -54,6 +54,8 @@ export class Properties {
  extra_hosts: string;
  replicate_network_connection_state: boolean;
  memory: number;
+  tpm: boolean;
+  uefi: boolean;
 }

 export class Node {
--- a/src/app/cartography/widgets/drawings/rect-drawing.spec.ts
+++ b/src/app/cartography/widgets/drawings/rect-drawing.spec.ts
@ -28,6 +28,8 @@ describe('RectDrawingWidget', () => {
    rect.stroke_dasharray = '5,25,25';
    rect.width = 100;
    rect.height = 200;
+    rect.rx = 0;
+    rect.ry = 0;
    drawing.element = rect;

    const drawings = svg.canvas.selectAll<SVGGElement, MapDrawing>('g.drawing').data([drawing]);
@ -46,5 +48,7 @@ describe('RectDrawingWidget', () => {
    expect(rect_element.getAttribute('stroke-dasharray')).toEqual('5,25,25');
    expect(rect_element.getAttribute('width')).toEqual('100');
    expect(rect_element.getAttribute('height')).toEqual('200');
+    expect(rect_element.getAttribute('rx')).toEqual('0');
+    expect(rect_element.getAttribute('ry')).toEqual('0');
  });
 });
--- a/src/app/cartography/widgets/drawings/rect-drawing.ts
+++ b/src/app/cartography/widgets/drawings/rect-drawing.ts
@ -33,7 +33,9 @@ export class RectDrawingWidget implements DrawingShapeWidget {
      .attr('stroke-width', (rect) => rect.stroke_width)
      .attr('stroke-dasharray', (rect) => this.qtDasharrayFixer.fix(rect.stroke_dasharray))
      .attr('width', (rect) => rect.width)
-      .attr('height', (rect) => rect.height);
+      .attr('height', (rect) => rect.height)
+      .attr('rx', (rect) => rect.rx)
+      .attr('ry', (rect) => rect.ry);

    drawing.exit().remove();
  }
--- a/src/app/cartography/widgets/link.ts
+++ b/src/app/cartography/widgets/link.ts
@ -86,6 +86,7 @@ export class LinkWidget implements Widget {
      .filter((l) => {
        return (
          !l.capturing &&
+          !l.suspend &&
          (l.filters.bpf || l.filters.corrupt || l.filters.delay || l.filters.frequency_drop || l.filters.packet_loss)
        );
      })
@ -111,8 +112,7 @@ export class LinkWidget implements Widget {
    link_body
      .filter((l) => {
        return (
-          ((!l.capturing && l.suspend)|| l.capturing && l.suspend) &&
-          !(l.filters.bpf || l.filters.corrupt || l.filters.delay || l.filters.frequency_drop || l.filters.packet_loss)
+          l.suspend
        );
      })
      .append<SVGGElement>('g')
--- a/src/app/components/controllers/add-controller-dialog/add-controller-dialog.component.ts
+++ b/src/app/components/controllers/add-controller-dialog/add-controller-dialog.component.ts
@ -1,5 +1,5 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { ElectronService } from 'ngx-electron';
 import { Controller } from '../../../models/controller';
@ -17,14 +17,14 @@ export class AddControllerDialogComponent implements OnInit {
  ];
  locations = [];

-  controllerForm = new FormGroup({
-    name: new FormControl('', [Validators.required]),
-    location: new FormControl(''),
-    path: new FormControl(''),
-    ubridge_path: new FormControl(''),
-    host: new FormControl('', [Validators.required]),
-    port: new FormControl('', [Validators.required, Validators.min(1)]),
-    protocol: new FormControl('http:')
+  controllerForm = new UntypedFormGroup({
+    name: new UntypedFormControl('', [Validators.required]),
+    location: new UntypedFormControl(''),
+    path: new UntypedFormControl(''),
+    ubridge_path: new UntypedFormControl(''),
+    host: new UntypedFormControl('', [Validators.required]),
+    port: new UntypedFormControl('', [Validators.required, Validators.min(1)]),
+    protocol: new UntypedFormControl('http:')
  });

  constructor(
--- a/src/app/components/direct-link/direct-link.component.ts
+++ b/src/app/components/direct-link/direct-link.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import{ Controller } from '../../models/controller';
 import { ControllerDatabase } from '../../services/controller.database';
@ -27,10 +27,10 @@ export class DirectLinkComponent implements OnInit {
    { key: 'remote', name: 'Remote' },
  ];

-  controllerForm = new FormGroup({
-    name: new FormControl('', [Validators.required]),
-    location: new FormControl(''),
-    protocol: new FormControl('http:')
+  controllerForm = new UntypedFormGroup({
+    name: new UntypedFormControl('', [Validators.required]),
+    location: new UntypedFormControl(''),
+    protocol: new UntypedFormControl('http:')
  });

  constructor(
--- a/src/app/components/export-portable-project/export-portable-project.component.ts
+++ b/src/app/components/export-portable-project/export-portable-project.component.ts
@ -1,5 +1,5 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Project } from '../../models/project';
 import{ Controller } from '../../models/controller';
@ -11,7 +11,7 @@ import { ProjectService } from '../../services/project.service';
  styleUrls: ['./export-portable-project.component.scss'],
 })
 export class ExportPortableProjectComponent implements OnInit {
-  export_project_form: FormGroup;
+  export_project_form: UntypedFormGroup;
  chosenImage: string = '';
  compression_methods: any = [];
  compression_level: any = [];
@ -26,7 +26,7 @@ export class ExportPortableProjectComponent implements OnInit {
    public dialogRef: MatDialogRef<ExportPortableProjectComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any,
    private projectService: ProjectService,
-    private _fb: FormBuilder
+    private _fb: UntypedFormBuilder
  ) {}

  async ngOnInit() {
--- a/src/app/components/group-details/group-details.component.ts
+++ b/src/app/components/group-details/group-details.component.ts
@ -15,7 +15,7 @@ import {ActivatedRoute} from "@angular/router";
 import {Controller} from "@models/controller";
 import {Group} from "@models/groups/group";
 import {User} from "@models/users/user";
-import {FormControl, FormGroup} from "@angular/forms";
+import {UntypedFormControl, UntypedFormGroup} from "@angular/forms";
 import {MatDialog} from "@angular/material/dialog";
 import {AddUserToGroupDialogComponent} from "@components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component";
 import {RemoveToGroupDialogComponent} from "@components/group-details/remove-to-group-dialog/remove-to-group-dialog.component";
@ -34,7 +34,7 @@ export class GroupDetailsComponent implements OnInit {
  controller: Controller;
  group: Group;
  members: User[];
-  editGroupForm: FormGroup;
+  editGroupForm: UntypedFormGroup;
  pageEvent: PageEvent | undefined;
  searchMembers: string;
  roles: Role[];
@ -44,8 +44,8 @@ export class GroupDetailsComponent implements OnInit {
              private groupService: GroupService,
              private toastService: ToasterService) {

-    this.editGroupForm = new FormGroup({
-      groupname: new FormControl(''),
+    this.editGroupForm = new UntypedFormGroup({
+      groupname: new UntypedFormControl(''),
    });

    this.route.data.subscribe((d: { controller: Controller; group: Group, members: User[], roles: Role[] }) => {
--- a/src/app/components/group-management/add-group-dialog/add-group-dialog.component.ts
+++ b/src/app/components/group-management/add-group-dialog/add-group-dialog.component.ts
@ -12,7 +12,7 @@
 */
 import {Component, Inject, OnInit} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
-import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
+import {UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators} from "@angular/forms";
 import {groupNameAsyncValidator} from "@components/group-management/add-group-dialog/groupNameAsyncValidator";
 import {GroupNameValidator} from "@components/group-management/add-group-dialog/GroupNameValidator";
 import {GroupService} from "../../../services/group.service";
@ -34,20 +34,20 @@ import {map, startWith} from "rxjs/operators";
 })
 export class AddGroupDialogComponent implements OnInit {

-  groupNameForm: FormGroup;
+  groupNameForm: UntypedFormGroup;
  controller: Controller;

  users: User[];
  usersToAdd: Set<User> = new Set([]);
  filteredUsers: Observable<User[]>
  loading = false;
-  autocompleteControl = new FormControl();
+  autocompleteControl = new UntypedFormControl();



  constructor(private dialogRef: MatDialogRef<AddGroupDialogComponent>,
              @Inject(MAT_DIALOG_DATA) public data: { controller: Controller },
-              private formBuilder: FormBuilder,
+              private formBuilder: UntypedFormBuilder,
              private groupNameValidator: GroupNameValidator,
              private groupService: GroupService,
              private userService: UserService,
@ -57,7 +57,7 @@ export class AddGroupDialogComponent implements OnInit {
  ngOnInit(): void {
    this.controller = this.data.controller;
    this.groupNameForm = this.formBuilder.group({
-      groupName: new FormControl(
+      groupName: new UntypedFormControl(
        null,
        [Validators.required, this.groupNameValidator.get],
        [groupNameAsyncValidator(this.data.controller, this.groupService)]
--- a/src/app/components/group-management/add-group-dialog/groupNameAsyncValidator.ts
+++ b/src/app/components/group-management/add-group-dialog/groupNameAsyncValidator.ts
@ -10,14 +10,14 @@
 *
 * Author: Sylvain MATHIEU, Elise LEBEAU
 */
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { timer } from 'rxjs';
 import { map, switchMap, tap } from 'rxjs/operators';
 import { Controller } from "../../../models/controller";
 import { GroupService } from "../../../services/group.service";

 export const groupNameAsyncValidator = (controller: Controller, groupService: GroupService) => {
-  return (control: FormControl) => {
+  return (control: UntypedFormControl) => {
    return timer(500).pipe(
      switchMap(() => groupService.getGroups(controller)),
      map((response) => {
--- a/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.ts
+++ b/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.ts
@ -36,9 +36,9 @@ export class AddImageDialogComponent implements OnInit {
  ) {}

  public ngOnInit() {
-    this.controller =this.data;
+    this.controller = this.data;

-    this.uploaderImage = new FileUploader({});
+    this.uploaderImage = new FileUploader({url: ''});
    this.uploaderImage.onAfterAddingFile = (file) => {
      file.withCredentials = false;
    };
--- a/src/app/components/login/login.component.ts
+++ b/src/app/components/login/login.component.ts
@ -1,5 +1,5 @@
 import { Component, DoCheck, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AuthResponse } from '../../models/authResponse';
 import{ Controller } from '../../models/controller';
@ -26,9 +26,9 @@ export class LoginComponent implements OnInit, DoCheck {
  public isRememberMe: boolean = false;
  public isRememberMeCheked: boolean = false;

-  loginForm = new FormGroup({
-    username: new FormControl('', [Validators.required]),
-    password: new FormControl('', [Validators.required]),
+  loginForm = new UntypedFormGroup({
+    username: new UntypedFormControl('', [Validators.required]),
+    password: new UntypedFormControl('', [Validators.required]),
  });

  constructor(
--- a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.ts
+++ b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { v4 as uuid } from 'uuid';
 import { Compute } from '../../../../../models/compute';
@ -19,7 +19,7 @@ import { ToasterService } from '../../../../../services/toaster.service';
 export class CloudNodesAddTemplateComponent implements OnInit {
  controller:Controller ;
  templateName: string = '';
-  formGroup: FormGroup;
+  formGroup: UntypedFormGroup;
  isLocalComputerChosen: boolean = true;

  constructor(
@ -29,11 +29,11 @@ export class CloudNodesAddTemplateComponent implements OnInit {
    private router: Router,
    private toasterService: ToasterService,
    private templateMocksService: TemplateMocksService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private computeService: ComputeService
  ) {
    this.formGroup = this.formBuilder.group({
-      templateName: new FormControl('', Validators.required),
+      templateName: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.ts
+++ b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { v4 as uuid } from 'uuid';
 import { Compute } from '../../../../../models/compute';
@ -19,7 +19,7 @@ import { ToasterService } from '../../../../../services/toaster.service';
 export class EthernetHubsAddTemplateComponent implements OnInit {
  controller:Controller ;
  templateName: string = '';
-  formGroup: FormGroup;
+  formGroup: UntypedFormGroup;
  isLocalComputerChosen: boolean = true;

  constructor(
@ -29,12 +29,12 @@ export class EthernetHubsAddTemplateComponent implements OnInit {
    private router: Router,
    private toasterService: ToasterService,
    private templateMocksService: TemplateMocksService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private computeService: ComputeService
  ) {
    this.formGroup = this.formBuilder.group({
-      templateName: new FormControl('', Validators.required),
-      numberOfPorts: new FormControl(8, Validators.required),
+      templateName: new UntypedFormControl('', Validators.required),
+      numberOfPorts: new UntypedFormControl(8, Validators.required),
    });
  }

--- a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.ts
+++ b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import{ Controller } from '../../../../../models/controller';
 import { EthernetHubTemplate } from '../../../../../models/templates/ethernet-hub-template';
@ -17,7 +17,7 @@ export class EthernetHubsTemplateDetailsComponent implements OnInit {
  controller:Controller ;
  ethernetHubTemplate: EthernetHubTemplate;
  numberOfPorts: number;
-  inputForm: FormGroup;
+  inputForm: UntypedFormGroup;
  isSymbolSelectionOpened: boolean = false;

  categories = [];
@ -27,14 +27,14 @@ export class EthernetHubsTemplateDetailsComponent implements OnInit {
    private controllerService: ControllerService,
    private builtInTemplatesService: BuiltInTemplatesService,
    private toasterService: ToasterService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService,
    private router: Router
  ) {
    this.inputForm = this.formBuilder.group({
-      templateName: new FormControl('', Validators.required),
-      defaultName: new FormControl('', Validators.required),
-      symbol: new FormControl('', Validators.required),
+      templateName: new UntypedFormControl('', Validators.required),
+      defaultName: new UntypedFormControl('', Validators.required),
+      symbol: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.ts
+++ b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { v4 as uuid } from 'uuid';
 import { Compute } from '../../../../../models/compute';
@ -19,7 +19,7 @@ import { ToasterService } from '../../../../../services/toaster.service';
 export class EthernetSwitchesAddTemplateComponent implements OnInit {
  controller:Controller ;
  templateName: string = '';
-  formGroup: FormGroup;
+  formGroup: UntypedFormGroup;
  isLocalComputerChosen: boolean = true;

  constructor(
@ -29,12 +29,12 @@ export class EthernetSwitchesAddTemplateComponent implements OnInit {
    private router: Router,
    private toasterService: ToasterService,
    private templateMocksService: TemplateMocksService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private computeService: ComputeService
  ) {
    this.formGroup = this.formBuilder.group({
-      templateName: new FormControl('', Validators.required),
-      numberOfPorts: new FormControl(8, Validators.required),
+      templateName: new UntypedFormControl('', Validators.required),
+      numberOfPorts: new UntypedFormControl(8, Validators.required),
    });
  }

--- a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.ts
+++ b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import{ Controller } from '../../../../../models/controller';
 import { EthernetSwitchTemplate } from '../../../../../models/templates/ethernet-switch-template';
@ -18,7 +18,7 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
  @ViewChild(PortsComponent) portsComponent: PortsComponent;
  controller:Controller ;
  ethernetSwitchTemplate: EthernetSwitchTemplate;
-  inputForm: FormGroup;
+  inputForm: UntypedFormGroup;
  isSymbolSelectionOpened: boolean = false;
  categories = [];
  consoleTypes: string[] = [];
@ -28,14 +28,14 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
    private controllerService: ControllerService,
    private builtInTemplatesService: BuiltInTemplatesService,
    private toasterService: ToasterService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService,
    private router: Router
  ) {
    this.inputForm = this.formBuilder.group({
-      templateName: new FormControl('', Validators.required),
-      defaultName: new FormControl('', Validators.required),
-      symbol: new FormControl('', Validators.required),
+      templateName: new UntypedFormControl('', Validators.required),
+      defaultName: new UntypedFormControl('', Validators.required),
+      symbol: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/preferences/docker/add-docker-template/add-docker-template.component.spec.ts
+++ b/src/app/components/preferences/docker/add-docker-template/add-docker-template.component.spec.ts
@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { AbstractControlDirective, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { AbstractControlDirective, UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatCommonModule } from '@angular/material/core';
@ -77,7 +77,7 @@ xdescribe('AddDockerTemplateComponent', () => {
        { provide: ToasterService, useValue: mockedToasterService },
        { provide: TemplateMocksService, useClass: TemplateMocksService },
        { provide: DockerConfigurationService, useClass: DockerConfigurationService },
-        { provide: AbstractControlDirective, useExisting: FormControl, useMulti: true },
+        { provide: AbstractControlDirective, useExisting: UntypedFormControl, useMulti: true },
      ],
      declarations: [AddDockerTemplateComponent],
    }).compileComponents();
--- a/src/app/components/preferences/docker/add-docker-template/add-docker-template.component.ts
+++ b/src/app/components/preferences/docker/add-docker-template/add-docker-template.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { v4 as uuid } from 'uuid';
 import { Compute } from '../../../../models/compute';
@ -27,9 +27,9 @@ export class AddDockerTemplateComponent implements OnInit {
  selectedImage: DockerImage;
  newImageSelected: boolean = false;

-  virtualMachineForm: FormGroup;
-  containerNameForm: FormGroup;
-  networkAdaptersForm: FormGroup;
+  virtualMachineForm: UntypedFormGroup;
+  containerNameForm: UntypedFormGroup;
+  networkAdaptersForm: UntypedFormGroup;
  isLocalComputerChosen: boolean = true;

  constructor(
@ -38,7 +38,7 @@ export class AddDockerTemplateComponent implements OnInit {
    private dockerService: DockerService,
    private toasterService: ToasterService,
    private router: Router,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private templateMocksService: TemplateMocksService,
    private configurationService: DockerConfigurationService,
    private computeService: ComputeService
@ -46,15 +46,15 @@ export class AddDockerTemplateComponent implements OnInit {
    this.dockerTemplate = new DockerTemplate();

    this.virtualMachineForm = this.formBuilder.group({
-      filename: new FormControl(null, Validators.required),
+      filename: new UntypedFormControl(null, Validators.required),
    });

    this.containerNameForm = this.formBuilder.group({
-      templateName: new FormControl(null, Validators.required),
+      templateName: new UntypedFormControl(null, Validators.required),
    });

    this.networkAdaptersForm = this.formBuilder.group({
-      adapters: new FormControl('1', Validators.required),
+      adapters: new UntypedFormControl('1', Validators.required),
    });
  }

--- a/src/app/components/preferences/docker/copy-docker-template/copy-docker-template.component.ts
+++ b/src/app/components/preferences/docker/copy-docker-template/copy-docker-template.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { v4 as uuid } from 'uuid';
 import{ Controller } from '../../../../models/controller';
@ -17,7 +17,7 @@ export class CopyDockerTemplateComponent implements OnInit {
  controller:Controller ;
  templateName: string = '';
  dockerTemplate: DockerTemplate;
-  templateNameForm: FormGroup;
+  templateNameForm: UntypedFormGroup;

  constructor(
    private route: ActivatedRoute,
@ -25,10 +25,10 @@ export class CopyDockerTemplateComponent implements OnInit {
    private dockerService: DockerService,
    private toasterService: ToasterService,
    private router: Router,
-    private formBuilder: FormBuilder
+    private formBuilder: UntypedFormBuilder
  ) {
    this.templateNameForm = this.formBuilder.group({
-      templateName: new FormControl('', Validators.required),
+      templateName: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/preferences/docker/docker-template-details/docker-template-details.component.ts
+++ b/src/app/components/preferences/docker/docker-template-details/docker-template-details.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { CustomAdapter } from '../../../../models/qemu/qemu-custom-adapter';
 import{ Controller } from '../../../../models/controller';
@ -26,7 +26,7 @@ export class DockerTemplateDetailsComponent implements OnInit {
  adapters: CustomAdapter[] = [];
  displayedColumns: string[] = ['adapter_number', 'port_name'];

-  generalSettingsForm: FormGroup;
+  generalSettingsForm: UntypedFormGroup;

  constructor(
    private route: ActivatedRoute,
@ -34,14 +34,14 @@ export class DockerTemplateDetailsComponent implements OnInit {
    private dockerService: DockerService,
    private toasterService: ToasterService,
    private configurationService: DockerConfigurationService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private router: Router
  ) {
    this.generalSettingsForm = this.formBuilder.group({
-      templateName: new FormControl('', Validators.required),
-      defaultName: new FormControl('', Validators.required),
-      adapter: new FormControl('', Validators.required),
-      symbol: new FormControl('', Validators.required),
+      templateName: new UntypedFormControl('', Validators.required),
+      defaultName: new UntypedFormControl('', Validators.required),
+      adapter: new UntypedFormControl('', Validators.required),
+      symbol: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts
+++ b/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts
@ -1,6 +1,6 @@
 import { Location } from '@angular/common';
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 import { UploadServiceService } from 'app/common/uploading-processbar/upload-service.service';
@ -29,9 +29,9 @@ export class AddIosTemplateComponent implements OnInit, OnDestroy {
  iosTemplate: IosTemplate;
  isEtherSwitchRouter: boolean = false;

-  iosImageForm: FormGroup;
-  iosNameForm: FormGroup;
-  iosMemoryForm: FormGroup;
+  iosImageForm: UntypedFormGroup;
+  iosNameForm: UntypedFormGroup;
+  iosMemoryForm: UntypedFormGroup;
  selectedPlatform: string;

  networkAdaptersForTemplate: string[] = [];
@ -59,7 +59,7 @@ export class AddIosTemplateComponent implements OnInit, OnDestroy {
    private controllerService: ControllerService,
    private iosService: IosService,
    private toasterService: ToasterService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private router: Router,
    private templateMocksService: TemplateMocksService,
    private iosConfigurationService: IosConfigurationService,
@ -70,22 +70,22 @@ export class AddIosTemplateComponent implements OnInit, OnDestroy {
    this.iosTemplate = new IosTemplate();

    this.iosImageForm = this.formBuilder.group({
-      imageName: new FormControl(null, [Validators.required]),
+      imageName: new UntypedFormControl(null, [Validators.required]),
    });

    this.iosNameForm = this.formBuilder.group({
-      templateName: new FormControl(null, [Validators.required]),
-      platform: new FormControl(null, [Validators.required]),
-      chassis: new FormControl(null, [Validators.required]),
+      templateName: new UntypedFormControl(null, [Validators.required]),
+      platform: new UntypedFormControl(null, [Validators.required]),
+      chassis: new UntypedFormControl(null, [Validators.required]),
    });

    this.iosMemoryForm = this.formBuilder.group({
-      memory: new FormControl(null, [Validators.required]),
+      memory: new UntypedFormControl(null, [Validators.required]),
    });
  }

  ngOnInit() {
-    this.uploader = new FileUploader({});
+    this.uploader = new FileUploader({url: ''});
    this.uploader.onAfterAddingFile = (file) => {
      file.withCredentials = false;
    };
--- a/src/app/components/preferences/dynamips/copy-ios-template/copy-ios-template.component.ts
+++ b/src/app/components/preferences/dynamips/copy-ios-template/copy-ios-template.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { v4 as uuid } from 'uuid';
 import{ Controller } from '../../../../models/controller';
@ -17,7 +17,7 @@ export class CopyIosTemplateComponent implements OnInit {
  controller:Controller ;
  templateName: string = '';
  iosTemplate: IosTemplate;
-  formGroup: FormGroup;
+  formGroup: UntypedFormGroup;

  constructor(
    private route: ActivatedRoute,
@ -25,10 +25,10 @@ export class CopyIosTemplateComponent implements OnInit {
    private iosService: IosService,
    private toasterService: ToasterService,
    private router: Router,
-    private formBuilder: FormBuilder
+    private formBuilder: UntypedFormBuilder
  ) {
    this.formGroup = this.formBuilder.group({
-      templateName: new FormControl('', Validators.required),
+      templateName: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/preferences/dynamips/ios-template-details/ios-template-details.component.ts
+++ b/src/app/components/preferences/dynamips/ios-template-details/ios-template-details.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import{ Controller } from '../../../../models/controller';
 import { IosTemplate } from '../../../../models/templates/ios-template';
@ -31,40 +31,40 @@ export class IosTemplateDetailsComponent implements OnInit {
  networkAdaptersForPlatform = {};
  networkModules = {};

-  generalSettingsForm: FormGroup;
-  memoryForm: FormGroup;
-  advancedForm: FormGroup;
+  generalSettingsForm: UntypedFormGroup;
+  memoryForm: UntypedFormGroup;
+  advancedForm: UntypedFormGroup;

  constructor(
    private route: ActivatedRoute,
    private controllerService: ControllerService,
    private iosService: IosService,
    private toasterService: ToasterService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private iosConfigurationService: IosConfigurationService,
    private router: Router
  ) {
    this.generalSettingsForm = this.formBuilder.group({
-      templateName: new FormControl('', Validators.required),
-      defaultName: new FormControl('', Validators.required),
-      symbol: new FormControl('', Validators.required),
-      path: new FormControl('', Validators.required),
-      initialConfig: new FormControl('', Validators.required),
+      templateName: new UntypedFormControl('', Validators.required),
+      defaultName: new UntypedFormControl('', Validators.required),
+      symbol: new UntypedFormControl('', Validators.required),
+      path: new UntypedFormControl('', Validators.required),
+      initialConfig: new UntypedFormControl('', Validators.required),
    });

    this.memoryForm = this.formBuilder.group({
-      ram: new FormControl('', Validators.required),
-      nvram: new FormControl('', Validators.required),
-      iomemory: new FormControl('', Validators.required),
-      disk0: new FormControl('', Validators.required),
-      disk1: new FormControl('', Validators.required),
+      ram: new UntypedFormControl('', Validators.required),
+      nvram: new UntypedFormControl('', Validators.required),
+      iomemory: new UntypedFormControl('', Validators.required),
+      disk0: new UntypedFormControl('', Validators.required),
+      disk1: new UntypedFormControl('', Validators.required),
    });

    this.advancedForm = this.formBuilder.group({
-      systemId: new FormControl('', Validators.required),
-      idlemax: new FormControl('', Validators.required),
-      idlesleep: new FormControl('', Validators.required),
-      execarea: new FormControl('', Validators.required),
+      systemId: new UntypedFormControl('', Validators.required),
+      idlemax: new UntypedFormControl('', Validators.required),
+      idlesleep: new UntypedFormControl('', Validators.required),
+      execarea: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.ts
+++ b/src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.ts
@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 import { UploadServiceService } from 'app/common/uploading-processbar/upload-service.service';
@ -32,8 +32,8 @@ export class AddIouTemplateComponent implements OnInit, OnDestroy {
  iouImages: IouImage[] = [];
  uploader: FileUploader;

-  templateNameForm: FormGroup;
-  imageForm: FormGroup;
+  templateNameForm: UntypedFormGroup;
+  imageForm: UntypedFormGroup;
  isLocalComputerChosen: boolean = true;
  uploadProgress: number = 0
  subscription: Subscription;
@ -44,7 +44,7 @@ export class AddIouTemplateComponent implements OnInit, OnDestroy {
    private iouService: IouService,
    private toasterService: ToasterService,
    private router: Router,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private templateMocksService: TemplateMocksService,
    private computeService: ComputeService,
    private uploadServiceService: UploadServiceService,
@ -53,16 +53,16 @@ export class AddIouTemplateComponent implements OnInit, OnDestroy {
    this.iouTemplate = new IouTemplate();

    this.templateNameForm = this.formBuilder.group({
-      templateName: new FormControl(null, Validators.required),
+      templateName: new UntypedFormControl(null, Validators.required),
    });

    this.imageForm = this.formBuilder.group({
-      imageName: new FormControl('', Validators.required),
+      imageName: new UntypedFormControl('', Validators.required),
    });
  }

  ngOnInit() {
-    this.uploader = new FileUploader({});
+    this.uploader = new FileUploader({url: ''});
    this.uploader.onAfterAddingFile = (file) => {
      file.withCredentials = false;
    };
--- a/src/app/components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component.ts
+++ b/src/app/components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { v4 as uuid } from 'uuid';
 import{ Controller } from '../../../../models/controller';
@ -17,7 +17,7 @@ export class CopyIouTemplateComponent implements OnInit {
  controller:Controller ;
  templateName: string = '';
  iouTemplate: IouTemplate;
-  templateNameForm: FormGroup;
+  templateNameForm: UntypedFormGroup;

  constructor(
    private route: ActivatedRoute,
@ -25,10 +25,10 @@ export class CopyIouTemplateComponent implements OnInit {
    private qemuService: IouService,
    private toasterService: ToasterService,
    private router: Router,
-    private formBuilder: FormBuilder
+    private formBuilder: UntypedFormBuilder
  ) {
    this.templateNameForm = this.formBuilder.group({
-      templateName: new FormControl('', Validators.required),
+      templateName: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.html
+++ b/src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.html
@ -107,14 +107,14 @@
        <mat-checkbox [(ngModel)]="iouTemplate.l1_keepalives">
          Enable layer 1 keepalive messages (non-functional) </mat-checkbox
        ><br />
-        <mat-checkbox [(ngModel)]="defaultSettings"> Use default IOU values for memories </mat-checkbox>
-        <mat-form-field class="form-field" *ngIf="!defaultSettings">
+        <mat-checkbox [(ngModel)]="iouTemplate.use_default_iou_values"> Use default IOU values for memories </mat-checkbox>
+        <mat-form-field class="form-field" *ngIf="!iouTemplate.use_default_iou_values">
          <input matInput type="number" [(ngModel)]="iouTemplate.ram" placeholder="RAM size" />
          <span matSuffix>MB</span>
        </mat-form-field>
-        <mat-form-field class="form-field" *ngIf="!defaultSettings">
+        <mat-form-field class="form-field" *ngIf="!iouTemplate.use_default_iou_values">
          <input matInput type="number" [(ngModel)]="iouTemplate.nvram" placeholder="NVRAM size" />
-          <span matSuffix>MB</span>
+          <span matSuffix>KB</span>
        </mat-form-field>
      </mat-expansion-panel>
      <mat-expansion-panel>
--- a/src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.ts
+++ b/src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import{ Controller } from '../../../../models/controller';
 import { IouTemplate } from '../../../../models/templates/iou-template';
@ -24,8 +24,8 @@ export class IouTemplateDetailsComponent implements OnInit {
  consoleResolutions: string[] = [];
  categories = [];

-  generalSettingsForm: FormGroup;
-  networkForm: FormGroup;
+  generalSettingsForm: UntypedFormGroup;
+  networkForm: UntypedFormGroup;

  constructor(
    private route: ActivatedRoute,
@ -34,19 +34,19 @@ export class IouTemplateDetailsComponent implements OnInit {
    private toasterService: ToasterService,
    private configurationService: IouConfigurationService,
    private router: Router,
-    private formBuilder: FormBuilder
+    private formBuilder: UntypedFormBuilder
  ) {
    this.generalSettingsForm = this.formBuilder.group({
-      templateName: new FormControl('', Validators.required),
-      defaultName: new FormControl('', Validators.required),
-      symbol: new FormControl('', Validators.required),
-      path: new FormControl('', Validators.required),
-      initialConfig: new FormControl('', Validators.required),
+      templateName: new UntypedFormControl('', Validators.required),
+      defaultName: new UntypedFormControl('', Validators.required),
+      symbol: new UntypedFormControl('', Validators.required),
+      path: new UntypedFormControl('', Validators.required),
+      initialConfig: new UntypedFormControl('', Validators.required),
    });

    this.networkForm = this.formBuilder.group({
-      ethernetAdapters: new FormControl('', Validators.required),
-      serialAdapters: new FormControl('', Validators.required),
+      ethernetAdapters: new UntypedFormControl('', Validators.required),
+      serialAdapters: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.html
+++ b/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.html
@ -106,7 +106,6 @@
                  placeholder="Please enter name"
                />
              </mat-form-field>
-              <!-- here removed the processbar and common processbar -->
            </div>
          </form>
        </mat-step>
--- a/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.ts
+++ b/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 import { UploadServiceService } from '../../../../common/uploading-processbar/upload-service.service';
@ -38,9 +38,9 @@ export class AddQemuVmTemplateComponent implements OnInit {
  uploadedFile: boolean = false;
  uploadProgress: number = 0;

-  nameForm: FormGroup;
-  memoryForm: FormGroup;
-  diskForm: FormGroup;
+  nameForm: UntypedFormGroup;
+  memoryForm: UntypedFormGroup;
+  diskForm: UntypedFormGroup;
  isLocalComputerChosen: boolean = true;

  constructor(
@ -49,7 +49,7 @@ export class AddQemuVmTemplateComponent implements OnInit {
    private qemuService: QemuService,
    private toasterService: ToasterService,
    private router: Router,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private templateMocksService: TemplateMocksService,
    private configurationService: QemuConfigurationService,
    private computeService: ComputeService,
@ -59,20 +59,20 @@ export class AddQemuVmTemplateComponent implements OnInit {
    this.qemuTemplate = new QemuTemplate();

    this.nameForm = this.formBuilder.group({
-      templateName: new FormControl(null, Validators.required),
+      templateName: new UntypedFormControl(null, Validators.required),
    });

    this.memoryForm = this.formBuilder.group({
-      ramMemory: new FormControl('256', Validators.required),
+      ramMemory: new UntypedFormControl('256', Validators.required),
    });

    this.diskForm = this.formBuilder.group({
-      fileName: new FormControl('', Validators.required),
+      fileName: new UntypedFormControl('', Validators.required),
    });
  }

  ngOnInit() {
-    this.uploader = new FileUploader({});
+    this.uploader = new FileUploader({url: ''});

    this.uploader.onAfterAddingFile = (file) => {
      file.withCredentials = false;
--- a/src/app/components/preferences/qemu/copy-qemu-vm-template/copy-qemu-vm-template.component.ts
+++ b/src/app/components/preferences/qemu/copy-qemu-vm-template/copy-qemu-vm-template.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { v4 as uuid } from 'uuid';
 import { QemuBinary } from '../../../../models/qemu/qemu-binary';
@ -18,7 +18,7 @@ export class CopyQemuVmTemplateComponent implements OnInit {
  controller:Controller ;
  templateName: string = '';
  qemuTemplate: QemuTemplate;
-  nameForm: FormGroup;
+  nameForm: UntypedFormGroup;

  constructor(
    private route: ActivatedRoute,
@ -26,10 +26,10 @@ export class CopyQemuVmTemplateComponent implements OnInit {
    private qemuService: QemuService,
    private toasterService: ToasterService,
    private router: Router,
-    private formBuilder: FormBuilder
+    private formBuilder: UntypedFormBuilder
  ) {
    this.nameForm = this.formBuilder.group({
-      templateName: new FormControl('', Validators.required),
+      templateName: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.html
+++ b/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.html
@ -68,7 +68,7 @@
        <mat-form-field class="form-field">
          <input matInput type="number" [(ngModel)]="qemuTemplate.cpus" placeholder="vCPUs" />
        </mat-form-field>
-       
+
        <mat-form-field class="form-field">
          <mat-select placeholder="Boot priority" [(ngModel)]="qemuTemplate.boot_priority">
            <mat-option *ngFor="let priority of bootPriorities" [value]="priority[1]">
@ -200,6 +200,7 @@
        <button mat-button class="configButton" (click)="setCustomAdaptersConfiguratorState(true)">
          Configure custom adapters</button
        ><br />
+        <mat-checkbox [(ngModel)]="qemuTemplate.replicate_network_connection_state"> Replicate network connection state </mat-checkbox>
      </mat-expansion-panel>
      <mat-expansion-panel>
        <mat-expansion-panel-header>
@ -278,6 +279,8 @@
              <input matInput type="text" [(ngModel)]="qemuTemplate.options" placeholder="Options" />
            </mat-form-field>
            <mat-checkbox [(ngModel)]="qemuTemplate.linked_clone"> Use as a linked base VM </mat-checkbox>
+            <br /><mat-checkbox [(ngModel)]="qemuTemplate.tpm"> Enable the Trusted Platform Module (TPM)</mat-checkbox>
+            <br /><mat-checkbox [(ngModel)]="qemuTemplate.uefi"> Enable the UEFI boot mode </mat-checkbox>
          </mat-card-content>
        </mat-card>
      </mat-expansion-panel>
--- a/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.spec.ts
+++ b/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.spec.ts
@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import {  ComponentFixture, TestBed } from '@angular/core/testing';
-import { AbstractControlDirective, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { AbstractControlDirective, UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
@ -66,7 +66,7 @@ describe('QemuVmTemplateDetailsComponent', () => {
        { provide: QemuService, useValue: mockedQemuService },
        { provide: ToasterService, useValue: mockedToasterService },
        { provide: QemuConfigurationService, useClass: QemuConfigurationService },
-        { provide: AbstractControlDirective, useExisting: FormControl, useMulti: true },
+        { provide: AbstractControlDirective, useExisting: UntypedFormControl, useMulti: true },
      ],
      declarations: [QemuVmTemplateDetailsComponent],
      schemas: [NO_ERRORS_SCHEMA],
--- a/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.ts
+++ b/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { QemuBinary } from '../../../../models/qemu/qemu-binary';
 import { CustomAdapter } from '../../../../models/qemu/qemu-custom-adapter';
@ -30,7 +30,7 @@ export class QemuVmTemplateDetailsComponent implements OnInit {
  activateCpuThrottling: boolean = true;
  isConfiguratorOpened: boolean = false;
  displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type', 'actions'];
-  generalSettingsForm: FormGroup;
+  generalSettingsForm: UntypedFormGroup;
  selectPlatform: string[] = [];
  selectedPlatform: string;

@ -44,13 +44,13 @@ export class QemuVmTemplateDetailsComponent implements OnInit {
    private qemuService: QemuService,
    private toasterService: ToasterService,
    private configurationService: QemuConfigurationService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private router: Router
  ) {
    this.generalSettingsForm = this.formBuilder.group({
-      templateName: new FormControl('', Validators.required),
-      defaultName: new FormControl('', Validators.required),
-      symbol: new FormControl('', Validators.required),
+      templateName: new UntypedFormControl('', Validators.required),
+      defaultName: new UntypedFormControl('', Validators.required),
+      symbol: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component.ts
+++ b/src/app/components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { v4 as uuid } from 'uuid';
 import{ Controller } from '../../../../models/controller';
@ -20,7 +20,7 @@ export class AddVirtualBoxTemplateComponent implements OnInit {
  virtualMachines: VirtualBoxVm[];
  selectedVM: VirtualBoxVm;
  virtualBoxTemplate: VirtualBoxTemplate;
-  vmForm: FormGroup;
+  vmForm: UntypedFormGroup;

  constructor(
    private route: ActivatedRoute,
@ -29,14 +29,15 @@ export class AddVirtualBoxTemplateComponent implements OnInit {
    private toasterService: ToasterService,
    private templateMocksService: TemplateMocksService,
    private router: Router,
-    private formBuilder: FormBuilder
+    private formBuilder: UntypedFormBuilder
  ) {
    this.vmForm = this.formBuilder.group({
-      vm: new FormControl('', Validators.required),
+      vm: new UntypedFormControl('', Validators.required),
    });
  }

  ngOnInit() {
+    this.toasterService.error(`VirtualBox VM support is deprecated and will be removed in a future version, please use Qemu VMs instead`);
    const controller_id = this.route.snapshot.paramMap.get('controller_id');
    this.controllerService.get(parseInt(controller_id, 10)).then((controller:Controller ) => {
      this.controller = controller;
--- a/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.ts
+++ b/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { CustomAdapter } from '../../../../models/qemu/qemu-custom-adapter';
 import{ Controller } from '../../../../models/controller';
@ -25,8 +25,8 @@ export class VirtualBoxTemplateDetailsComponent implements OnInit {
  networkTypes = [];
  displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type', 'actions'];
  isConfiguratorOpened: boolean = false;
-  generalSettingsForm: FormGroup;
-  networkForm: FormGroup;
+  generalSettingsForm: UntypedFormGroup;
+  networkForm: UntypedFormGroup;

  @ViewChild('customAdaptersConfigurator')
  customAdaptersConfigurator: CustomAdaptersComponent;
@ -36,21 +36,21 @@ export class VirtualBoxTemplateDetailsComponent implements OnInit {
    private controllerService: ControllerService,
    private virtualBoxService: VirtualBoxService,
    private toasterService: ToasterService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private virtualBoxConfigurationService: VirtualBoxConfigurationService,
    private router: Router
  ) {
    this.generalSettingsForm = this.formBuilder.group({
-      templateName: new FormControl('', Validators.required),
-      defaultName: new FormControl('', Validators.required),
-      symbol: new FormControl('', Validators.required),
-      ram: new FormControl('', Validators.required),
+      templateName: new UntypedFormControl('', Validators.required),
+      defaultName: new UntypedFormControl('', Validators.required),
+      symbol: new UntypedFormControl('', Validators.required),
+      ram: new UntypedFormControl('', Validators.required),
    });

    this.networkForm = this.formBuilder.group({
-      adapters: new FormControl('', Validators.required),
-      nameFormat: new FormControl('', Validators.required),
-      size: new FormControl('', Validators.required),
+      adapters: new UntypedFormControl('', Validators.required),
+      nameFormat: new UntypedFormControl('', Validators.required),
+      size: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/preferences/vmware/add-vmware-template/add-vmware-template.component.ts
+++ b/src/app/components/preferences/vmware/add-vmware-template/add-vmware-template.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { v4 as uuid } from 'uuid';
 import{ Controller } from '../../../../models/controller';
@ -20,7 +20,7 @@ export class AddVmwareTemplateComponent implements OnInit {
  virtualMachines: VmwareVm[];
  selectedVM: VmwareVm;
  vmwareTemplate: VmwareTemplate;
-  templateNameForm: FormGroup;
+  templateNameForm: UntypedFormGroup;

  constructor(
    private route: ActivatedRoute,
@ -29,14 +29,15 @@ export class AddVmwareTemplateComponent implements OnInit {
    private toasterService: ToasterService,
    private templateMocksService: TemplateMocksService,
    private router: Router,
-    private formBuilder: FormBuilder
+    private formBuilder: UntypedFormBuilder
  ) {
    this.templateNameForm = this.formBuilder.group({
-      templateName: new FormControl(null, [Validators.required]),
+      templateName: new UntypedFormControl(null, [Validators.required]),
    });
  }

  ngOnInit() {
+    this.toasterService.error(`VMware VM support is deprecated and will be removed in a future version, please use Qemu VMs instead`);
    const controller_id = this.route.snapshot.paramMap.get('controller_id');
    this.controllerService.get(parseInt(controller_id, 10)).then((controller:Controller ) => {
      this.controller = controller;
--- a/src/app/components/preferences/vmware/vmware-template-details/vmware-template-details.component.ts
+++ b/src/app/components/preferences/vmware/vmware-template-details/vmware-template-details.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { CustomAdapter } from '../../../../models/qemu/qemu-custom-adapter';
 import{ Controller } from '../../../../models/controller';
@ -18,7 +18,7 @@ import { CustomAdaptersComponent } from '../../common/custom-adapters/custom-ada
 export class VmwareTemplateDetailsComponent implements OnInit {
  controller:Controller ;
  vmwareTemplate: VmwareTemplate;
-  generalSettingsForm: FormGroup;
+  generalSettingsForm: UntypedFormGroup;
  displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type', 'actions'];
  isConfiguratorOpened: boolean = false;
  isSymbolSelectionOpened: boolean = false;
@ -35,14 +35,14 @@ export class VmwareTemplateDetailsComponent implements OnInit {
    private controllerService: ControllerService,
    private vmwareService: VmwareService,
    private toasterService: ToasterService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private vmwareConfigurationService: VmwareConfigurationService,
    private router: Router
  ) {
    this.generalSettingsForm = this.formBuilder.group({
-      templateName: new FormControl('', Validators.required),
-      defaultName: new FormControl('', Validators.required),
-      symbol: new FormControl('', Validators.required),
+      templateName: new UntypedFormControl('', Validators.required),
+      defaultName: new UntypedFormControl('', Validators.required),
+      symbol: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/preferences/vpcs/add-vpcs-template/add-vpcs-template.component.ts
+++ b/src/app/components/preferences/vpcs/add-vpcs-template/add-vpcs-template.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { v4 as uuid } from 'uuid';
 import { Compute } from '../../../../models/compute';
@ -19,7 +19,7 @@ import { VpcsService } from '../../../../services/vpcs.service';
 export class AddVpcsTemplateComponent implements OnInit {
  controller:Controller ;
  templateName: string = '';
-  templateNameForm: FormGroup;
+  templateNameForm: UntypedFormGroup;
  isLocalComputerChosen: boolean = true;

  constructor(
@ -29,11 +29,11 @@ export class AddVpcsTemplateComponent implements OnInit {
    private router: Router,
    private toasterService: ToasterService,
    private templateMocksService: TemplateMocksService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private computeService: ComputeService
  ) {
    this.templateNameForm = this.formBuilder.group({
-      templateName: new FormControl(null, [Validators.required]),
+      templateName: new UntypedFormControl(null, [Validators.required]),
    });
  }

--- a/src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.ts
+++ b/src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import{ Controller } from '../../../../models/controller';
 import { VpcsTemplate } from '../../../../models/templates/vpcs-template';
@ -16,7 +16,7 @@ import { VpcsService } from '../../../../services/vpcs.service';
 export class VpcsTemplateDetailsComponent implements OnInit {
  controller:Controller ;
  vpcsTemplate: VpcsTemplate;
-  inputForm: FormGroup;
+  inputForm: UntypedFormGroup;
  isSymbolSelectionOpened: boolean = false;
  consoleTypes: string[] = [];
  categories = [];
@ -26,15 +26,15 @@ export class VpcsTemplateDetailsComponent implements OnInit {
    private controllerService: ControllerService,
    private vpcsService: VpcsService,
    private toasterService: ToasterService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private vpcsConfigurationService: VpcsConfigurationService,
    private router: Router
  ) {
    this.inputForm = this.formBuilder.group({
-      templateName: new FormControl('', Validators.required),
-      defaultName: new FormControl('', Validators.required),
-      scriptFile: new FormControl('', Validators.required),
-      symbol: new FormControl('', Validators.required),
+      templateName: new UntypedFormControl('', Validators.required),
+      defaultName: new UntypedFormControl('', Validators.required),
+      scriptFile: new UntypedFormControl('', Validators.required),
+      symbol: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/project-map/change-hostname-dialog/change-hostname-dialog.component.ts
+++ b/src/app/components/project-map/change-hostname-dialog/change-hostname-dialog.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { Node } from '../../../cartography/models/node';
 import{ Controller } from '../../../models/controller';
@ -14,17 +14,17 @@ import { ToasterService } from '../../../services/toaster.service';
 export class ChangeHostnameDialogComponent implements OnInit {
  controller:Controller ;
  node: Node;
-  inputForm: FormGroup;
+  inputForm: UntypedFormGroup;
  name: string;

  constructor(
    public dialogRef: MatDialogRef<ChangeHostnameDialogComponent>,
    public nodeService: NodeService,
    private toasterService: ToasterService,
-    private formBuilder: FormBuilder
+    private formBuilder: UntypedFormBuilder
  ) {
    this.inputForm = this.formBuilder.group({
-      name: new FormControl('', Validators.required),
+      name: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/project-map/console-wrapper/console-wrapper.component.ts
+++ b/src/app/components/project-map/console-wrapper/console-wrapper.component.ts
@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { ResizeEvent } from 'angular-resizable-element';
 import { Node } from '../../../cartography/models/node';
 import { Project } from '../../../models/project';
@ -37,7 +37,7 @@ export class ConsoleWrapperComponent implements OnInit {
  ) {}

  nodes: Node[] = [];
-  selected = new FormControl(0);
+  selected = new UntypedFormControl(0);

  ngOnInit() {
    this.themeService.getActualTheme() === 'light'
--- a/src/app/components/project-map/context-menu/actions/console-device-action-browser/console-device-action-browser.component.ts
+++ b/src/app/components/project-map/context-menu/actions/console-device-action-browser/console-device-action-browser.component.ts
@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core';
+import { DeviceDetectorService } from 'ngx-device-detector';
 import { Node } from '../../../../../cartography/models/node';
 import{ Controller } from '../../../../../models/controller';
 import { NodeService } from '../../../../../services/node.service';
@ -12,7 +13,7 @@ export class ConsoleDeviceActionBrowserComponent {
  @Input() controller:Controller ;
  @Input() node: Node;

-  constructor(private toasterService: ToasterService, private nodeService: NodeService) {}
+  constructor(private toasterService: ToasterService, private nodeService: NodeService, private deviceService: DeviceDetectorService) {}

  openConsole() {
    this.nodeService.getNode(this.controller, this.node).subscribe((node: Node) => {
@ -21,6 +22,31 @@ export class ConsoleDeviceActionBrowserComponent {
    });
  }

+  createHiddenIframe(target: Element, uri: string) {
+    const iframe = document.createElement("iframe");
+    iframe.src = uri;
+    iframe.id = "hiddenIframe";
+    iframe.style.display = "none";
+    target.appendChild(iframe);
+    return iframe;
+  }
+
+  openUriUsingFirefox(uri: string) {
+      var iframe = (document.querySelector("#hiddenIframe") as HTMLIFrameElement);
+
+      if (!iframe) {
+          iframe = this.createHiddenIframe(document.body, "about:blank");
+      }
+
+      try {
+          iframe.contentWindow.location.href = uri;
+      } catch (e) {
+          if (e.name === "NS_ERROR_UNKNOWN_PROTOCOL") {
+              this.toasterService.error('Protocol handler does not exist');
+          }
+      }
+  }
+
  startConsole() {
    if (this.node.status !== 'started') {
      this.toasterService.error('This node must be started before a console can be opened');
@ -33,20 +59,33 @@ export class ConsoleDeviceActionBrowserComponent {
        this.node.console_host = this.controller.host;
      }

-      if (
-        this.node.console_type === 'telnet' ||
-        this.node.console_type === 'vnc' ||
-        this.node.console_type === 'spice'
-      ) {
-        try {
-          location.assign(
-            `gns3+${this.node.console_type}://${this.node.console_host}:${this.node.console}?name=${this.node.name}&project_id=${this.node.project_id}&node_id=${this.node.node_id}`
-          );
-        } catch (e) {
-          this.toasterService.error(e);
+      const device = this.deviceService.getDeviceInfo();
+
+      try {
+        var uri;
+        if (this.node.console_type === 'telnet') {
+          uri = `gns3+telnet://${this.node.console_host}:${this.node.console}?name=${this.node.name}&project_id=${this.node.project_id}&node_id=${this.node.node_id}`;
+        } else if (this.node.console_type === 'vnc') {
+          uri = `gns3+vnc://${this.node.console_host}:${this.node.console}?name=${this.node.name}&project_id=${this.node.project_id}&node_id=${this.node.node_id}`;
+        } else if (this.node.console_type.startsWith('spice')) {
+          uri = `gns3+spice://${this.node.console_host}:${this.node.console}?name=${this.node.name}&project_id=${this.node.project_id}&node_id=${this.node.node_id}`
+        } else if (this.node.console_type.startsWith('http')) {
+          uri = `${this.node.console_type}://${this.node.console_host}:${this.node.console}`
+          return window.open(uri);  // open an http console directly in a new window/tab
+        } else {
+          this.toasterService.error('Supported console types are: telnet, vnc, spice and spice+agent.');
        }
-      } else {
-        this.toasterService.error('Supported console types: telnet, vnc, spice.');
+
+        if (device.browser === "Firefox") {
+            // Use a hidden iframe otherwise Firefox will disconnect
+            // from the GNS3 controller websocket if we use location.assign()
+            this.openUriUsingFirefox(uri);
+        } else {
+            location.assign(uri);
+        }
+
+      } catch (e) {
+          this.toasterService.error(e);
      }
    }
  }
--- a/src/app/components/project-map/context-menu/actions/console-device-action/console-device-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/console-device-action/console-device-action.component.ts
@ -29,7 +29,7 @@ export class ConsoleDeviceActionComponent implements OnInit {
    let consoleCommand = this.settingsService.getConsoleSettings()
      ? this.settingsService.getConsoleSettings()
      : this.nodeService.getDefaultCommand();
-    const startedNodes = this.nodes.filter((node) => node.status === 'started');
+    const startedNodes = this.nodes.filter((node) => node.status === 'started' && node.console_type !== 'none');

    if (startedNodes.length === 0) {
      this.toasterService.error('Device needs to be started in order to console to it.');
@ -37,7 +37,7 @@ export class ConsoleDeviceActionComponent implements OnInit {
    }

    for (var node of this.nodes) {
-      if (node.status !== 'started') {
+      if (node.status !== 'started' && node.console_type !== 'none') {
        continue;
      }

--- a/src/app/components/project-map/drawings-editors/link-style-editor/link-style-editor.component.ts
+++ b/src/app/components/project-map/drawings-editors/link-style-editor/link-style-editor.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { Link } from '../../../../models/link';
 import { Project } from '../../../../models/project';
@ -20,12 +20,12 @@ export class LinkStyleEditorDialogComponent implements OnInit {
  controller:Controller ;
  project: Project;
  link: Link;
-  formGroup: FormGroup;
+  formGroup: UntypedFormGroup;
  borderTypes = ["Solid", "Dash", "Dot", "Dash Dot", "Dash Dot Dot"];

  constructor(
    public dialogRef: MatDialogRef<LinkStyleEditorDialogComponent>,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private toasterService: ToasterService,
    private linkService: LinkService,
    private linksDataSource: LinksDataSource,
@ -34,9 +34,9 @@ export class LinkStyleEditorDialogComponent implements OnInit {
    private nonNegativeValidator: NonNegativeValidator
  ) {
    this.formGroup = this.formBuilder.group({
-      color: new FormControl('', [Validators.required]),
-      width: new FormControl('', [Validators.required, nonNegativeValidator.get]),
-      type: new FormControl('', [Validators.required])
+      color: new UntypedFormControl('', [Validators.required]),
+      width: new UntypedFormControl('', [Validators.required, nonNegativeValidator.get]),
+      type: new UntypedFormControl('', [Validators.required])
    });
  }

--- a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html
+++ b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html
@ -2,7 +2,7 @@

 <div class="modal-form-container">
  <form [formGroup]="formGroup">
-    <mat-form-field class="form-field">
+    <mat-form-field class="form-field" *ngIf="element.fill !== undefined">
      <input
        matInput
        [ngModelOptions]="{ standalone: true }"
@ -23,7 +23,13 @@
    </mat-form-field>

    <mat-form-field class="form-field">
-      <input matInput formControlName="borderWidth" placeholder="Border width" type="number" />
+      <input
+        matInput formControlName="borderWidth"
+        placeholder="Border width"
+        type="number"
+        min="0"
+        max="100"
+      />
    </mat-form-field>
    <mat-form-field class="form-field">
      <mat-select placeholder="Border style" [ngModelOptions]="{ standalone: true }" [(ngModel)]="element.stroke_dasharray">
@ -31,6 +37,18 @@
      </mat-select>
    </mat-form-field>

+    <mat-form-field class="form-field" *ngIf="element.rx !== undefined">
+      <input
+        matInput
+        [ngModelOptions]="{ standalone: true }"
+        placeholder="Corner radius"
+        type="number"
+        min="0"
+        max="100"
+        [(ngModel)]="element.rx"
+      />
+    </mat-form-field>
+
    <mat-form-field class="form-field">
      <input matInput formControlName="rotation" placeholder="Rotation" type="number" />
    </mat-form-field>
--- a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
+++ b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { DrawingToMapDrawingConverter } from '../../../../cartography/converters/map/drawing-to-map-drawing-converter';
 import { MapDrawingToSvgConverter } from '../../../../cartography/converters/map/map-drawing-to-svg-converter';
@ -26,7 +26,7 @@ export class StyleEditorDialogComponent implements OnInit {
  project: Project;
  drawing: Drawing;
  element: ElementData;
-  formGroup: FormGroup;
+  formGroup: UntypedFormGroup;
  borderTypes = [
    { qt: 'none', value: 'none', name: 'Solid' },
    { qt: '10, 2', value: '25, 25', name: 'Dash' },
@ -42,15 +42,15 @@ export class StyleEditorDialogComponent implements OnInit {
    private mapDrawingToSvgConverter: MapDrawingToSvgConverter,
    private drawingService: DrawingService,
    private drawingsDataSource: DrawingsDataSource,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private toasterService: ToasterService,
    private nonNegativeValidator: NonNegativeValidator,
    private rotationValidator: RotationValidator,
    private qtDasharrayFixer: QtDasharrayFixer
  ) {
    this.formGroup = this.formBuilder.group({
-      borderWidth: new FormControl('', [Validators.required, nonNegativeValidator.get]),
-      rotation: new FormControl('', [Validators.required, rotationValidator.get]),
+      borderWidth: new UntypedFormControl('', [Validators.required, nonNegativeValidator.get]),
+      rotation: new UntypedFormControl('', [Validators.required, rotationValidator.get]),
    });
  }

@ -69,6 +69,11 @@ export class StyleEditorDialogComponent implements OnInit {
      this.element.stroke_width = this.drawing.element.stroke_width;
    }

+    if (this.drawing.element instanceof RectElement) {
+        this.element.rx = this.drawing.element.rx;
+        this.element.ry = this.drawing.element.ry;
+      }
+
    if (this.element.stroke_width === undefined) this.element.stroke_width = 0;
    this.formGroup.controls['borderWidth'].setValue(this.element.stroke_width);
    this.formGroup.controls['rotation'].setValue(this.drawing.rotation);
@ -105,6 +110,12 @@ export class StyleEditorDialogComponent implements OnInit {
        this.drawing.element.stroke_dasharray = this.element.stroke_dasharray;
        this.drawing.element.stroke_width = this.element.stroke_width === 0 ? 2 : this.element.stroke_width;
      }
+
+      if (this.drawing.element instanceof RectElement) {
+        this.drawing.element.rx = this.element.rx;
+        this.drawing.element.ry = this.element.rx;  // set ry with rx because we don't have ry in the form
+      }
+
      let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing);
      mapDrawing.element = this.drawing.element;

@ -125,4 +136,6 @@ export class ElementData {
  stroke: string;
  stroke_width: number;
  stroke_dasharray: string;
+  rx: number;
+  ry: number;
 }
--- a/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.ts
+++ b/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.ts
@ -1,5 +1,5 @@
 import { Component, ElementRef, OnInit, Renderer2, ViewChild } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { DrawingToMapDrawingConverter } from '../../../../cartography/converters/map/drawing-to-map-drawing-converter';
 import { MapDrawingToSvgConverter } from '../../../../cartography/converters/map/map-drawing-to-svg-converter';
@ -40,7 +40,7 @@ export class TextEditorDialogComponent implements OnInit {
  element: TextElement;
  rotation: string;
  isTextEditable: boolean;
-  formGroup: FormGroup;
+  formGroup: UntypedFormGroup;

  constructor(
    private dialogRef: MatDialogRef<TextEditorDialogComponent>,
@ -53,7 +53,7 @@ export class TextEditorDialogComponent implements OnInit {
    private nodesDataSource: NodesDataSource,
    private linkService: LinkService,
    private linksDataSource: LinksDataSource,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private toasterService: ToasterService,
    private rotationValidator: RotationValidator,
    private fontFixer: FontFixer
@ -61,7 +61,7 @@ export class TextEditorDialogComponent implements OnInit {

  ngOnInit() {
    this.formGroup = this.formBuilder.group({
-      rotation: new FormControl('', [Validators.required, this.rotationValidator.get]),
+      rotation: new UntypedFormControl('', [Validators.required, this.rotationValidator.get]),
    });

    if (this.label && this.node) {
--- a/src/app/components/project-map/import-appliance/import-appliance.component.ts
+++ b/src/app/components/project-map/import-appliance/import-appliance.component.ts
@ -33,7 +33,7 @@ export class ImportApplianceComponent implements OnInit {
  ) {}

  ngOnInit() {
-    this.uploader = new FileUploader({});
+    this.uploader = new FileUploader({url: ''});
    this.uploader.onAfterAddingFile = (file) => {
      file.withCredentials = false;
    };
@ -92,6 +92,7 @@ export class ImportApplianceComponent implements OnInit {
        template.console_auto_start = appliance.iou.console_auto_start;
        template.ethernet_adapters = appliance.iou.ethernet_adapters;
        template.l1_keepalives = appliance.iou.l1_keepalives;
+        template.use_default_iou_values = appliance.iou.use_default_iou_values;
        template.nvram = appliance.iou.nvram;
        template.ram = appliance.iou.ram;
        template.serial_adapters = appliance.iou.serial_adapters;
--- a/src/app/components/project-map/log-console/log-console.component.ts
+++ b/src/app/components/project-map/log-console/log-console.component.ts
@ -9,7 +9,7 @@ import {
  OnInit,
  ViewChild,
 } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { Subscription } from 'rxjs';
 import { NodesDataSource } from '../../../cartography/datasources/nodes-datasource';
 import { Drawing } from '../../../cartography/models/drawing';
@ -63,7 +63,7 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
  public style: object = {};
  public isDraggingEnabled: boolean = false;
  public isLightThemeEnabled: boolean = false;
-  public selected = new FormControl(0);
+  public selected = new UntypedFormControl(0);

  constructor(
    private projectWebServiceHandler: ProjectWebServiceHandler,
@ -232,12 +232,14 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
              location.assign(
                `gns3+vnc://${node.console_host}:${node.console}?name=${node.name}&project_id=${node.project_id}&node_id=${node.node_id}`
              );
-            } else if (node.console_type === 'spice') {
+            } else if (node.console_type.startsWith('spice')) {
              location.assign(
                `gns3+spice://${node.console_host}:${node.console}?name=${node.name}&project_id=${node.project_id}&node_id=${node.node_id}`
              );
+            } else if (node.console_type.startsWith('http')) {
+               window.open(`${node.console_type}://${node.console_host}:${node.console}`);
            } else {
-              this.showCommand('Supported console types: telnet, vnc, spice.');
+              this.showCommand('Supported console types are: telnet, vnc, spice and spice+agent');
            }
          } else {
            this.showCommand(`This node must be started before a console can be opened.`);
--- a/src/app/components/project-map/new-template-dialog/new-template-dialog.component.html
+++ b/src/app/components/project-map/new-template-dialog/new-template-dialog.component.html
@ -77,7 +77,7 @@
        </ng-container>

        <!-- <ng-container matColumnDef="expandedDetail">
-                    <mat-cell *matCellDef="let detail"> 
+                    <mat-cell *matCellDef="let detail">
                        The symbol for {{detail.element}}
                    </mat-cell>
                </ng-container> -->
@ -85,14 +85,14 @@
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>

-        <!-- <mat-row 
+        <!-- <mat-row
                    *matRowDef="let row; columns: displayedColumns;"
-                    matRipple 
-                    class="element-row" 
+                    matRipple
+                    class="element-row"
                    [class.expanded]="expandedElement == row"
                    (click)="expandedElement = row">
                </mat-row>
-                <mat-row 
+                <mat-row
                    *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
                    [@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'"
                    style="overflow: hidden">
@ -255,6 +255,70 @@
                </div>
              </div>

+              <div class="list-item-inside" *ngIf="version.images.hdc_disk_image">
+                <span>
+                  {{ version.images.hdb_disk_image }}
+                </span>
+
+                <div>
+                  <span *ngIf="checkImageFromVersion(version.images.hdc_disk_image)"
+                    ><mat-icon matTooltip="Ready to install" matTooltipClass="custom-tooltip">check</mat-icon></span
+                  >
+                  <span *ngIf="!checkImageFromVersion(version.images.hdc_disk_image)"
+                    ><mat-icon matTooltip="Missing" matTooltipClass="custom-tooltip">close</mat-icon></span
+                  >
+
+                  <input
+                    type="file"
+                    class="non-visible"
+                    #file4
+                    (change)="importImage($event, version.images.hdc_disk_image)"
+                    ng2FileSelect
+                    [uploader]="uploaderImage"
+                  />
+                  <button class="button" mat-raised-button (click)="file4.click()">Import</button>
+                  <button
+                    class="button"
+                    mat-raised-button
+                    (click)="downloadImageFromVersion(version.images.hdc_disk_image)"
+                  >
+                    Download
+                  </button>
+                </div>
+              </div>
+
+              <div class="list-item-inside" *ngIf="version.images.hdd_disk_image">
+                <span>
+                  {{ version.images.hdd_disk_image }}
+                </span>
+
+                <div>
+                  <span *ngIf="checkImageFromVersion(version.images.hdd_disk_image)"
+                    ><mat-icon matTooltip="Ready to install" matTooltipClass="custom-tooltip">check</mat-icon></span
+                  >
+                  <span *ngIf="!checkImageFromVersion(version.images.hdd_disk_image)"
+                    ><mat-icon matTooltip="Missing" matTooltipClass="custom-tooltip">close</mat-icon></span
+                  >
+
+                  <input
+                    type="file"
+                    class="non-visible"
+                    #file5
+                    (change)="importImage($event, version.images.hdd_disk_image)"
+                    ng2FileSelect
+                    [uploader]="uploaderImage"
+                  />
+                  <button class="button" mat-raised-button (click)="file5.click()">Import</button>
+                  <button
+                    class="button"
+                    mat-raised-button
+                    (click)="downloadImageFromVersion(version.images.hdd_disk_image)"
+                  >
+                    Download
+                  </button>
+                </div>
+              </div>
+
              <div class="list-item-inside" *ngIf="version.images.cdrom_image">
                <span>
                  {{ version.images.cdrom_image}}
@ -271,12 +335,12 @@
                  <input
                    type="file"
                    class="non-visible"
-                    #file4
+                    #file6
                    (change)="importImage($event, version.images.cdrom_image)"
                    ng2FileSelect
                    [uploader]="uploaderImage"
                  />
-                  <button class="button" mat-raised-button (click)="file4.click()">Import</button>
+                  <button class="button" mat-raised-button (click)="file6.click()">Import</button>
                  <button
                    class="button"
                    mat-raised-button
--- a/src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts
+++ b/src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts
@ -149,7 +149,7 @@ export class NewTemplateDialogComponent implements OnInit {
      this.dataSource.paginator = this.paginator;
    });

-    this.uploader = new FileUploader({});
+    this.uploader = new FileUploader({url: ''});
    this.uploader.onAfterAddingFile = (file) => {
      file.withCredentials = false;
    };
@ -168,7 +168,7 @@ export class NewTemplateDialogComponent implements OnInit {
      this.getAppliance(item.url);
    };

-    this.uploaderImage = new FileUploader({});
+    this.uploaderImage = new FileUploader({url: ''});
    this.uploaderImage.onAfterAddingFile = (file) => {
      file.withCredentials = false;
    };
@ -488,7 +488,7 @@ export class NewTemplateDialogComponent implements OnInit {
    iouTemplate.startup_config = this.applianceToInstall.iou.startup_config;
    iouTemplate.builtin = this.applianceToInstall.builtin;
    iouTemplate.category = this.getCategory();
-    iouTemplate.default_name_format = this.applianceToInstall.port_name_format;
+    iouTemplate.default_name_format = this.applianceToInstall.default_name_format;
    iouTemplate.symbol = this.applianceToInstall.symbol;
    iouTemplate.compute_id = 'local';
    iouTemplate.template_id = uuid();
@ -536,7 +536,7 @@ export class NewTemplateDialogComponent implements OnInit {
    iosTemplate.slot7 = this.applianceToInstall.dynamips.slot7;
    iosTemplate.builtin = this.applianceToInstall.builtin;
    iosTemplate.category = this.getCategory();
-    iosTemplate.default_name_format = this.applianceToInstall.port_name_format;
+    iosTemplate.default_name_format = this.applianceToInstall.default_name_format;
    iosTemplate.symbol = this.applianceToInstall.symbol;
    iosTemplate.compute_id = 'local';
    iosTemplate.template_id = uuid();
@ -574,7 +574,7 @@ export class NewTemplateDialogComponent implements OnInit {
    dockerTemplate.console_type = this.applianceToInstall.docker.console_type;
    dockerTemplate.builtin = this.applianceToInstall.builtin;
    dockerTemplate.category = this.getCategory();
-    dockerTemplate.default_name_format = this.applianceToInstall.port_name_format;
+    dockerTemplate.default_name_format = this.applianceToInstall.default_name_format;
    dockerTemplate.symbol = this.applianceToInstall.symbol;
    dockerTemplate.compute_id = 'local';
    dockerTemplate.template_id = uuid();
@ -626,11 +626,16 @@ export class NewTemplateDialogComponent implements OnInit {
    qemuTemplate.category = this.getCategory();
    qemuTemplate.first_port_name = this.applianceToInstall.first_port_name;
    qemuTemplate.port_name_format = this.applianceToInstall.port_name_format;
+    qemuTemplate.port_segment_size = this.applianceToInstall.port_segment_size;
+    qemuTemplate.default_name_format = this.applianceToInstall.default_name_format
    qemuTemplate.symbol = this.applianceToInstall.symbol;
    qemuTemplate.compute_id = 'local';
    qemuTemplate.template_id = uuid();
    qemuTemplate.hda_disk_image = version.images.hda_disk_image;
    qemuTemplate.hdb_disk_image = version.images.hdb_disk_image;
+    qemuTemplate.hdc_disk_image = version.images.hdc_disk_image;
+    qemuTemplate.hdd_disk_image = version.images.hdd_disk_image;
+    qemuTemplate.cdrom_image = version.images.cdrom_image;
    qemuTemplate.template_type = 'qemu';
    qemuTemplate.usage = this.applianceToInstall.usage;
    qemuTemplate.platform = this.applianceToInstall.qemu.arch;
--- a/src/app/components/project-map/new-template-dialog/template-name-dialog/template-name-dialog.component.ts
+++ b/src/app/components/project-map/new-template-dialog/template-name-dialog/template-name-dialog.component.ts
@ -1,5 +1,5 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import{ Controller } from '../../../../models/controller';
@ -17,14 +17,14 @@ import { ProjectNameValidator } from '../../../projects/models/projectNameValida
 })
 export class TemplateNameDialogComponent implements OnInit {
  controller:Controller ;
-  templateNameForm: FormGroup;
+  templateNameForm: UntypedFormGroup;

  constructor(
    public dialogRef: MatDialogRef<TemplateNameDialogComponent>,
    private router: Router,
    private dialog: MatDialog,
    private toasterService: ToasterService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private templateNameValidator: ProjectNameValidator,
    private templateService: TemplateService,
    @Inject(MAT_DIALOG_DATA) public data: any
@ -33,7 +33,7 @@ export class TemplateNameDialogComponent implements OnInit {
  ngOnInit() {
    let name = this.data['name'];
    this.templateNameForm = this.formBuilder.group({
-      templateName: new FormControl(
+      templateName: new UntypedFormControl(
        name,
        [Validators.required, this.templateNameValidator.get],
        [templateNameAsyncValidator(this.controller, this.templateService)]
--- a/src/app/components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { Node } from '../../../../../cartography/models/node';
 import{ Controller } from '../../../../../models/controller';
@ -15,9 +15,9 @@ export class ConfiguratorDialogAtmSwitchComponent implements OnInit {
  controller:Controller ;
  node: Node;
  name: string;
-  nameForm: FormGroup;
-  inputForm: FormGroup;
-  abstractForm: FormGroup;
+  nameForm: UntypedFormGroup;
+  inputForm: UntypedFormGroup;
+  abstractForm: UntypedFormGroup;
  consoleTypes: string[] = [];

  nodeMappings = new Map<string, string>();
@ -38,22 +38,22 @@ export class ConfiguratorDialogAtmSwitchComponent implements OnInit {
    public dialogRef: MatDialogRef<ConfiguratorDialogAtmSwitchComponent>,
    public nodeService: NodeService,
    private toasterService: ToasterService,
-    private formBuilder: FormBuilder
+    private formBuilder: UntypedFormBuilder
  ) {
    this.nameForm = this.formBuilder.group({
-      name: new FormControl('', Validators.required),
+      name: new UntypedFormControl('', Validators.required),
    });

    this.inputForm = this.formBuilder.group({
-      sourcePort: new FormControl('', Validators.required),
-      sourceVci: new FormControl('', Validators.required),
-      destinationPort: new FormControl('', Validators.required),
-      destinationVci: new FormControl('', Validators.required),
+      sourcePort: new UntypedFormControl('', Validators.required),
+      sourceVci: new UntypedFormControl('', Validators.required),
+      destinationPort: new UntypedFormControl('', Validators.required),
+      destinationVci: new UntypedFormControl('', Validators.required),
    });

    this.abstractForm = this.formBuilder.group({
-      sourceVpi: new FormControl('', Validators.required),
-      destinationVpi: new FormControl('', Validators.required),
+      sourceVpi: new UntypedFormControl('', Validators.required),
+      destinationVpi: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/project-map/node-editors/configurator/cloud/configurator-cloud.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/cloud/configurator-cloud.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { Node } from '../../../../../cartography/models/node';
 import { UdpTunnelsComponent } from '../../../../../components/preferences/common/udp-tunnels/udp-tunnels.component';
@ -19,7 +19,7 @@ export class ConfiguratorDialogCloudComponent implements OnInit {
  controller:Controller ;
  node: Node;
  name: string;
-  generalSettingsForm: FormGroup;
+  generalSettingsForm: UntypedFormGroup;
  consoleTypes: string[] = [];
  onCloseOptions = [];
  bootPriorities = [];
@ -41,11 +41,11 @@ export class ConfiguratorDialogCloudComponent implements OnInit {
    public dialogRef: MatDialogRef<ConfiguratorDialogCloudComponent>,
    public nodeService: NodeService,
    private toasterService: ToasterService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService
  ) {
    this.generalSettingsForm = this.formBuilder.group({
-      name: new FormControl('', Validators.required),
+      name: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/project-map/node-editors/configurator/docker/configurator-docker.component.html
+++ b/src/app/components/project-map/node-editors/configurator/docker/configurator-docker.component.html
@ -40,7 +40,7 @@
              <mat-form-field class="form-field">
                  <input formControlName="cpus" matInput type="number" [(ngModel)]="node.properties.cpus" placeholder="Maximum CPUs">
              </mat-form-field>
-              
+
              <button mat-button class="form-field" (click)="configureCustomAdapters()">
                  Configure custom adapters
              </button>
@ -108,7 +108,7 @@
              <textarea matInput type="text" [(ngModel)]="node.properties.extra_hosts"></textarea></mat-form-field
            ><br />

-            <h6>Additional directories</h6>
+            <h6>Additional volumes</h6>
            <mat-form-field class="form-field">
              <textarea matInput type="text" [(ngModel)]="node.properties.extra_volumes"></textarea>
            </mat-form-field>
--- a/src/app/components/project-map/node-editors/configurator/docker/configurator-docker.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/docker/configurator-docker.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Node } from '../../../../../cartography/models/node';
 import{ Controller } from '../../../../../models/controller';
@ -19,7 +19,7 @@ export class ConfiguratorDialogDockerComponent implements OnInit {
  controller:Controller ;
  node: Node;
  name: string;
-  generalSettingsForm: FormGroup;
+  generalSettingsForm: UntypedFormGroup;
  consoleTypes: string[] = [];
  consoleResolutions: string[] = ['2560x1440', '1920x1080', '1680x1050', '1440x900', '1366x768', '1280x1024', '1280x800', '1024x768', '800x600', '640x480'];
  private conf = {
@ -33,19 +33,19 @@ export class ConfiguratorDialogDockerComponent implements OnInit {
      public dialogReference: MatDialogRef<ConfiguratorDialogDockerComponent>,
      public nodeService: NodeService,
      private toasterService: ToasterService,
-      private formBuilder: FormBuilder,
+      private formBuilder: UntypedFormBuilder,
      private dockerConfigurationService: DockerConfigurationService,
      private nonNegativeValidator: NonNegativeValidator,
      private dialog: MatDialog
  ) {
      this.generalSettingsForm = this.formBuilder.group({
-          name: new FormControl('', Validators.required),
-          adapter: new FormControl('', Validators.required),
-          memory: new FormControl('', nonNegativeValidator.get),
-          cpus: new FormControl('', nonNegativeValidator.get),
-          startCommand: new FormControl(''),
-          consoleHttpPort: new FormControl('', Validators.required),
-          consoleHttpPath: new FormControl('', Validators.required)
+          name: new UntypedFormControl('', Validators.required),
+          adapter: new UntypedFormControl('', Validators.required),
+          memory: new UntypedFormControl('', nonNegativeValidator.get),
+          cpus: new UntypedFormControl('', nonNegativeValidator.get),
+          startCommand: new UntypedFormControl(''),
+          consoleHttpPort: new UntypedFormControl('', Validators.required),
+          consoleHttpPath: new UntypedFormControl('', Validators.required)
      });
  }

--- a/src/app/components/project-map/node-editors/configurator/docker/configure-custom-adapters/configure-custom-adapters.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/docker/configure-custom-adapters/configure-custom-adapters.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
+import { UntypedFormBuilder } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { Node } from '../../../../../../cartography/models/node';
 import{ Controller } from '../../../../../../models/controller';
@ -22,7 +22,7 @@ export class ConfigureCustomAdaptersDialogComponent implements OnInit {
    public dialogRef: MatDialogRef<ConfigureCustomAdaptersDialogComponent>,
    public nodeService: NodeService,
    private toasterService: ToasterService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private dockerConfigurationService: DockerConfigurationService
  ) {}

--- a/src/app/components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { Node } from '../../../../../cartography/models/node';
 import { PortsComponent } from '../../../../../components/preferences/common/ports/ports.component';
@ -18,18 +18,18 @@ export class ConfiguratorDialogEthernetSwitchComponent implements OnInit {
  controller:Controller ;
  node: Node;
  name: string;
-  inputForm: FormGroup;
+  inputForm: UntypedFormGroup;
  consoleTypes: string[] = [];

  constructor(
    public dialogRef: MatDialogRef<ConfiguratorDialogEthernetSwitchComponent>,
    public nodeService: NodeService,
    private toasterService: ToasterService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private ethernetSwitchesConfigurationService: BuiltInTemplatesConfigurationService
  ) {
    this.inputForm = this.formBuilder.group({
-      name: new FormControl('', Validators.required),
+      name: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/project-map/node-editors/configurator/ethernet_hub/configurator-ethernet-hub.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/ethernet_hub/configurator-ethernet-hub.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { Node } from '../../../../../cartography/models/node';
 import{ Controller } from '../../../../../models/controller';
@ -16,7 +16,7 @@ export class ConfiguratorDialogEthernetHubComponent implements OnInit {
  controller:Controller ;
  node: Node;
  numberOfPorts: number;
-  inputForm: FormGroup;
+  inputForm: UntypedFormGroup;
  consoleTypes: string[] = [];
  categories = [];
  name: string;
@ -25,11 +25,11 @@ export class ConfiguratorDialogEthernetHubComponent implements OnInit {
    public dialogRef: MatDialogRef<ConfiguratorDialogEthernetHubComponent>,
    public nodeService: NodeService,
    private toasterService: ToasterService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private vpcsConfigurationService: VpcsConfigurationService
  ) {
    this.inputForm = this.formBuilder.group({
-      name: new FormControl('', Validators.required),
+      name: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/project-map/node-editors/configurator/ios/configurator-ios.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/ios/configurator-ios.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { Node } from '../../../../../cartography/models/node';
 import{ Controller } from '../../../../../models/controller';
@ -16,24 +16,24 @@ export class ConfiguratorDialogIosComponent implements OnInit {
  controller:Controller ;
  node: Node;
  name: string;
-  generalSettingsForm: FormGroup;
-  memoryForm: FormGroup;
+  generalSettingsForm: UntypedFormGroup;
+  memoryForm: UntypedFormGroup;
  consoleTypes: string[] = [];

  constructor(
    public dialogRef: MatDialogRef<ConfiguratorDialogIosComponent>,
    public nodeService: NodeService,
    private toasterService: ToasterService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private configurationService: IosConfigurationService
  ) {
    this.generalSettingsForm = this.formBuilder.group({
-      name: new FormControl('', Validators.required),
+      name: new UntypedFormControl('', Validators.required),
    });

    this.memoryForm = this.formBuilder.group({
-      ram: new FormControl('', Validators.required),
-      nvram: new FormControl('', Validators.required),
+      ram: new UntypedFormControl('', Validators.required),
+      nvram: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/project-map/node-editors/configurator/iou/configurator-iou.component.html
+++ b/src/app/components/project-map/node-editors/configurator/iou/configurator-iou.component.html
@ -20,13 +20,14 @@
              </mat-select>
            </mat-form-field>
            <mat-checkbox [(ngModel)]="node.console_auto_start"> Auto start console </mat-checkbox><br />
-            <mat-form-field class="form-field">
+            <mat-checkbox [(ngModel)]="node.properties.use_default_iou_values"> Use default IOU values for memories </mat-checkbox>
+            <mat-form-field class="form-field" *ngIf="!node.properties.use_default_iou_values">
              <input matInput type="number" [(ngModel)]="node.properties.ram" placeholder="RAM size" />
              <span matSuffix>MB</span>
            </mat-form-field>
-            <mat-form-field class="form-field">
+            <mat-form-field class="form-field" *ngIf="!node.properties.use_default_iou_values">
              <input matInput type="number" [(ngModel)]="node.properties.nvram" placeholder="NVRAM size" />
-              <span matSuffix>MB</span>
+              <span matSuffix>KB</span>
            </mat-form-field>
          </mat-tab>

@ -38,7 +39,7 @@
                  matInput
                  formControlName="ethernetAdapters"
                  type="number"
-                  [(ngModel)]="node.ethernet_adapters"
+                  [(ngModel)]="node.properties.ethernet_adapters"
                  placeholder="Ethernet adapters"
                />
              </mat-form-field>
@ -47,7 +48,7 @@
                  matInput
                  formControlName="serialAdapters"
                  type="number"
-                  [(ngModel)]="node.serial_adapters"
+                  [(ngModel)]="node.properties.serial_adapters"
                  placeholder="Serial adapters"
                />
              </mat-form-field>
--- a/src/app/components/project-map/node-editors/configurator/iou/configurator-iou.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/iou/configurator-iou.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { Node } from '../../../../../cartography/models/node';
 import{ Controller } from '../../../../../models/controller';
@ -16,24 +16,24 @@ export class ConfiguratorDialogIouComponent implements OnInit {
  controller:Controller ;
  node: Node;
  name: string;
-  generalSettingsForm: FormGroup;
-  networkForm: FormGroup;
+  generalSettingsForm: UntypedFormGroup;
+  networkForm: UntypedFormGroup;
  consoleTypes: string[] = [];

  constructor(
    public dialogRef: MatDialogRef<ConfiguratorDialogIouComponent>,
    public nodeService: NodeService,
    private toasterService: ToasterService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private configurationService: IouConfigurationService
  ) {
    this.generalSettingsForm = this.formBuilder.group({
-      name: new FormControl('', Validators.required),
+      name: new UntypedFormControl('', Validators.required),
    });

    this.networkForm = this.formBuilder.group({
-      ethernetAdapters: new FormControl('', Validators.required),
-      serialAdapters: new FormControl('', Validators.required),
+      ethernetAdapters: new UntypedFormControl('', Validators.required),
+      serialAdapters: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/project-map/node-editors/configurator/nat/configurator-nat.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/nat/configurator-nat.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { Node } from '../../../../../cartography/models/node';
 import{ Controller } from '../../../../../models/controller';
@ -15,16 +15,16 @@ export class ConfiguratorDialogNatComponent implements OnInit {
  controller:Controller ;
  node: Node;
  name: string;
-  generalSettingsForm: FormGroup;
+  generalSettingsForm: UntypedFormGroup;

  constructor(
    public dialogRef: MatDialogRef<ConfiguratorDialogNatComponent>,
    public nodeService: NodeService,
    private toasterService: ToasterService,
-    private formBuilder: FormBuilder
+    private formBuilder: UntypedFormBuilder
  ) {
    this.generalSettingsForm = this.formBuilder.group({
-      name: new FormControl('', Validators.required),
+      name: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/project-map/node-editors/configurator/qemu/configurator-qemu.component.html
+++ b/src/app/components/project-map/node-editors/configurator/qemu/configurator-qemu.component.html
@ -32,7 +32,7 @@
            <mat-form-field class="form-field">
              <input matInput type="number" [(ngModel)]="node.properties.cpus" placeholder="vCPUs" />
            </mat-form-field>
-    
+
            <mat-form-field class="form-field">
              <mat-select placeholder="Boot priority" [(ngModel)]="node.properties.boot_priority">
                <mat-option *ngFor="let priority of bootPriorities" [value]="priority[1]">
@ -237,6 +237,12 @@
                <mat-form-field class="form-field">
                  <input matInput type="text" [(ngModel)]="node.properties.options" placeholder="Options" />
                </mat-form-field>
+                <br /><mat-checkbox [(ngModel)]="node.properties.tpm">
+                   Enable the Trusted Platform Module (TPM)
+                 </mat-checkbox>
+                <br /><mat-checkbox [(ngModel)]="node.properties.uefi">
+                   Enable the UEFI boot mode
+                 </mat-checkbox>
              </mat-card-content>
            </mat-card>
          </mat-tab>
--- a/src/app/components/project-map/node-editors/configurator/qemu/configurator-qemu.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/qemu/configurator-qemu.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Node } from '../../../../../cartography/models/node';
 import { CustomAdaptersTableComponent } from '../../../../../components/preferences/common/custom-adapters-table/custom-adapters-table.component';
@ -21,7 +21,7 @@ export class ConfiguratorDialogQemuComponent implements OnInit {
  controller:Controller ;
  node: Node;
  name: string;
-  generalSettingsForm: FormGroup;
+  generalSettingsForm: UntypedFormGroup;
  consoleTypes: string[] = [];
  onCloseOptions = [];
  bootPriorities = [];
@ -46,13 +46,13 @@ export class ConfiguratorDialogQemuComponent implements OnInit {
    public dialogRef: MatDialogRef<ConfiguratorDialogQemuComponent>,
    public nodeService: NodeService,
    private toasterService: ToasterService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private qemuService: QemuService,
    private qemuConfigurationService: QemuConfigurationService
  ) {
    this.generalSettingsForm = this.formBuilder.group({
-      name: new FormControl('', Validators.required),
-      ram: new FormControl('', Validators.required),
+      name: new UntypedFormControl('', Validators.required),
+      ram: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/project-map/node-editors/configurator/qemu/qemu-image-creator/qemu-image-creator.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/qemu/qemu-image-creator/qemu-image-creator.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { QemuImg } from '../../../../../../models/qemu/qemu-img';
 import{ Controller } from '../../../../../../models/controller';
@ -75,19 +75,19 @@ export class QemuImageCreatorComponent implements OnInit {
  lazyRefcountsOptions: string[] = ['off', 'on'];
  refcountBitsOptions: number[] = [1, 2, 4, 8, 16, 32, 64];
  zeroedGrainOptions: string[] = ['on', 'off'];
-  inputForm: FormGroup;
+  inputForm: UntypedFormGroup;

  constructor(
    public dialogRef: MatDialogRef<QemuImageCreatorComponent>,
    public nodeService: NodeService,
    private toasterService: ToasterService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private qemuService: QemuService
  ) {
    this.inputForm = this.formBuilder.group({
-      qemu_img: new FormControl('', Validators.required),
-      path: new FormControl('', Validators.required),
-      size: new FormControl('', Validators.required),
+      qemu_img: new UntypedFormControl('', Validators.required),
+      path: new UntypedFormControl('', Validators.required),
+      size: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { Node } from '../../../../../cartography/models/node';
 import{ Controller } from '../../../../../models/controller';
@ -15,8 +15,8 @@ export class ConfiguratorDialogSwitchComponent implements OnInit {
  controller:Controller ;
  node: Node;
  name: string;
-  nameForm: FormGroup;
-  inputForm: FormGroup;
+  nameForm: UntypedFormGroup;
+  inputForm: UntypedFormGroup;
  consoleTypes: string[] = [];

  nodeMappings = new Map<string, string>();
@ -33,17 +33,17 @@ export class ConfiguratorDialogSwitchComponent implements OnInit {
    public dialogRef: MatDialogRef<ConfiguratorDialogSwitchComponent>,
    public nodeService: NodeService,
    private toasterService: ToasterService,
-    private formBuilder: FormBuilder
+    private formBuilder: UntypedFormBuilder
  ) {
    this.nameForm = this.formBuilder.group({
-      name: new FormControl('', Validators.required),
+      name: new UntypedFormControl('', Validators.required),
    });

    this.inputForm = this.formBuilder.group({
-      sourcePort: new FormControl('', Validators.required),
-      sourceDlci: new FormControl('', Validators.required),
-      destinationPort: new FormControl('', Validators.required),
-      destinationDlci: new FormControl('', Validators.required),
+      sourcePort: new UntypedFormControl('', Validators.required),
+      sourceDlci: new UntypedFormControl('', Validators.required),
+      destinationPort: new UntypedFormControl('', Validators.required),
+      destinationDlci: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { Node } from '../../../../../cartography/models/node';
 import { CustomAdaptersTableComponent } from '../../../../../components/preferences/common/custom-adapters-table/custom-adapters-table.component';
@ -17,7 +17,7 @@ export class ConfiguratorDialogVirtualBoxComponent implements OnInit {
  controller:Controller ;
  node: Node;
  name: string;
-  generalSettingsForm: FormGroup;
+  generalSettingsForm: UntypedFormGroup;
  consoleTypes: string[] = [];
  onCloseOptions = [];

@ -30,12 +30,12 @@ export class ConfiguratorDialogVirtualBoxComponent implements OnInit {
    public dialogRef: MatDialogRef<ConfiguratorDialogVirtualBoxComponent>,
    public nodeService: NodeService,
    private toasterService: ToasterService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private virtualBoxConfigurationService: VirtualBoxConfigurationService
  ) {
    this.generalSettingsForm = this.formBuilder.group({
-      name: new FormControl('', Validators.required),
-      ram: new FormControl('', Validators.required),
+      name: new UntypedFormControl('', Validators.required),
+      ram: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/project-map/node-editors/configurator/vmware/configurator-vmware.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/vmware/configurator-vmware.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { Node } from '../../../../../cartography/models/node';
 import { CustomAdaptersTableComponent } from '../../../../../components/preferences/common/custom-adapters-table/custom-adapters-table.component';
@ -17,7 +17,7 @@ export class ConfiguratorDialogVmwareComponent implements OnInit {
  controller:Controller ;
  node: Node;
  name: string;
-  generalSettingsForm: FormGroup;
+  generalSettingsForm: UntypedFormGroup;
  consoleTypes: string[] = [];
  onCloseOptions = [];

@ -30,11 +30,11 @@ export class ConfiguratorDialogVmwareComponent implements OnInit {
    public dialogRef: MatDialogRef<ConfiguratorDialogVmwareComponent>,
    public nodeService: NodeService,
    private toasterService: ToasterService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private vmwareConfigurationService: VmwareConfigurationService
  ) {
    this.generalSettingsForm = this.formBuilder.group({
-      name: new FormControl('', Validators.required),
+      name: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { Node } from '../../../../../cartography/models/node';
 import{ Controller } from '../../../../../models/controller';
@ -16,18 +16,18 @@ export class ConfiguratorDialogVpcsComponent implements OnInit {
  controller:Controller ;
  node: Node;
  name: string;
-  inputForm: FormGroup;
+  inputForm: UntypedFormGroup;
  consoleTypes: string[] = [];

  constructor(
    public dialogRef: MatDialogRef<ConfiguratorDialogVpcsComponent>,
    public nodeService: NodeService,
    private toasterService: ToasterService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private vpcsConfigurationService: VpcsConfigurationService
  ) {
    this.inputForm = this.formBuilder.group({
-      name: new FormControl('', Validators.required),
+      name: new UntypedFormControl('', Validators.required),
    });
  }

--- a/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.ts
+++ b/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { NodesDataSource } from '../../../../cartography/datasources/nodes-datasource';
 import { CapturingSettings } from '../../../../models/capturingSettings';
@ -22,20 +22,20 @@ export class StartCaptureDialogComponent implements OnInit {
  project: Project;
  link: Link;
  linkTypes = [];
-  inputForm: FormGroup;
+  inputForm: UntypedFormGroup;
  startProgram: boolean;

  constructor(
    private dialogRef: MatDialogRef<PacketFiltersDialogComponent>,
    private linkService: LinkService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private toasterService: ToasterService,
    private nodesDataSource: NodesDataSource,
    private packetCaptureService: PacketCaptureService
  ) {
    this.inputForm = this.formBuilder.group({
-      linkType: new FormControl('', Validators.required),
-      fileName: new FormControl('', Validators.required),
+      linkType: new UntypedFormControl('', Validators.required),
+      fileName: new UntypedFormControl('', Validators.required),
    });
  }

@ -56,7 +56,7 @@ export class StartCaptureDialogComponent implements OnInit {
    const sourcePort = sourceNode.ports[this.link.nodes[0].port_number];
    const targetPort = targetNode.ports[this.link.nodes[1].port_number];
    this.inputForm.controls['fileName'].setValue(
-      `${sourceNode.name}_${sourcePort.name}_to_${targetNode.name}_${targetPort.name}`
+      `${sourceNode.name}_${sourcePort.name}_to_${targetNode.name}_${targetPort.name}`.replace(new RegExp('[^0-9A-Za-z_-]', 'g'), '')
    );
  }

--- a/src/app/components/project-map/project-map-menu/project-map-menu.component.ts
+++ b/src/app/components/project-map/project-map-menu/project-map-menu.component.ts
@ -207,7 +207,7 @@ export class ProjectMapMenuComponent implements OnInit, OnDestroy {
      });
    });
  }
-  
+
  public changeLockValue() {
    this.isLocked = !this.isLocked;
    this.mapSettingsService.changeMapLockValue(this.isLocked);
@ -269,7 +269,7 @@ export class ProjectMapMenuComponent implements OnInit, OnDestroy {
  }

  private createSvgFileForImage(image: string | ArrayBuffer, imageToUpload: HTMLImageElement) {
-    return `<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" height=\"${imageToUpload.height}\" 
+    return `<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" height=\"${imageToUpload.height}\"
                width=\"${imageToUpload.width}\">\n<image height=\"${imageToUpload.height}\" width=\"${imageToUpload.width}\" xlink:href=\"${image}\"/>\n</svg>`;
  }

--- a/src/app/components/project-map/project-map.component.html
+++ b/src/app/components/project-map/project-map.component.html
@ -91,7 +91,7 @@
        <mat-icon>work</mat-icon>
        <span>Projects</span>
      </button>
-      
+
      <button mat-menu-item routerLink="/controller/{{ controller.id }}/preferences">
        <mat-icon>settings_applications</mat-icon>
        <span>Template preferences</span>
--- a/src/app/components/project-map/project-map.component.ts
+++ b/src/app/components/project-map/project-map.component.ts
@ -998,7 +998,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
      this.exportPortableProjectDialog();
    }
  }
-  
+
  exportPortableProjectDialog() {
    const dialogRef = this.dialog.open(ExportPortableProjectComponent, {
      width: '700px',
--- a/src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.ts
+++ b/src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { ElectronService } from 'ngx-electron';
@ -11,19 +11,19 @@ import { ToasterService } from '../../../services/toaster.service';
  styleUrls: ['./screenshot-dialog.component.scss'],
 })
 export class ScreenshotDialogComponent implements OnInit {
-  nameForm: FormGroup;
+  nameForm: UntypedFormGroup;
  isPngAvailable: boolean;
  filetype: string = 'svg';

  constructor(
    public dialogRef: MatDialogRef<ScreenshotDialogComponent>,
    private toasterService: ToasterService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private electronService: ElectronService,
    private deviceService: DeviceDetectorService
  ) {
    this.nameForm = this.formBuilder.group({
-      screenshotName: new FormControl(`screenshot-${Date.now()}`, [Validators.required]),
+      screenshotName: new UntypedFormControl(`screenshot-${Date.now()}`, [Validators.required]),
    });
    this.isPngAvailable = this.electronService.isWindows || this.deviceService.getDeviceInfo().os === 'Windows';
  }
--- a/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.ts
+++ b/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.ts
@ -1,5 +1,5 @@
 import { Component, EventEmitter, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { v4 as uuid } from 'uuid';
@ -19,7 +19,7 @@ import { ProjectNameValidator } from '../models/projectNameValidator';
 })
 export class AddBlankProjectDialogComponent implements OnInit {
  controller:Controller ;
-  projectNameForm: FormGroup;
+  projectNameForm: UntypedFormGroup;
  uuid: string;
  onAddProject = new EventEmitter<string>();

@ -29,13 +29,13 @@ export class AddBlankProjectDialogComponent implements OnInit {
    private dialog: MatDialog,
    private projectService: ProjectService,
    private toasterService: ToasterService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private projectNameValidator: ProjectNameValidator
  ) {}

  ngOnInit() {
    this.projectNameForm = this.formBuilder.group({
-      projectName: new FormControl(
+      projectName: new UntypedFormControl(
        null,
        [Validators.required, this.projectNameValidator.get],
        [projectNameAsyncValidator(this.controller, this.projectService)]
--- a/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.ts
+++ b/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit, Injectable, ViewChild } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { Project, ProjectVariable } from '../../../models/project';
 import{ Controller } from '../../../models/controller';
@ -18,8 +18,8 @@ export class EditProjectDialogComponent implements OnInit {

  controller:Controller ;
  project: Project;
-  formGroup: FormGroup;
-  variableFormGroup: FormGroup;
+  formGroup: UntypedFormGroup;
+  variableFormGroup: UntypedFormGroup;
  projectVariables: ProjectVariable[];

  displayedColumns: string[] = ['name', 'value', 'actions'];
@ -29,22 +29,22 @@ export class EditProjectDialogComponent implements OnInit {

  constructor(
    public dialogRef: MatDialogRef<EditProjectDialogComponent>,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private projectService: ProjectService,
    private toasterService: ToasterService,
    private nonNegativeValidator: NonNegativeValidator
  ) {
    this.formGroup = this.formBuilder.group({
-      projectName: new FormControl('', [Validators.required]),
-      width: new FormControl('', [Validators.required, nonNegativeValidator.get]),
-      height: new FormControl('', [Validators.required, nonNegativeValidator.get]),
-      nodeGridSize: new FormControl('', [Validators.required, nonNegativeValidator.get]),
-      drawingGridSize: new FormControl('', [Validators.required, nonNegativeValidator.get]),
+      projectName: new UntypedFormControl('', [Validators.required]),
+      width: new UntypedFormControl('', [Validators.required, nonNegativeValidator.get]),
+      height: new UntypedFormControl('', [Validators.required, nonNegativeValidator.get]),
+      nodeGridSize: new UntypedFormControl('', [Validators.required, nonNegativeValidator.get]),
+      drawingGridSize: new UntypedFormControl('', [Validators.required, nonNegativeValidator.get]),
    });

    this.variableFormGroup = this.formBuilder.group({
-      name: new FormControl('', [Validators.required]),
-      value: new FormControl('', [Validators.required]),
+      name: new UntypedFormControl('', [Validators.required]),
+      value: new UntypedFormControl('', [Validators.required]),
    });
  }

--- a/src/app/components/projects/import-project-dialog/import-project-dialog.component.spec.ts
+++ b/src/app/components/projects/import-project-dialog/import-project-dialog.component.spec.ts
@ -148,7 +148,7 @@ describe('ImportProjectDialogComponent', () => {
  });

  it('should call uploading item with correct arguments', () => {
-    let fileItem = new FileItem(fileSelectDirective.uploader, new File([], 'fileName'), {});
+    let fileItem = new FileItem(fileSelectDirective.uploader, new File([], 'fileName'), {url: ''});
    fileSelectDirective.uploader.queue.push(fileItem);
    spyOn(fileSelectDirective.uploader, 'uploadItem');

@ -167,7 +167,7 @@ describe('ImportProjectDialogComponent', () => {
  });

  it('should clear queue after calling delete', () => {
-    fileSelectDirective.uploader.queue.push(new FileItem(fileSelectDirective.uploader, new File([], 'fileName'), {}));
+    fileSelectDirective.uploader.queue.push(new FileItem(fileSelectDirective.uploader, new File([], 'fileName'), {url: ''}));
    spyOn(fileSelectDirective.uploader.queue, 'pop');

    component.onDeleteClick();
@ -177,7 +177,7 @@ describe('ImportProjectDialogComponent', () => {
  });

  it('should prepare correct upload path for file', () => {
-    fileSelectDirective.uploader.queue.push(new FileItem(fileSelectDirective.uploader, new File([], 'fileName'), {}));
+    fileSelectDirective.uploader.queue.push(new FileItem(fileSelectDirective.uploader, new File([], 'fileName'), {url: ''}));
    component.projectNameForm.controls['projectName'].setValue('newProject');

    component.onImportClick();
@ -187,7 +187,7 @@ describe('ImportProjectDialogComponent', () => {
  });

  it('should navigate to progress view after clicking import', () => {
-    let fileItem = new FileItem(fileSelectDirective.uploader, new File([], 'fileName'), {});
+    let fileItem = new FileItem(fileSelectDirective.uploader, new File([], 'fileName'), {url: ''});
    fileSelectDirective.uploader.queue.push(fileItem);

    component.onImportClick();
@ -227,7 +227,7 @@ describe('ImportProjectDialogComponent', () => {
  });

  it('should show delete button after selecting project', () => {
-    let fileItem = new FileItem(fileSelectDirective.uploader, new File([], 'fileName'), {});
+    let fileItem = new FileItem(fileSelectDirective.uploader, new File([], 'fileName'), {url: ''});
    fileSelectDirective.uploader.queue.push(fileItem);
    let event = {
      target: {
@ -240,7 +240,7 @@ describe('ImportProjectDialogComponent', () => {
  });

  it('should hide delete button after deselecting project', () => {
-    let fileItem = new FileItem(fileSelectDirective.uploader, new File([], 'fileName'), {});
+    let fileItem = new FileItem(fileSelectDirective.uploader, new File([], 'fileName'), {url: ''});
    fileSelectDirective.uploader.queue.push(fileItem);
    let event = {
      target: {
--- a/src/app/components/projects/import-project-dialog/import-project-dialog.component.ts
+++ b/src/app/components/projects/import-project-dialog/import-project-dialog.component.ts
@ -1,5 +1,5 @@
 import { Component, EventEmitter, Inject, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { ToasterService } from '../../../services/toaster.service';
 import { FileItem, FileUploader, ParsedResponseHeaders } from 'ng2-file-upload';
@ -28,7 +28,7 @@ export class ImportProjectDialogComponent implements OnInit {
  isFinishEnabled: boolean = false;
  isDeleteVisible: boolean = false;
  resultMessage: string = 'The project is being imported... Please wait';
-  projectNameForm: FormGroup;
+  projectNameForm: UntypedFormGroup;
  submitted: boolean = false;
  isFirstStepCompleted: boolean = false;
  uuid: string;
@ -38,7 +38,7 @@ export class ImportProjectDialogComponent implements OnInit {
    private dialog: MatDialog,
    public dialogRef: MatDialogRef<ImportProjectDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private projectService: ProjectService,
    private projectNameValidator: ProjectNameValidator,
    private toasterService : ToasterService,
@ -47,12 +47,12 @@ export class ImportProjectDialogComponent implements OnInit {

  ) {
    this.projectNameForm = this.formBuilder.group({
-      projectName: new FormControl(null, [Validators.required, projectNameValidator.get]),
+      projectName: new UntypedFormControl(null, [Validators.required, projectNameValidator.get]),
    });
  }

  ngOnInit() {
-    this.uploader = new FileUploader({});
+    this.uploader = new FileUploader({url: ''});
    this.uploader.onAfterAddingFile = (file) => {
      file.withCredentials = false;
    };
--- a/src/app/components/projects/projects.component.html
+++ b/src/app/components/projects/projects.component.html
@ -77,17 +77,17 @@
              matTooltip="Export project"
              matTooltipClass="custom-tooltip"
              (click)="exportSelectProject(row)"
-              
+
            >
            <mat-icon aria-label="Export project">arrow_downward</mat-icon>

            </button>
-            
+
          </mat-cell>
        </ng-container>

        <ng-container matColumnDef="delete" >
-          <mat-header-cell *matHeaderCellDef  class="action"> 
+          <mat-header-cell *matHeaderCellDef  class="action">
            <button mat-button   matTooltip="Delete all projects"   matTooltipClass="custom-tooltip"*ngIf="(selection.hasValue() && isAllSelected())  || selection.selected.length > 1" (click)="deleteAllFiles()" aria-label="Example icon button with a delete icon">
             <mat-icon>delete</mat-icon>
            </button>
--- a/src/app/components/projects/save-project-dialog/save-project-dialog.component.ts
+++ b/src/app/components/projects/save-project-dialog/save-project-dialog.component.ts
@ -1,5 +1,5 @@
 import { Component, EventEmitter, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { NodesDataSource } from '../../../cartography/datasources/nodes-datasource';
 import { Project } from '../../../models/project';
@ -17,7 +17,7 @@ import { ProjectNameValidator } from '../models/projectNameValidator';
 export class SaveProjectDialogComponent implements OnInit {
  controller:Controller ;
  project: Project;
-  projectNameForm: FormGroup;
+  projectNameForm: UntypedFormGroup;
  onAddProject = new EventEmitter<string>();

  constructor(
@ -25,11 +25,11 @@ export class SaveProjectDialogComponent implements OnInit {
    private projectService: ProjectService,
    private nodesDataSource: NodesDataSource,
    private toasterService: ToasterService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
    private projectNameValidator: ProjectNameValidator
  ) {
    this.projectNameForm = this.formBuilder.group({
-      projectName: new FormControl(null, [Validators.required, projectNameValidator.get]),
+      projectName: new UntypedFormControl(null, [Validators.required, projectNameValidator.get]),
    });
  }

--- a/src/app/components/role-management/add-role-dialog/add-role-dialog.component.ts
+++ b/src/app/components/role-management/add-role-dialog/add-role-dialog.component.ts
@ -11,7 +11,7 @@
 * Author: Sylvain MATHIEU, Elise LEBEAU
 */
 import {Component, Inject, OnInit} from '@angular/core';
-import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
+import {UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators} from "@angular/forms";
 import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
 import {Controller} from "@models/controller";
 import {GroupNameValidator} from "@components/group-management/add-group-dialog/GroupNameValidator";
@ -25,17 +25,17 @@ import {groupNameAsyncValidator} from "@components/group-management/add-group-di
 })
 export class AddRoleDialogComponent implements OnInit {

-  roleNameForm: FormGroup;
+  roleNameForm: UntypedFormGroup;

  constructor(private dialogRef: MatDialogRef<AddRoleDialogComponent>,
              @Inject(MAT_DIALOG_DATA) public data: { controller: Controller },
-              private formBuilder: FormBuilder) {
+              private formBuilder: UntypedFormBuilder) {
  }

  ngOnInit(): void {
    this.roleNameForm = this.formBuilder.group({
-      name: new FormControl(),
-      description: new FormControl()
+      name: new UntypedFormControl(),
+      description: new UntypedFormControl()
    });
  }

--- a/src/app/components/role-management/role-detail/role-detail.component.ts
+++ b/src/app/components/role-management/role-detail/role-detail.component.ts
@ -16,7 +16,7 @@ import {ActivatedRoute} from "@angular/router";
 import {Controller} from "@models/controller";
 import {ControllerService} from "@services/controller.service";
 import {Role} from "@models/api/role";
-import {FormControl, FormGroup} from "@angular/forms";
+import {UntypedFormControl, UntypedFormGroup} from "@angular/forms";
 import {ToasterService} from "@services/toaster.service";
 import {HttpErrorResponse} from "@angular/common/http";

@ -28,16 +28,16 @@ import {HttpErrorResponse} from "@angular/common/http";
 export class RoleDetailComponent implements OnInit {
  controller: Controller;
  role: Role;
-  editRoleForm: FormGroup;
+  editRoleForm: UntypedFormGroup;

  constructor(private roleService: RoleService,
              private controllerService: ControllerService,
              private toastService: ToasterService,
              private route: ActivatedRoute) {

-    this.editRoleForm = new FormGroup({
-      rolename: new FormControl(),
-      description: new FormControl(),
+    this.editRoleForm = new UntypedFormGroup({
+      rolename: new UntypedFormControl(),
+      description: new UntypedFormControl(),
    });
  }

--- a/Show More
+++ b/Show More