- {{ 'PROJECT.GRANT.CREATE.ORG_DESCRIPTION' | translate: org }}
+ {{ 'PROJECT.GRANT.CREATE.ORG_DESCRIPTION' | translate : org }}
{{ 'PROJECT.GRANT.CREATE.ORG_DESCRIPTION_DESC' | translate }}
diff --git a/console/src/app/pages/user-grant-create/user-grant-create.module.ts b/console/src/app/pages/user-grant-create/user-grant-create.module.ts
index daf48ca8a1..91cec3fb81 100644
--- a/console/src/app/pages/user-grant-create/user-grant-create.module.ts
+++ b/console/src/app/pages/user-grant-create/user-grant-create.module.ts
@@ -1,8 +1,8 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatIconModule } from '@angular/material/icon';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { TranslateModule } from '@ngx-translate/core';
import { CardModule } from 'src/app/modules/card/card.module';
import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
@@ -10,7 +10,6 @@ import { InputModule } from 'src/app/modules/input/input.module';
import { ProjectRolesTableModule } from 'src/app/modules/project-roles-table/project-roles-table.module';
import { SearchProjectAutocompleteModule } from 'src/app/modules/search-project-autocomplete/search-project-autocomplete.module';
import { SearchUserAutocompleteModule } from 'src/app/modules/search-user-autocomplete/search-user-autocomplete.module';
-import { SharedModule } from 'src/app/modules/shared/shared.module';
import { UserGrantCreateRoutingModule } from './user-grant-create-routing.module';
import { UserGrantCreateComponent } from './user-grant-create.component';
@@ -30,7 +29,6 @@ import { UserGrantCreateComponent } from './user-grant-create.component';
SearchProjectAutocompleteModule,
SearchUserAutocompleteModule,
ProjectRolesTableModule,
- SharedModule,
],
})
-export class UserGrantCreateModule {}
+export default class UserGrantCreateModule {}
diff --git a/console/src/app/pages/users/user-create-machine/user-create-machine.module.ts b/console/src/app/pages/users/user-create-machine/user-create-machine.module.ts
index 38ba2624bb..143c68282c 100644
--- a/console/src/app/pages/users/user-create-machine/user-create-machine.module.ts
+++ b/console/src/app/pages/users/user-create-machine/user-create-machine.module.ts
@@ -1,13 +1,13 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatIconModule } from '@angular/material/icon';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatSelectModule } from '@angular/material/select';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
@@ -36,4 +36,4 @@ import { UserCreateMachineComponent } from './user-create-machine.component';
InputModule,
],
})
-export class UserCreateMachineModule {}
+export default class UserCreateMachineModule {}
diff --git a/console/src/app/pages/users/user-create/user-create.module.ts b/console/src/app/pages/users/user-create/user-create.module.ts
index 45fcd57b8d..d9a790b175 100644
--- a/console/src/app/pages/users/user-create/user-create.module.ts
+++ b/console/src/app/pages/users/user-create/user-create.module.ts
@@ -1,14 +1,14 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatRippleModule } from '@angular/material/core';
import { MatIconModule } from '@angular/material/icon';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatSelectModule } from '@angular/material/select';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
@@ -42,4 +42,4 @@ import { UserCreateComponent } from './user-create.component';
MatRippleModule,
],
})
-export class UserCreateModule {}
+export default class UserCreateModule {}
diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/auth-factor-dialog/auth-factor-dialog.component.html b/console/src/app/pages/users/user-detail/auth-user-detail/auth-factor-dialog/auth-factor-dialog.component.html
index 3fb62e7891..cc99cf48b4 100644
--- a/console/src/app/pages/users/user-detail/auth-user-detail/auth-factor-dialog/auth-factor-dialog.component.html
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/auth-factor-dialog/auth-factor-dialog.component.html
@@ -29,7 +29,7 @@
-
+
{{ otpsecret }}
diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/auth-factor-dialog/auth-factor-dialog.component.ts b/console/src/app/pages/users/user-detail/auth-user-detail/auth-factor-dialog/auth-factor-dialog.component.ts
index 7a18557098..8f46a25e9f 100644
--- a/console/src/app/pages/users/user-detail/auth-user-detail/auth-factor-dialog/auth-factor-dialog.component.ts
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/auth-factor-dialog/auth-factor-dialog.component.ts
@@ -1,5 +1,8 @@
import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+ MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+ MatLegacyDialogRef as MatDialogRef,
+} from '@angular/material/legacy-dialog';
import { TranslateService } from '@ngx-translate/core';
import { take } from 'rxjs/operators';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/auth-passwordless.component.ts b/console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/auth-passwordless.component.ts
index 2175977dbc..0c75f23ea8 100644
--- a/console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/auth-passwordless.component.ts
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/auth-passwordless.component.ts
@@ -1,7 +1,7 @@
import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { MatSort } from '@angular/material/sort';
-import { MatTable, MatTableDataSource } from '@angular/material/table';
+import { MatLegacyTable as MatTable, MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
import { BehaviorSubject, Observable } from 'rxjs';
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
import { AuthFactorState, WebAuthNToken } from 'src/app/proto/generated/zitadel/user_pb';
diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/dialog-passwordless/dialog-passwordless.component.html b/console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/dialog-passwordless/dialog-passwordless.component.html
index c34959e325..7b5832c5b4 100644
--- a/console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/dialog-passwordless/dialog-passwordless.component.html
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/dialog-passwordless/dialog-passwordless.component.html
@@ -52,7 +52,14 @@
{{ 'USER.PASSWORDLESS.DIALOG.QRCODE_SCAN' | translate }}
-
+
diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/dialog-passwordless/dialog-passwordless.component.ts b/console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/dialog-passwordless/dialog-passwordless.component.ts
index 26c5b6c44d..1ad214b879 100644
--- a/console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/dialog-passwordless/dialog-passwordless.component.ts
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/dialog-passwordless/dialog-passwordless.component.ts
@@ -1,5 +1,8 @@
import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+ MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+ MatLegacyDialogRef as MatDialogRef,
+} from '@angular/material/legacy-dialog';
import { TranslateService } from '@ngx-translate/core';
import { take } from 'rxjs/operators';
diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.ts b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.ts
index 2e0b34eea9..94e29df036 100644
--- a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.ts
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.ts
@@ -1,7 +1,7 @@
import { MediaMatcher } from '@angular/cdk/layout';
import { Location } from '@angular/common';
import { Component, EventEmitter, OnDestroy } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { ActivatedRoute, Params } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Subscription, take } from 'rxjs';
diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.ts b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.ts
index f4d0f79f3d..3baf2fc499 100644
--- a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.ts
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.ts
@@ -1,7 +1,7 @@
import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { MatSort } from '@angular/material/sort';
-import { MatTable, MatTableDataSource } from '@angular/material/table';
+import { MatLegacyTable as MatTable, MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
import { BehaviorSubject, Observable } from 'rxjs';
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
import { AuthFactor, AuthFactorState } from 'src/app/proto/generated/zitadel/user_pb';
diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/code-dialog/code-dialog.component.ts b/console/src/app/pages/users/user-detail/auth-user-detail/code-dialog/code-dialog.component.ts
index 4d7de25e98..926df7b330 100644
--- a/console/src/app/pages/users/user-detail/auth-user-detail/code-dialog/code-dialog.component.ts
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/code-dialog/code-dialog.component.ts
@@ -1,5 +1,8 @@
import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+ MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+ MatLegacyDialogRef as MatDialogRef,
+} from '@angular/material/legacy-dialog';
@Component({
selector: 'cnsl-code-dialog',
diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/dialog-u2f/dialog-u2f.component.ts b/console/src/app/pages/users/user-detail/auth-user-detail/dialog-u2f/dialog-u2f.component.ts
index 212866a95b..7c1a8a8b5a 100644
--- a/console/src/app/pages/users/user-detail/auth-user-detail/dialog-u2f/dialog-u2f.component.ts
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/dialog-u2f/dialog-u2f.component.ts
@@ -1,5 +1,8 @@
import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+ MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+ MatLegacyDialogRef as MatDialogRef,
+} from '@angular/material/legacy-dialog';
import { TranslateService } from '@ngx-translate/core';
import { take } from 'rxjs/operators';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/edit-dialog/edit-dialog.component.ts b/console/src/app/pages/users/user-detail/auth-user-detail/edit-dialog/edit-dialog.component.ts
index 26b21402a4..58da60c73f 100644
--- a/console/src/app/pages/users/user-detail/auth-user-detail/edit-dialog/edit-dialog.component.ts
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/edit-dialog/edit-dialog.component.ts
@@ -1,6 +1,9 @@
import { Component, Inject } from '@angular/core';
import { UntypedFormControl, Validators } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+ MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+ MatLegacyDialogRef as MatDialogRef,
+} from '@angular/material/legacy-dialog';
import { parsePhoneNumber } from 'libphonenumber-js';
export enum EditDialogType {
diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/resend-email-dialog/resend-email-dialog.component.ts b/console/src/app/pages/users/user-detail/auth-user-detail/resend-email-dialog/resend-email-dialog.component.ts
index 8eb3848ce9..c377e03af5 100644
--- a/console/src/app/pages/users/user-detail/auth-user-detail/resend-email-dialog/resend-email-dialog.component.ts
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/resend-email-dialog/resend-email-dialog.component.ts
@@ -1,5 +1,8 @@
import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+ MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+ MatLegacyDialogRef as MatDialogRef,
+} from '@angular/material/legacy-dialog';
@Component({
selector: 'cnsl-resend-email-dialog',
diff --git a/console/src/app/pages/users/user-detail/contact/contact.component.ts b/console/src/app/pages/users/user-detail/contact/contact.component.ts
index f4fd937cc7..3c44be6fd9 100644
--- a/console/src/app/pages/users/user-detail/contact/contact.component.ts
+++ b/console/src/app/pages/users/user-detail/contact/contact.component.ts
@@ -1,5 +1,5 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
import { Human, UserState } from 'src/app/proto/generated/zitadel/user_pb';
diff --git a/console/src/app/pages/users/user-detail/detail-form-machine/detail-form-machine.module.ts b/console/src/app/pages/users/user-detail/detail-form-machine/detail-form-machine.module.ts
index 8160aee5e3..576884df1c 100644
--- a/console/src/app/pages/users/user-detail/detail-form-machine/detail-form-machine.module.ts
+++ b/console/src/app/pages/users/user-detail/detail-form-machine/detail-form-machine.module.ts
@@ -1,9 +1,9 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatIconModule } from '@angular/material/icon';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { TranslateModule } from '@ngx-translate/core';
import { InputModule } from 'src/app/modules/input/input.module';
diff --git a/console/src/app/pages/users/user-detail/detail-form/detail-form.component.ts b/console/src/app/pages/users/user-detail/detail-form/detail-form.component.ts
index b619018ad7..1b0bd63137 100644
--- a/console/src/app/pages/users/user-detail/detail-form/detail-form.component.ts
+++ b/console/src/app/pages/users/user-detail/detail-form/detail-form.component.ts
@@ -1,6 +1,6 @@
import { Component, EventEmitter, Input, OnChanges, OnDestroy, Output } from '@angular/core';
import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { Subscription } from 'rxjs';
import { Gender, Human, Profile } from 'src/app/proto/generated/zitadel/user_pb';
diff --git a/console/src/app/pages/users/user-detail/detail-form/detail-form.module.ts b/console/src/app/pages/users/user-detail/detail-form/detail-form.module.ts
index a126377f1a..b5c42b7e4d 100644
--- a/console/src/app/pages/users/user-detail/detail-form/detail-form.module.ts
+++ b/console/src/app/pages/users/user-detail/detail-form/detail-form.module.ts
@@ -1,10 +1,10 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatIconModule } from '@angular/material/icon';
-import { MatSelectModule } from '@angular/material/select';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { DropzoneModule } from 'src/app/directives/dropzone/dropzone.module';
import { AvatarModule } from 'src/app/modules/avatar/avatar.module';
diff --git a/console/src/app/pages/users/user-detail/detail-form/profile-picture/profile-picture.component.ts b/console/src/app/pages/users/user-detail/detail-form/profile-picture/profile-picture.component.ts
index 293d42355a..c275c8b76c 100644
--- a/console/src/app/pages/users/user-detail/detail-form/profile-picture/profile-picture.component.ts
+++ b/console/src/app/pages/users/user-detail/detail-form/profile-picture/profile-picture.component.ts
@@ -1,5 +1,8 @@
import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+ MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+ MatLegacyDialogRef as MatDialogRef,
+} from '@angular/material/legacy-dialog';
import { AssetService } from 'src/app/services/asset.service';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
import { ToastService } from 'src/app/services/toast.service';
diff --git a/console/src/app/pages/users/user-detail/external-idps/external-idps.component.ts b/console/src/app/pages/users/user-detail/external-idps/external-idps.component.ts
index 4db8992857..b6513e0f8c 100644
--- a/console/src/app/pages/users/user-detail/external-idps/external-idps.component.ts
+++ b/console/src/app/pages/users/user-detail/external-idps/external-idps.component.ts
@@ -1,7 +1,7 @@
import { SelectionModel } from '@angular/cdk/collections';
import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
-import { MatTableDataSource } from '@angular/material/table';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { BehaviorSubject, Observable } from 'rxjs';
import { PageEvent, PaginatorComponent } from 'src/app/modules/paginator/paginator.component';
diff --git a/console/src/app/pages/users/user-detail/user-detail.module.ts b/console/src/app/pages/users/user-detail/user-detail.module.ts
index 2d40a29faf..ee25e75a38 100644
--- a/console/src/app/pages/users/user-detail/user-detail.module.ts
+++ b/console/src/app/pages/users/user-detail/user-detail.module.ts
@@ -1,18 +1,17 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
import { MatIconModule } from '@angular/material/icon';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatTableModule } from '@angular/material/table';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
+import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
+import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
-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';
@@ -57,6 +56,7 @@ import { PasswordlessComponent } from './user-detail/passwordless/passwordless.c
import { UserDetailComponent } from './user-detail/user-detail.component';
import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
import { MetadataModule } from 'src/app/modules/metadata/metadata.module';
+import { QRCodeModule } from 'angularx-qrcode';
@NgModule({
declarations: [
@@ -88,7 +88,7 @@ import { MetadataModule } from 'src/app/modules/metadata/metadata.module';
DetailFormMachineModule,
WarnDialogModule,
MatDialogModule,
- QrCodeModule,
+ QRCodeModule,
ShowTokenDialogModule,
MetaLayoutModule,
MatCheckboxModule,
diff --git a/console/src/app/pages/users/user-detail/user-detail/passwordless/passwordless.component.ts b/console/src/app/pages/users/user-detail/user-detail/passwordless/passwordless.component.ts
index ed8de1062f..b4514b1926 100644
--- a/console/src/app/pages/users/user-detail/user-detail/passwordless/passwordless.component.ts
+++ b/console/src/app/pages/users/user-detail/user-detail/passwordless/passwordless.component.ts
@@ -1,7 +1,7 @@
import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { MatSort } from '@angular/material/sort';
-import { MatTable, MatTableDataSource } from '@angular/material/table';
+import { MatLegacyTable as MatTable, MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
import { BehaviorSubject, Observable } from 'rxjs';
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
import { AuthFactorState, User, WebAuthNToken } from 'src/app/proto/generated/zitadel/user_pb';
diff --git a/console/src/app/pages/users/user-detail/user-detail/user-detail.component.ts b/console/src/app/pages/users/user-detail/user-detail/user-detail.component.ts
index 0fa7fc1a84..2b8a4abc9c 100644
--- a/console/src/app/pages/users/user-detail/user-detail/user-detail.component.ts
+++ b/console/src/app/pages/users/user-detail/user-detail/user-detail.component.ts
@@ -1,7 +1,7 @@
import { MediaMatcher } from '@angular/cdk/layout';
import { Location } from '@angular/common';
import { Component, EventEmitter, OnInit } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { take } from 'rxjs/operators';
diff --git a/console/src/app/pages/users/user-detail/user-detail/user-mfa/user-mfa.component.ts b/console/src/app/pages/users/user-detail/user-detail/user-mfa/user-mfa.component.ts
index 32fa6bc941..1674ab56aa 100644
--- a/console/src/app/pages/users/user-detail/user-detail/user-mfa/user-mfa.component.ts
+++ b/console/src/app/pages/users/user-detail/user-detail/user-mfa/user-mfa.component.ts
@@ -1,7 +1,7 @@
import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { MatSort } from '@angular/material/sort';
-import { MatTable, MatTableDataSource } from '@angular/material/table';
+import { MatLegacyTable as MatTable, MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
import { BehaviorSubject, Observable } from 'rxjs';
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
import { AuthFactor, AuthFactorState, User } from 'src/app/proto/generated/zitadel/user_pb';
diff --git a/console/src/app/pages/users/user-list/user-list.module.ts b/console/src/app/pages/users/user-list/user-list.module.ts
index be86f4ddfd..e78da4894f 100644
--- a/console/src/app/pages/users/user-list/user-list.module.ts
+++ b/console/src/app/pages/users/user-list/user-list.module.ts
@@ -1,15 +1,15 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
import { MatIconModule } from '@angular/material/icon';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
diff --git a/console/src/app/pages/users/user-list/user-table/user-table.component.html b/console/src/app/pages/users/user-list/user-table/user-table.component.html
index 57d4c33fcf..fe107d3f68 100644
--- a/console/src/app/pages/users/user-list/user-table/user-table.component.html
+++ b/console/src/app/pages/users/user-list/user-table/user-table.component.html
@@ -176,14 +176,14 @@
{{ 'USER.TABLE.CREATIONDATE' | translate }} |
- {{ user.details.creationDate | timestampToDate | localizedDate: 'fromNow' }}
+ {{ user.details.creationDate | timestampToDate | localizedDate : 'fromNow' }}
|
{{ 'USER.TABLE.CHANGEDATE' | translate }} |
- {{ user.details.changeDate | timestampToDate | localizedDate: 'fromNow' }}
+ {{ user.details.changeDate | timestampToDate | localizedDate : 'fromNow' }}
|
diff --git a/console/src/app/pages/users/user-list/user-table/user-table.component.ts b/console/src/app/pages/users/user-list/user-table/user-table.component.ts
index 008cbe126d..734776ee45 100644
--- a/console/src/app/pages/users/user-list/user-table/user-table.component.ts
+++ b/console/src/app/pages/users/user-list/user-table/user-table.component.ts
@@ -1,9 +1,9 @@
import { LiveAnnouncer } from '@angular/cdk/a11y';
import { SelectionModel } from '@angular/cdk/collections';
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { MatSort, Sort } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
+import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
import { ActivatedRoute, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { BehaviorSubject, Observable } from 'rxjs';
diff --git a/console/src/app/pages/users/users-routing.module.ts b/console/src/app/pages/users/users-routing.module.ts
index a67f64e1c8..240d32638e 100644
--- a/console/src/app/pages/users/users-routing.module.ts
+++ b/console/src/app/pages/users/users-routing.module.ts
@@ -21,7 +21,7 @@ const routes: Routes = [
},
{
path: 'create',
- loadChildren: () => import('./user-create/user-create.module').then((m) => m.UserCreateModule),
+ loadChildren: () => import('./user-create/user-create.module'),
canActivate: [AuthGuard, RoleGuard],
data: {
roles: ['user.write'],
@@ -29,7 +29,7 @@ const routes: Routes = [
},
{
path: 'create-machine',
- loadChildren: () => import('./user-create-machine/user-create-machine.module').then((m) => m.UserCreateMachineModule),
+ loadChildren: () => import('./user-create-machine/user-create-machine.module'),
canActivate: [AuthGuard, RoleGuard],
data: {
roles: ['user.write'],
diff --git a/console/src/app/pages/users/users.module.ts b/console/src/app/pages/users/users.module.ts
index 27009def53..693805cfbe 100644
--- a/console/src/app/pages/users/users.module.ts
+++ b/console/src/app/pages/users/users.module.ts
@@ -1,14 +1,12 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ChangesModule } from 'src/app/modules/changes/changes.module';
-import { SharedModule } from 'src/app/modules/shared/shared.module';
-
import { UserDetailModule } from './user-detail/user-detail.module';
import { UserListModule } from './user-list/user-list.module';
import { UsersRoutingModule } from './users-routing.module';
@NgModule({
declarations: [],
- imports: [UsersRoutingModule, SharedModule, UserListModule, UserDetailModule, ChangesModule, CommonModule],
+ imports: [UsersRoutingModule, UserListModule, UserDetailModule, ChangesModule, CommonModule],
})
-export class UsersModule {}
+export default class UsersModule {}
diff --git a/console/src/app/services/grpc.service.ts b/console/src/app/services/grpc.service.ts
index 1019df2ee0..9dc4a84807 100644
--- a/console/src/app/services/grpc.service.ts
+++ b/console/src/app/services/grpc.service.ts
@@ -1,7 +1,7 @@
import { PlatformLocation } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { TranslateService } from '@ngx-translate/core';
import { AuthConfig } from 'angular-oauth2-oidc';
diff --git a/console/src/app/services/interceptors/auth.interceptor.ts b/console/src/app/services/interceptors/auth.interceptor.ts
index dcd5dec03c..18f85fbb0c 100644
--- a/console/src/app/services/interceptors/auth.interceptor.ts
+++ b/console/src/app/services/interceptors/auth.interceptor.ts
@@ -1,5 +1,5 @@
import { Injectable } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { Request, UnaryInterceptor, UnaryResponse } from 'grpc-web';
import { Subject } from 'rxjs';
import { debounceTime, filter, first, take } from 'rxjs/operators';
diff --git a/console/src/app/services/keyboard-shortcuts/keyboard-shortcuts.service.ts b/console/src/app/services/keyboard-shortcuts/keyboard-shortcuts.service.ts
index a570ce5091..34c1691c3e 100644
--- a/console/src/app/services/keyboard-shortcuts/keyboard-shortcuts.service.ts
+++ b/console/src/app/services/keyboard-shortcuts/keyboard-shortcuts.service.ts
@@ -1,5 +1,5 @@
import { Injectable, OnDestroy, Renderer2, RendererFactory2 } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { Router } from '@angular/router';
import { BehaviorSubject, Observable, of, pairwise, Subject, takeUntil } from 'rxjs';
diff --git a/console/src/app/services/toast.service.ts b/console/src/app/services/toast.service.ts
index f6aef33185..e9d37a588e 100644
--- a/console/src/app/services/toast.service.ts
+++ b/console/src/app/services/toast.service.ts
@@ -1,5 +1,9 @@
import { Injectable } from '@angular/core';
-import { MatSnackBar, MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition } from '@angular/material/snack-bar';
+import {
+ MatLegacySnackBar as MatSnackBar,
+ MatLegacySnackBarHorizontalPosition as MatSnackBarHorizontalPosition,
+ MatLegacySnackBarVerticalPosition as MatSnackBarVerticalPosition,
+} from '@angular/material/legacy-snack-bar';
import { TranslateService } from '@ngx-translate/core';
import { Observable } from 'rxjs';
import { take } from 'rxjs/operators';
diff --git a/console/src/app/services/update.service.ts b/console/src/app/services/update.service.ts
index cc0900bad1..e1c22e7bc1 100644
--- a/console/src/app/services/update.service.ts
+++ b/console/src/app/services/update.service.ts
@@ -1,5 +1,5 @@
import { Injectable } from '@angular/core';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
import { SwUpdate } from '@angular/service-worker';
@Injectable({
diff --git a/console/src/polyfills.ts b/console/src/polyfills.ts
deleted file mode 100644
index b40974e692..0000000000
--- a/console/src/polyfills.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
- * file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
- *
- * Learn more in https://angular.io/guide/browser-support
- */
-
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/**
- * By default, zone.js will patch all possible macroTask and DomEvents
- * user can disable parts of macroTask/DomEvents patch by setting following flags
- * because those flags need to be set before `zone.js` being loaded, and webpack
- * will put import in the top of bundle, so user need to create a separate file
- * in this directory (for example: zone-flags.ts), and put the following flags
- * into that file, and then add the following code before importing zone.js.
- * import './zone-flags.ts';
- *
- * The flags allowed in zone-flags.ts are listed here.
- *
- * The following flags will work for all browsers.
- *
- * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
- *
- * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- * with the following flag, it will bypass `zone.js` patch for IE/Edge
- *
- * (window as any).__Zone_enable_cross_context_check = true;
- *
- */
-
-/***************************************************************************************************
- * Zone JS is required by default for Angular itself.
- */
-import 'zone.js'; // Included with Angular CLI.
-
-/***************************************************************************************************
- * APPLICATION IMPORTS
- */
diff --git a/console/src/styles.scss b/console/src/styles.scss
index 59a0658a28..55760d35f6 100644
--- a/console/src/styles.scss
+++ b/console/src/styles.scss
@@ -1,19 +1,13 @@
@use '@angular/material' as mat;
-@import '~codemirror/lib/codemirror';
+@import 'codemirror/lib/codemirror.css';
@import './component-themes';
@import './styles/lato-font.scss';
@import '@angular/material/theming';
$material-design-icons-font-directory-path: '~material-design-icons-iconfont/dist/fonts/';
-@import '~material-design-icons-iconfont/src/material-design-icons';
-
-// 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!
+@import 'material-design-icons-iconfont/src/material-design-icons.scss';
@font-face {
font-family: ailerons;
@@ -369,11 +363,12 @@ $caos-light-app-theme: (
background: $caos-light-theme-background,
);
-$custom-typography: mat.define-typography-config(
+$custom-typography: mat.define-legacy-typography-config(
$font-family: 'Lato',
);
-@include mat.core($custom-typography);
+@include mat.all-legacy-component-typographies($custom-typography);
+@include mat.legacy-core();
.mat-dialog-container,
.mat-raised-button,
@@ -416,16 +411,15 @@ $custom-typography: mat.define-typography-config(
}
@include component-themes($caos-dark-app-theme);
-@include mat.all-component-themes($caos-dark-app-theme);
+@include mat.all-legacy-component-themes($caos-dark-app-theme);
.light-theme {
@include component-themes($caos-light-app-theme);
- @include mat.all-component-themes($caos-light-app-theme);
+ @include mat.all-legacy-component-themes($caos-light-app-theme);
$background: map-get($caos-light-app-theme, background);
$foreground: map-get($caos-light-app-theme, foreground);
- --color-main: var(--theme-light-primary-500);
--warn: #cd3d56;
--success: #10b981;
$border-color: map-get($foreground, divider);
@@ -493,7 +487,6 @@ $custom-typography: mat.define-typography-config(
$background: map-get($caos-dark-app-theme, background);
$foreground: map-get($caos-dark-app-theme, foreground);
- --color-main: var(--theme-dark-primary-500);
--warn: #ff3b5b;
--success: #10b981;
$border-color: map-get($foreground, divider);
diff --git a/console/src/test.ts b/console/src/test.ts
index ad4c068994..b4bc56d990 100644
--- a/console/src/test.ts
+++ b/console/src/test.ts
@@ -4,13 +4,7 @@ import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
-declare const require: any;
-
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
teardown: { destroyAfterEach: false },
});
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
diff --git a/console/tsconfig.app.json b/console/tsconfig.app.json
index 82d91dc4a4..84f1f992d2 100644
--- a/console/tsconfig.app.json
+++ b/console/tsconfig.app.json
@@ -5,11 +5,6 @@
"outDir": "./out-tsc/app",
"types": []
},
- "files": [
- "src/main.ts",
- "src/polyfills.ts"
- ],
- "include": [
- "src/**/*.d.ts"
- ]
+ "files": ["src/main.ts"],
+ "include": ["src/**/*.d.ts"]
}
diff --git a/console/tsconfig.json b/console/tsconfig.json
index e0d4bc8c16..4cf6388081 100644
--- a/console/tsconfig.json
+++ b/console/tsconfig.json
@@ -14,9 +14,10 @@
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
- "target": "es2020",
- "module": "es2020",
- "lib": ["es2020", "dom"]
+ "target": "ES2022",
+ "module": "es2022",
+ "lib": ["ES2022", "dom"],
+ "useDefineForClassFields": false
},
"angularCompilerOptions": {
"strictInjectionParameters": true,
diff --git a/console/tsconfig.spec.json b/console/tsconfig.spec.json
index 092345b02e..f140ce15bf 100644
--- a/console/tsconfig.spec.json
+++ b/console/tsconfig.spec.json
@@ -3,16 +3,8 @@
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
- "types": [
- "jasmine"
- ]
+ "types": ["jasmine"]
},
- "files": [
- "src/test.ts",
- "src/polyfills.ts"
- ],
- "include": [
- "src/**/*.spec.ts",
- "src/**/*.d.ts"
- ]
+ "files": ["src/test.ts"],
+ "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}