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>

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

@@ -1,63 +1,63 @@
 <h1 mat-dialog-title>
-    <span class="title">{{'USER.MFA.DIALOG.ADD_MFA_TITLE' | translate}} {{data?.number}}</span>
+  <span class="title">{{'USER.MFA.DIALOG.ADD_MFA_TITLE' | translate}} {{data?.number}}</span>
 </h1>
 <div mat-dialog-content>
-    <ng-container *ngIf="selectedType === undefined">
-        <p class="desc">{{'USER.MFA.DIALOG.ADD_MFA_DESCRIPTION' | translate}}</p>
+  <ng-container *ngIf="selectedType === undefined">
+    <p class="desc">{{'USER.MFA.DIALOG.ADD_MFA_DESCRIPTION' | translate}}</p>
 
-        <div class="type-selection">
-            <button mat-raised-button color="primary" [disabled]="data.otpDisabled" (click)="selectType(AuthFactorType.OTP)">
-                <div class="otp-btn">
-                    <mat-icon class="icon" svgIcon="mdi_radar"></mat-icon>
-                    <span>{{'USER.MFA.OTP' | translate}}</span>
-                </div>
-            </button>
-            <button mat-raised-button color="primary" (click)="selectType(AuthFactorType.U2F)">
-                <div class="u2f-btn">
-                    <div class="icon-row">
-                        <i matTooltip="Fingerprint" class="las la-fingerprint"></i>
-                        <i matTooltip="Security Key" class="lab la-usb"></i>
-                        <mat-icon matTooltip="NFC">nfc</mat-icon>
-                    </div>
-                    <span>{{'USER.MFA.U2F' | translate}}</span>
-                </div>
-            </button>
+    <div class="type-selection">
+      <button mat-raised-button color="primary" [disabled]="data.otpDisabled" (click)="selectType(AuthFactorType.OTP)">
+        <div class="otp-btn">
+          <mat-icon class="icon" svgIcon="mdi_radar"></mat-icon>
+          <span>{{'USER.MFA.OTP' | translate}}</span>
         </div>
-    </ng-container>
-
-    <div class="otp" *ngIf="selectedType === AuthFactorType.OTP">
-        <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>
+      </button>
+      <button mat-raised-button color="primary" (click)="selectType(AuthFactorType.U2F)">
+        <div class="u2f-btn">
+          <div class="icon-row">
+            <i matTooltip="Fingerprint" class="las la-fingerprint"></i>
+            <i matTooltip="Security Key" class="lab la-usb"></i>
+            <mat-icon matTooltip="NFC">nfc</mat-icon>
+          </div>
+          <span>{{'USER.MFA.U2F' | translate}}</span>
         </div>
+      </button>
+    </div>
+  </ng-container>
 
-        <cnsl-form-field class="formfield" label="Access Code" required="true">
-            <cnsl-label>Code</cnsl-label>
-            <input cnslInput [(ngModel)]="otpcode" />
-        </cnsl-form-field>
+  <div class="otp" *ngIf="selectedType === AuthFactorType.OTP">
+    <p class="desc">{{'USER.MFA.OTP_DIALOG_DESCRIPTION' | translate}}</p>
+
+    <div class="qrcode-wrapper">
+      <qr-code *ngIf="otpurl" class="qrcode" [value]="otpurl" [size]="150" [errorCorrectionLevel]="'M'"></qr-code>
     </div>
 
-    <div class="u2f" *ngIf="selectedType === AuthFactorType.U2F">
-        <p>{{'USER.MFA.U2F_DIALOG_DESCRIPTION' | translate}}</p>
+    <cnsl-form-field class="formfield" label="Access Code" required="true">
+      <cnsl-label>Code</cnsl-label>
+      <input cnslInput [(ngModel)]="otpcode" />
+    </cnsl-form-field>
+  </div>
 
-        <cnsl-form-field class="form-field" label="Name" required="true">
-            <cnsl-label>{{'USER.MFA.U2F_NAME' | translate}}</cnsl-label>
-            <input cnslInput [(ngModel)]="u2fname" required (keydown.enter)="u2fname ? submitU2F() : null" />
-        </cnsl-form-field>
+  <div class="u2f" *ngIf="selectedType === AuthFactorType.U2F">
+    <p>{{'USER.MFA.U2F_DIALOG_DESCRIPTION' | translate}}</p>
 
-        <mat-spinner diameter="30" *ngIf="u2fLoading"></mat-spinner>
+    <cnsl-form-field class="form-field" label="Name" required="true">
+      <cnsl-label>{{'USER.MFA.U2F_NAME' | translate}}</cnsl-label>
+      <input cnslInput [(ngModel)]="u2fname" required (keydown.enter)="u2fname ? submitU2F() : null" />
+    </cnsl-form-field>
 
-        <p class="error">{{u2fError}}</p>
-    </div>
+    <mat-spinner diameter="30" *ngIf="u2fLoading"></mat-spinner>
+
+    <p class="error">{{u2fError}}</p>
+  </div>
 </div>
 <div mat-dialog-actions class="action">
-    <button cdkFocusInitial color="primary" mat-button class="ok-button" (click)="closeDialog()">
-        {{'ACTIONS.CLOSE' | translate}}
-    </button>
+  <button cdkFocusInitial color="primary" mat-button class="ok-button" (click)="closeDialog()">
+    {{'ACTIONS.CLOSE' | translate}}
+  </button>
 
-    <button *ngIf="selectedType !== undefined" cdkFocusInitial color="primary" mat-raised-button class="ok-button"
-        (click)="submitAuth()">
-        {{'ACTIONS.CREATE' | translate}}
-    </button>
+  <button *ngIf="selectedType !== undefined" cdkFocusInitial color="primary" mat-raised-button class="ok-button"
+    (click)="submitAuth()">
+    {{'ACTIONS.CREATE' | translate}}
+  </button>
 </div>

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

@@ -9,12 +9,12 @@
     </div>
 
     <cnsl-form-field class="form-field" label="Name" required="true">
-        <cnsl-label>{{'USER.MFA.U2F_NAME' | translate}}</cnsl-label>
-        <input cnslInput [(ngModel)]="name" required (keydown.enter)="name ? closeDialogWithCode() : null" />
+      <cnsl-label>{{'USER.MFA.U2F_NAME' | translate}}</cnsl-label>
+      <input cnslInput [(ngModel)]="name" required (keydown.enter)="name ? closeDialogWithCode() : null" />
     </cnsl-form-field>
 
     <button [disabled]="!name" mat-raised-button class="ok-button" color="primary"
-        (click)="closeDialogWithCode()">{{'USER.PASSWORDLESS.DIALOG.NEW' | translate}}
+      (click)="closeDialogWithCode()">{{'USER.PASSWORDLESS.DIALOG.NEW' | translate}}
     </button>
 
     <p class="error">{{error}}</p>
@@ -26,7 +26,7 @@
     </div>
 
     <button mat-raised-button class="send-button" color="primary"
-        (click)="sendMyPasswordlessLink()">{{'USER.PASSWORDLESS.DIALOG.SEND' | translate}}
+      (click)="sendMyPasswordlessLink()">{{'USER.PASSWORDLESS.DIALOG.SEND' | translate}}
     </button>
 
 
@@ -34,9 +34,9 @@
       <i class="icon las la-qrcode"></i>
       <p>{{'USER.PASSWORDLESS.DIALOG.QRCODE_DESCRIPTION' | translate}}</p>
     </div>
-    
+
     <button mat-raised-button class="qr-button" color="primary"
-        (click)="addMyPasswordlessLink()">{{'USER.PASSWORDLESS.DIALOG.QRCODE' | translate}}
+      (click)="addMyPasswordlessLink()">{{'USER.PASSWORDLESS.DIALOG.QRCODE' | translate}}
     </button>
 
   </div>
@@ -55,12 +55,13 @@
     <p>{{'USER.PASSWORDLESS.DIALOG.QRCODE_SCAN' | translate}}</p>
 
     <div class="qrcode-wrapper">
-      <qrcode *ngIf="qrcodeLink" class="qrcode" [qrdata]="qrcodeLink" [width]="150" [errorCorrectionLevel]="'M'"></qrcode>
-  </div>
+      <qr-code *ngIf="qrcodeLink" class="qrcode" [value]="qrcodeLink" [size]="150" [errorCorrectionLevel]="'M'">
+      </qr-code>
+    </div>
   </div>
 
   <mat-spinner diameter="30" *ngIf="loading"></mat-spinner>
 </div>
 <div mat-dialog-actions class="action">
-    <button mat-button (click)="closeDialog()">{{'ACTIONS.CLOSE' | translate}}</button>
+  <button mat-button (click)="closeDialog()">{{'ACTIONS.CLOSE' | translate}}</button>
 </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,
@@ -124,4 +124,4 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
     InfoSectionModule,
   ],
 })
-export class UserDetailModule { }
+export class UserDetailModule {}