Merge branch 'main' into next

# Conflicts:
#	cmd/start/start.go
#	internal/auth/repository/eventsourcing/eventstore/auth_request.go
#	internal/auth/repository/eventsourcing/repository.go
#	internal/command/main_test.go
#	internal/command/quota.go
#	internal/command/quota_model.go
#	internal/command/quota_model_test.go

.github/workflows/build.yml

@@ -11,31 +11,30 @@ permissions:
   pull-requests: write
 
 jobs:
-
   core:
     uses: ./.github/workflows/core.yml
     with:
-      node_version: '18'
+      node_version: "20"
-      buf_version: 'latest'
+      buf_version: "latest"
-      go_version: '1.21'
+      go_version: "1.21"
 
   console:
     uses: ./.github/workflows/console.yml
     with:
-      node_version: '18'
+      node_version: "20"
-      buf_version: 'latest'
+      buf_version: "latest"
 
   version:
     uses: ./.github/workflows/version.yml
     with:
-      semantic_version: '19.0.2'
+      semantic_version: "19.0.2"
       dry_run: true
 
   compile:
     needs: [core, console, version]
     uses: ./.github/workflows/compile.yml
     with:
-      go_version: '1.21'
+      go_version: "1.21"
       core_cache_key: ${{ needs.core.outputs.cache_key }}
       console_cache_key: ${{ needs.console.outputs.cache_key }}
       core_cache_path: ${{ needs.core.outputs.cache_path }}
@@ -46,7 +45,7 @@ jobs:
     needs: core
     uses: ./.github/workflows/core-unit-test.yml
     with:
-      go_version: '1.21'
+      go_version: "1.21"
       core_cache_key: ${{ needs.core.outputs.cache_key }}
       core_cache_path: ${{ needs.core.outputs.cache_path }}
 
@@ -54,7 +53,7 @@ jobs:
     needs: core
     uses: ./.github/workflows/core-integration-test.yml
     with:
-      go_version: '1.21'
+      go_version: "1.21"
       core_cache_key: ${{ needs.core.outputs.cache_key }}
       core_cache_path: ${{ needs.core.outputs.cache_path }}
 
@@ -62,10 +61,10 @@ jobs:
     needs: [core, console]
     uses: ./.github/workflows/lint.yml
     with:
-      go_version: '1.21'
+      go_version: "1.21"
-      node_version: '18'
+      node_version: "18"
-      buf_version: 'latest'
+      buf_version: "latest"
-      go_lint_version: 'v1.53.2'
+      go_lint_version: "v1.53.2"
       core_cache_key: ${{ needs.core.outputs.cache_key }}
       core_cache_path: ${{ needs.core.outputs.cache_path }}
 
@@ -77,7 +76,7 @@ jobs:
       packages: write
     if: ${{ github.event_name == 'workflow_dispatch' }}
     with:
-      build_image_name: 'ghcr.io/zitadel/zitadel-build'
+      build_image_name: "ghcr.io/zitadel/zitadel-build"
 
   e2e:
     uses: ./.github/workflows/e2e.yml
@@ -90,12 +89,13 @@ jobs:
       contents: write
       issues: write
       pull-requests: write
-    needs: [version, core-unit-test, core-integration-test, lint, container, e2e]
+    needs:
+      [version, core-unit-test, core-integration-test, lint, container, e2e]
     if: ${{ needs.version.outputs.published == 'true' && github.event_name == 'workflow_dispatch' }}
     secrets:
       GCR_JSON_KEY_BASE64: ${{ secrets.GCR_JSON_KEY_BASE64 }}
     with:
       build_image_name: ${{ needs.container.outputs.build_image }}
-      semantic_version: '19.0.2'
+      semantic_version: "19.0.2"
-      image_name: 'ghcr.io/zitadel/zitadel'
+      image_name: "ghcr.io/zitadel/zitadel"
       google_image_name: "europe-docker.pkg.dev/zitadel-common/zitadel-repo/zitadel"

cmd/defaults.yaml

@@ -595,7 +595,7 @@ DefaultInstance:
     MaxAgeDays: 0 # ZITADEL_DEFAULTINSTANCE_PASSWORDAGEPOLICY_MAXAGEDAYS
   DomainPolicy:
     UserLoginMustBeDomain: false # ZITADEL_DEFAULTINSTANCE_DOMAINPOLICY_USERLOGINMUSTBEDOMAIN
-    ValidateOrgDomains: true # ZITADEL_DEFAULTINSTANCE_DOMAINPOLICY_VALIDATEORGDOMAINS
+    ValidateOrgDomains: false # ZITADEL_DEFAULTINSTANCE_DOMAINPOLICY_VALIDATEORGDOMAINS
     SMTPSenderAddressMatchesInstanceDomain: false # ZITADEL_DEFAULTINSTANCE_DOMAINPOLICY_SMTPSENDERADDRESSMATCHESINSTANCEDOMAIN
   LoginPolicy:
     AllowUsernamePassword: true # ZITADEL_DEFAULTINSTANCE_LOGINPOLICY_ALLOWUSERNAMEPASSWORD
@@ -604,7 +604,7 @@ DefaultInstance:
     ForceMFA: false # ZITADEL_DEFAULTINSTANCE_LOGINPOLICY_FORCEMFA
     HidePasswordReset: false # ZITADEL_DEFAULTINSTANCE_LOGINPOLICY_HIDEPASSWORDRESET
     IgnoreUnknownUsernames: false # ZITADEL_DEFAULTINSTANCE_LOGINPOLICY_IGNOREUNKNOWNUSERNAMES
-    AllowDomainDiscovery: false # ZITADEL_DEFAULTINSTANCE_LOGINPOLICY_ALLOWDOMAINDISCOVERY
+    AllowDomainDiscovery: true # ZITADEL_DEFAULTINSTANCE_LOGINPOLICY_ALLOWDOMAINDISCOVERY
     # 1 is allowed, 0 is not allowed
     PasswordlessType: 1 # ZITADEL_DEFAULTINSTANCE_LOGINPOLICY_PASSWORDLESSTYPE
     # DefaultRedirectURL is empty by default because we use the Console UI
@@ -761,6 +761,8 @@ DefaultInstance:
       Greeting: Hello {{.DisplayName}},
       Text: The password of your user has changed. If this change was not done by you, please be advised to immediately reset your password.
       ButtonText: Login
+  Features:
+    - FeatureLoginDefaultOrg: true
 
   Quotas:
     # Items take a slice of quota configurations, whereas, for each unit type and instance, one or zero quotas may exist.
@@ -819,6 +821,7 @@ InternalAuthZ:
         - "iam.flow.read"
         - "iam.flow.write"
         - "iam.flow.delete"
+        - "iam.feature.write"
         - "org.read"
         - "org.global.read"
         - "org.create"

cmd/ready/config.go

@@ -23,6 +23,7 @@ func MustNewConfig(v *viper.Viper) *Config {
 			mapstructure.StringToTimeDurationHookFunc(),
 			mapstructure.StringToTimeHookFunc(time.RFC3339),
 			mapstructure.StringToSliceHookFunc(","),
+			hook.StringToFeatureHookFunc(),
 		)),
 	)
 	logging.OnError(err).Fatal("unable to read default config")

cmd/setup/03.go

@@ -24,6 +24,7 @@ type FirstInstance struct {
 	Org             command.InstanceOrgSetup
 	MachineKeyPath  string
 	PatPath         string
+	Features        map[domain.Feature]any
 
 	instanceSetup     command.InstanceSetup
 	userEncryptionKey *crypto.KeyConfig

cmd/setup/config.go

@@ -43,6 +43,7 @@ func MustNewConfig(v *viper.Viper) *Config {
 			mapstructure.StringToTimeHookFunc(time.RFC3339),
 			mapstructure.StringToSliceHookFunc(","),
 			database.DecodeHook,
+			hook.StringToFeatureHookFunc(),
 		)),
 	)
 	logging.OnError(err).Fatal("unable to read default config")
@@ -99,6 +100,7 @@ func MustNewSteps(v *viper.Viper) *Steps {
 			mapstructure.StringToTimeDurationHookFunc(),
 			mapstructure.StringToTimeHookFunc(time.RFC3339),
 			mapstructure.StringToSliceHookFunc(","),
+			hook.StringToFeatureHookFunc(),
 		)),
 	)
 	logging.OnError(err).Fatal("unable to read steps")

cmd/start/config.go

@@ -92,6 +92,7 @@ func MustNewConfig(v *viper.Viper) *Config {
 			database.DecodeHook,
 			actions.HTTPConfigDecodeHook,
 			systemAPIUsersDecodeHook,
+			hook.StringToFeatureHookFunc(),
 		)),
 	)
 	logging.OnError(err).Fatal("unable to read config")

cmd/start/start.go

@@ -27,6 +27,7 @@ import (
 	"github.com/zitadel/zitadel/cmd/build"
 	"github.com/zitadel/zitadel/cmd/key"
 	cmd_tls "github.com/zitadel/zitadel/cmd/tls"
+	"github.com/zitadel/zitadel/feature"
 	"github.com/zitadel/zitadel/internal/actions"
 	admin_es "github.com/zitadel/zitadel/internal/admin/repository/eventsourcing"
 	"github.com/zitadel/zitadel/internal/api"
@@ -40,7 +41,7 @@ import (
 	"github.com/zitadel/zitadel/internal/api/grpc/session/v2"
 	"github.com/zitadel/zitadel/internal/api/grpc/settings/v2"
 	"github.com/zitadel/zitadel/internal/api/grpc/system"
-	"github.com/zitadel/zitadel/internal/api/grpc/user/v2"
+	user_v2 "github.com/zitadel/zitadel/internal/api/grpc/user/v2"
 	http_util "github.com/zitadel/zitadel/internal/api/http"
 	"github.com/zitadel/zitadel/internal/api/http/middleware"
 	"github.com/zitadel/zitadel/internal/api/idp"
@@ -356,7 +357,7 @@ func startAPIs(
 	if err := apis.RegisterServer(ctx, auth.CreateServer(commands, queries, authRepo, config.SystemDefaults, keys.User, config.ExternalSecure, config.AuditLogRetention)); err != nil {
 		return err
 	}
-	if err := apis.RegisterService(ctx, user.CreateServer(commands, queries, keys.User, keys.IDPConfig, idp.CallbackURL(config.ExternalSecure))); err != nil {
+	if err := apis.RegisterService(ctx, user_v2.CreateServer(commands, queries, keys.User, keys.IDPConfig, idp.CallbackURL(config.ExternalSecure), idp.SAMLRootURL(config.ExternalSecure))); err != nil {
 		return err
 	}
 	if err := apis.RegisterService(ctx, session.CreateServer(commands, queries, permissionCheck)); err != nil {
@@ -375,7 +376,7 @@ func startAPIs(
 
 	apis.RegisterHandlerOnPrefix(idp.HandlerPrefix, idp.NewHandler(commands, queries, keys.IDPConfig, config.ExternalSecure, instanceInterceptor.Handler))
 
-	userAgentInterceptor, err := middleware.NewUserAgentHandler(config.UserAgentCookie, keys.UserAgentCookieKey, id.SonyFlakeGenerator(), config.ExternalSecure, login.EndpointResources, login.EndpointExternalLoginCallbackFormPost)
+	userAgentInterceptor, err := middleware.NewUserAgentHandler(config.UserAgentCookie, keys.UserAgentCookieKey, id.SonyFlakeGenerator(), config.ExternalSecure, login.EndpointResources, login.EndpointExternalLoginCallbackFormPost, login.EndpointSAMLACS)
 	if err != nil {
 		return err
 	}
@@ -412,7 +413,27 @@ func startAPIs(
 	}
 	apis.RegisterHandlerOnPrefix(console.HandlerPrefix, c)
 
-	l, err := login.CreateLogin(config.Login, commands, queries, authRepo, store, console.HandlerPrefix+"/", op.AuthCallbackURL(oidcProvider), provider.AuthCallbackURL(samlProvider), config.ExternalSecure, userAgentInterceptor, op.NewIssuerInterceptor(oidcProvider.IssuerFromRequest).Handler, provider.NewIssuerInterceptor(samlProvider.IssuerFromRequest).Handler, instanceInterceptor.Handler, assetsCache.Handler, limitingAccessInterceptor.WithoutLimiting().Handle, keys.User, keys.IDPConfig, keys.CSRFCookieKey)
+	l, err := login.CreateLogin(
+		config.Login,
+		commands,
+		queries,
+		authRepo,
+		store,
+		console.HandlerPrefix+"/",
+		op.AuthCallbackURL(oidcProvider),
+		provider.AuthCallbackURL(samlProvider),
+		config.ExternalSecure,
+		userAgentInterceptor,
+		op.NewIssuerInterceptor(oidcProvider.IssuerFromRequest).Handler,
+		provider.NewIssuerInterceptor(samlProvider.IssuerFromRequest).Handler,
+		instanceInterceptor.Handler,
+		assetsCache.Handler,
+		limitingAccessInterceptor.WithoutLimiting().Handle,
+		keys.User,
+		keys.IDPConfig,
+		keys.CSRFCookieKey,
+		feature.NewCheck(eventstore),
+	)
 	if err != nil {
 		return fmt.Errorf("unable to start login: %w", err)
 	}

console/package.json

@@ -25,7 +25,7 @@
     "@angular/router": "^16.2.0",
     "@angular/service-worker": "^16.2.0",
     "@ctrl/ngx-codemirror": "^6.1.0",
-    "@grpc/grpc-js": "^1.8.14",
+    "@grpc/grpc-js": "^1.9.3",
     "@ngx-translate/core": "^14.0.0",
     "angular-oauth2-oidc": "^15.0.1",
     "angularx-qrcode": "^16.0.0",
@@ -41,8 +41,8 @@
     "libphonenumber-js": "^1.10.30",
     "material-design-icons-iconfont": "^6.1.1",
     "moment": "^2.29.4",
-    "opentype.js": "^1.3.4",
     "ngx-color": "^9.0.0",
+    "opentype.js": "^1.3.4",
     "rxjs": "~7.8.0",
     "tinycolor2": "^1.6.0",
     "tslib": "^2.4.1",
@@ -62,17 +62,17 @@
     "@bufbuild/buf": "^1.23.1",
     "@types/file-saver": "^2.0.2",
     "@types/google-protobuf": "^3.15.3",
-    "@types/jasmine": "~4.3.3",
+    "@types/jasmine": "~4.3.6",
     "@types/jasminewd2": "~2.0.10",
     "@types/jsonwebtoken": "^9.0.1",
-    "@types/node": "^18.15.11",
+    "@types/node": "^20.7.0",
     "@types/opentype.js": "^1.3.4",
-    "@types/qrcode": "^1.5.0",
+    "@types/qrcode": "^1.5.2",
     "@types/uuid": "^9.0.2",
     "@typescript-eslint/eslint-plugin": "^5.59.11",
     "@typescript-eslint/parser": "^5.60.1",
     "codelyzer": "^6.0.2",
-    "eslint": "^8.44.0",
+    "eslint": "^8.50.0",
     "jasmine-core": "~4.6.0",
     "jasmine-spec-reporter": "~7.0.0",
     "karma": "^6.4.2",
@@ -80,7 +80,7 @@
     "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
-    "prettier": "^2.8.7",
+    "prettier": "^3.0.3",
     "prettier-plugin-organize-imports": "^3.2.2",
     "protractor": "~7.0.0",
     "typescript": "^4.9.5"

console/src/app/app-routing.module.ts

@@ -158,14 +158,6 @@ const routes: Routes = [
       requiresAll: true,
     },
   },
-  {
-    path: 'domains',
-    loadChildren: () => import('./pages/domains/domains.module'),
-    canActivate: [AuthGuard, RoleGuard],
-    data: {
-      roles: ['org.read'],
-    },
-  },
   {
     path: 'org-settings',
     loadChildren: () => import('./pages/org-settings/org-settings.module'),

console/src/app/guards/user.guard.ts

@@ -9,7 +9,10 @@ import { GrpcAuthService } from '../services/grpc-auth.service';
   providedIn: 'root',
 })
 export class UserGuard {
-  constructor(private authService: GrpcAuthService, private router: Router) {}
+  constructor(
+    private authService: GrpcAuthService,
+    private router: Router,
+  ) {}
 
   public canActivate(
     route: ActivatedRouteSnapshot,

console/src/app/modules/accounts-card/accounts-card.component.ts

@@ -18,7 +18,11 @@ export class AccountsCardComponent implements OnInit {
   public sessions: Session.AsObject[] = [];
   public loadingUsers: boolean = false;
   public UserState: any = UserState;
-  constructor(public authService: AuthenticationService, private router: Router, private userService: GrpcAuthService) {
+  constructor(
+    public authService: AuthenticationService,
+    private router: Router,
+    private userService: GrpcAuthService,
+  ) {
     this.userService
       .listMyUserSessions()
       .then((sessions) => {

console/src/app/modules/add-key-dialog/add-key-dialog.component.html

@@ -18,7 +18,7 @@
     <mat-datepicker #picker [startAt]="startDate"></mat-datepicker>
     <span cnslError *ngIf="dateControl && dateControl.errors && dateControl.errors['matDatepickerMin']?.min">
       {{ 'USER.MACHINE.CHOOSEDATEAFTER' | translate }}:
-      {{ dateControl.errors['matDatepickerMin'].min.toDate() | localizedDate : 'EEE dd. MMM' }}
+      {{ dateControl.errors['matDatepickerMin'].min.toDate() | localizedDate: 'EEE dd. MMM' }}
     </span>
   </cnsl-form-field>
 </div>

console/src/app/modules/add-key-dialog/add-key-dialog.component.ts

@@ -22,7 +22,10 @@ export class AddKeyDialogComponent {
   public type!: KeyType;
   public dateControl: UntypedFormControl = new UntypedFormControl('', []);
 
-  constructor(public dialogRef: MatDialogRef<AddKeyDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {
+  constructor(
+    public dialogRef: MatDialogRef<AddKeyDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+  ) {
     this.types = [KeyType.KEY_TYPE_JSON];
     this.type = KeyType.KEY_TYPE_JSON;
     const today = new Date();

console/src/app/modules/add-member-roles-dialog/add-member-roles-dialog.component.html

@@ -1,6 +1,6 @@
 <span class="title" mat-dialog-title>{{ 'MEMBER.EDITROLE' | translate }}</span>
 <div mat-dialog-content>
-  <p class="desc">{{ 'MEMBER.EDITFOR' | translate : { value: data.user } }}</p>
+  <p class="desc">{{ 'MEMBER.EDITFOR' | translate: { value: data.user } }}</p>
   <div class="roles-selection">
     <mat-checkbox
       class="role-cb"

console/src/app/modules/add-member-roles-dialog/add-member-roles-dialog.component.ts

@@ -14,7 +14,10 @@ export class AddMemberRolesDialogComponent {
   public allRoles: string[] = [];
   public selectedRoles: string[] = [];
 
-  constructor(public dialogRef: MatDialogRef<AddMemberRolesDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {
+  constructor(
+    public dialogRef: MatDialogRef<AddMemberRolesDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+  ) {
     this.allRoles = Object.assign([], data.allRoles);
     this.selectedRoles = Object.assign([], data.selectedRoles);
   }

console/src/app/modules/add-token-dialog/add-token-dialog.component.html

@@ -9,7 +9,7 @@
     <mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
     <span cnslError *ngIf="dateControl && dateControl.errors && dateControl.errors['matDatepickerMin']?.min">
       {{ 'USER.PERSONALACCESSTOKEN.ADD.CHOOSEDATEAFTER' | translate }}:
-      {{ dateControl.errors['matDatepickerMin'].min.toDate() | localizedDate : 'EEE dd. MMM' }}
+      {{ dateControl.errors['matDatepickerMin'].min.toDate() | localizedDate: 'EEE dd. MMM' }}
     </span>
   </cnsl-form-field>
 </div>

console/src/app/modules/add-token-dialog/add-token-dialog.component.ts

@@ -14,7 +14,10 @@ export class AddTokenDialogComponent {
   public startDate: Date = new Date();
   public dateControl: UntypedFormControl = new UntypedFormControl('', []);
 
-  constructor(public dialogRef: MatDialogRef<AddTokenDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {
+  constructor(
+    public dialogRef: MatDialogRef<AddTokenDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+  ) {
     const today = new Date();
     this.startDate.setDate(today.getDate() + 1);
   }

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

@@ -17,7 +17,11 @@
     outline: none;
     color: white;
     font-weight: bold;
-    font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
+    font-family:
+      'Lato',
+      -apple-system,
+      BlinkMacSystemFont,
+      sans-serif;
     // box-shadow: 0 0 3px #0000001a;
 
     img {

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

@@ -5,7 +5,7 @@
 <div class="scroll-container">
   <li class="item" *ngFor="let hist of data | async; index as histindex">
     <span *ngIf="hist.values[0].dates[0]" class="date">
-      {{ hist.values[0].dates[0] | timestampToDate | localizedDate : 'dd. MMM YYYY' }}
+      {{ hist.values[0].dates[0] | timestampToDate | localizedDate: 'dd. MMM YYYY' }}
     </span>
     <div class="item" *ngFor="let dayelement of hist.values; index as i">
       <div class="row">
@@ -28,8 +28,8 @@
               <span class="msg">{{ action.localizedMessage }}</span>
               <span
                 class="block"
-                matTooltip="{{ dayelement.dates[j] | timestampToDate | localizedDate : 'dd. MM YYYY, HH:mm' }}"
+                matTooltip="{{ dayelement.dates[j] | timestampToDate | localizedDate: 'dd. MM YYYY, HH:mm' }}"
-                >{{ dayelement.dates[j] | timestampToDate | localizedDate : 'HH:mm' }}</span
+                >{{ dayelement.dates[j] | timestampToDate | localizedDate: 'HH:mm' }}</span
               >
             </div>
           </div>

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

@@ -70,7 +70,10 @@ export class ChangesComponent implements OnInit, OnDestroy {
   );
   public changes!: ListChanges;
   private destroyed$: Subject<void> = new Subject();
-  constructor(private mgmtUserService: ManagementService, private authUserService: GrpcAuthService) {}
+  constructor(
+    private mgmtUserService: ManagementService,
+    private authUserService: GrpcAuthService,
+  ) {}
 
   ngOnInit(): void {
     this.init();

console/src/app/modules/client-keys/client-keys.component.html

@@ -52,14 +52,14 @@
       <ng-container matColumnDef="creationDate">
         <th mat-header-cell *matHeaderCellDef>{{ 'USER.MACHINE.CREATIONDATE' | translate }}</th>
         <td mat-cell *matCellDef="let key">
-          {{ key.details.creationDate | timestampToDate | localizedDate : 'fromNow' }}
+          {{ key.details.creationDate | timestampToDate | localizedDate: 'fromNow' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="expirationDate">
         <th mat-header-cell *matHeaderCellDef>{{ 'USER.MACHINE.EXPIRATIONDATE' | translate }}</th>
         <td mat-cell *matCellDef="let key">
-          {{ key.expirationDate | timestampToDate | localizedDate : 'fromNow' }}
+          {{ key.expirationDate | timestampToDate | localizedDate: 'fromNow' }}
         </td>
       </ng-container>
 

console/src/app/modules/display-json-dialog/display-json-dialog.component.html

@@ -8,7 +8,7 @@
 
     <div class="data-row" *ngIf="event && event.creationDate">
       <span class="label cnsl-secondary-text">{{ 'IAM.EVENTS.CREATIONDATE' | translate }}</span>
-      <span>{{ event.creationDate | timestampToDate | localizedDate : 'EEE dd. MMM, HH:mm' }}</span>
+      <span>{{ event.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span>
     </div>
 
     <div class="data-row" *ngIf="event && event.aggregate && event.aggregate.id">

console/src/app/modules/display-json-dialog/display-json-dialog.component.ts

@@ -16,7 +16,10 @@ export class DisplayJsonDialogComponent {
   public payload: any = '';
   public opened$ = this.dialogRef.afterOpened().pipe(mapTo(true));
 
-  constructor(public dialogRef: MatDialogRef<DisplayJsonDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {
+  constructor(
+    public dialogRef: MatDialogRef<DisplayJsonDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+  ) {
     this.event = data.event;
     if ((data.event as Event) && data.event.payload) {
     }

console/src/app/modules/domains/add-domain-dialog/add-domain-dialog.component.ts

@@ -11,7 +11,10 @@ import {
 })
 export class AddDomainDialogComponent {
   public newdomain: string = '';
-  constructor(public dialogRef: MatDialogRef<AddDomainDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {}
+  constructor(
+    public dialogRef: MatDialogRef<AddDomainDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+  ) {}
 
   public closeDialog(): void {
     this.dialogRef.close(false);

console/src/app/modules/domains/domain-verification/domain-verification.component.html

@@ -10,7 +10,7 @@
     *ngIf="domain?.validationType !== DomainValidationType.DOMAIN_VALIDATION_TYPE_UNSPECIFIED && !(dns || http)"
     class="desc"
   >
-    {{ 'ORG.PAGES.ORGDOMAIN.VERIFICATION_VALIDATION_ONGOING' | translate : domain }}
+    {{ 'ORG.PAGES.ORGDOMAIN.VERIFICATION_VALIDATION_ONGOING' | translate: domain }}
     {{ 'ORG.PAGES.ORGDOMAIN.VERIFICATION_VALIDATION_ONGOING_TYPE' | translate }}
     {{ 'ORG.PAGES.ORGDOMAIN.TYPES.' + domain?.validationType | translate }}
   </p>

console/src/app/modules/domains/domains.component.html

@@ -0,0 +1,67 @@
+<ng-container *ngIf="['org.write$'] | hasRole as canwrite$">
+  <div class="domain-top-view">
+    <div>
+      <div class="domain-title-row">
+        <h2>{{ 'ORG.DOMAINS.TITLE' | translate }}</h2>
+        <a
+          mat-icon-button
+          href="https://zitadel.com/docs/guides/manage/console/organizations#how-zitadel-handles-usernames"
+          rel="noreferrer"
+          target="_blank"
+        >
+          <i class="las la-info-circle"></i>
+        </a>
+      </div>
+      <p class="desc cnsl-secondary-text">{{ 'ORG.DOMAINS.DESCRIPTION' | translate }}</p>
+    </div>
+    <span class="fill-space"></span>
+
+    <button
+      [disabled]="(canwrite$ | async) === false"
+      matTooltip="Add domain"
+      mat-raised-button
+      color="primary"
+      class="cnsl-action-button"
+      (click)="addNewDomain()"
+    >
+      <mat-icon>add</mat-icon>
+      <span>{{ 'ACTIONS.NEW' | translate }}</span>
+      <cnsl-action-keys (actionTriggered)="addNewDomain()"> </cnsl-action-keys>
+    </button>
+  </div>
+
+  <cnsl-card *ngFor="let domain of domains" class="domain-card">
+    <div class="domain">
+      <span class="title">{{ domain.domainName }}</span>
+
+      <i matTooltip="verified" *ngIf="domain.isVerified" class="verified las la-check-circle"></i>
+      <i matTooltip="primary" *ngIf="domain.isPrimary" class="primary las la-star"></i>
+      <a
+        *ngIf="domain.isVerified && !domain.isPrimary && (canwrite$ | async)"
+        class="primaryset"
+        (click)="setPrimary(domain)"
+        >{{ 'ORG.DOMAINS.SETPRIMARY' | translate }}</a
+      >
+
+      <span class="fill-space"></span>
+      <button
+        mat-icon-button
+        [disabled]="(canwrite$ | async) === false || domain.isVerified"
+        *ngIf="verifyOrgDomains"
+        (click)="verifyDomain(domain)"
+      >
+        <i class="las la-pen"></i>
+      </button>
+      <button
+        class="domain-rem-button"
+        [disabled]="(canwrite$ | async) === false || domain.isPrimary"
+        matTooltip="Remove domain"
+        color="warn"
+        mat-icon-button
+        (click)="removeDomain(domain.domainName)"
+      >
+        <i class="las la-trash"></i>
+      </button>
+    </div>
+  </cnsl-card>
+</ng-container>

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

@@ -1,7 +1,6 @@
 .domain-top-view {
   display: flex;
   align-items: center;
-  padding-top: 2rem;
 
   .domain-title-row {
     display: flex;

console/src/app/modules/domains/domains.component.ts

@@ -19,6 +19,7 @@ export class DomainsComponent implements OnInit {
   public domains: Domain.AsObject[] = [];
   public primaryDomain: string = '';
   public InfoSectionType: any = InfoSectionType;
+  public verifyOrgDomains: boolean | undefined;
 
   constructor(
     private mgmtService: ManagementService,
@@ -38,6 +39,10 @@ export class DomainsComponent implements OnInit {
   }
 
   public loadDomains(): void {
+    this.mgmtService.getDomainPolicy().then((result) => {
+      this.verifyOrgDomains = result.policy?.validateOrgDomains;
+    });
+
     this.mgmtService.listOrgDomains().then((result) => {
       this.domains = result.resultList;
       this.primaryDomain = this.domains.find((domain) => domain.isPrimary)?.domainName ?? '';
@@ -68,13 +73,14 @@ export class DomainsComponent implements OnInit {
           .addOrgDomain(domainName)
           .then(() => {
             this.toast.showInfo('ORG.TOAST.DOMAINADDED', true);
+            if (this.verifyOrgDomains) {
               this.verifyDomain({
                 domainName: domainName,
                 validationType: DomainValidationType.DOMAIN_VALIDATION_TYPE_UNSPECIFIED,
               });
-            setTimeout(() => {
+            } else {
               this.loadDomains();
-            }, 1000);
+            }
           })
           .catch((error) => {
             this.toast.showError(error);
@@ -120,10 +126,8 @@ export class DomainsComponent implements OnInit {
       width: '500px',
     });
 
-    dialogRef.afterClosed().subscribe((reload: boolean) => {
+    dialogRef.afterClosed().subscribe(() => {
-      if (reload) {
       this.loadDomains();
-      }
     });
   }
 }

console/src/app/modules/domains/domains.module.ts

@@ -14,13 +14,11 @@ import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.mod
 
 import { AddDomainDialogModule } from './add-domain-dialog/add-domain-dialog.module';
 import { DomainVerificationComponent } from './domain-verification/domain-verification.component';
-import { DomainsRoutingModule } from './domains-routing.module';
 import { DomainsComponent } from './domains.component';
 
 @NgModule({
   declarations: [DomainsComponent, DomainVerificationComponent],
   imports: [
-    DomainsRoutingModule,
     AddDomainDialogModule,
     CommonModule,
     MatIconModule,
@@ -36,5 +34,6 @@ import { DomainsComponent } from './domains.component';
     InfoSectionModule,
     MatProgressSpinnerModule,
   ],
+  exports: [DomainsComponent],
 })
 export default class DomainsModule {}

console/src/app/modules/filter-org/filter-org.component.ts

@@ -24,7 +24,10 @@ export class FilterOrgComponent extends FilterComponent implements OnInit {
 
   public states: OrgState[] = [OrgState.ORG_STATE_ACTIVE, OrgState.ORG_STATE_INACTIVE, OrgState.ORG_STATE_REMOVED];
 
-  constructor(router: Router, protected override route: ActivatedRoute) {
+  constructor(
+    router: Router,
+    protected override route: ActivatedRoute,
+  ) {
     super(router, route);
   }
 

console/src/app/modules/filter/filter.component.ts

@@ -64,7 +64,10 @@ export class FilterComponent implements OnDestroy {
     this.destroy$.complete();
   }
 
-  constructor(private router: Router, protected route: ActivatedRoute) {
+  constructor(
+    private router: Router,
+    protected route: ActivatedRoute,
+  ) {
     const changes$ = this.filterChanged.asObservable();
     changes$.pipe(takeUntil(this.destroy$)).subscribe((queries) => {
       const filters: Array<FilterSearchQueryAsObject | {}> | undefined = queries

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

@@ -20,7 +20,7 @@
       </div>
       <div *ngSwitchCase="'errors'" class="cnsl-form-field-error-wrapper" [@transitionMessages]="_subscriptAnimationState">
         <span cnslError *ngFor="let err of help.validationErrors">
-          {{ err.i18nKey | translate : err.params }}
+          {{ err.i18nKey | translate: err.params }}
         </span>
         <ng-content select="cnsl-error"></ng-content>
       </div>

console/src/app/modules/header/header.component.html

@@ -195,7 +195,7 @@
       </a>
     </div>
 
-    <ng-container *ngIf="user">
+    <ng-container *ngIf="user && user.id">
       <div class="account-card-wrapper">
         <button
           cdkOverlayOrigin

console/src/app/modules/idp-table/idp-table.component.html

@@ -107,14 +107,14 @@
       <ng-container matColumnDef="creationDate">
         <th mat-header-cell *matHeaderCellDef>{{ 'IDP.CREATIONDATE' | translate }}</th>
         <td class="pointer" mat-cell *matCellDef="let idp">
-          <span>{{ idp.details.creationDate | timestampToDate | localizedDate : 'dd. MMM, HH:mm' }}</span>
+          <span>{{ idp.details.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="changeDate">
         <th mat-header-cell *matHeaderCellDef>{{ 'IDP.CHANGEDATE' | translate }}</th>
         <td class="pointer" mat-cell *matCellDef="let idp">
-          <span>{{ idp.details.changeDate | timestampToDate | localizedDate : 'dd. MMM, HH:mm' }}</span>
+          <span>{{ idp.details.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
         </td>
       </ng-container>
 

console/src/app/modules/info-dialog/info-dialog.component.html

@@ -1,18 +1,18 @@
-<span class="title" mat-dialog-title>{{ data.titleKey | translate : data.titleParam }}</span>
+<span class="title" mat-dialog-title>{{ data.titleKey | translate: data.titleParam }}</span>
 <div mat-dialog-content>
   <div class="icon-wrapper" *ngIf="data.icon">
     <i class="icon {{ data.icon }}"></i>
   </div>
-  <p class="desc cnsl-secondary-text">{{ data.descriptionKey | translate : data.descriptionParam }}</p>
+  <p class="desc cnsl-secondary-text">{{ data.descriptionKey | translate: data.descriptionParam }}</p>
 
   <cnsl-info-section *ngIf="data.infoSectionKey" [type]="InfoSectionType.INFO">{{
     data.warnSectionKey | translate
   }}</cnsl-info-section>
 
-  <p *ngIf="data.hintKey" class="desc cnsl-secondary-text">{{ data.hintKey | translate : { value: data.confirmation } }}</p>
+  <p *ngIf="data.hintKey" class="desc cnsl-secondary-text">{{ data.hintKey | translate: { value: data.confirmation } }}</p>
 
   <cnsl-form-field *ngIf="data.confirmation && data.confirmationKey" class="formfield">
-    <cnsl-label>{{ data.confirmationKey | translate : { value: data.confirmation } }}</cnsl-label>
+    <cnsl-label>{{ data.confirmationKey | translate: { value: data.confirmation } }}</cnsl-label>
     <input cnslInput [(ngModel)]="confirm" data-e2e="confirm-dialog-input" />
   </cnsl-form-field>
 </div>

console/src/app/modules/info-dialog/info-dialog.component.ts

@@ -14,7 +14,10 @@ import { InfoSectionType } from '../info-section/info-section.component';
 export class InfoDialogComponent {
   public confirm: string = '';
   InfoSectionType: any = InfoSectionType;
-  constructor(public dialogRef: MatDialogRef<InfoDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {}
+  constructor(
+    public dialogRef: MatDialogRef<InfoDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+  ) {}
 
   public closeDialog(): void {
     this.dialogRef.close(false);

console/src/app/modules/info-overlay/info-overlay.component.ts

@@ -9,5 +9,8 @@ export const OVERLAY_DATA = new InjectionToken<any>('OVERLAY_DATA');
   styleUrls: ['./info-overlay.component.scss'],
 })
 export class InfoOverlayComponent {
-  constructor(public workflowService: OverlayWorkflowService, @Inject(OVERLAY_DATA) public data: any) {}
+  constructor(
+    public workflowService: OverlayWorkflowService,
+    @Inject(OVERLAY_DATA) public data: any,
+  ) {}
 }

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

@@ -21,14 +21,14 @@
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'USER.DETAILS.DATECREATED' | translate }}</p>
     <p *ngIf="user && user.details && user.details.creationDate" class="info-row-desc">
-      {{ user.details.creationDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
+      {{ user.details.creationDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
     </p>
   </div>
 
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'USER.DETAILS.DATECHANGED' | translate }}</p>
     <p *ngIf="user && user.details && user.details.changeDate" class="info-row-desc">
-      {{ user.details.changeDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
+      {{ user.details.changeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
     </p>
   </div>
 
@@ -97,14 +97,14 @@
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'ORG.PAGES.CREATIONDATE' | translate }}</p>
     <p *ngIf="instance && instance.details && instance.details.creationDate" class="info-row-desc">
-      {{ instance.details.creationDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
+      {{ instance.details.creationDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
     </p>
   </div>
 
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'ORG.PAGES.DATECHANGED' | translate }}</p>
     <p *ngIf="instance && instance.details && instance.details.changeDate" class="info-row-desc">
-      {{ instance.details.changeDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
+      {{ instance.details.changeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
     </p>
   </div>
 </div>
@@ -144,14 +144,14 @@
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'ORG.PAGES.CREATIONDATE' | translate }}</p>
     <p *ngIf="org && org.details && org.details.creationDate" class="info-row-desc">
-      {{ org.details.creationDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
+      {{ org.details.creationDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
     </p>
   </div>
 
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'ORG.PAGES.DATECHANGED' | translate }}</p>
     <p *ngIf="org && org.details && org.details.changeDate" class="info-row-desc">
-      {{ org.details.changeDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
+      {{ org.details.changeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
     </p>
   </div>
 </div>
@@ -179,14 +179,14 @@
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'PROJECT.PAGES.CREATEDON' | translate }}</p>
     <p *ngIf="project && project.details && project.details.creationDate" class="info-row-desc">
-      {{ project.details.creationDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
+      {{ project.details.creationDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
     </p>
   </div>
 
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'PROJECT.PAGES.LASTMODIFIED' | translate }}</p>
     <p *ngIf="project && project.details && project.details.changeDate" class="info-row-desc">
-      {{ project.details.changeDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
+      {{ project.details.changeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
     </p>
   </div>
 </div>
@@ -219,14 +219,14 @@
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'PROJECT.PAGES.CREATEDON' | translate }}</p>
     <p *ngIf="grantedProject && grantedProject.details && grantedProject.details.creationDate" class="info-row-desc">
-      {{ grantedProject.details.creationDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
+      {{ grantedProject.details.creationDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
     </p>
   </div>
 
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'PROJECT.PAGES.LASTMODIFIED' | translate }}</p>
     <p *ngIf="grantedProject && grantedProject.details && grantedProject.details.changeDate" class="info-row-desc">
-      {{ grantedProject.details.changeDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
+      {{ grantedProject.details.changeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
     </p>
   </div>
 </div>
@@ -252,14 +252,14 @@
     <div class="info-wrapper">
       <p class="info-row-title">{{ 'APP.PAGES.DATECREATED' | translate }}</p>
       <p *ngIf="app && app.details && app.details.creationDate" class="info-row-desc">
-        {{ app.details.creationDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
+        {{ app.details.creationDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
       </p>
     </div>
 
     <div class="info-wrapper">
       <p class="info-row-title">{{ 'APP.PAGES.DATECHANGED' | translate }}</p>
       <p *ngIf="app && app.details && app.details.changeDate" class="info-row-desc">
-        {{ app.details.changeDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
+        {{ app.details.changeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
       </p>
     </div>
 
@@ -305,14 +305,14 @@
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'IDP.DETAIL.DATECREATED' | translate }}</p>
     <p class="info-row-desc" *ngIf="idp && idp.details && idp.details.creationDate">
-      {{ idp.details.creationDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
+      {{ idp.details.creationDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
     </p>
   </div>
 
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'IDP.DETAIL.DATECHANGED' | translate }}</p>
     <p class="info-row-desc" *ngIf="idp && idp.details && idp.details.changeDate">
-      {{ idp.details.changeDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm' }}
+      {{ idp.details.changeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
     </p>
   </div>
 

console/src/app/modules/machine-keys/machine-keys.component.html

@@ -52,14 +52,14 @@
       <ng-container matColumnDef="creationDate">
         <th mat-header-cell *matHeaderCellDef>{{ 'USER.MACHINE.CREATIONDATE' | translate }}</th>
         <td mat-cell *matCellDef="let key">
-          {{ key.details?.creationDate | timestampToDate | localizedDate : 'fromNow' }}
+          {{ key.details?.creationDate | timestampToDate | localizedDate: 'fromNow' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="expirationDate">
         <th mat-header-cell *matHeaderCellDef>{{ 'USER.MACHINE.EXPIRATIONDATE' | translate }}</th>
         <td mat-cell *matCellDef="let key">
-          {{ key.expirationDate | timestampToDate | localizedDate : 'fromNow' }}
+          {{ key.expirationDate | timestampToDate | localizedDate: 'fromNow' }}
         </td>
       </ng-container>
 

console/src/app/modules/members-table/members-table.component.html

@@ -99,7 +99,7 @@
             </button>
 
             <button menuActions mat-menu-item [routerLink]="['/users', member.userId]">
-              {{ 'ACTIONS.TABLE.SHOWUSER' | translate : { value: member.displayName } }}
+              {{ 'ACTIONS.TABLE.SHOWUSER' | translate: { value: member.displayName } }}
             </button>
           </cnsl-table-actions>
         </td>

console/src/app/modules/memberships-table/memberships-datasource.ts

@@ -13,7 +13,10 @@ export class MembershipsDataSource extends DataSource<Membership.AsObject> {
   private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
   public loading$: Observable<boolean> = this.loadingSubject.asObservable();
 
-  constructor(private auth: GrpcAuthService, private service: ManagementService) {
+  constructor(
+    private auth: GrpcAuthService,
+    private service: ManagementService,
+  ) {
     super();
   }
 

console/src/app/modules/metadata/metadata-dialog/metadata-dialog.component.html

@@ -1,7 +1,7 @@
 <div class="title-row">
   <h1 class="metadata-title">{{ 'METADATA.TITLE' | translate }}</h1>
   <span class="fill-space"></span>
-  <p *ngIf="ts" class="ts cnsl-secondary-text">{{ ts | timestampToDate | localizedDate : 'dd. MMM, HH:mm' }}</p>
+  <p *ngIf="ts" class="ts cnsl-secondary-text">{{ ts | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</p>
   <mat-spinner *ngIf="loading" diameter="20"></mat-spinner>
 </div>
 <p class="desc">{{ 'METADATA.DESCRIPTION' | translate }}</p>

console/src/app/modules/name-dialog/name-dialog.component.ts

@@ -11,7 +11,10 @@ import {
 })
 export class NameDialogComponent {
   public name: string = '';
-  constructor(public dialogRef: MatDialogRef<NameDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {
+  constructor(
+    public dialogRef: MatDialogRef<NameDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+  ) {
     this.name = data.name ?? '';
   }
 

console/src/app/modules/nav-toggle/nav-toggle.component.html

@@ -1,4 +1,4 @@
-<button class="nav-toggle" [ngClass]="{active}" (click)="clicked.emit()">
+<button class="nav-toggle" [ngClass]="{ active }" (click)="clicked.emit()">
   <div class="c_label">
     <span> {{ label }} </span>
     <div *ngIf="count && count < 100" class="count">

console/src/app/modules/nav-toggle/nav-toggle.component.scss

@@ -30,7 +30,11 @@
     position: relative;
     background: none;
     cursor: pointer;
-    font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
+    font-family:
+      'Lato',
+      -apple-system,
+      BlinkMacSystemFont,
+      sans-serif;
     box-sizing: border-box;
     height: 27px;
 

console/src/app/modules/nav/nav.component.html

@@ -75,7 +75,7 @@
                   [routerLinkActiveOptions]="{ exact: false }"
                   [routerLinkActive]="['active']"
                   [routerLink]="['/settings']"
-                  *ngIf="['iam.read', 'iam.policy.read'] | hasRole : true | async"
+                  *ngIf="['iam.read', 'iam.policy.read'] | hasRole: true | async"
                 >
                   <div class="c_label">
                     <span> {{ 'MENU.SETTINGS' | translate }} </span>
@@ -177,17 +177,6 @@
                   </a>
                 </ng-template>
 
-                <ng-template cnslHasRole [hasRole]="['org.read']">
-                  <a
-                    class="nav-item"
-                    [routerLinkActive]="['active']"
-                    [routerLink]="['/domains']"
-                    [routerLinkActiveOptions]="{ exact: true }"
-                  >
-                    <span class="label">{{ 'MENU.DOMAINS' | translate }}</span>
-                  </a>
-                </ng-template>
-
                 <ng-template cnslHasRole [hasRole]="['org.read']">
                   <a
                     class="nav-item"

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

@@ -11,7 +11,10 @@ import { ONBOARDING_EVENTS } from 'src/app/utils/onboarding';
 export class OnboardingComponent {
   public actions = this.adminService.progressEvents;
 
-  constructor(public adminService: AdminService, public themeService: ThemeService) {
+  constructor(
+    public adminService: AdminService,
+    public themeService: ThemeService,
+  ) {
     this.adminService.loadEvents.next(ONBOARDING_EVENTS);
   }
 }

console/src/app/modules/org-context/org-context.component.ts

@@ -23,7 +23,10 @@ export class OrgContextComponent implements OnInit {
   @Output() public closedCard: EventEmitter<void> = new EventEmitter();
   @Output() public setOrg: EventEmitter<Org.AsObject> = new EventEmitter();
 
-  constructor(public authService: AuthenticationService, private auth: GrpcAuthService) {
+  constructor(
+    public authService: AuthenticationService,
+    private auth: GrpcAuthService,
+  ) {
     this.filterControl.valueChanges.pipe(debounceTime(500)).subscribe((value) => {
       this.loadOrgs(value.trim().toLowerCase());
     });

console/src/app/modules/org-table/org-table.component.html

@@ -80,7 +80,7 @@
         {{ 'ORG.PAGES.CREATIONDATE' | translate }}
       </th>
       <td mat-cell *matCellDef="let org" (click)="setAndNavigateToOrg(org)">
-        {{ org.details?.creationDate | timestampToDate | localizedDate : 'fromNow' }}
+        {{ org.details?.creationDate | timestampToDate | localizedDate: 'fromNow' }}
       </td>
     </ng-container>
 
@@ -89,7 +89,7 @@
         {{ 'ORG.PAGES.DATECHANGED' | translate }}
       </th>
       <td mat-cell *matCellDef="let org" (click)="setAndNavigateToOrg(org)">
-        {{ org.details?.changeDate | timestampToDate | localizedDate : 'fromNow' }}
+        {{ org.details?.changeDate | timestampToDate | localizedDate: 'fromNow' }}
       </td>
     </ng-container>
 

console/src/app/modules/paginator/paginator.component.html

@@ -4,7 +4,7 @@
       <span>{{ length }} </span>{{ 'PAGINATOR.COUNT' | translate }}
     </p>
     <p class="ts cnsl-secondary-text" *ngIf="timestamp" data-e2e="timestamp">
-      {{ timestamp | timestampToDate | localizedDate : 'EEEE dd. MMM YYYY, HH:mm' }}
+      {{ timestamp | timestampToDate | localizedDate: 'EEEE dd. MMM YYYY, HH:mm' }}
     </p>
   </div>
   <span class="fill-space"></span>

console/src/app/modules/password-complexity-view/password-complexity-view.component.html

@@ -25,7 +25,7 @@
     </ng-template>
 
     <span class="cnsl-secondary-text"
-      >{{ 'USER.PASSWORD.MINLENGTHERROR' | translate : { value: policy.minLength } }} ({{ password?.value?.length }}/{{
+      >{{ 'USER.PASSWORD.MINLENGTHERROR' | translate: { value: policy.minLength } }} ({{ password?.value?.length }}/{{
         policy.minLength
       }})
     </span>

console/src/app/modules/personal-access-tokens/personal-access-tokens.component.html

@@ -47,14 +47,14 @@
       <ng-container matColumnDef="creationDate">
         <th mat-header-cell *matHeaderCellDef>{{ 'USER.MACHINE.CREATIONDATE' | translate }}</th>
         <td mat-cell *matCellDef="let key">
-          {{ key.details?.creationDate | timestampToDate | localizedDate : 'fromNow' }}
+          {{ key.details?.creationDate | timestampToDate | localizedDate: 'fromNow' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="expirationDate">
         <th mat-header-cell *matHeaderCellDef>{{ 'USER.MACHINE.EXPIRATIONDATE' | translate }}</th>
         <td mat-cell *matCellDef="let key">
-          {{ key.expirationDate | timestampToDate | localizedDate : 'EEE dd. MMM YYYY, HH:mm' }}
+          {{ key.expirationDate | timestampToDate | localizedDate: 'EEE dd. MMM YYYY, HH:mm' }}
         </td>
       </ng-container>
 

console/src/app/modules/policies/domain-policy/domain-policy.component.html

@@ -5,7 +5,6 @@
 <h2>{{ 'POLICY.DOMAIN_POLICY.TITLE' | translate }}</h2>
 <cnsl-info-section *ngIf="isDefault"> {{ 'POLICY.DEFAULTLABEL' | translate }}</cnsl-info-section>
 
-<!-- <ng-template cnslHasRole [hasRole]="['domain.policy.delete']"> -->
 <button
   *ngIf="serviceType === PolicyComponentServiceType.MGMT && !isDefault"
   matTooltip="{{ 'POLICY.RESET' | translate }}"
@@ -26,7 +25,6 @@
 >
   {{ 'POLICY.RESET' | translate }}
 </button>
-<!-- </ng-template> -->
 
 <div class="domain-policy-content" *ngIf="domainData">
   <div class="row">

console/src/app/modules/policies/general-settings/general-settings.component.ts

@@ -13,7 +13,10 @@ export class GeneralSettingsComponent implements OnInit {
   public defaultLanguageOptions: string[] = [];
 
   public loading: boolean = false;
-  constructor(private service: AdminService, private toast: ToastService) {}
+  constructor(
+    private service: AdminService,
+    private toast: ToastService,
+  ) {}
 
   ngOnInit(): void {
     this.fetchData();

console/src/app/modules/policies/login-policy/factor-table/dialog-add-type/dialog-add-type.component.ts

@@ -20,7 +20,10 @@ export class DialogAddTypeComponent {
   public availableMfaTypes: Array<MultiFactorType | SecondFactorType> = [];
   public newMfaType!: MultiFactorType | SecondFactorType;
 
-  constructor(public dialogRef: MatDialogRef<DialogAddTypeComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {
+  constructor(
+    public dialogRef: MatDialogRef<DialogAddTypeComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+  ) {
     this.availableMfaTypes = data.types;
     this.newMfaType = data.types && data.types[0] ? data.types[0] : undefined;
   }

console/src/app/modules/policies/login-policy/factor-table/factor-table.component.ts

@@ -51,7 +51,11 @@ export class FactorTableComponent {
 
   public PolicyComponentServiceType: any = PolicyComponentServiceType;
 
-  constructor(public translate: TranslateService, private toast: ToastService, private dialog: MatDialog) {}
+  constructor(
+    public translate: TranslateService,
+    private toast: ToastService,
+    private dialog: MatDialog,
+  ) {}
 
   public removeMfa(type: MultiFactorType | SecondFactorType): void {
     const dialogRef = this.dialog.open(WarnDialogComponent, {

console/src/app/modules/policies/login-texts/login-texts.component.html

@@ -10,11 +10,11 @@
     <p class="newer-title" *ngIf="newerVersionExists">{{ 'POLICY.LOGIN_TEXTS.NEWERVERSIONEXISTS' | translate }}</p>
     <p *ngIf="newerPolicyChangeDate && newerVersionExists">
       {{ 'POLICY.LOGIN_TEXTS.CHANGEDATE' | translate }}:
-      {{ newerPolicyChangeDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm:ss' }}
+      {{ newerPolicyChangeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm:ss' }}
     </p>
     <p class="cnsl-secondary-text" *ngIf="currentPolicyChangeDate">
       {{ 'POLICY.LOGIN_TEXTS.CURRENTDATE' | translate }}:
-      {{ currentPolicyChangeDate | timestampToDate | localizedDate : 'dd. MMMM YYYY, HH:mm:ss' }}
+      {{ currentPolicyChangeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm:ss' }}
     </p>
   </div>
   <button [disabled]="!newerVersionExists" color="primary" mat-raised-button (click)="loadData()">

console/src/app/modules/policies/notification-policy/notification-policy.component.ts

@@ -36,7 +36,11 @@ export class NotificationPolicyComponent implements OnInit {
 
   public isDefault: boolean = false;
   private hasNotificationPolicy: boolean = false;
-  constructor(private toast: ToastService, private injector: Injector, private dialog: MatDialog) {}
+  constructor(
+    private toast: ToastService,
+    private injector: Injector,
+    private dialog: MatDialog,
+  ) {}
 
   public ngOnInit(): void {
     switch (this.serviceType) {

console/src/app/modules/policies/notification-settings/password-dialog/password-dialog.component.ts

@@ -11,7 +11,10 @@ import {
 })
 export class PasswordDialogComponent {
   public password: string = '';
-  constructor(public dialogRef: MatDialogRef<PasswordDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {}
+  constructor(
+    public dialogRef: MatDialogRef<PasswordDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+  ) {}
 
   closeDialog(password: string = ''): void {
     this.dialogRef.close(password);

console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.component.ts

@@ -27,7 +27,11 @@ export class PasswordComplexityPolicyComponent implements OnInit {
   public loading: boolean = false;
   public InfoSectionType: any = InfoSectionType;
 
-  constructor(private toast: ToastService, private injector: Injector, private dialog: MatDialog) {}
+  constructor(
+    private toast: ToastService,
+    private injector: Injector,
+    private dialog: MatDialog,
+  ) {}
 
   public ngOnInit(): void {
     switch (this.serviceType) {

console/src/app/modules/policies/password-lockout-policy/password-lockout-policy.component.ts

@@ -26,7 +26,11 @@ export class PasswordLockoutPolicyComponent implements OnInit {
   public PolicyComponentServiceType: any = PolicyComponentServiceType;
   public InfoSectionType: any = InfoSectionType;
 
-  constructor(private toast: ToastService, private injector: Injector, private dialog: MatDialog) {}
+  constructor(
+    private toast: ToastService,
+    private injector: Injector,
+    private dialog: MatDialog,
+  ) {}
 
   public ngOnInit(): void {
     switch (this.serviceType) {

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

@@ -54,7 +54,9 @@
 
 ::ng-deep .chrome-picker {
   border-radius: 0.5rem !important;
-  box-shadow: 0 0 1px #00000020, 0 1px 3px #00000020 !important;
+  box-shadow:
+    0 0 1px #00000020,
+    0 1px 3px #00000020 !important;
 }
 
 ::ng-deep .saturation {

console/src/app/modules/policies/secret-generator/secret-generator.component.ts

@@ -29,7 +29,11 @@ export class SecretGeneratorComponent implements OnInit {
     SecretGeneratorType.SECRET_GENERATOR_TYPE_OTP_EMAIL,
   ];
 
-  constructor(private service: AdminService, private toast: ToastService, private dialog: MatDialog) {}
+  constructor(
+    private service: AdminService,
+    private toast: ToastService,
+    private dialog: MatDialog,
+  ) {}
 
   ngOnInit(): void {
     this.fetchData();

console/src/app/modules/policies/security-policy/security-policy.component.ts

@@ -20,7 +20,10 @@ export class SecurityPolicyComponent implements OnInit {
 
   @Input() public originsControl: UntypedFormControl = new UntypedFormControl({ value: [], disabled: true });
 
-  constructor(private service: AdminService, private toast: ToastService) {}
+  constructor(
+    private service: AdminService,
+    private toast: ToastService,
+  ) {}
 
   ngOnInit(): void {
     this.fetchData();

console/src/app/modules/project-roles-table/project-roles-table.component.html

@@ -71,7 +71,7 @@
             [ngClass]="{ 'no-selection': !selectionAllowed }"
             *ngIf="role.group"
             (click)="selectionAllowed ? selectAllOfGroup(role.group) : openDetailDialog(role)"
-            [matTooltip]="selectionAllowed ? ('PROJECT.ROLE.SELECTGROUPTOOLTIP' | translate : role) : null"
+            [matTooltip]="selectionAllowed ? ('PROJECT.ROLE.SELECTGROUPTOOLTIP' | translate: role) : null"
             >{{ role.group }}</span
           >
         </td>
@@ -81,7 +81,7 @@
         <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.CREATIONDATE' | translate }}</th>
         <td class="pointer" (click)="openDetailDialog(role)" mat-cell *matCellDef="let role">
           <span *ngIf="role?.details?.creationDate">{{
-            role.details.creationDate | timestampToDate | localizedDate : 'dd. MMM, HH:mm'
+            role.details.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm'
           }}</span>
         </td>
       </ng-container>
@@ -90,7 +90,7 @@
         <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.CHANGEDATE' | translate }}</th>
         <td class="pointer" (click)="openDetailDialog(role)" mat-cell *matCellDef="let role">
           <span *ngIf="role?.details?.changeDate">{{
-            role.details.changeDate | timestampToDate | localizedDate : 'dd. MMM, HH:mm'
+            role.details.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm'
           }}</span>
         </td>
       </ng-container>

console/src/app/modules/providers/provider-apple/provider-apple.component.ts

@@ -246,7 +246,8 @@ export class ProviderAppleComponent {
           return (e) => {
             const keyBase64 = e.target?.result;
             if (keyBase64 && typeof keyBase64 === 'string') {
-              const cropped = keyBase64.replace('data:application/octet-stream;base64,', '');
+              const contentType = file.type || 'application/octet-stream';
+              const cropped = keyBase64.replace(`data:${contentType};base64,`, '');
               this.privateKey?.setValue(cropped);
             }
           };

console/src/app/modules/search-org-autocomplete/search-org-autocomplete.component.ts

@@ -22,7 +22,10 @@ export class SearchOrgAutocompleteComponent implements OnInit, OnDestroy {
   @Output() public selectionChanged: EventEmitter<Org.AsObject> = new EventEmitter();
 
   private unsubscribed$: Subject<void> = new Subject();
-  constructor(public authService: AuthenticationService, private auth: GrpcAuthService) {
+  constructor(
+    public authService: AuthenticationService,
+    private auth: GrpcAuthService,
+  ) {
     this.myControl.valueChanges
       .pipe(
         takeUntil(this.unsubscribed$),

console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.ts

@@ -57,7 +57,11 @@ export class SearchUserAutocompleteComponent implements OnInit, AfterContentChec
   @Input() public singleOutput: boolean = false;
 
   private unsubscribed$: Subject<void> = new Subject();
-  constructor(private userService: ManagementService, private toast: ToastService, private cdref: ChangeDetectorRef) {}
+  constructor(
+    private userService: ManagementService,
+    private toast: ToastService,
+    private cdref: ChangeDetectorRef,
+  ) {}
 
   public ngOnInit(): void {
     if (this.target === UserTarget.EXTERNAL) {

console/src/app/modules/settings-list/settings-list.component.html

@@ -18,7 +18,10 @@
   <ng-container *ngIf="currentSetting === 'login'">
     <cnsl-login-policy [serviceType]="serviceType"></cnsl-login-policy>
   </ng-container>
-  <ng-container *ngIf="currentSetting === 'domain'">
+  <ng-container *ngIf="currentSetting === 'verified_domains'">
+    <cnsl-domains></cnsl-domains>
+  </ng-container>
+  <ng-container *ngIf="currentSetting === 'domain' && (['iam.policy.write'] | hasRole | async) === true">
     <cnsl-domain-policy [serviceType]="serviceType"></cnsl-domain-policy>
   </ng-container>
   <ng-container *ngIf="currentSetting === 'idp'">

console/src/app/modules/settings-list/settings-list.module.ts

@@ -5,6 +5,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
 
 import { CardModule } from '../card/card.module';
+import DomainsModule from '../domains/domains.module';
 import { DomainPolicyModule } from '../policies/domain-policy/domain-policy.module';
 import { GeneralSettingsModule } from '../policies/general-settings/general-settings.module';
 import { IdpSettingsModule } from '../policies/idp-settings/idp-settings.module';
@@ -40,6 +41,7 @@ import { SettingsListComponent } from './settings-list.component';
     PrivacyPolicyModule,
     MessageTextsPolicyModule,
     SecurityPolicyModule,
+    DomainsModule,
     LoginTextsPolicyModule,
     DomainPolicyModule,
     TranslateModule,

console/src/app/modules/settings-list/settings.ts

@@ -43,13 +43,22 @@ export const LOGIN: SidenavSetting = {
   },
 };
 
+export const VERIFIED_DOMAINS: SidenavSetting = {
+  id: 'verified_domains',
+  i18nKey: 'SETTINGS.LIST.VERIFIED_DOMAINS',
+  groupI18nKey: 'SETTINGS.GROUPS.DOMAIN',
+  requiredRoles: {
+    [PolicyComponentServiceType.MGMT]: ['org.read'],
+  },
+};
+
 export const DOMAIN: SidenavSetting = {
   id: 'domain',
   i18nKey: 'SETTINGS.LIST.DOMAIN',
   groupI18nKey: 'SETTINGS.GROUPS.DOMAIN',
   requiredRoles: {
-    [PolicyComponentServiceType.MGMT]: ['policy.read'],
+    [PolicyComponentServiceType.MGMT]: ['iam.policy.write'],
-    [PolicyComponentServiceType.ADMIN]: ['iam.policy.read'],
+    [PolicyComponentServiceType.ADMIN]: ['iam.policy.write'],
   },
 };
 

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

@@ -240,7 +240,10 @@
     box-sizing: border-box;
     border-radius: 1rem;
     border: 1px solid $border-color;
-    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    box-shadow:
+      0 5px 5px -3px rgba(0, 0, 0, 0.2),
+      0 8px 10px 1px rgba(0, 0, 0, 0.14),
+      0 3px 14px 2px rgba(0, 0, 0, 0.12);
   }
 
   .cdk-drag-placeholder {

console/src/app/modules/show-key-dialog/show-key-dialog.component.html

@@ -13,7 +13,7 @@
     <div class="row">
       <p class="left cnsl-secondary-text">{{ 'USER.MACHINE.CREATIONDATE' | translate }}</p>
       <p *ngIf="keyResponse.details && keyResponse.details.creationDate" class="right">
-        {{ keyResponse.details.creationDate | timestampToDate | localizedDate : 'EEE dd. MMM YYYY, HH:mm' }}
+        {{ keyResponse.details.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM YYYY, HH:mm' }}
       </p>
     </div>
 

console/src/app/modules/show-key-dialog/show-key-dialog.component.ts

@@ -16,7 +16,10 @@ export class ShowKeyDialogComponent {
   public keyResponse!: AddMachineKeyResponse.AsObject | AddAppKeyResponse.AsObject;
   public InfoSectionType: any = InfoSectionType;
 
-  constructor(public dialogRef: MatDialogRef<ShowKeyDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {
+  constructor(
+    public dialogRef: MatDialogRef<ShowKeyDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+  ) {
     this.keyResponse = data.key;
   }
 

console/src/app/modules/show-token-dialog/show-token-dialog.component.ts

@@ -17,7 +17,10 @@ export class ShowTokenDialogComponent {
   public copied: string = '';
   InfoSectionType: any = InfoSectionType;
 
-  constructor(public dialogRef: MatDialogRef<ShowTokenDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {
+  constructor(
+    public dialogRef: MatDialogRef<ShowTokenDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+  ) {
     this.tokenResponse = data.token;
   }
 

console/src/app/modules/sidenav/sidenav.component.html

@@ -28,11 +28,6 @@
 
           <button
             (click)="value = setting.id"
-            *ngIf="
-              !setting.requiredRoles ||
-              (setting.requiredRoles.mgmt && (setting.requiredRoles.mgmt | hasRole | async)) ||
-              (setting.requiredRoles.admin && (setting.requiredRoles.admin | hasRole | async))
-            "
             class="sidenav-setting-list-element hide-on-mobile"
             [ngClass]="{ active: currentSetting === setting.id, show: currentSetting === undefined }"
             [attr.data-e2e]="'sidenav-element-' + setting.id"

console/src/app/modules/sidenav/sidenav.component.ts

@@ -30,7 +30,10 @@ export class SidenavComponent implements ControlValueAccessor, OnInit {
   @Input() public queryParam: string = '';
 
   public PolicyComponentServiceType: any = PolicyComponentServiceType;
-  constructor(private router: Router, private route: ActivatedRoute) {}
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+  ) {}
 
   ngOnInit(): void {
     if (!this.value) {

console/src/app/modules/user-grant-role-dialog/user-grant-role-dialog.component.ts

@@ -16,7 +16,10 @@ export class UserGrantRoleDialogComponent {
 
   public selectedRoleKeys: string[] = [];
 
-  constructor(public dialogRef: MatDialogRef<UserGrantRoleDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {
+  constructor(
+    public dialogRef: MatDialogRef<UserGrantRoleDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+  ) {
     this.projectId = data.projectId;
     this.grantId = data.grantId;
     this.selectedRoleKeysList = data.selectedRoleKeysList;

console/src/app/modules/user-grants/user-grants-datasource.ts

@@ -31,7 +31,10 @@ export class UserGrantsDataSource extends DataSource<UserGrantAsObject> {
   private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
   public loading$: Observable<boolean> = this.loadingSubject.asObservable();
 
-  constructor(private authService: GrpcAuthService, private userService: ManagementService) {
+  constructor(
+    private authService: GrpcAuthService,
+    private userService: ManagementService,
+  ) {
     super();
   }
 

console/src/app/modules/user-grants/user-grants.component.html

@@ -30,7 +30,7 @@
 
   <a
     actions
-    *ngIf="disableWrite === false && selection.hasValue() === false"
+    *ngIf="disableWrite === false && selection.hasValue() === false && routerLink"
     matTooltip="{{ 'GRANTS.ADD' | translate }}"
     color="primary"
     class="cnsl-action-button"
@@ -123,14 +123,14 @@
       <ng-container matColumnDef="creationDate">
         <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.GRANT.CREATIONDATE' | translate }}</th>
         <td mat-cell *matCellDef="let grant">
-          <span class="no-break">{{ grant.details.creationDate | timestampToDate | localizedDate : 'dd. MMM, HH:mm' }}</span>
+          <span class="no-break">{{ grant.details.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="changeDate">
         <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.GRANT.CHANGEDATE' | translate }}</th>
         <td mat-cell *matCellDef="let grant">
-          <span class="no-break">{{ grant.details.changeDate | timestampToDate | localizedDate : 'dd. MMM, HH:mm' }}</span>
+          <span class="no-break">{{ grant.details.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
         </td>
       </ng-container>
 
@@ -163,7 +163,7 @@
             </button>
 
             <button menuActions mat-menu-item [routerLink]="['/users', grant.userId]">
-              {{ 'ACTIONS.TABLE.SHOWUSER' | translate : { value: grant.displayName } }}
+              {{ 'ACTIONS.TABLE.SHOWUSER' | translate: { value: grant.displayName } }}
             </button>
           </cnsl-table-actions>
         </td>

console/src/app/modules/user-grants/user-grants.component.ts

@@ -56,7 +56,7 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
   @ViewChild('input') public filter!: MatInput;
 
   public projectRoleOptions: Role.AsObject[] = [];
-  public routerLink: any = [''];
+  public routerLink: any = undefined;
 
   public loadedId: string = '';
   public loadedProjectId: string = '';

console/src/app/modules/warn-dialog/warn-dialog.component.html

@@ -1,18 +1,18 @@
-<span class="title" mat-dialog-title>{{ data.titleKey | translate : data.titleParam }}</span>
+<span class="title" mat-dialog-title>{{ data.titleKey | translate: data.titleParam }}</span>
 <div mat-dialog-content>
   <div class="icon-wrapper" *ngIf="data.icon">
     <i class="icon {{ data.icon }}"></i>
   </div>
-  <p class="desc cnsl-secondary-text">{{ data.descriptionKey | translate : data.descriptionParam }}</p>
+  <p class="desc cnsl-secondary-text">{{ data.descriptionKey | translate: data.descriptionParam }}</p>
 
   <cnsl-info-section *ngIf="data.warnSectionKey" [type]="InfoSectionType.WARN">{{
     data.warnSectionKey | translate
   }}</cnsl-info-section>
 
-  <p *ngIf="data.hintKey" class="desc cnsl-secondary-text">{{ data.hintKey | translate : { value: data.confirmation } }}</p>
+  <p *ngIf="data.hintKey" class="desc cnsl-secondary-text">{{ data.hintKey | translate: { value: data.confirmation } }}</p>
 
   <cnsl-form-field *ngIf="data.confirmation && data.confirmationKey" class="formfield">
-    <cnsl-label>{{ data.confirmationKey | translate : { value: data.confirmation } }}</cnsl-label>
+    <cnsl-label>{{ data.confirmationKey | translate: { value: data.confirmation } }}</cnsl-label>
     <input cnslInput [(ngModel)]="confirm" data-e2e="confirm-dialog-input" />
   </cnsl-form-field>
 </div>

console/src/app/modules/warn-dialog/warn-dialog.component.ts

@@ -14,7 +14,10 @@ import { InfoSectionType } from '../info-section/info-section.component';
 export class WarnDialogComponent {
   public confirm: string = '';
   InfoSectionType: any = InfoSectionType;
-  constructor(public dialogRef: MatDialogRef<WarnDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {}
+  constructor(
+    public dialogRef: MatDialogRef<WarnDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+  ) {}
 
   public closeDialog(): void {
     this.dialogRef.close(false);

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

@@ -4,7 +4,7 @@
     <p class="desc cnsl-secondary-text">{{ 'FLOWS.DESCRIPTION' | translate }}</p>
 
     <cnsl-info-section class="max-actions" *ngIf="maxActions"
-      >{{ 'FLOWS.ACTIONSMAX' | translate : { value: maxActions } }}
+      >{{ 'FLOWS.ACTIONSMAX' | translate: { value: maxActions } }}
     </cnsl-info-section>
 
     <ng-template cnslHasRole [hasRole]="['org.action.read']">

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

@@ -150,7 +150,10 @@
       border-radius: 0.5rem;
       padding: 0 0.5rem;
       background-color: $primary-color;
-      box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+      box-shadow:
+        0 5px 5px -3px rgba(0, 0, 0, 0.2),
+        0 8px 10px 1px rgba(0, 0, 0, 0.14),
+        0 3px 14px 2px rgba(0, 0, 0, 0.12);
 
       i {
         margin-right: 0.5rem;

console/src/app/pages/app-create/app-create.component.html

@@ -9,7 +9,7 @@
     >
     </cnsl-search-project-autocomplete>
 
-    <div [innerHtml]="'APP.PAGES.CREATE_NEW_PROJECT' | translate : { url: '/projects/create' }"></div>
+    <div [innerHtml]="'APP.PAGES.CREATE_NEW_PROJECT' | translate: { url: '/projects/create' }"></div>
 
     <div class="app-create-btn-container">
       <button

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

@@ -13,7 +13,10 @@ export class AppCreateComponent {
   public projectId: string = '';
   public ProjectAutocompleteType: any = ProjectAutocompleteType;
 
-  constructor(private router: Router, breadcrumbService: BreadcrumbService) {
+  constructor(
+    private router: Router,
+    breadcrumbService: BreadcrumbService,
+  ) {
     const bread: Breadcrumb = {
       type: BreadcrumbType.ORG,
       routerLink: ['/org'],

console/src/app/pages/domains/domains-routing.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { DomainsComponent } from './domains.component';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: DomainsComponent,
-  },
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class DomainsRoutingModule {}

console/src/app/pages/domains/domains.component.html

@@ -1,69 +0,0 @@
-<div class="max-width-container">
-  <ng-container *ngIf="['org.write$'] | hasRole as canwrite$">
-    <div class="domain-top-view">
-      <div>
-        <div class="domain-title-row">
-          <h1>{{ 'ORG.DOMAINS.TITLE' | translate }}</h1>
-          <a
-            mat-icon-button
-            href="https://zitadel.com/docs/guides/manage/console/organizations#how-zitadel-handles-usernames"
-            rel="noreferrer"
-            target="_blank"
-          >
-            <i class="las la-info-circle"></i>
-          </a>
-        </div>
-        <p class="desc cnsl-secondary-text">{{ 'ORG.DOMAINS.DESCRIPTION' | translate }}</p>
-      </div>
-      <span class="fill-space"></span>
-
-      <button
-        [disabled]="(canwrite$ | async) === false"
-        matTooltip="Add domain"
-        mat-raised-button
-        color="primary"
-        class="cnsl-action-button"
-        (click)="addNewDomain()"
-      >
-        <mat-icon>add</mat-icon>
-        <span>{{ 'ACTIONS.NEW' | translate }}</span>
-        <cnsl-action-keys (actionTriggered)="addNewDomain()"> </cnsl-action-keys>
-      </button>
-    </div>
-
-    <cnsl-card *ngFor="let domain of domains" class="domain-card">
-      <div class="domain">
-        <span class="title">{{ domain.domainName }}</span>
-
-        <i matTooltip="verified" *ngIf="domain.isVerified" class="verified las la-check-circle"></i>
-        <i matTooltip="primary" *ngIf="domain.isPrimary" class="primary las la-star"></i>
-        <a
-          *ngIf="domain.isVerified && !domain.isPrimary && (canwrite$ | async)"
-          class="primaryset"
-          (click)="setPrimary(domain)"
-          >{{ 'ORG.DOMAINS.SETPRIMARY' | translate }}</a
-        >
-
-        <span class="fill-space"></span>
-        <button
-          mat-icon-button
-          [disabled]="(canwrite$ | async) === false || domain.isVerified"
-          *ngIf="canwrite$ | async"
-          (click)="verifyDomain(domain)"
-        >
-          <i class="las la-pen"></i>
-        </button>
-        <button
-          class="domain-rem-button"
-          [disabled]="(canwrite$ | async) === false || domain.isPrimary"
-          matTooltip="Remove domain"
-          color="warn"
-          mat-icon-button
-          (click)="removeDomain(domain.domainName)"
-        >
-          <i class="las la-trash"></i>
-        </button>
-      </div>
-    </cnsl-card>
-  </ng-container>
-</div>

console/src/app/pages/events/events.component.html

@@ -84,7 +84,7 @@
         <th mat-header-cell *matHeaderCellDef>{{ 'IAM.EVENTS.CREATIONDATE' | translate }}</th>
         <td mat-cell *matCellDef="let event">
           <ng-container *ngIf="event | toobject as event">
-            <span>{{ event?.creationDate | timestampToDate | localizedDate : 'EEE dd. MMM, HH:mm' }}</span>
+            <span>{{ event?.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span>
           </ng-container>
         </td>
       </ng-container>

console/src/app/pages/failed-events/failed-events.component.html

@@ -32,7 +32,7 @@
         <ng-container matColumnDef="lastFailed">
           <th mat-header-cell *matHeaderCellDef>{{ 'IAM.FAILEDEVENTS.LASTFAILED' | translate }}</th>
           <td mat-cell *matCellDef="let event">
-            <span>{{ event?.lastFailed | timestampToDate | localizedDate : 'EEE dd. MMM, HH:mm' }}</span>
+            <span>{{ event?.lastFailed | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span>
           </td>
         </ng-container>
 

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

@@ -21,7 +21,11 @@ export class HomeComponent {
 
   public dark: boolean = true;
 
-  constructor(public authService: GrpcAuthService, breadcrumbService: BreadcrumbService, public themeService: ThemeService) {
+  constructor(
+    public authService: GrpcAuthService,
+    breadcrumbService: BreadcrumbService,
+    public themeService: ThemeService,
+  ) {
     const bread: Breadcrumb = {
       type: BreadcrumbType.ORG,
       routerLink: ['/org'],