fix(console): angular 13, grpc web 1.3.0, dependencies (#2688)

* cli core, migrations

* material

* input directive

* fresh lock

* update oidc lib

* use angular-eslint next for ng 13

* clean lock

* change qrcode lib, env

* eslint

* deps

* grpc libs update, grpc web 1.0.3, rev env

* remove grpc-web from build/zitadel/Dockerfile

Co-authored-by: Livio Amstutz <livio.a@gmail.com>

build/console/Dockerfile

@@ -18,7 +18,7 @@ ENV PROTOC_ARCH x86_64
 FROM ${BUILDARCH}-base AS base
 ARG PROTOC_VERSION=3.13.0
 ARG PROTOC_ZIP=protoc-${PROTOC_VERSION}-linux-${PROTOC_ARCH}.zip
-ARG GRPC_WEB_VERSION=1.2.1
+ARG GRPC_WEB_VERSION=1.3.0
 # no arm specific version available and x86 works fine at the moment:
 ARG GRPC_WEB=protoc-gen-grpc-web-${GRPC_WEB_VERSION}-linux-x86_64
 

build/zitadel/Dockerfile

@@ -12,17 +12,13 @@ ENV PROTOC_ARCH x86_64
 #######################
 ## This step sets up the folder structure,
 ## initalices go mods,
-## downloads the protofiles,
+## downloads the protofiles and protoc for later use
-## protoc and protoc-gen-grpc-web for later use
 #######################
 FROM ${BUILDARCH}-base AS base
 ARG PROTOC_VERSION=3.18.0
 ARG PROTOC_ZIP=protoc-${PROTOC_VERSION}-linux-${PROTOC_ARCH}.zip
 ARG GATEWAY_VERSION=2.6.0
 ARG VALIDATOR_VERSION=0.6.2
-ARG GRPC_WEB_VERSION=1.2.1
-# no arm specific version available and x86 works fine at the moment:
-ARG GRPC_WEB=protoc-gen-grpc-web-${GRPC_WEB_VERSION}-linux-x86_64
 
 RUN apk add tar curl
 WORKDIR /proto
@@ -33,9 +29,6 @@ RUN apk add tar curl \
     && unzip -o $PROTOC_ZIP -d /usr/local bin/protoc \
     && unzip -o $PROTOC_ZIP -d /proto include/* \
     && rm -f $PROTOC_ZIP \
-    && curl -OL https://github.com/grpc/grpc-web/releases/download/${GRPC_WEB_VERSION}/${GRPC_WEB} \
-    && mv ${GRPC_WEB} /usr/local/bin/protoc-gen-grpc-web \
-    && chmod +x /usr/local/bin/protoc-gen-grpc-web \
     && curl https://raw.githubusercontent.com/envoyproxy/protoc-gen-validate/v${VALIDATOR_VERSION}/validate/validate.proto --create-dirs -o include/validate/validate.proto  \
     && curl https://raw.githubusercontent.com/grpc-ecosystem/grpc-gateway/v${GATEWAY_VERSION}/protoc-gen-openapiv2/options/annotations.proto --create-dirs -o include/protoc-gen-openapiv2/options/annotations.proto \
     && curl https://raw.githubusercontent.com/grpc-ecosystem/grpc-gateway/v${GATEWAY_VERSION}/protoc-gen-openapiv2/options/openapiv2.proto --create-dirs -o include/protoc-gen-openapiv2/options/openapiv2.proto \

console/.gitignore

@@ -30,6 +30,7 @@ speed-measure-plugin*.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

console/angular.json

@@ -22,22 +22,15 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "assets": [
+            "assets": ["src/favicon.ico", "src/assets", "src/manifest.webmanifest"],
-              "src/favicon.ico",
+            "styles": ["src/styles.scss"],
-              "src/assets",
+            "scripts": ["./node_modules/tinycolor2/dist/tinycolor-min.js"],
-              "src/manifest.webmanifest"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": [
-              "./node_modules/tinycolor2/dist/tinycolor-min.js"
-            ],
             "allowedCommonJsDependencies": [
               "@angular/common/locales/de",
               "src/app/proto/generated/zitadel/admin_pb",
               "src/app/proto/generated/zitadel/management_pb",
               "src/app/proto/generated/**",
+              "google-protobuf/google/protobuf/empty_pb",
               "file-saver",
               "qrcode"
             ],
@@ -126,27 +119,15 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "assets": [
+            "assets": ["src/favicon.ico", "src/assets", "src/manifest.webmanifest"],
-              "src/favicon.ico",
+            "styles": ["./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css", "src/styles.scss"],
-              "src/assets",
+            "scripts": ["./node_modules/tinycolor2/dist/tinycolor-min.js"]
-              "src/manifest.webmanifest"
-            ],
-            "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
-              "src/styles.scss"
-            ],
-            "scripts": [
-              "./node_modules/tinycolor2/dist/tinycolor-min.js"
-            ]
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
           }
         },
         "e2e": {

console/package.json

@@ -10,60 +10,59 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~12.2.12",
+    "@angular/animations": "~13.0.2",
-    "@angular/cdk": "~12.2.12",
+    "@angular/cdk": "~13.0.2",
-    "@angular/common": "~12.2.12",
+    "@angular/common": "~13.0.2",
-    "@angular/compiler": "~12.2.12",
+    "@angular/compiler": "~13.0.2",
-    "@angular/core": "~12.2.12",
+    "@angular/core": "~13.0.2",
-    "@angular/forms": "~12.2.12",
+    "@angular/forms": "~13.0.2",
-    "@angular/material": "^12.2.12",
+    "@angular/material": "^13.0.2",
-    "@angular/material-moment-adapter": "^12.2.12",
+    "@angular/material-moment-adapter": "^13.0.2",
-    "@angular/platform-browser": "~12.2.12",
+    "@angular/platform-browser": "~13.0.2",
-    "@angular/platform-browser-dynamic": "~12.2.12",
+    "@angular/platform-browser-dynamic": "~13.0.2",
-    "@angular/router": "~12.2.12",
+    "@angular/router": "~13.0.2",
-    "@angular/service-worker": "~12.2.12",
+    "@angular/service-worker": "~13.0.2",
     "@grpc/grpc-js": "^1.3.2",
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
     "@types/file-saver": "^2.0.2",
     "@types/google-protobuf": "^3.15.3",
     "@types/uuid": "^8.3.0",
-    "angular-oauth2-oidc": "^12.1.0",
+    "angular-oauth2-oidc": "^13.0.1",
-    "angularx-qrcode": "^11.0.0",
     "cors": "^2.8.5",
     "file-saver": "^2.0.5",
-    "google-proto-files": "^2.4.0",
+    "google-proto-files": "^2.5.0",
     "google-protobuf": "^3.19.1",
-    "grpc-web": "^1.2.1",
+    "grpc-web": "^1.3.0",
     "libphonenumber-js": "^1.9.34",
     "moment": "^2.29.1",
+    "ng-qrcode": "^6.0.0",
     "ngx-color": "^7.2.0",
     "ngx-image-cropper": "^3.3.5",
     "ngx-quicklink": "^0.2.6",
-    "rxjs": "~7.3.0",
+    "rxjs": "~7.4.0",
     "tinycolor2": "^1.4.2",
-    "ts-protoc-gen": "^0.14.0",
     "tslib": "^2.2.0",
     "uuid": "^8.3.2",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-eslint/builder": "12.6.1",
+    "@angular-devkit/build-angular": "~13.0.2",
-    "@angular-eslint/eslint-plugin": "12.5.0",
+    "@angular-eslint/builder": "^13.0.1",
-    "@angular-eslint/eslint-plugin-template": "12.5.0",
+    "@angular-eslint/eslint-plugin": "^13.0.1",
-    "@angular-eslint/schematics": "12.6.1",
+    "@angular-eslint/eslint-plugin-template": "^13.0.1",
-    "@angular-eslint/template-parser": "12.5.0",
+    "@angular-eslint/schematics": "^13.0.1",
-    "@typescript-eslint/eslint-plugin": "4.28.2",
+    "@angular-eslint/template-parser": "^13.0.1",
-    "@typescript-eslint/parser": "4.28.2",
+    "@angular/cli": "~13.0.2",
-    "eslint": "^7.26.0",
+    "@angular/compiler-cli": "~13.0.2",
-    "@angular-devkit/build-angular": "~12.2.12",
+    "@angular/language-service": "~13.0.2",
-    "@angular/cli": "~12.2.12",
-    "@angular/compiler-cli": "~12.2.12",
-    "@angular/language-service": "~12.2.12",
     "@types/jasmine": "~3.9.1",
     "@types/jasminewd2": "~2.0.10",
     "@types/node": "^16.10.2",
+    "@typescript-eslint/eslint-plugin": "5.3.0",
+    "@typescript-eslint/parser": "5.3.0",
     "codelyzer": "^6.0.0",
+    "eslint": "^8.2.0",
     "jasmine-core": "~3.9.0",
     "jasmine-spec-reporter": "~7.0.0",
     "karma": "~6.3.6",
@@ -77,6 +76,6 @@
     "stylelint-config-standard": "^22.0.0",
     "stylelint-scss": "^3.21.0",
     "ts-node": "~10.2.1",
-    "typescript": "^4.2.4"
+    "typescript": "^4.4.4"
   }
 }

console/src/app/app.component.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 .root-header {
   position: fixed;

console/src/app/app.module.ts

@@ -40,6 +40,7 @@ import { WarnDialogModule } from './modules/warn-dialog/warn-dialog.module';
 import { SignedoutComponent } from './pages/signedout/signedout.component';
 import { HasFeaturePipeModule } from './pipes/has-feature-pipe/has-feature-pipe.module';
 import { HasRolePipeModule } from './pipes/has-role-pipe/has-role-pipe.module';
+import { AdminService } from './services/admin.service';
 import { AuthenticationService } from './services/authentication.service';
 import { GrpcAuthService } from './services/grpc-auth.service';
 import { GrpcService } from './services/grpc.service';
@@ -47,6 +48,7 @@ import { AuthInterceptor } from './services/interceptors/auth.interceptor';
 import { GRPC_INTERCEPTORS } from './services/interceptors/grpc-interceptor';
 import { I18nInterceptor } from './services/interceptors/i18n.interceptor';
 import { OrgInterceptor } from './services/interceptors/org.interceptor';
+import { ManagementService } from './services/mgmt.service';
 import { RefreshService } from './services/refresh.service';
 import { SeoService } from './services/seo.service';
 import { StatehandlerProcessorService, StatehandlerProcessorServiceImpl } from './services/statehandler-processor.service';
@@ -183,6 +185,8 @@ const authConfig: AuthConfig = {
     GrpcService,
     AuthenticationService,
     GrpcAuthService,
+    ManagementService,
+    AdminService,
     SubscriptionService,
     AssetService,
     { provide: 'windowObject', useValue: window },

console/src/app/modules/app-card/app-card.component.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin app-card-theme($theme) {
   /* stylelint-disable */

console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 .radio-button-wrapper {
   display: flex;

console/src/app/modules/app-radio/app-type-radio/app-type-radio.component.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 .radio-button-wrapper {
   display: flex;

console/src/app/modules/avatar/avatar.component.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin avatar-theme($theme) {
   $primary: map-get($theme, primary);

console/src/app/modules/card/card.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin card-theme($theme) {
   /* stylelint-disable */

console/src/app/modules/changes/changes.component.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 .change-header {
   display: flex;

console/src/app/modules/detail-layout/detail-layout.component.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin detail-layout-theme($theme) {
   /* stylelint-disable */

console/src/app/modules/form-field/form-field.component.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin cnsl-form-field-theme($theme) {
   $primary: map-get($theme, primary);

console/src/app/modules/idp-create/idp-type-radio/idp-type-radio.component.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 .idp-radio-button-wrapper {
   display: flex;

console/src/app/modules/info-row/info-row.component.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin info-row-theme($theme) {
   $foreground: map-get($theme, foreground);

console/src/app/modules/info-section/info-section.component.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin info-section-theme($theme) {
   $primary: map-get($theme, primary);

console/src/app/modules/input/input.directive.ts

@@ -16,38 +16,27 @@ import {
   Self,
 } from '@angular/core';
 import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
-import { CanUpdateErrorState, CanUpdateErrorStateCtor, ErrorStateMatcher, mixinErrorState } from '@angular/material/core';
+import { CanUpdateErrorState, ErrorStateMatcher, mixinErrorState } from '@angular/material/core';
 import { MAT_FORM_FIELD, MatFormField, MatFormFieldControl } from '@angular/material/form-field';
 import { getMatInputUnsupportedTypeError, MAT_INPUT_VALUE_ACCESSOR } from '@angular/material/input';
 import { Subject } from 'rxjs';
 
-
 // Invalid input type. Using one of these will throw an MatInputUnsupportedTypeError.
-const MAT_INPUT_INVALID_TYPES = [
+const MAT_INPUT_INVALID_TYPES = ['button', 'checkbox', 'file', 'hidden', 'image', 'radio', 'range', 'reset', 'submit'];
-    'button',
-    'checkbox',
-    'file',
-    'hidden',
-    'image',
-    'radio',
-    'range',
-    'reset',
-    'submit',
-];
 
 let nextUniqueId = 0;
 
-// Boilerplate for applying mixins to MatInput.
+const _MatInputBase = mixinErrorState(
-/** @docs-private */
+  class {
-class MatInputBase {
+    constructor(
-    constructor(public _defaultErrorStateMatcher: ErrorStateMatcher,
+      public _defaultErrorStateMatcher: ErrorStateMatcher,
       public _parentForm: NgForm,
       public _parentFormGroup: FormGroupDirective,
       /** @docs-private */
-        public ngControl: NgControl) { }
+      public ngControl: NgControl,
-}
+    ) {}
-const _MatInputMixinBase: CanUpdateErrorStateCtor & typeof MatInputBase =
+  },
-    mixinErrorState(MatInputBase);
+);
 
 /** Directive that allows a native input to work inside a `MatFormField`. */
 @Directive({
@@ -74,11 +63,20 @@ const _MatInputMixinBase: CanUpdateErrorStateCtor & typeof MatInputBase =
   },
   providers: [{ provide: MatFormFieldControl, useExisting: InputDirective }],
 })
-export class InputDirective extends _MatInputMixinBase implements MatFormFieldControl<any>, OnChanges,
+export class InputDirective
-    OnDestroy, AfterViewInit, DoCheck, CanUpdateErrorState {
+  extends _MatInputBase
+  implements
+    MatFormFieldControl<any>,
+    OnChanges,
+    CanUpdateErrorState,
+    OnDestroy,
+    AfterViewInit,
+    DoCheck,
+    CanUpdateErrorState
+{
   protected _uid: string = `cnsl-input-${nextUniqueId++}`;
   protected _previousNativeValue: any;
-    private _inputValueAccessor: { value: any; };
+  private _inputValueAccessor: { value: any };
   private _previousPlaceholder!: string | null;
 
   /** Whether the component is being rendered on the server. */
@@ -142,8 +140,12 @@ export class InputDirective extends _MatInputMixinBase implements MatFormFieldCo
    * @docs-private
    */
   @Input()
-    get id(): string { return this._id; }
+  get id(): string {
-    set id(value: string) { this._id = value || this._uid; }
+    return this._id;
+  }
+  set id(value: string) {
+    this._id = value || this._uid;
+  }
   protected _id!: string;
 
   /**
@@ -157,13 +159,19 @@ export class InputDirective extends _MatInputMixinBase implements MatFormFieldCo
    * @docs-private
    */
   @Input()
-    get required(): boolean { return this._required; }
+  get required(): boolean {
-    set required(value: boolean) { this._required = coerceBooleanProperty(value); }
+    return this._required;
+  }
+  set required(value: boolean) {
+    this._required = coerceBooleanProperty(value);
+  }
   protected _required: boolean = false;
 
   /** Input type of the element. */
   @Input()
-    get type(): string { return this._type; }
+  get type(): string {
+    return this._type;
+  }
   set type(value: string) {
     this._type = value || 'text';
     this._validateType();
@@ -192,7 +200,9 @@ export class InputDirective extends _MatInputMixinBase implements MatFormFieldCo
    * @docs-private
    */
   @Input()
-    get value(): string { return this._inputValueAccessor.value; }
+  get value(): string {
+    return this._inputValueAccessor.value;
+  }
   set value(value: string) {
     if (value !== this.value) {
       this._inputValueAccessor.value = value;
@@ -202,18 +212,17 @@ export class InputDirective extends _MatInputMixinBase implements MatFormFieldCo
 
   /** Whether the element is readonly. */
   @Input()
-    get readonly(): boolean { return this._readonly; }
+  get readonly(): boolean {
-    set readonly(value: boolean) { this._readonly = coerceBooleanProperty(value); }
+    return this._readonly;
+  }
+  set readonly(value: boolean) {
+    this._readonly = coerceBooleanProperty(value);
+  }
   private _readonly: boolean = false;
 
-    protected _neverEmptyInputTypes: string[] = [
+  protected _neverEmptyInputTypes: string[] = ['date', 'datetime', 'datetime-local', 'month', 'time', 'week'].filter((t) =>
-        'date',
+    getSupportedInputTypes().has(t),
-        'datetime',
+  );
-        'datetime-local',
-        'month',
-        'time',
-        'week',
-    ].filter(t => getSupportedInputTypes().has(t));
 
   constructor(
     protected _elementRef: ElementRef<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
@@ -226,8 +235,8 @@ export class InputDirective extends _MatInputMixinBase implements MatFormFieldCo
     @Optional() @Self() @Inject(MAT_INPUT_VALUE_ACCESSOR) inputValueAccessor: any,
     private _autofillMonitor: AutofillMonitor,
     ngZone: NgZone,
-        @Optional() @Inject(MAT_FORM_FIELD) private _formField?: MatFormField) {
+    @Optional() @Inject(MAT_FORM_FIELD) private _formField?: MatFormField,
-
+  ) {
     super(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl);
 
     const element = this._elementRef.nativeElement;
@@ -266,14 +275,13 @@ export class InputDirective extends _MatInputMixinBase implements MatFormFieldCo
     this._isTextarea = nodeName === 'textarea';
 
     if (this._isNativeSelect) {
-            this.controlType = (element as HTMLSelectElement).multiple ? 'mat-native-select-multiple' :
+      this.controlType = (element as HTMLSelectElement).multiple ? 'mat-native-select-multiple' : 'mat-native-select';
-                'mat-native-select';
     }
   }
 
   ngAfterViewInit(): void {
     if (this._platform.isBrowser) {
-            this._autofillMonitor.monitor(this._elementRef.nativeElement).subscribe(event => {
+      this._autofillMonitor.monitor(this._elementRef.nativeElement).subscribe((event) => {
         this.autofilled = event.isAutofilled;
         this.stateChanges.next();
       });
@@ -353,8 +361,7 @@ export class InputDirective extends _MatInputMixinBase implements MatFormFieldCo
     if (placeholder !== this._previousPlaceholder) {
       const element = this._elementRef.nativeElement;
       this._previousPlaceholder = placeholder;
-            placeholder ?
+      placeholder ? element.setAttribute('placeholder', placeholder) : element.removeAttribute('placeholder');
-                element.setAttribute('placeholder', placeholder) : element.removeAttribute('placeholder');
     }
   }
 
@@ -392,8 +399,7 @@ export class InputDirective extends _MatInputMixinBase implements MatFormFieldCo
    * @docs-private
    */
   get empty(): boolean {
-        return !this._isNeverEmpty() && !this._elementRef.nativeElement.value && !this._isBadInput() &&
+    return !this._isNeverEmpty() && !this._elementRef.nativeElement.value && !this._isBadInput() && !this.autofilled;
-            !this.autofilled;
   }
 
   /**
@@ -410,8 +416,12 @@ export class InputDirective extends _MatInputMixinBase implements MatFormFieldCo
 
       // On most browsers the `selectedIndex` will always be 0, however on IE and Edge it'll be
       // -1 if the `value` is set to something, that isn't in the list of options, at a later point.
-            return this.focused || selectElement.multiple || !this.empty ||
+      return (
-                !!(selectElement.selectedIndex > -1 && firstOption && firstOption.label);
+        this.focused ||
+        selectElement.multiple ||
+        !this.empty ||
+        !!(selectElement.selectedIndex > -1 && firstOption && firstOption.label)
+      );
     } else {
       return this.focused || !this.empty;
     }

console/src/app/modules/label/label.component.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin cnsl-label-theme($theme) {
   $primary: map-get($theme, primary);

console/src/app/modules/onboarding/onboarding.component.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin onboarding-theme($theme) {
   /* stylelint-disable */

console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @import './preview/preview.component.scss';
 

console/src/app/pages/users/user-detail/auth-user-detail/auth-factor-dialog/auth-factor-dialog.component.html

@@ -29,7 +29,7 @@
     <p class="desc">{{'USER.MFA.OTP_DIALOG_DESCRIPTION' | translate}}</p>
 
     <div class="qrcode-wrapper">
-            <qrcode *ngIf="otpurl" class="qrcode" [qrdata]="otpurl" [width]="150" [errorCorrectionLevel]="'M'"></qrcode>
+      <qr-code *ngIf="otpurl" class="qrcode" [value]="otpurl" [size]="150" [errorCorrectionLevel]="'M'"></qr-code>
     </div>
 
     <cnsl-form-field class="formfield" label="Access Code" required="true">

console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/dialog-passwordless/dialog-passwordless.component.html

@@ -55,7 +55,8 @@
     <p>{{'USER.PASSWORDLESS.DIALOG.QRCODE_SCAN' | translate}}</p>
 
     <div class="qrcode-wrapper">
-      <qrcode *ngIf="qrcodeLink" class="qrcode" [qrdata]="qrcodeLink" [width]="150" [errorCorrectionLevel]="'M'"></qrcode>
+      <qr-code *ngIf="qrcodeLink" class="qrcode" [value]="qrcodeLink" [size]="150" [errorCorrectionLevel]="'M'">
+      </qr-code>
     </div>
   </div>
 

console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-card.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin theme-card($theme) {
   /* stylelint-disable */

console/src/app/pages/users/user-detail/memberships/memberships.component.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin membership-theme($theme) {
   /* stylelint-disable */

console/src/app/pages/users/user-detail/user-detail.module.ts

@@ -12,7 +12,7 @@ import { MatTableModule } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
-import { QRCodeModule } from 'angularx-qrcode';
+import { QrCodeModule } from 'ng-qrcode';
 import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { MemberCreateDialogModule } from 'src/app/modules/add-member-dialog/member-create-dialog.module';
@@ -93,7 +93,7 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
     DetailFormMachineModule,
     WarnDialogModule,
     MatDialogModule,
-    QRCodeModule,
+    QrCodeModule,
     MetaLayoutModule,
     MatCheckboxModule,
     HasRolePipeModule,

console/src/polyfills.ts

@@ -18,16 +18,6 @@
  * BROWSER POLYFILLS
  */
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags

console/src/styles.scss

@@ -1,7 +1,7 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @import './component-themes';
-@import '~@angular/material/theming';
+@import '@angular/material/theming';
 
 // Plus imports for other components in your app.
 

console/src/styles/error.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin cnsl-error-theme($theme) {
   $warn: map-get($theme, warn);

console/src/styles/input.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin input-theme($theme) {
   /* stylelint-disable */

console/src/styles/link.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin link-theme($theme) {
   /* stylelint-disable */

console/src/styles/sidenav-list.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin sidenav-list-theme($theme) {
   /* stylelint-disable */

console/src/styles/table.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin table-theme($theme) {
   /* stylelint-disable */

console/src/test.ts

@@ -7,7 +7,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.