chore(console): angular 14 (#3799)

* eslint schematics

* cli, core migrations

* material

* schematics

* ng-qrcode update

* fix input, formfield errorstatemixin

* other packages

* downgrade codemirror

* codemirror

* @next of alphas

Co-authored-by: Livio Spring <[email protected]>

console/src/app/pages/actions/actions.component.ts

@@ -1,6 +1,6 @@
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { Component } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActionKeysType } from 'src/app/modules/action-keys/action-keys.component';
 import { InfoSectionType } from 'src/app/modules/info-section/info-section.component';
@@ -22,7 +22,7 @@ export class ActionsComponent {
   public flow!: Flow.AsObject;
   public flowType: FlowType = FlowType.FLOW_TYPE_EXTERNAL_AUTHENTICATION;
 
-  public typeControl: FormControl = new FormControl(FlowType.FLOW_TYPE_EXTERNAL_AUTHENTICATION);
+  public typeControl: UntypedFormControl = new UntypedFormControl(FlowType.FLOW_TYPE_EXTERNAL_AUTHENTICATION);
 
   public typesForSelection: FlowType[] = [FlowType.FLOW_TYPE_EXTERNAL_AUTHENTICATION];
 

console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Action, FlowType, TriggerType } from 'src/app/proto/generated/zitadel/action_pb';
 import { SetTriggerActionsRequest } from 'src/app/proto/generated/zitadel/management_pb';
@@ -23,11 +23,11 @@ export class AddFlowDialogComponent {
       TriggerType.TRIGGER_TYPE_PRE_CREATION,      
     ];
     
-    public form!: FormGroup;
+    public form!: UntypedFormGroup;
     constructor(
       private toast: ToastService,
       private mgmtService: ManagementService,
-      private fb: FormBuilder,
+      private fb: UntypedFormBuilder,
       public dialogRef: MatDialogRef<AddFlowDialogComponent>,
       @Inject(MAT_DIALOG_DATA) public data: any,
     ) {

console/src/app/pages/org-create/org-create.component.ts

@@ -1,7 +1,7 @@
 import { animate, style, transition, trigger } from '@angular/animations';
 import { Location } from '@angular/common';
 import { Component } from '@angular/core';
-import { AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
+import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, ValidatorFn, Validators } from '@angular/forms';
 import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 import { Router } from '@angular/router';
 import { take } from 'rxjs/operators';
@@ -49,9 +49,9 @@ function passwordConfirmValidator(c: AbstractControl): any {
   ],
 })
 export class OrgCreateComponent {
-  public orgForm!: FormGroup;
-  public userForm!: FormGroup;
-  public pwdForm!: FormGroup;
+  public orgForm!: UntypedFormGroup;
+  public userForm!: UntypedFormGroup;
+  public pwdForm!: UntypedFormGroup;
 
   public genders: Gender[] = [Gender.GENDER_FEMALE, Gender.GENDER_MALE, Gender.GENDER_UNSPECIFIED];
   public languages: string[] = ['de', 'en'];
@@ -66,7 +66,7 @@ export class OrgCreateComponent {
     private toast: ToastService,
     private adminService: AdminService,
     private _location: Location,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private mgmtService: ManagementService,
     private authService: GrpcAuthService,
   ) {

console/src/app/pages/projects/apps/additional-origins/additional-origins.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { Observable, Subscription } from 'rxjs';
 
 @Component({
@@ -11,7 +11,7 @@ export class AdditionalOriginsComponent implements OnInit, OnDestroy {
   @Input() title: string = '';
   @Input() canWrite: boolean = false;
   @Input() public urisList: string[] = [];
-  @Input() public redirectControl: FormControl = new FormControl({ value: '', disabled: true });
+  @Input() public redirectControl: UntypedFormControl = new UntypedFormControl({ value: '', disabled: true });
   @Output() public changedUris: EventEmitter<string[]> = new EventEmitter<string[]>();
   @Input() public getValues: Observable<void> = new Observable();
   public placeholder: string = '<scheme> "://" <hostname> [ ":" <port> ]';

console/src/app/pages/projects/apps/app-create/app-create.component.ts

@@ -2,7 +2,7 @@ import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
 import { StepperSelectionEvent } from '@angular/cdk/stepper';
 import { Location } from '@angular/common';
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { Subject, Subscription } from 'rxjs';
@@ -84,11 +84,11 @@ export class AppCreateComponent implements OnInit, OnDestroy {
   ];
 
   // stepper
-  firstFormGroup!: FormGroup;
-  secondFormGroup!: FormGroup;
+  firstFormGroup!: UntypedFormGroup;
+  secondFormGroup!: UntypedFormGroup;
 
   // devmode
-  public form!: FormGroup;
+  public form!: UntypedFormGroup;
 
   public AppCreateType: any = AppCreateType;
   public OIDCAppType: any = OIDCAppType;
@@ -115,7 +115,7 @@ export class AppCreateComponent implements OnInit, OnDestroy {
     private toast: ToastService,
     private dialog: MatDialog,
     private mgmtService: ManagementService,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private _location: Location,
     private breadcrumbService: BreadcrumbService,
   ) {
@@ -247,8 +247,8 @@ export class AppCreateComponent implements OnInit, OnDestroy {
 
   public setDevFormValidators(): void {
     if (this.isDevOIDC) {
-      const grantTypesControl = new FormControl('', [Validators.required]);
-      const responseTypesControl = new FormControl('', [Validators.required]);
+      const grantTypesControl = new UntypedFormControl('', [Validators.required]);
+      const responseTypesControl = new UntypedFormControl('', [Validators.required]);
 
       this.form.addControl('grantTypesList', grantTypesControl);
       this.form.addControl('responseTypesList', responseTypesControl);

console/src/app/pages/projects/apps/app-detail/app-detail.component.ts

@@ -2,7 +2,7 @@ import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
 import { Location } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { AbstractControl, FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { AbstractControl, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -101,9 +101,9 @@ export class AppDetailComponent implements OnInit, OnDestroy {
   public oidcTokenTypes: OIDCTokenType[] = [OIDCTokenType.OIDC_TOKEN_TYPE_BEARER, OIDCTokenType.OIDC_TOKEN_TYPE_JWT];
 
   public AppState: any = AppState;
-  public oidcForm!: FormGroup;
-  public oidcTokenForm!: FormGroup;
-  public apiForm!: FormGroup;
+  public oidcForm!: UntypedFormGroup;
+  public oidcTokenForm!: UntypedFormGroup;
+  public apiForm!: UntypedFormGroup;
 
   public redirectUrisList: string[] = [];
   public postLogoutRedirectUrisList: string[] = [];
@@ -132,7 +132,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     public translate: TranslateService,
     private route: ActivatedRoute,
     private toast: ToastService,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private _location: Location,
     private dialog: MatDialog,
     private mgmtService: ManagementService,
@@ -665,8 +665,8 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     return this.apiForm.get('authMethodType');
   }
 
-  public get devMode(): FormControl | null {
-    return this.oidcForm.get('devMode') as FormControl;
+  public get devMode(): UntypedFormControl | null {
+    return this.oidcForm.get('devMode') as UntypedFormControl;
   }
 
   public get accessTokenType(): AbstractControl | null {

console/src/app/pages/projects/apps/redirect-uris/redirect-uris.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { Observable, Subscription } from 'rxjs';
 
 @Component({
@@ -13,7 +13,7 @@ export class RedirectUrisComponent implements OnInit, OnDestroy {
   @Input() canWrite: boolean = false;
   @Input() isNative!: boolean;
   @Input() public urisList: string[] = [];
-  @Input() public redirectControl: FormControl = new FormControl({ value: '', disabled: true });
+  @Input() public redirectControl: UntypedFormControl = new UntypedFormControl({ value: '', disabled: true });
   @Output() public changedUris: EventEmitter<string[]> = new EventEmitter();
   @Input() public getValues: Observable<void> = new Observable();
 

console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.component.ts

@@ -1,7 +1,7 @@
 import { animate, animateChild, query, stagger, style, transition, trigger } from '@angular/animations';
 import { Location } from '@angular/common';
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormArray, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { BulkAddProjectRolesRequest } from 'src/app/proto/generated/zitadel/management_pb';
@@ -30,11 +30,11 @@ export class ProjectRoleCreateComponent implements OnInit, OnDestroy {
   private subscription: Subscription = new Subscription();
   public projectId: string = '';
 
-  public formArray!: FormArray;
-  public formGroup: FormGroup = this.fb.group({
-    key: new FormControl('', [Validators.required]),
-    displayName: new FormControl(''),
-    group: new FormControl(''),
+  public formArray!: UntypedFormArray;
+  public formGroup: UntypedFormGroup = this.fb.group({
+    key: new UntypedFormControl('', [Validators.required]),
+    displayName: new UntypedFormControl(''),
+    group: new UntypedFormControl(''),
   });
 
   constructor(
@@ -42,17 +42,17 @@ export class ProjectRoleCreateComponent implements OnInit, OnDestroy {
     private route: ActivatedRoute,
     private toast: ToastService,
     private mgmtService: ManagementService,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private _location: Location,
   ) {
-    this.formArray = new FormArray([this.formGroup]);
+    this.formArray = new UntypedFormArray([this.formGroup]);
   }
 
   public addEntry(): void {
     const newGroup = this.fb.group({
-      key: new FormControl('', [Validators.required]),
-      displayName: new FormControl(''),
-      group: new FormControl(''),
+      key: new UntypedFormControl('', [Validators.required]),
+      displayName: new UntypedFormControl(''),
+      group: new UntypedFormControl(''),
     });
 
     this.formArray.push(newGroup);

console/src/app/pages/users/user-create-machine/user-create-machine.component.ts

@@ -1,6 +1,6 @@
 import { Location } from '@angular/common';
 import { Component, OnDestroy } from '@angular/core';
-import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { AddMachineUserRequest } from 'src/app/proto/generated/zitadel/management_pb';
@@ -15,7 +15,7 @@ import { ToastService } from 'src/app/services/toast.service';
 })
 export class UserCreateMachineComponent implements OnDestroy {
   public user: AddMachineUserRequest.AsObject = new AddMachineUserRequest().toObject();
-  public userForm!: FormGroup;
+  public userForm!: UntypedFormGroup;
 
   private sub: Subscription = new Subscription();
   public loading: boolean = false;
@@ -24,7 +24,7 @@ export class UserCreateMachineComponent implements OnDestroy {
     private router: Router,
     private toast: ToastService,
     public userService: ManagementService,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private _location: Location,
     breadcrumbService: BreadcrumbService,
   ) {

console/src/app/pages/users/user-create/user-create.component.ts

@@ -1,6 +1,6 @@
 import { Location } from '@angular/common';
 import { ChangeDetectorRef, Component, OnDestroy, ViewChild } from '@angular/core';
-import { AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
+import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, ValidatorFn, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import parsePhoneNumber from 'libphonenumber-js';
 import { Subject } from 'rxjs';
@@ -44,8 +44,8 @@ export class UserCreateComponent implements OnDestroy {
   public user: AddHumanUserRequest.AsObject = new AddHumanUserRequest().toObject();
   public genders: Gender[] = [Gender.GENDER_FEMALE, Gender.GENDER_MALE, Gender.GENDER_UNSPECIFIED];
   public languages: string[] = ['de', 'en'];
-  public userForm!: FormGroup;
-  public pwdForm!: FormGroup;
+  public userForm!: UntypedFormGroup;
+  public pwdForm!: UntypedFormGroup;
 
   public envSuffixLabel: string = '';
   private destroyed$: Subject<void> = new Subject();
@@ -61,7 +61,7 @@ export class UserCreateComponent implements OnDestroy {
   constructor(
     private router: Router,
     private toast: ToastService,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private mgmtService: ManagementService,
     private changeDetRef: ChangeDetectorRef,
     private _location: Location,

console/src/app/pages/users/user-detail/auth-user-detail/edit-dialog/edit-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { FormControl, Validators } from '@angular/forms';
+import { UntypedFormControl, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { parsePhoneNumber } from 'libphonenumber-js';
 
@@ -17,7 +17,7 @@ export class EditDialogComponent {
   public isPhone: boolean = false;
   public isVerified: boolean = false;
   public phoneCountry: string = 'CH';
-  public valueControl: FormControl = new FormControl(['', [Validators.required]]);
+  public valueControl: UntypedFormControl = new UntypedFormControl(['', [Validators.required]]);
   public EditDialogType: any = EditDialogType;
   constructor(public dialogRef: MatDialogRef<EditDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {
     this.valueControl.setValue(data.value);

console/src/app/pages/users/user-detail/detail-form-machine/detail-form-machine.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Subscription } from 'rxjs';
 import { Human, Machine } from 'src/app/proto/generated/zitadel/user_pb';
 
@@ -14,11 +14,11 @@ export class DetailFormMachineComponent implements OnInit, OnDestroy {
   @Input() public disabled: boolean = false;
   @Output() public submitData: EventEmitter<any> = new EventEmitter<any>();
 
-  public machineForm!: FormGroup;
+  public machineForm!: UntypedFormGroup;
 
   private sub: Subscription = new Subscription();
 
-  constructor(private fb: FormBuilder) {
+  constructor(private fb: UntypedFormBuilder) {
     this.machineForm = this.fb.group({
       userName: [{ value: '', disabled: true }, [
         Validators.required,

console/src/app/pages/users/user-detail/detail-form/detail-form.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnChanges, OnDestroy, Output } from '@angular/core';
-import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
 import { Gender, Human, Profile } from 'src/app/proto/generated/zitadel/user_pb';
@@ -24,11 +24,11 @@ export class DetailFormComponent implements OnDestroy, OnChanges {
   @Output() public changeUsernameClicked: EventEmitter<void> = new EventEmitter();
   @Output() public avatarChanged: EventEmitter<void> = new EventEmitter();
 
-  public profileForm!: FormGroup;
+  public profileForm!: UntypedFormGroup;
 
   private sub: Subscription = new Subscription();
 
-  constructor(private fb: FormBuilder, private dialog: MatDialog) {
+  constructor(private fb: UntypedFormBuilder, private dialog: MatDialog) {
     this.profileForm = this.fb.group({
       userName: [{ value: '', disabled: true }, [Validators.required]],
       firstName: [{ value: '', disabled: this.disabled }, Validators.required],

console/src/app/pages/users/user-detail/password/password.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy } from '@angular/core';
-import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription, take } from 'rxjs';
 import { lowerCaseValidator, numberValidator, symbolValidator, upperCaseValidator } from 'src/app/pages/validators';
@@ -33,13 +33,13 @@ export class PasswordComponent implements OnDestroy {
   userId: string = '';
 
   public policy!: PasswordComplexityPolicy.AsObject;
-  public passwordForm!: FormGroup;
+  public passwordForm!: UntypedFormGroup;
 
   private formSub: Subscription = new Subscription();
 
   constructor(
     activatedRoute: ActivatedRoute,
-    private fb: FormBuilder,
+    private fb: UntypedFormBuilder,
     private authService: GrpcAuthService,
     private mgmtUserService: ManagementService,
     private toast: ToastService,

console/src/app/pages/validators.ts

@@ -1,6 +1,6 @@
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 
-export function symbolValidator(c: FormControl): any {
+export function symbolValidator(c: UntypedFormControl): any {
     const REGEXP: RegExp = /[^a-z0-9]/gi;
 
     return REGEXP.test(c.value) ? null : {
@@ -11,7 +11,7 @@ export function symbolValidator(c: FormControl): any {
     };
 }
 
-export function numberValidator(c: FormControl): any {
+export function numberValidator(c: UntypedFormControl): any {
     const REGEXP = /[0-9]/g;
 
     return REGEXP.test(c.value) ? null : {
@@ -22,7 +22,7 @@ export function numberValidator(c: FormControl): any {
     };
 }
 
-export function upperCaseValidator(c: FormControl): any {
+export function upperCaseValidator(c: UntypedFormControl): any {
     const REGEXP = /[A-Z]/g;
 
     return REGEXP.test(c.value) ? null : {
@@ -33,7 +33,7 @@ export function upperCaseValidator(c: FormControl): any {
     };
 }
 
-export function lowerCaseValidator(c: FormControl): any {
+export function lowerCaseValidator(c: UntypedFormControl): any {
     const REGEXP = /[a-z]/g;
 
     return REGEXP.test(c.value) ? null : {