Release web UI 2.2.29

Update topology-summary.component.ts

.gitignore

@@ -1,6 +1,7 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
 # compiled output
+/.angular
 /dist
 /tmp
 /out-tsc

angular.json

@@ -47,10 +47,11 @@
 						"scripts": [],
 						"vendorChunk": true,
 						"extractLicenses": false,
-						"buildOptimizer": false,
+						"buildOptimizer": true,
 						"sourceMap": true,
 						"optimization": false,
-						"namedChunks": true
+						"namedChunks": true,
+						"aot": true
 					},
 					"configurations": {
 						"production": {
@@ -176,6 +177,7 @@
 							"src/styles.scss",
 							"src/theme.scss"
 						],
+						"sourceMap": false,
 						"assets": [
 							"src/assets",
 							"src/favicon.ico"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gns3-web-ui",
-  "version": "2.2.23",
+  "version": "2.2.29",
   "author": {
     "name": "GNS3 Technology Inc.",
     "email": "developers@gns3.com"
@@ -36,31 +36,33 @@
     "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 && ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
     "snyk-protect": "snyk protect",
     "prepare": "yarn run snyk-protect"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^12.1.4",
-    "@angular/cdk": "^12.1.4",
-    "@angular/common": "^12.1.4",
-    "@angular/compiler": "^12.1.4",
-    "@angular/core": "^12.1.4",
-    "@angular/forms": "^12.1.4",
-    "@angular/material": "^12.1.4",
-    "@angular/platform-browser": "^12.1.4",
-    "@angular/platform-browser-dynamic": "^12.1.4",
-    "@angular/router": "^12.1.4",
-    "@sentry/browser": "^6.10.0",
-    "@types/jest": "^26.0.24",
+    "@angular/animations": "^12.2.12",
+    "@angular/cdk": "^12.2.12",
+    "@angular/common": "^12.2.12",
+    "@angular/compiler": "^12.2.12",
+    "@angular/core": "^12.2.12",
+    "@angular/forms": "^12.2.12",
+    "@angular/material": "^12.2.12",
+    "@angular/platform-browser": "^12.2.12",
+    "@angular/platform-browser-dynamic": "^12.2.12",
+    "@angular/router": "^12.2.12",
+    "@sentry/browser": "^6.14.1",
+    "@types/jest": "^27.0.2",
     "@types/mocha": "^9.0.0",
-    "@types/react": "^17.0.15",
-    "@types/react-dom": "^17.0.9",
-    "angular-draggable-droppable": "^4.6.0",
+    "@types/react": "^17.0.34",
+    "@types/react-dom": "^17.0.11",
+    "angular-draggable-droppable": "^5.0.0",
     "angular-resizable-element": "^3.4.0",
-    "bootstrap": "^5.0.2",
+    "bootstrap": "^5.1.3",
     "command-exists": "^1.2.9",
-    "core-js": "^3.16.0",
+    "core-js": "^3.19.1",
+    "css-tree": "^1.1.3",
     "d3-ng2-service": "^2.2.0",
     "eev": "^0.1.5",
     "ini": "^2.0.0",
@@ -71,42 +73,42 @@
     "ngx-childprocess": "^0.0.6",
     "ngx-device-detector": "^2.1.1",
     "ngx-electron": "^2.2.0",
-    "node-fetch": "^2.6.1",
+    "node-fetch": "^3.0.0",
     "notosans-fontface": "1.2.2",
-    "prettier-plugin-organize-imports": "^2.3.3",
-    "rxjs": "^6.5.3",
-    "rxjs-compat": "^6.5.3",
+    "prettier-plugin-organize-imports": "^2.3.4",
+    "rxjs": "^6.6.7",
+    "rxjs-compat": "^6.6.7",
     "save-svg-as-png": "^1.4.17",
-    "snyk": "^1.671.0",
-    "spark-md5": "^3.0.1",
-    "svg-crowbar": "^0.6.5",
+    "snyk": "^1.780.0",
+    "spark-md5": "^3.0.2",
+    "svg-crowbar": "^0.7.0",
     "tree-kill": "^1.2.2",
-    "tslib": "^2.3.0",
+    "tslib": "^2.3.1",
     "typeface-roboto": "^1.1.13",
-    "xterm": "^4.13.0",
+    "xterm": "^4.15.0",
     "xterm-addon-attach": "^0.6.0",
     "xterm-addon-fit": "^0.5.0",
-    "yargs": "^17.0.1",
+    "yargs": "^17.2.1",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^12.1.4",
-    "@angular/cli": "^12.1.4",
-    "@angular/compiler-cli": "^12.1.4",
-    "@angular/language-service": "^12.1.4",
-    "@sentry/cli": "^1.67.2",
-    "@sentry/electron": "^2.5.1",
-    "@types/jasmine": "^3.8.2",
+    "@angular-devkit/build-angular": "^12.2.12",
+    "@angular/cli": "^12.2.12",
+    "@angular/compiler-cli": "^12.2.12",
+    "@angular/language-service": "^12.2.12",
+    "@sentry/cli": "^1.71.0",
+    "@sentry/electron": "^2.5.4",
+    "@types/jasmine": "^3.10.2",
     "@types/jasminewd2": "^2.0.10",
-    "@types/node": "16.4.7",
+    "@types/node": "16.11.6",
     "codelyzer": "^6.0.2",
-    "electron": "^13.1.7",
-    "electron-builder": "22.11.7",
+    "electron": "^13.2.2",
+    "electron-builder": "^22.9.1",
     "file-loader": "^6.2.0",
-    "jasmine-core": "~3.8.0",
+    "jasmine-core": "~3.10.1",
     "jasmine-spec-reporter": "~7.0.0",
     "jquery": "^3.6.0",
-    "karma": "^6.3.4",
+    "karma": "^6.3.8",
     "karma-chrome-launcher": "~3.1.0",
     "karma-cli": "^2.0.0",
     "karma-coverage-istanbul-reporter": "~3.0.3",
@@ -114,16 +116,16 @@
     "karma-jasmine-html-reporter": "^1.7.0",
     "license-checker": "^25.0.1",
     "popper.js": "^1.16.1",
-    "prettier": "^2.3.2",
+    "prettier": "^2.4.1",
     "protractor": "^7.0.0",
     "replace": "^1.2.1",
     "rxjs-tslint": "^0.1.8",
     "ts-mockito": "^2.6.1",
-    "ts-node": "~10.1.0",
+    "ts-node": "~10.4.0",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.18.0",
-    "typescript": "4.3.5",
-    "webpack": "5.47.1",
+    "typescript": "4.2.3",
+    "webpack": "5.62.1",
     "yarn-upgrade-all": "^0.5.4"
   },
   "greenkeeper": {

src/ReleaseNotes.txt

@@ -1,6 +1,9 @@
 GNS3 WebUI is web implementation of user interface for GNS3 software.
 
-Current version: 2.2.22
+Current version: 2.2.24
+
+Bug Fixes & enhancements
+- security fixes
 
 Current version: 2020.4.0-beta.1
 

src/app/cartography/components/text-editor/text-editor.component.ts

@@ -87,6 +87,7 @@ export class TextEditorComponent implements OnInit, OnDestroy {
         `scale(${this.mapScaleService.getScale()})`
       );
       this.temporaryTextElement.nativeElement.focus();
+      document.documentElement.style.cursor = "default";
 
       let textListener = () => {
         this.drawingsEventSource.textAdded.emit(

src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.html

@@ -110,6 +110,9 @@
                   placeholder="Please enter name"
                 />
               </mat-form-field>
+              <div *ngIf="uploadedFile">
+                <mat-progress-bar mode="determinate" [value]="uploadProgress" aria-valuemin="0" aria-valuemax="100"></mat-progress-bar>
+              </div>
             </div>
           </form>
         </mat-step>

src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.ts

@@ -32,6 +32,8 @@ export class AddQemuVmTemplateComponent implements OnInit {
   chosenImage: string = '';
   qemuTemplate: QemuTemplate;
   uploader: FileUploader;
+  uploadedFile: boolean = false;
+  uploadProgress: number = 0;
 
   nameForm: FormGroup;
   memoryForm: FormGroup;
@@ -86,6 +88,9 @@ export class AddQemuVmTemplateComponent implements OnInit {
       });
       this.toasterService.success('Image uploaded');
     };
+    this.uploader.onProgressItem = (progress: any) => {
+      this.uploadProgress = progress['progress'];
+    };
 
     const server_id = this.route.snapshot.paramMap.get('server_id');
     this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
@@ -127,6 +132,7 @@ export class AddQemuVmTemplateComponent implements OnInit {
   }
 
   uploadImageFile(event) {
+    this.uploadedFile = true;
     let name = event.target.files[0].name;
     this.diskForm.controls['fileName'].setValue(name);
 

src/app/components/project-map/new-template-dialog/new-template-dialog.component.html

@@ -196,6 +196,38 @@
                 </div>
               </div>
 
+              <div class="list-item-inside" *ngIf="version.images.bios_image">
+                <span>
+                  {{ version.images.bios_image }}
+                </span>
+
+                <div>
+                  <span *ngIf="checkImageFromVersion(version.images.bios_image)"
+                    ><mat-icon matTooltip="Ready to install" matTooltipClass="custom-tooltip">check</mat-icon></span
+                  >
+                  <span *ngIf="!checkImageFromVersion(version.images.bios_image)"
+                    ><mat-icon matTooltip="Missing" matTooltipClass="custom-tooltip">close</mat-icon></span
+                  >
+
+                  <input
+                    type="file"
+                    class="non-visible"
+                    #fileBios
+                    (change)="importImage($event, version.images.bios_image)"
+                    ng2FileSelect
+                    [uploader]="uploaderImage"
+                  />
+                  <button class="button" mat-raised-button (click)="fileBios.click()">Import</button>
+                  <button
+                    class="button"
+                    mat-raised-button
+                    (click)="downloadImageFromVersion(version.images.bios_image)"
+                  >
+                    Download
+                  </button>
+                </div>
+              </div>
+
               <div class="list-item-inside" *ngIf="version.images.hda_disk_image">
                 <span>
                   {{ version.images.hda_disk_image }}

src/app/components/project-map/node-editors/configurator/docker/configurator-docker.component.ts

@@ -39,7 +39,7 @@ export class ConfiguratorDialogDockerComponent implements OnInit {
     this.generalSettingsForm = this.formBuilder.group({
       name: new FormControl('', Validators.required),
       adapter: new FormControl('', Validators.required),
-      startCommand: new FormControl('', Validators.required),
+      startCommand: new FormControl(''),
       consoleHttpPort: new FormControl('', Validators.required),
       consoleHttpPath: new FormControl('', Validators.required),
     });

src/app/components/project-map/project-map-menu/project-map-menu.component.ts

@@ -104,6 +104,13 @@ export class ProjectMapMenuComponent implements OnInit, OnDestroy {
   }
 
   public addDrawing(selectedObject: string) {
+    if ((selectedObject === 'rectangle' && this.drawTools.isRectangleChosen) || (selectedObject === 'ellipse' && this.drawTools.isEllipseChosen) ||
+    (selectedObject === 'line' && this.drawTools.isLineChosen) || (selectedObject === 'text' && this.drawTools.isTextChosen)) {
+      document.documentElement.style.cursor = "default";
+    } else {
+      document.documentElement.style.cursor = "crosshair";
+    }
+
     switch (selectedObject) {
       case 'rectangle':
         this.drawTools.isTextChosen = false;
@@ -140,6 +147,8 @@ export class ProjectMapMenuComponent implements OnInit, OnDestroy {
   }
 
   public resetDrawToolChoice() {
+    document.documentElement.style.cursor = "default";
+
     this.drawTools.isRectangleChosen = false;
     this.drawTools.isEllipseChosen = false;
     this.drawTools.isLineChosen = false;

src/app/components/project-map/project-map.component.ts

@@ -334,7 +334,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
             this.toggleShowTopologySummary(this.mapSettingsService.isTopologySummaryVisible);
 
             this.recentlyOpenedProjectService.setServerId(this.server.id.toString());
-            this.recentlyOpenedProjectService.setProjectId(this.project.project_id);
 
             if (this.project.status === 'opened') {
               return new Observable<Project>((observer) => {
@@ -423,12 +422,22 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
               this.toasterService.success('Node has been deleted');
             });
           });
-        }
+
+        selected
+          .filter((item) => item instanceof MapDrawing)
+          .forEach((item: MapDrawing) => {
+            const drawing = this.mapDrawingToDrawing.convert(item);
+            this.drawingService.delete(this.server, drawing).subscribe((data) => {
+              this.toasterService.success('Drawing has been deleted');
+            });
+          });
+      }
     });
   }
 
   onProjectLoad(project: Project) {
     this.readonly = this.projectService.isReadOnly(project);
+    this.recentlyOpenedProjectService.setProjectId(this.project.project_id);
 
     const subscription = this.projectService
       .nodes(this.server, project.project_id)

src/app/components/projects/projects.component.html

@@ -2,6 +2,7 @@
   <div class="default-header">
     <div class="row">
       <h1 class="col">Projects</h1>
+      <button class="col" mat-raised-button (click)="goToSystemStatus()" class="add-button">Go to system status</button>
       <button class="col" mat-raised-button (click)="goToPreferences()" class="add-button">Go to preferences</button>
       <button class="col" mat-raised-button color="primary" (click)="addBlankProject()" class="add-button">
         Add blank project

src/app/components/projects/projects.component.ts

@@ -89,6 +89,12 @@ export class ProjectsComponent implements OnInit {
       .catch((error) => this.toasterService.error('Cannot navigate to the preferences'));
   }
 
+  goToSystemStatus() {
+    this.router
+      .navigate(['/server', this.server.id, 'systemstatus'])
+      .catch((error) => this.toasterService.error('Cannot navigate to the system status'));
+  }
+
   refresh() {
     this.projectService.list(this.server).subscribe(
       (projects: Project[]) => {

src/app/components/settings/settings.component.html

@@ -11,6 +11,7 @@
 
           <div>
             <mat-checkbox [(ngModel)]="settings.crash_reports">Send anonymous crash reports</mat-checkbox><br />
+            <mat-checkbox [(ngModel)]="settings.anonymous_statistics">Send anonymous usage statistics</mat-checkbox><br />
             <mat-checkbox [(ngModel)]="integrateLinksLabelsToLinks">Integrate link labels to links</mat-checkbox><br />
             <mat-checkbox [(ngModel)]="openConsolesInWidget">Open consoles in the widget instead of in new tabs after clicking start consoles for all nodes</mat-checkbox>
           </div>

src/app/components/settings/settings.component.spec.ts

@@ -69,6 +69,7 @@ describe('SettingsComponent', () => {
     const settings = {
       crash_reports: true,
       experimental_features: true,
+      anonymous_statistics: true,
       angular_map: false,
       console_command: '',
     };

src/app/components/template/template.component.html

@@ -45,25 +45,25 @@
             <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i])">
               <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i])" />
             </div>
-            <div class="templateText">{{ filteredTemplates[i].name }}</div>
+            <div [ngClass]="{ templateText: !isLightThemeEnabled, lightTemplateText: isLightThemeEnabled }">{{ filteredTemplates[i].name }}</div>
           </span>
           <span *ngIf="filteredTemplates[i + 1]" class="templateIcon">
             <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i + 1])">
               <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i + 1])" />
             </div>
-            <div class="templateText">{{ filteredTemplates[i + 1].name }}</div>
+            <div [ngClass]="{ templateText: !isLightThemeEnabled, lightTemplateText: isLightThemeEnabled }">{{ filteredTemplates[i + 1].name }}</div>
           </span>
           <span *ngIf="filteredTemplates[i + 2]" class="templateIcon">
             <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i + 2])">
               <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i + 2])" />
             </div>
-            <div class="templateText">{{ filteredTemplates[i + 2].name }}</div>
+            <div [ngClass]="{ templateText: !isLightThemeEnabled, lightTemplateText: isLightThemeEnabled }">{{ filteredTemplates[i + 2].name }}</div>
           </span>
           <span *ngIf="filteredTemplates[i + 3]" class="templateIcon">
             <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i + 3])">
               <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i + 3])" />
             </div>
-            <div class="templateText">{{ filteredTemplates[i + 3].name }}</div>
+            <div [ngClass]="{ templateText: !isLightThemeEnabled, lightTemplateText: isLightThemeEnabled }">{{ filteredTemplates[i + 3].name }}</div>
           </span>
         </span>
       </mat-list-item>

src/app/components/template/template.component.scss

@@ -49,6 +49,11 @@
   word-wrap: break-word;
 }
 
+.lightTemplateText {
+  word-wrap: break-word;
+  color: black;
+}
+
 .templateIcon {
   width: 80px !important;
   padding: 10px;

src/app/components/template/template.component.ts

@@ -1,5 +1,7 @@
+import { OverlayContainer } from '@angular/cdk/overlay';
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { ThemeService } from '../../services/theme.service';
 import { Subscription } from 'rxjs';
 import { Project } from '../../models/project';
 import { Server } from '../../models/server';
@@ -18,7 +20,7 @@ export class TemplateComponent implements OnInit, OnDestroy {
   @Input() server: Server;
   @Input() project: Project;
   @Output() onNodeCreation = new EventEmitter<any>();
-
+  overlay;
   templates: Template[] = [];
   filteredTemplates: Template[] = [];
   searchText: string = '';
@@ -45,13 +47,19 @@ export class TemplateComponent implements OnInit, OnDestroy {
   startY: number;
 
   private subscription: Subscription;
+  private themeSubscription: Subscription;
+  private isLightThemeEnabled: boolean = false;
 
   constructor(
     private dialog: MatDialog,
     private templateService: TemplateService,
     private scaleService: MapScaleService,
-    private symbolService: SymbolService
-  ) {}
+    private symbolService: SymbolService,
+    private themeService: ThemeService,
+    private overlayContainer: OverlayContainer, 
+  ) {
+    this.overlay = overlayContainer.getContainerElement();
+  }
 
   ngOnInit() {
     this.subscription = this.templateService.newTemplateCreated.subscribe((template: Template) => {
@@ -64,6 +72,23 @@ export class TemplateComponent implements OnInit, OnDestroy {
       this.templates = listOfTemplates;
     });
     this.symbolService.list(this.server);
+    if (this.themeService.getActualTheme()  === 'light') this.isLightThemeEnabled = true;
+    this.themeSubscription = this.themeService.themeChanged.subscribe((value: string) => {
+      if (value === 'light-theme') this.isLightThemeEnabled = true;
+      this.toggleTheme();
+    });
+  }
+
+  toggleTheme(): void {
+    if (this.overlay.classList.contains("dark-theme")) {
+        this.overlay.classList.remove("dark-theme");
+        this.overlay.classList.add("light-theme");
+    } else if (this.overlay.classList.contains("light-theme")) {
+        this.overlay.classList.remove("light-theme");
+        this.overlay.classList.add("dark-theme");
+    } else {
+        this.overlay.classList.add("light-theme");
+    }
   }
 
   sortTemplates() {

src/app/components/topology-summary/topology-summary.component.ts

@@ -78,7 +78,28 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
       this.computes = computes;
     });
 
-    this.style = { top: '60px', right: '0px', width: '320px', height: '400px' };
+    this.revertPosition();
+  }
+
+  revertPosition(){
+    let leftPosition = localStorage.getItem('leftPosition');
+    let rightPosition = localStorage.getItem('rightPosition');
+    let topPosition = localStorage.getItem('topPosition');
+    let widthOfWidget = localStorage.getItem('widthOfWidget');
+    let heightOfWidget = localStorage.getItem('heightOfWidget');
+
+    if (!topPosition) {
+      this.style = { top: '60px', right: '0px', width: '320px', height: '400px' };
+    } else {
+      this.style = {
+        position: 'fixed',
+        left: `${+leftPosition}px`,
+        right: `${+rightPosition}px`,
+        top: `${+topPosition}px`,
+        width: `${+widthOfWidget}px`,
+        height: `${+heightOfWidget}px`,
+      };
+    }
   }
 
   toggleDragging(value: boolean) {
@@ -101,6 +122,12 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
         width: `${width}px`,
         height: `${height}px`,
       };
+
+      localStorage.setItem('leftPosition', left.toString());
+      localStorage.setItem('topPosition', top.toString());
+      localStorage.setItem('widthOfWidget', width.toString());
+      localStorage.setItem('heightOfWidget', height.toString());
+
     } else {
       let right: number = Number(this.style['right'].split('px')[0]) - x;
       this.style = {
@@ -110,6 +137,11 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
         width: `${width}px`,
         height: `${height}px`,
       };
+
+      localStorage.setItem('rightPosition', right.toString());
+      localStorage.setItem('topPosition', top.toString());
+      localStorage.setItem('widthOfWidget', width.toString());
+      localStorage.setItem('heightOfWidget', height.toString());
     }
   }
 
@@ -140,6 +172,7 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
 
   toggleTopologyVisibility(value: boolean) {
     this.isTopologyVisible = value;
+    this.revertPosition();
   }
 
   compareAsc(first: Node, second: Node) {

src/app/services/google-analytics.service.ts

@@ -1,14 +1,17 @@
 import { Injectable } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { environment } from '../../environments/environment';
+import { SettingsService } from './settings.service';
 declare var gtag: Function;
 
 @Injectable()
 export class GoogleAnalyticsService {
-  constructor(router: Router) {
+  private settingsService: SettingsService;
+
+  constructor(router: Router, settingsService: SettingsService) {
     if (!environment.production) return;
     router.events.subscribe((event) => {
-      if (event instanceof NavigationEnd) {
+      if (settingsService.getStatisticsSettings() && event instanceof NavigationEnd) {
         gtag('set', 'page', event.url);
         gtag('send', 'pageview');
       }

src/app/services/settings.service.ts

@@ -4,6 +4,7 @@ import { BehaviorSubject } from 'rxjs';
 export interface Settings {
   crash_reports: boolean;
   console_command: string;
+  anonymous_statistics: boolean;
 }
 
 @Injectable({
@@ -13,10 +14,12 @@ export class SettingsService {
   private settings: Settings = {
     crash_reports: true,
     console_command: undefined,
+    anonymous_statistics: true
   };
 
   private readonly reportsSettings: string = 'crash_reports';
   private readonly consoleSettings: string = 'console_command';
+  private readonly statisticsSettings: string = 'statistics_command';
 
   constructor() {
     if (this.getItem(this.reportsSettings))
@@ -24,6 +27,9 @@ export class SettingsService {
 
     if (this.getItem(this.consoleSettings))
       this.settings.console_command = this.getItem(this.consoleSettings);
+
+    if (this.getItem(this.statisticsSettings))
+      this.settings.anonymous_statistics = this.getItem(this.statisticsSettings) === 'true' ? true : false;
   }
 
   setReportsSettings(value: boolean) {
@@ -36,10 +42,24 @@ export class SettingsService {
     }
   }
 
+  setStatisticsSettings(value: boolean) {
+    this.settings.anonymous_statistics = value;
+    this.removeItem(this.statisticsSettings);
+    if (value) {
+      this.setItem(this.statisticsSettings, 'true');
+    } else {
+      this.setItem(this.statisticsSettings, 'false');
+    }
+  }
+
   getReportsSettings() {
     return this.getItem(this.reportsSettings) === 'true' ? true : false;
   }
 
+  getStatisticsSettings() {
+    return this.getItem(this.statisticsSettings) === 'true' ? true : false;
+  }
+
   setConsoleSettings(value: string) {
     this.settings.console_command = value;
     this.removeItem(this.consoleSettings);
@@ -70,5 +90,6 @@ export class SettingsService {
     this.settings = settings;
     this.setConsoleSettings(settings.console_command);
     this.setReportsSettings(settings.crash_reports);
+    this.setStatisticsSettings(settings.anonymous_statistics);
   }
 }

src/test.ts

@@ -5,7 +5,9 @@ import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@ang
 declare const require: any;
 
 // First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+});
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.

src/theme.scss

@@ -1,4 +1,4 @@
-@import '~@angular/material/theming';
+@import '@angular/material/theming';
 @import '~material-design-icons/iconfont/material-icons.css';
 @import '~typeface-roboto/index.css';
 @include mat-core();