upgrade angular12

angular.json

@@ -22,7 +22,6 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "aot": true,
             "assets": [
               "src/.htaccess",
               "src/favicon.ico",
@@ -31,7 +30,13 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -61,7 +66,8 @@
                 }
               ]
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",

package.json

@@ -11,47 +11,47 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-material-components/datetime-picker": "^5.1.0",
+    "@angular-material-components/datetime-picker": "^6.0.3",
-    "@angular/animations": "~11.2.10",
+    "@angular/animations": "~12.2.8",
-    "@angular/cdk": "^11.2.9",
+    "@angular/cdk": "^12.2.8",
-    "@angular/common": "~11.2.10",
+    "@angular/common": "~12.2.8",
-    "@angular/compiler": "~11.2.10",
+    "@angular/compiler": "~12.2.8",
-    "@angular/core": "~11.2.10",
+    "@angular/core": "~12.2.8",
-    "@angular/flex-layout": "^11.0.0-beta.33",
+    "@angular/flex-layout": "^12.0.0-beta.35",
-    "@angular/forms": "~11.2.10",
+    "@angular/forms": "~12.2.8",
-    "@angular/material": "^11.2.9",
+    "@angular/material": "^12.2.8",
-    "@angular/material-moment-adapter": "^11.2.9",
+    "@angular/material-moment-adapter": "^12.2.8",
-    "@angular/platform-browser": "~11.2.10",
+    "@angular/platform-browser": "~12.2.8",
-    "@angular/platform-browser-dynamic": "~11.2.10",
+    "@angular/platform-browser-dynamic": "~12.2.8",
-    "@angular/router": "~11.2.10",
+    "@angular/router": "~12.2.8",
-    "angularx-qrcode": "^10.0.11",
     "moment": "^2.29.1",
-    "openpgp": "^4.10.8",
+    "ng-qrcode": "^5.1.1",
+    "openpgp": "^4.10.10",
     "rxjs": "~6.6.7",
-    "tslib": "^2.0.0",
+    "tslib": "^2.3.1",
-    "unique-names-generator": "^4.3.1",
+    "unique-names-generator": "^4.6.0",
-    "zone.js": "~0.10.2"
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1102.9",
+    "@angular-devkit/build-angular": "^12.2.8",
-    "@angular/cli": "~11.2.9",
+    "@angular/cli": "~12.2.8",
-    "@angular/compiler-cli": "~11.2.10",
+    "@angular/compiler-cli": "~12.2.8",
-    "@angular/localize": "^11.2.10",
+    "@angular/localize": "^12.2.8",
-    "@types/jasmine": "~3.6.0",
+    "@types/jasmine": "^3.6.11",
-    "@types/jasminewd2": "~2.0.3",
+    "@types/jasminewd2": "^2.0.10",
-    "@types/node": "^12.12.67",
+    "@types/node": "^12.20.27",
-    "@types/openpgp": "^4.4.14",
+    "@types/openpgp": "^4.4.18",
-    "codelyzer": "^6.0.0",
+    "codelyzer": "^6.0.2",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~6.3.2",
+    "karma": "^6.3.4",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
+    "karma-jasmine-html-reporter": "^1.7.0",
     "protractor": "~7.0.0",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
-    "typescript": "~4.0.2"
+    "typescript": "~4.3.5"
   }
 }

src/app/app.component.ts

@@ -1,144 +1,25 @@
-import {Component, HostListener} from '@angular/core';
+import { Component } from '@angular/core';
 
-import {AuthService} from './services/auth.service';
+import { I18nService } from './services/i18n.service';
-import {I18nService} from './services/i18n.service';
+import { DateAdapter } from '@angular/material/core';
-import {ProfileService} from './services/profile.service';
-import {Router} from '@angular/router';
-import {DomSanitizer} from '@angular/platform-browser';
-import {MatIconRegistry} from '@angular/material/icon';
-import {DateAdapter} from '@angular/material/core';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  templateUrl: './app.component.html'
-  styleUrls: ['./app.component.scss']
 })
 
 export class AppComponent {
-  opened = true;
-  darkTheme = "false";
-  title = 'we.bstly';
-  currentLocale: String;
-  datetimeformat: String;
-  locales;
-  auth;
 
   constructor(
     private i18n: I18nService,
-    private authService: AuthService,
-    private profileService: ProfileService,
-    private router: Router,
-    private iconRegistry: MatIconRegistry,
-    private sanitizer: DomSanitizer,
     private _adapter: DateAdapter<any>) {
-    iconRegistry.addSvgIcon('logo', sanitizer.bypassSecurityTrustResourceUrl('assets/icons/logo.svg'));
   }
 
   ngOnInit() {
-    this.datetimeformat = this.i18n.get('format.datetime', []);
+    this._adapter.setLocale(this.i18n.getLocale());
-    this.currentLocale = this.i18n.getLocale();
+    if (localStorage.getItem("bstly.darkTheme") == "true") {
-    this.locales = this.i18n.getLocales();
-    this.authService.auth.subscribe(data => {
-      this.auth = data;
-    })
-
-    this._adapter.setLocale(this.currentLocale);
-
-    const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-    if(width < 768) {
-      this.opened = false;
-    } else {
-      this.opened = true;
-    }
-
-    if(localStorage.getItem("bstly.darkTheme") == "true") {
-      this.darkTheme = "true";
       window.document.body.classList.add("dark-theme");
     }
   }
 
-  setLocale(locale) {
-    localStorage.setItem("bstly.locale", locale);
-
-    if(this.auth && this.auth.authenticated) {
-      this.profileService.getField("locale").subscribe((profileField: any) => {
-
-        if(profileField == null) {
-          profileField = {
-            "name": "locale",
-            "type": "TEXT",
-            "visibility": "PRIVATE"
-          }
-        }
-
-        profileField.value = locale;
-        this.profileService.createOrUpdate(profileField).subscribe((response) => {
-          window.location.reload();
-        })
-      })
-    } else {
-      window.location.reload();
-    }
-  }
-
-  darkThemeChange($event) {
-    if($event.checked) {
-      this.darkTheme = "true";
-    } else {
-      this.darkTheme = "false";
-    }
-
-    localStorage.setItem("bstly.darkTheme", this.darkTheme);
-
-    if(this.auth && this.auth.authenticated) {
-      this.profileService.getField("darkTheme").subscribe((profileField: any) => {
-
-        if(profileField == null) {
-          profileField = {
-            "name": "darkTheme",
-            "type": "BOOL",
-            "visibility": "PRIVATE"
-          }
-        }
-
-        profileField.value = this.darkTheme;
-        this.profileService.createOrUpdate(profileField).subscribe((response) => {
-          window.location.reload();
-        })
-      })
-    } else {
-      window.location.reload();
-    }
-
-  }
-
-  logout() {
-    this.authService.logout().subscribe(data => {
-      this.router.navigate([""]).then(() => {
-        window.location.reload();
-      });
-    })
-  }
-
-  isBiggerScreen() {
-    const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-    if(width < 768) {
-      return false;
-    } else {
-      return true;
-    }
-  }
-
-  openExternal(url, target = '_self') {
-    window.open(url, target);
-  }
-
-  @HostListener('window:resize', ['$event'])
-  onResize(event) {
-    if(event.target.innerWidth < 768) {
-      this.opened = false;
-    } else {
-      this.opened = true;
-    }
-  }
 }

src/app/app.module.ts

@@ -6,7 +6,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule, HttpInterceptor, HttpHandler, HttpRequest, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { MaterialModule } from './material/material.module';
-import { QRCodeModule } from 'angularx-qrcode';
+import { QrCodeModule } from 'ng-qrcode';
 import { DatePipe } from '@angular/common';
 
 
@@ -120,7 +120,7 @@ export class XhrInterceptor implements HttpInterceptor {
     HttpClientModule,
     FormsModule,
     ReactiveFormsModule,
-    QRCodeModule,
+    QrCodeModule,
   ],
   exports: [ MaterialModule ],
   providers: [ { provide: APP_INITIALIZER, useFactory: init_app, deps: [ I18nService ], multi: true }, { provide: HTTP_INTERCEPTORS, useClass: XhrInterceptor, multi: true }, DatePipe ],

src/app/pages/account/security/security-totp.dialog.html

@@ -3,7 +3,7 @@
 
     {{'security.2fa.totp.hint' | i18n}}
 
-    <qrcode *ngIf="data.qrData" [qrdata]="data.qrData" [width]="400" [errorCorrectionLevel]="'M'" title="{{data.qrData}}"></qrcode>
+    <qr-code *ngIf="data.qrData" [value]="data.qrData" size="400" errorCorrectionLevel="'M'" title="{{data.qrData}}"></qr-code>
 
     {{'security.2fa.totp.activate' | i18n}}
     <mat-form-field>

src/app/pages/register/register.dialog.html

@@ -6,7 +6,7 @@
     <app-quotas [quotas]="data.quotas"></app-quotas>
     <h3>{{'pgp.privateKey' | i18n}}</h3>
     <mat-form-field>
-        <qrcode [qrdata]="data.privateKey" [width]="400" [errorCorrectionLevel]="'M'"></qrcode>
+        <qr-code [value]="data.privateKey" size="400" errorCorrectionLevel="'M'"></qr-code>
         <mat-label>{{'pgp.privateKey' | i18n}}</mat-label>
         <textarea matInput readonly [(ngModel)]="data.privateKey" #privkey></textarea>
     </mat-form-field>

src/app/pages/urlshortener/urlshortener.share.html

@@ -4,7 +4,7 @@
 <div mat-dialog-content>
 
   <mat-form-field>
-    <qrcode [qrdata]="shortenedUrl.link" [width]="400" [errorCorrectionLevel]="'M'"></qrcode>
+    <qr-code [value]="shortenedUrl.link" size="400" errorCorrectionLevel="'M'"></qr-code>
     <textarea matInput [(ngModel)]="shortenedUrl.shareText"></textarea>
   </mat-form-field>
 

src/app/ui/profilefields/binary/pgp/profilefield.pgp-blob.html

@@ -3,7 +3,7 @@
     <h3>{{'pgp.privateKey' | i18n}}</h3>
 
     <mat-form-field>
-        <qrcode [qrdata]="data.privateKey" [width]="400" [errorCorrectionLevel]="'M'"></qrcode>
+        <qr-code [value]="data.privateKey" size="400" errorCorrectionLevel="'M'"></qr-code>
         <mat-label>{{'pgp.privateKey' | i18n}}</mat-label>
         <textarea matInput readonly [(ngModel)]="data.privateKey" #privkey></textarea>
     </mat-form-field>

src/environments/environment.ts

@@ -15,4 +15,4 @@ export const environment = {
  * This import should be commented out in production mode because it will have a negative impact
  * on performance if an error is thrown.
  */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

src/polyfills.ts

@@ -59,7 +59,7 @@ import '@angular/localize/init';
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
 
 
 /***************************************************************************************************

src/styles.scss

@@ -1,12 +1,12 @@
 // Custom Theming for Angular Material
+@use '~@angular/material' as mat;
 // For more information: https://material.angular.io/guide/theming
-@import '~@angular/material/theming';
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
-@include mat-core();
+@include mat.core();
 
 
 @import './variables.scss';
@@ -14,13 +14,13 @@
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$light-theme: mat-light-theme((color: (primary: $light-primary,
+$light-theme: mat.define-light-theme((color: (primary: $light-primary,
       accent: $light-accent,
       warn: $light-warn,
     )));
 
 // Define an alternate dark theme.
-$dark-theme: mat-dark-theme((color: (primary: $dark-primary,
+$dark-theme: mat.define-dark-theme((color: (primary: $dark-primary,
       accent: $light-accent,
       warn: $light-warn,
     )));
@@ -30,10 +30,10 @@ $dark-theme: mat-dark-theme((color: (primary: $dark-primary,
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include angular-material-theme($light-theme);
+@include mat.all-component-themes($light-theme);
 
 .dark-theme {
-  @include angular-material-color($dark-theme);
+  @include mat.all-component-colors($dark-theme);
 }
 
 
@@ -143,12 +143,13 @@ mat-form-field {
   }
 }
 
-qrcode {
+qr-code {
-  margin: 0 auto;
+  margin: 15px auto;
   text-align: center;
+  display: block;
 }
 
-qrcode canvas {
+qr-code canvas {
   width: 100% !important;
   height: auto !important;
   max-width: 400px !important;

src/test.ts

@@ -1,6 +1,6 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/dist/zone-testing';
+import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,

src/variables.scss

@@ -1,19 +1,19 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
-$light-primary: mat-palette($mat-gray, 800);
+$light-primary: mat.define-palette(mat.$gray-palette, 800);
-$light-accent: mat-palette($mat-pink, A200, A100, A400);
+$light-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-$light-warn: mat-palette($mat-red);
+$light-warn: mat.define-palette(mat.$red-palette);
 
-$primary: mat-color($light-primary);
+$primary: mat.get-color-from-palette($light-primary);
-$accent: mat-color($light-accent);
+$accent: mat.get-color-from-palette($light-accent);
-$warn: mat-color($light-warn);
+$warn: mat.get-color-from-palette($light-warn);
 
-$dark-primary: mat-palette($mat-grey, 900, 500, 700);
+$dark-primary: mat.define-palette(mat.$grey-palette, 900, 500, 700);
-$dark-accent: mat-palette($mat-amber, A200, A100, A400);
+$dark-accent: mat.define-palette(mat.$amber-palette, A200, A100, A400);
-$dark-warn: mat-palette($mat-deep-orange);
+$dark-warn: mat.define-palette(mat.$deep-orange-palette);
 
 .dark-theme {
-  $primary: mat-color($dark-primary);
+  $primary: mat.get-color-from-palette($dark-primary);
-  $accent: mat-color($light-accent);
+  $accent: mat.get-color-from-palette($light-accent);
-  $warn: mat-color($light-warn);
+  $warn: mat.get-color-from-palette($light-warn);
 }