Merge branch 'master-3.0' into bugfix-1398

.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 }}

.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}}"

.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"
   }
-}
+}

.yarnclean

@@ -3,11 +3,11 @@ __tests__
 node_modules/*/test
 node_modules/*/tests
 powered-test
-e2e
+#e2e
 
 # asset directories
 docs
-doc
+#doc
 website
 images
 

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

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
     }
-}
+}

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,

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/animations": "^14.3.0",
-    "@angular/cdk": "^13.3.5",
+    "@angular/cdk": "^14.2.7",
-    "@angular/common": "^13.3.5",
+    "@angular/common": "^14.3.0",
-    "@angular/compiler": "^13.3.5",
+    "@angular/compiler": "^14.3.0",
-    "@angular/core": "^13.3.5",
+    "@angular/core": "^14.3.0",
-    "@angular/forms": "^13.3.5",
+    "@angular/forms": "^14.3.0",
-    "@angular/material": "^13.3.5",
+    "@angular/material": "^14.2.7",
-    "@angular/platform-browser": "^13.3.5",
+    "@angular/platform-browser": "^14.3.0",
-    "@angular/platform-browser-dynamic": "^13.3.5",
+    "@angular/platform-browser-dynamic": "^14.3.0",
-    "@angular/router": "^13.3.5",
+    "@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-devkit/build-angular": "^14.2.12",
-    "@angular/cli": "^13.3.4",
+    "@angular/cli": "^14.2.12",
-    "@angular/compiler-cli": "^13.3.5",
+    "@angular/compiler-cli": "^14.3.0",
-    "@angular/language-service": "^13.3.5",
+    "@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
-}
+}

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

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

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"
 />

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) {

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;
   }
 }

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();
   });
 });

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;
   }
 }

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;
 }

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 {

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');
   });
 });

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();
   }

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.suspend
-          !(l.filters.bpf || l.filters.corrupt || l.filters.delay || l.filters.frequency_drop || l.filters.packet_loss)
         );
       })
       .append<SVGGElement>('g')

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({
+  controllerForm = new UntypedFormGroup({
-    name: new FormControl('', [Validators.required]),
+    name: new UntypedFormControl('', [Validators.required]),
-    location: new FormControl(''),
+    location: new UntypedFormControl(''),
-    path: new FormControl(''),
+    path: new UntypedFormControl(''),
-    ubridge_path: new FormControl(''),
+    ubridge_path: new UntypedFormControl(''),
-    host: new FormControl('', [Validators.required]),
+    host: new UntypedFormControl('', [Validators.required]),
-    port: new FormControl('', [Validators.required, Validators.min(1)]),
+    port: new UntypedFormControl('', [Validators.required, Validators.min(1)]),
-    protocol: new FormControl('http:')
+    protocol: new UntypedFormControl('http:')
   });
 
   constructor(

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({
+  controllerForm = new UntypedFormGroup({
-    name: new FormControl('', [Validators.required]),
+    name: new UntypedFormControl('', [Validators.required]),
-    location: new FormControl(''),
+    location: new UntypedFormControl(''),
-    protocol: new FormControl('http:')
+    protocol: new UntypedFormControl('http:')
   });
 
   constructor(

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() {

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({
+    this.editGroupForm = new UntypedFormGroup({
-      groupname: new FormControl(''),
+      groupname: new UntypedFormControl(''),
     });
 
     this.route.data.subscribe((d: { controller: Controller; group: Group, members: User[], roles: Role[] }) => {

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)]

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) => {

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;
     };

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({
+  loginForm = new UntypedFormGroup({
-    username: new FormControl('', [Validators.required]),
+    username: new UntypedFormControl('', [Validators.required]),
-    password: new FormControl('', [Validators.required]),
+    password: new UntypedFormControl('', [Validators.required]),
   });
 
   constructor(

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),
     });
   }
 

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),
+      templateName: new UntypedFormControl('', Validators.required),
-      numberOfPorts: new FormControl(8, Validators.required),
+      numberOfPorts: new UntypedFormControl(8, Validators.required),
     });
   }
 

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),
+      templateName: new UntypedFormControl('', Validators.required),
-      defaultName: new FormControl('', Validators.required),
+      defaultName: new UntypedFormControl('', Validators.required),
-      symbol: new FormControl('', Validators.required),
+      symbol: new UntypedFormControl('', Validators.required),
     });
   }
 

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),
+      templateName: new UntypedFormControl('', Validators.required),
-      numberOfPorts: new FormControl(8, Validators.required),
+      numberOfPorts: new UntypedFormControl(8, Validators.required),
     });
   }
 

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),
+      templateName: new UntypedFormControl('', Validators.required),
-      defaultName: new FormControl('', Validators.required),
+      defaultName: new UntypedFormControl('', Validators.required),
-      symbol: new FormControl('', Validators.required),
+      symbol: new UntypedFormControl('', Validators.required),
     });
   }
 

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();

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;
+  virtualMachineForm: UntypedFormGroup;
-  containerNameForm: FormGroup;
+  containerNameForm: UntypedFormGroup;
-  networkAdaptersForm: FormGroup;
+  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),
     });
   }
 

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),
     });
   }
 

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),
+      templateName: new UntypedFormControl('', Validators.required),
-      defaultName: new FormControl('', Validators.required),
+      defaultName: new UntypedFormControl('', Validators.required),
-      adapter: new FormControl('', Validators.required),
+      adapter: new UntypedFormControl('', Validators.required),
-      symbol: new FormControl('', Validators.required),
+      symbol: new UntypedFormControl('', Validators.required),
     });
   }
 

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;
+  iosImageForm: UntypedFormGroup;
-  iosNameForm: FormGroup;
+  iosNameForm: UntypedFormGroup;
-  iosMemoryForm: FormGroup;
+  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]),
+      templateName: new UntypedFormControl(null, [Validators.required]),
-      platform: new FormControl(null, [Validators.required]),
+      platform: new UntypedFormControl(null, [Validators.required]),
-      chassis: new FormControl(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;
     };

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),
     });
   }
 

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;
+  generalSettingsForm: UntypedFormGroup;
-  memoryForm: FormGroup;
+  memoryForm: UntypedFormGroup;
-  advancedForm: FormGroup;
+  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),
+      templateName: new UntypedFormControl('', Validators.required),
-      defaultName: new FormControl('', Validators.required),
+      defaultName: new UntypedFormControl('', Validators.required),
-      symbol: new FormControl('', Validators.required),
+      symbol: new UntypedFormControl('', Validators.required),
-      path: new FormControl('', Validators.required),
+      path: new UntypedFormControl('', Validators.required),
-      initialConfig: new FormControl('', Validators.required),
+      initialConfig: new UntypedFormControl('', Validators.required),
     });
 
     this.memoryForm = this.formBuilder.group({
-      ram: new FormControl('', Validators.required),
+      ram: new UntypedFormControl('', Validators.required),
-      nvram: new FormControl('', Validators.required),
+      nvram: new UntypedFormControl('', Validators.required),
-      iomemory: new FormControl('', Validators.required),
+      iomemory: new UntypedFormControl('', Validators.required),
-      disk0: new FormControl('', Validators.required),
+      disk0: new UntypedFormControl('', Validators.required),
-      disk1: new FormControl('', Validators.required),
+      disk1: new UntypedFormControl('', Validators.required),
     });
 
     this.advancedForm = this.formBuilder.group({
-      systemId: new FormControl('', Validators.required),
+      systemId: new UntypedFormControl('', Validators.required),
-      idlemax: new FormControl('', Validators.required),
+      idlemax: new UntypedFormControl('', Validators.required),
-      idlesleep: new FormControl('', Validators.required),
+      idlesleep: new UntypedFormControl('', Validators.required),
-      execarea: new FormControl('', Validators.required),
+      execarea: new UntypedFormControl('', Validators.required),
     });
   }
 

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;
+  templateNameForm: UntypedFormGroup;
-  imageForm: FormGroup;
+  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;
     };

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),
     });
   }
 

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-checkbox [(ngModel)]="iouTemplate.use_default_iou_values"> Use default IOU values for memories </mat-checkbox>
-        <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.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>

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;
+  generalSettingsForm: UntypedFormGroup;
-  networkForm: FormGroup;
+  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),
+      templateName: new UntypedFormControl('', Validators.required),
-      defaultName: new FormControl('', Validators.required),
+      defaultName: new UntypedFormControl('', Validators.required),
-      symbol: new FormControl('', Validators.required),
+      symbol: new UntypedFormControl('', Validators.required),
-      path: new FormControl('', Validators.required),
+      path: new UntypedFormControl('', Validators.required),
-      initialConfig: new FormControl('', Validators.required),
+      initialConfig: new UntypedFormControl('', Validators.required),
     });
 
     this.networkForm = this.formBuilder.group({
-      ethernetAdapters: new FormControl('', Validators.required),
+      ethernetAdapters: new UntypedFormControl('', Validators.required),
-      serialAdapters: new FormControl('', Validators.required),
+      serialAdapters: new UntypedFormControl('', Validators.required),
     });
   }
 

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>

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;
+  nameForm: UntypedFormGroup;
-  memoryForm: FormGroup;
+  memoryForm: UntypedFormGroup;
-  diskForm: FormGroup;
+  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;

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),
     });
   }
 

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>

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],

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),
+      templateName: new UntypedFormControl('', Validators.required),
-      defaultName: new FormControl('', Validators.required),
+      defaultName: new UntypedFormControl('', Validators.required),
-      symbol: new FormControl('', Validators.required),
+      symbol: new UntypedFormControl('', Validators.required),
     });
   }
 

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;

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;
+  generalSettingsForm: UntypedFormGroup;
-  networkForm: FormGroup;
+  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),
+      templateName: new UntypedFormControl('', Validators.required),
-      defaultName: new FormControl('', Validators.required),
+      defaultName: new UntypedFormControl('', Validators.required),
-      symbol: new FormControl('', Validators.required),
+      symbol: new UntypedFormControl('', Validators.required),
-      ram: new FormControl('', Validators.required),
+      ram: new UntypedFormControl('', Validators.required),
     });
 
     this.networkForm = this.formBuilder.group({
-      adapters: new FormControl('', Validators.required),
+      adapters: new UntypedFormControl('', Validators.required),
-      nameFormat: new FormControl('', Validators.required),
+      nameFormat: new UntypedFormControl('', Validators.required),
-      size: new FormControl('', Validators.required),
+      size: new UntypedFormControl('', Validators.required),
     });
   }
 

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;

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),
+      templateName: new UntypedFormControl('', Validators.required),
-      defaultName: new FormControl('', Validators.required),
+      defaultName: new UntypedFormControl('', Validators.required),
-      symbol: new FormControl('', Validators.required),
+      symbol: new UntypedFormControl('', Validators.required),
     });
   }
 

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]),
     });
   }
 

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),
+      templateName: new UntypedFormControl('', Validators.required),
-      defaultName: new FormControl('', Validators.required),
+      defaultName: new UntypedFormControl('', Validators.required),
-      scriptFile: new FormControl('', Validators.required),
+      scriptFile: new UntypedFormControl('', Validators.required),
-      symbol: new FormControl('', Validators.required),
+      symbol: new UntypedFormControl('', Validators.required),
     });
   }
 

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),
     });
   }
 

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'

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 (
+      const device = this.deviceService.getDeviceInfo();
-        this.node.console_type === 'telnet' ||
+
-        this.node.console_type === 'vnc' ||
+      try {
-        this.node.console_type === 'spice'
+        var uri;
-      ) {
+        if (this.node.console_type === 'telnet') {
-        try {
+          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}`;
-          location.assign(
+        } else if (this.node.console_type === 'vnc') {
-            `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}`
+          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')) {
-        } catch (e) {
+          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}`
-          this.toasterService.error(e);
+        } 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);
       }
     }
   }

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;
       }
 

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]),
+      color: new UntypedFormControl('', [Validators.required]),
-      width: new FormControl('', [Validators.required, nonNegativeValidator.get]),
+      width: new UntypedFormControl('', [Validators.required, nonNegativeValidator.get]),
-      type: new FormControl('', [Validators.required])
+      type: new UntypedFormControl('', [Validators.required])
     });
   }
 

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>

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]),
+      borderWidth: new UntypedFormControl('', [Validators.required, nonNegativeValidator.get]),
-      rotation: new FormControl('', [Validators.required, rotationValidator.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;
 }

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) {

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;

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.`);

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 
+                    matRipple
-                    class="element-row" 
+                    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

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;

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)]

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;
+  nameForm: UntypedFormGroup;
-  inputForm: FormGroup;
+  inputForm: UntypedFormGroup;
-  abstractForm: FormGroup;
+  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),
+      sourcePort: new UntypedFormControl('', Validators.required),
-      sourceVci: new FormControl('', Validators.required),
+      sourceVci: new UntypedFormControl('', Validators.required),
-      destinationPort: new FormControl('', Validators.required),
+      destinationPort: new UntypedFormControl('', Validators.required),
-      destinationVci: new FormControl('', Validators.required),
+      destinationVci: new UntypedFormControl('', Validators.required),
     });
 
     this.abstractForm = this.formBuilder.group({
-      sourceVpi: new FormControl('', Validators.required),
+      sourceVpi: new UntypedFormControl('', Validators.required),
-      destinationVpi: new FormControl('', Validators.required),
+      destinationVpi: new UntypedFormControl('', Validators.required),
     });
   }
 

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),
     });
   }
 

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>

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),
+          name: new UntypedFormControl('', Validators.required),
-          adapter: new FormControl('', Validators.required),
+          adapter: new UntypedFormControl('', Validators.required),
-          memory: new FormControl('', nonNegativeValidator.get),
+          memory: new UntypedFormControl('', nonNegativeValidator.get),
-          cpus: new FormControl('', nonNegativeValidator.get),
+          cpus: new UntypedFormControl('', nonNegativeValidator.get),
-          startCommand: new FormControl(''),
+          startCommand: new UntypedFormControl(''),
-          consoleHttpPort: new FormControl('', Validators.required),
+          consoleHttpPort: new UntypedFormControl('', Validators.required),
-          consoleHttpPath: new FormControl('', Validators.required)
+          consoleHttpPath: new UntypedFormControl('', Validators.required)
       });
   }
 

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
   ) {}
 

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),
     });
   }
 

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),
     });
   }
 

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;
+  generalSettingsForm: UntypedFormGroup;
-  memoryForm: FormGroup;
+  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),
+      ram: new UntypedFormControl('', Validators.required),
-      nvram: new FormControl('', Validators.required),
+      nvram: new UntypedFormControl('', Validators.required),
     });
   }
 

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>

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;
+  generalSettingsForm: UntypedFormGroup;
-  networkForm: FormGroup;
+  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),
+      ethernetAdapters: new UntypedFormControl('', Validators.required),
-      serialAdapters: new FormControl('', Validators.required),
+      serialAdapters: new UntypedFormControl('', Validators.required),
     });
   }
 

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),
     });
   }
 

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>

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),
+      name: new UntypedFormControl('', Validators.required),
-      ram: new FormControl('', Validators.required),
+      ram: new UntypedFormControl('', Validators.required),
     });
   }
 

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),
+      qemu_img: new UntypedFormControl('', Validators.required),
-      path: new FormControl('', Validators.required),
+      path: new UntypedFormControl('', Validators.required),
-      size: new FormControl('', Validators.required),
+      size: new UntypedFormControl('', Validators.required),
     });
   }
 

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;
+  nameForm: UntypedFormGroup;
-  inputForm: FormGroup;
+  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),
+      sourcePort: new UntypedFormControl('', Validators.required),
-      sourceDlci: new FormControl('', Validators.required),
+      sourceDlci: new UntypedFormControl('', Validators.required),
-      destinationPort: new FormControl('', Validators.required),
+      destinationPort: new UntypedFormControl('', Validators.required),
-      destinationDlci: new FormControl('', Validators.required),
+      destinationDlci: new UntypedFormControl('', Validators.required),
     });
   }
 

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),
+      name: new UntypedFormControl('', Validators.required),
-      ram: new FormControl('', Validators.required),
+      ram: new UntypedFormControl('', Validators.required),
     });
   }
 

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),
     });
   }
 

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),
     });
   }
 

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),
+      linkType: new UntypedFormControl('', Validators.required),
-      fileName: new FormControl('', 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'), '')
     );
   }
 

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>`;
   }
 

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>

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',

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';
   }

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)]

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;
+  formGroup: UntypedFormGroup;
-  variableFormGroup: FormGroup;
+  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]),
+      projectName: new UntypedFormControl('', [Validators.required]),
-      width: new FormControl('', [Validators.required, nonNegativeValidator.get]),
+      width: new UntypedFormControl('', [Validators.required, nonNegativeValidator.get]),
-      height: new FormControl('', [Validators.required, nonNegativeValidator.get]),
+      height: new UntypedFormControl('', [Validators.required, nonNegativeValidator.get]),
-      nodeGridSize: new FormControl('', [Validators.required, nonNegativeValidator.get]),
+      nodeGridSize: new UntypedFormControl('', [Validators.required, nonNegativeValidator.get]),
-      drawingGridSize: new FormControl('', [Validators.required, nonNegativeValidator.get]),
+      drawingGridSize: new UntypedFormControl('', [Validators.required, nonNegativeValidator.get]),
     });
 
     this.variableFormGroup = this.formBuilder.group({
-      name: new FormControl('', [Validators.required]),
+      name: new UntypedFormControl('', [Validators.required]),
-      value: new FormControl('', [Validators.required]),
+      value: new UntypedFormControl('', [Validators.required]),
     });
   }
 

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: {

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;
     };

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>

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]),
     });
   }
 

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(),
+      name: new UntypedFormControl(),
-      description: new FormControl()
+      description: new UntypedFormControl()
     });
   }
 

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({
+    this.editRoleForm = new UntypedFormGroup({
-      rolename: new FormControl(),
+      rolename: new UntypedFormControl(),
-      description: new FormControl(),
+      description: new UntypedFormControl(),
     });
   }