feat(console): user metadata, rehaul detail pages (#2209)

* service, sidenav, i18n, dialog

* detail layout, user detail

* metadata dialog from

* dialog

* features

* formarray

* metadata component

* comp

* user metadata refresh

* use formarray, control, bulk save

* metadata revert, has feature directive

* lint

* lint

* typo

* info row user, warn color optim

* card cleanup, actions for user detail

* project, org, user, app rehaul

* lint

* scss

* digit fix

* features and project grid rehaul

* info-section layout, org domain info

* readd palette scss

* add svg email warn

* missing translation

* rm unused ts

* lockoutpolicy

* check for lockout feature

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

@@ -57,6 +57,6 @@
 
 .error {
   font-size: 13px;
-  color: #f44336;
+  color: var(--warn);
   margin: 0 .5rem 1.5rem .5rem;
 }

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

@@ -11,37 +11,34 @@
                 <span *ngIf="app?.apiConfig">API</span>
             </div>
             <ng-container *ngIf="isZitadel === false">
-                <ng-template appHasRole [appHasRole]="['project.app.write:'+projectId, 'project.app.write']">
-
-                    <button *ngIf="!editState" matTooltip="{{'ACTIONS.EDIT' | translate}}" mat-icon-button
-                        (click)="editState = !editState" aria-label="edit app name">
-                        <i class="las la-edit"></i>
+              <span class="fill-space"></span>
+              <ng-template appHasRole [appHasRole]="['project.app.write:'+projectId, 'project.app.write']">
+                <button class="actions-trigger" mat-raised-button color="primary" [matMenuTriggerFor]="actions">
+                  <span>{{'ACTIONS.ACTIONS' | translate}}</span>
+                  <mat-icon class="icon">keyboard_arrow_down</mat-icon>
+                </button>
+                <mat-menu #actions="matMenu" xPosition="before">
+                  <button mat-menu-item (click)="openNameDialog()"
+                    aria-label="Edit project name" *ngIf="isZitadel === false">
+                    {{'ACTIONS.RENAME' | translate}}
+                  </button>
+                  <button mat-menu-item
+                    *ngIf="app?.state !== AppState.APP_STATE_INACTIVE"
+                    (click)="changeState(AppState.APP_STATE_INACTIVE)">
+                    {{'ACTIONS.DEACTIVATE' | translate}}
+                  </button>
+                  <button mat-menu-item *ngIf="app?.state == AppState.APP_STATE_INACTIVE"
+                    (click)="changeState(AppState.APP_STATE_ACTIVE)">
+                    {{'ACTIONS.REACTIVATE' | translate}}
+                  </button>
+                  <ng-template appHasRole [appHasRole]="['project.app.delete:'+projectId, 'project.app.delete']">
+                    <button mat-menu-item matTooltip="{{'APP.PAGES.DELETE' | translate}}"
+                        (click)="deleteApp()">
+                        <span [style.color]="'var(--warn)'">{{'APP.PAGES.DELETE' | translate}}</span>
                     </button>
-                    <button *ngIf="editState" (click)="saveApp()" [disabled]="appNameForm.invalid || name?.disabled"
-                        mat-icon-button>
-                        <i class="las la-save"></i>
-                    </button>
-
-                    <ng-template appHasRole [appHasRole]="['project.app.delete:'+projectId, 'project.app.delete']">
-                        <button matTooltip="{{'ACTIONS.DELETE' | translate}}" color="warn" mat-icon-button
-                            (click)="deleteApp()" aria-label="delete app">
-                            <i class="las la-trash"></i>
-                        </button>
-                    </ng-template>
-
-                    <span class="fill-space"></span>
-
-                    <button class="state-button" mat-stroked-button color="warn"
-                        *ngIf="app && app.state !== undefined && app?.state !== AppState.APP_STATE_INACTIVE"
-                        (click)="changeState(AppState.APP_STATE_INACTIVE)">
-                        {{'ACTIONS.DEACTIVATE' | translate}}
-                    </button>
-                    <button class="state-button" mat-stroked-button
-                        *ngIf="app && app.state !== undefined && app?.state !== AppState.APP_STATE_ACTIVE"
-                        (click)="changeState(AppState.APP_STATE_ACTIVE)">
-                        {{'ACTIONS.REACTIVATE' | translate}}
-                    </button>
-                </ng-template>
+                  </ng-template>
+                </mat-menu>
+              </ng-template>
             </ng-container>
 
             <p class="desc">{{ 'APP.PAGES.DESCRIPTION' | translate }}</p>
@@ -50,104 +47,68 @@
 
         <span *ngIf="errorMessage" class="err-container">{{errorMessage}}</span>
 
-        <form *ngIf="app && editState" [formGroup]="appNameForm">
-            <div class="name-content">
-                <cnsl-form-field class="name-field">
-                    <cnsl-label>{{ 'APP.NAME' | translate }}</cnsl-label>
-                    <input cnslInput formControlName="name" />
-                </cnsl-form-field>
-            </div>
-        </form>
-
-        <div class="environment-wrapper">
-            <div class="environment" *ngIf="app?.oidcConfig?.clientId">
-                <span class="key">{{'APP.OIDC.INFO.CLIENTID' | translate}}</span>
-                <div class="environment-row">
-                    <span>{{this.app.oidcConfig?.clientId}}</span>
-                    <button color="primary" [disabled]="copiedKey == this.app.oidcConfig?.clientId"
-                        [matTooltip]="(copiedKey != this.app.oidcConfig?.clientId ? 'USER.PAGES.COPY' : 'USER.PAGES.COPIED' ) | translate"
-                        appCopyToClipboard [valueToCopy]="this.app.oidcConfig?.clientId"
-                        (copiedValue)="copiedKey = 'clientId'" mat-icon-button>
-                        <i *ngIf="copiedKey != 'clientId'" class="las la-clipboard"></i>
-                        <i *ngIf="copiedKey == 'clientId'" class="las la-clipboard-check"></i>
-                    </button>
-                </div>
-            </div>
-            <div class="environment" *ngIf="app?.apiConfig?.clientId">
-              <span class="key">{{'APP.API.INFO.CLIENTID' | translate}}</span>
-              <div class="environment-row">
-                  <span>{{this.app.apiConfig?.clientId}}</span>
-                  <button color="primary" [disabled]="copiedKey == this.app.apiConfig?.clientId"
-                      [matTooltip]="(copiedKey != this.app.apiConfig?.clientId ? 'USER.PAGES.COPY' : 'USER.PAGES.COPIED' ) | translate"
-                      appCopyToClipboard [valueToCopy]="this.app.apiConfig?.clientId"
-                      (copiedValue)="copiedKey = 'clientId'" mat-icon-button>
-                      <i *ngIf="copiedKey != 'clientId'" class="las la-clipboard"></i>
-                      <i *ngIf="copiedKey == 'clientId'" class="las la-clipboard-check"></i>
-                  </button>
-              </div>
-          </div>
-            <ng-container *ngFor="let environmentV of (environmentMap | keyvalue)">
-                <div *ngIf="environmentV.value" class="environment">
-                    <span class="key">{{environmentV.key}}</span>
-                    <div class="environment-row">
-                        <span>{{environmentV.value}}</span>
-                        <button color="primary" [disabled]="copiedKey == environmentV.value"
-                            [matTooltip]="(copiedKey != environmentV.value ? 'USER.PAGES.COPY' : 'USER.PAGES.COPIED' ) | translate"
-                            appCopyToClipboard [valueToCopy]="environmentV.value"
-                            (copiedValue)="copiedKey = environmentV.key" mat-icon-button>
-                            <i *ngIf="copiedKey != environmentV.key" class="las la-clipboard"></i>
-                            <i *ngIf="copiedKey == environmentV.key" class="las la-clipboard-check"></i>
-                        </button>
-                    </div>
-                </div>
-            </ng-container>
-        </div>
-
         <div class="compliance"
-            *ngIf="app?.oidcConfig?.complianceProblemsList && app.oidcConfig?.complianceProblemsList?.length">
-            <cnsl-info-section class="problem" type="WARN">
-                <ul style="margin: 0;">
-                    <li style="margin: 0 0 .5rem 0;"
-                        *ngFor="let problem of app.oidcConfig?.complianceProblemsList || []">
-                        {{problem.localizedMessage}}</li>
-                </ul>
-            </cnsl-info-section>
+          *ngIf="app?.oidcConfig?.complianceProblemsList && app.oidcConfig?.complianceProblemsList?.length">
+          <cnsl-info-section class="problem" type="WARN">
+              <ul style="margin: 0;">
+                  <li style="margin: 0 0 .5rem 0;"
+                      *ngFor="let problem of app.oidcConfig?.complianceProblemsList || []">
+                      {{problem.localizedMessage}}</li>
+              </ul>
+          </cnsl-info-section>
         </div>
 
-        <div class="content" *ngIf="app?.oidcConfig">
-            <h3 class="full-width section-title">{{'APP.OIDC.REDIRECTSECTIONTITLE' | translate}}</h3>
+        <cnsl-info-row *ngIf="app" [app]="app"></cnsl-info-row>
 
-            <mat-slide-toggle color="primary" class="devmode" [formControl]="devMode" name="devMode"
-                matTooltip="{{'APP.OIDC.DEVMODEDESC' | translate}}">
-                {{ 'APP.OIDC.DEVMODE' | translate }}
-            </mat-slide-toggle>
-
-            <cnsl-info-section class="step-description" *ngIf="appType?.value == OIDCAppType.OIDC_APP_TYPE_NATIVE">
-                <span>{{'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate}}</span>
-            </cnsl-info-section>
-
-            <cnsl-info-section class="step-description"
+        <div *ngIf="app?.oidcConfig" class="expandables">
+            <div class="expandable">
+              <p class="title">{{'APP.OIDC.REDIRECTSECTIONTITLE' | translate}}
+                  <button mat-icon-button (click)="showRedirects = !showRedirects"
+                      matTooltip="{{(showRedirects ? 'ACTIONS.HIDE' : 'ACTIONS.SHOW') | translate}}">
+                      <mat-icon *ngIf="!showRedirects">expand_more</mat-icon>
+                      <mat-icon *ngIf="showRedirects">expand_less</mat-icon>
+                  </button>
+              </p>
+              <ng-container *ngIf="showRedirects">
+                <cnsl-info-section *ngIf="appType?.value == OIDCAppType.OIDC_APP_TYPE_NATIVE">
+                  <div class="dev-col">
+                    <span>{{'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate}}</span>
+                    <mat-slide-toggle color="primary" class="devmode" [formControl]="devMode" name="devMode"
+                    matTooltip="{{'APP.OIDC.DEVMODEDESC' | translate}}">
+                    {{ 'APP.OIDC.DEVMODE' | translate }}
+                    </mat-slide-toggle>
+                  </div>
+                </cnsl-info-section>
+                <cnsl-info-section
                 *ngIf="appType?.value == OIDCAppType.OIDC_APP_TYPE_WEB || appType?.value == OIDCAppType.OIDC_APP_TYPE_USER_AGENT">
-                {{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}
-            </cnsl-info-section>
+                  <div class="dev-col">
+                    <span>{{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</span>
+                    <mat-slide-toggle color="primary" class="devmode" [formControl]="devMode" name="devMode"
+                    matTooltip="{{'APP.OIDC.DEVMODEDESC' | translate}}">
+                    {{ 'APP.OIDC.DEVMODE' | translate }}
+                    </mat-slide-toggle>
+                  </div>
+                </cnsl-info-section>
+    
+                <div class="content">
+                  <cnsl-redirect-uris *ngIf="appType?.value !== undefined" class="redirect-section" [canWrite]="canWrite"
+                      [devMode]="devMode?.value" [getValues]="requestRedirectValuesSubject$"
+                      (changedUris)="redirectUrisList = $event" [urisList]="redirectUrisList"
+                      title="{{ 'APP.OIDC.REDIRECT' | translate }}"
+                      [isNative]="appType?.value == OIDCAppType.OIDC_APP_TYPE_NATIVE">
+                  </cnsl-redirect-uris>
+      
+                  <cnsl-redirect-uris *ngIf="appType?.value !== undefined" class="redirect-section" [canWrite]="canWrite"
+                      [devMode]="devMode?.value" (changedUris)="postLogoutRedirectUrisList = $event"
+                      [urisList]="postLogoutRedirectUrisList" [getValues]="requestRedirectValuesSubject$"
+                      title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}"
+                      [isNative]="appType?.value == OIDCAppType.OIDC_APP_TYPE_NATIVE">
+                  </cnsl-redirect-uris>
+                </div>
+              </ng-container>
+            </div>
 
-            <cnsl-redirect-uris *ngIf="appType?.value !== undefined" class="redirect-section" [canWrite]="canWrite"
-                [devMode]="devMode?.value" [getValues]="requestRedirectValuesSubject$"
-                (changedUris)="redirectUrisList = $event" [urisList]="redirectUrisList"
-                title="{{ 'APP.OIDC.REDIRECT' | translate }}"
-                [isNative]="appType?.value == OIDCAppType.OIDC_APP_TYPE_NATIVE">
-            </cnsl-redirect-uris>
-
-            <cnsl-redirect-uris *ngIf="appType?.value !== undefined" class="redirect-section" [canWrite]="canWrite"
-                [devMode]="devMode?.value" (changedUris)="postLogoutRedirectUrisList = $event"
-                [urisList]="postLogoutRedirectUrisList" [getValues]="requestRedirectValuesSubject$"
-                title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}"
-                [isNative]="appType?.value == OIDCAppType.OIDC_APP_TYPE_NATIVE">
-            </cnsl-redirect-uris>
-
-            <div style="margin: .5rem" class="divider"></div>
-
-            <div class="additional-origins">
+            <div class="expandable">
                 <p class="title">{{'APP.ADDITIONALORIGINS' | translate}}
                     <button mat-icon-button (click)="showAdditionalOrigins = !showAdditionalOrigins"
                         matTooltip="{{(showAdditionalOrigins ? 'ACTIONS.HIDE' : 'ACTIONS.SHOW') | translate}}">

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

@@ -13,13 +13,14 @@
     margin-right: 1rem;
 
     h1 {
-      font-size: 1.2rem;
-      margin: 0 0 0 0;
+      font-size: 2rem;
+      margin: 0;
       font-weight: normal;
     }
 
     span {
-      font-size: 12px;
+      font-size: 14px;
+      margin: .5rem 0;
       color: var(--grey);
     }
   }
@@ -41,8 +42,15 @@
     color: rgb(201, 51, 71);
   }
 
-  .state-button {
-    margin-left: .5rem;
+  .actions-trigger {
+    margin-top: .25rem;
+    display: flex;
+    align-items: center;
+
+    .icon {
+      margin-left: .5rem;
+      margin-right: -.5rem;
+    }
   }
 }
 
@@ -51,49 +59,10 @@
   font-size: 14px;
 }
 
-.environment-wrapper {
-  padding: 1rem 0;
-  display: flex;
-  flex-wrap: wrap;
-
-  .environment {
-    min-width: 300px;
-
-    .key {
-      font-size: 12px;
-      color: var(--grey);
-    }
-
-    .environment-row {
-      display: flex;
-      align-items: center;
-      overflow: hidden;
-      height: 30px;
-
-      button {
-        transition: opacity .15s ease-in-out;
-        visibility: hidden;
-        opacity: 0;
-
-        &[disabled] {
-          visibility: visible;
-          color: white;
-          opacity: 1;
-        }
-      }
-
-      &:hover {
-        button {
-          visibility: visible;
-          opacity: 1;
-        }
-      }
-    }
-  }
-}
-
 .compliance .problem {
   font-size: 14px;
+  margin-bottom: .5rem;
+  display: block;
 }
 
 .name-content {
@@ -136,109 +105,107 @@
   }
 }
 
-.content {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  margin: 0 -.5rem;
+.grid {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 
-  .grid {
-    width: 100%;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-
-    .rt {
-      margin-top: 2.3rem;
-      margin-left: .5rem;
-    }
+  .rt {
+    margin-top: 2.3rem;
+    margin-left: .5rem;
   }
+}
 
-  &.nowrap {
-    flex-wrap: nowrap;
-  }
+.expandables {
+  padding-top: 1rem;
 
-  &.center {
-    align-items: center;
-  }
-
-  .redirect-section {
-    flex: 1;
-    margin: 0 .5rem;
-  }
-
-  .additional-origins {
+  .expandable {
     display: block;
     width: 100%;
     margin: 0 .5rem;
 
     .title {
       margin: 0;
+      text-transform: uppercase;
+      letter-spacing: .05em;
+      font-size: 14px;
+    }
+
+    .dev-col {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+
+      .devmode {
+        margin: 1rem 0 .5rem 0;
+      }
+    }
+
+    .content {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      margin: 0 -.5rem;
+      padding-bottom: 2rem;
+
+      .redirect-section {
+        flex: 1;
+        margin: 0 .5rem;
+      }
     }
 
     .desc {
       color: var(--grey);
       font-size: 14px;
-      margin-top: 0;
+      margin: 0;
     }
 
     .input {
       width: 100%;
     }
   }
+}
 
-  .formfield {
-    flex: 1 1 30%;
-    margin: 0 .5rem;
+.formfield {
+  flex: 1 1 30%;
+  margin: 0 .5rem;
 
-    &.full-width {
-      flex-basis: 100%;
-    }
-  }
-
-  .section-title {
-    margin: 1.5rem 0 0 0;
-  }
-
-  .full-width {
+  &.full-width {
     flex-basis: 100%;
-    margin-left: .5rem;
-    margin-right: .5rem;
   }
+}
 
-  .clockskew-title {
-    font-size: 14px;
-    color: var(--grey);
-    margin: 1rem .5rem 0 .5rem;
-  }
+.section-title {
+  margin: 1.5rem 0 0 0;
+}
 
-  .clockskew-slider {
-    width: 100%;
-    margin: 0 .5rem;
-  }
+.full-width {
+  flex-basis: 100%;
+  margin-left: .5rem;
+  margin-right: .5rem;
+}
 
-  .desc {
-    color: var(--grey);
-    font-size: 14px;
-    margin-bottom: 1.5rem;
-  }
+.clockskew-title {
+  font-size: 14px;
+  color: var(--grey);
+  margin: 1rem .5rem 0 .5rem;
+}
 
-  .devmode {
-    flex: 1 1 100%;
-    margin: 1rem .5rem;
-  }
+.clockskew-slider {
+  width: 100%;
+  margin: 0 .5rem;
+}
 
-  .step-description {
-    font-size: .9rem;
-    color: var(--grey);
-    flex-basis: 100%;
-    margin: 0 .5rem 1rem .5rem;
-  }
+.desc {
+  color: var(--grey);
+  font-size: 14px;
+  margin-bottom: 1.5rem;
+}
 
-  .error {
-    font-size: 13px;
-    color: #f44336;
-    margin: 0 .5rem 1.5rem .5rem;
-  }
+.error {
+  font-size: 13px;
+  color: var(--warn);
+  margin: 0 .5rem 1.5rem .5rem;
 }
 
 .btn-container {

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

@@ -1,8 +1,7 @@
 import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
 import { Location } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -14,6 +13,7 @@ import { take } from 'rxjs/operators';
 import { RadioItemAuthType } from 'src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component';
 import { ChangeType } from 'src/app/modules/changes/changes.component';
 import { CnslLinks } from 'src/app/modules/links/links.component';
+import { NameDialogComponent } from 'src/app/modules/name-dialog/name-dialog.component';
 import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
 import {
   APIAuthMethodType,
@@ -62,7 +62,10 @@ export class AppDetailComponent implements OnInit, OnDestroy {
   public errorMessage: string = '';
   public removable: boolean = true;
   public addOnBlur: boolean = true;
+
   public showAdditionalOrigins: boolean = false;
+  public showRedirects: boolean = false;
+
   public readonly separatorKeysCodes: number[] = [ENTER, COMMA, SPACE];
 
   public authMethods: RadioItemAuthType[] = [];
@@ -98,7 +101,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
   ];
 
   public AppState: any = AppState;
-  public appNameForm!: FormGroup;
   public oidcForm!: FormGroup;
   public apiForm!: FormGroup;
 
@@ -119,7 +121,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
 
   public requestRedirectValuesSubject$: Subject<void> = new Subject();
   public copiedKey: any = '';
-  public environmentMap: { [key: string]: string; } = {};
   public nextLinks: Array<CnslLinks> = [];
 
   constructor(
@@ -132,25 +133,8 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     private mgmtService: ManagementService,
     private authService: GrpcAuthService,
     private router: Router,
-    private http: HttpClient,
     private snackbar: MatSnackBar,
   ) {
-    this.http.get('./assets/environment.json')
-      .toPromise().then((env: any) => {
-
-        this.environmentMap = {
-          issuer: env.issuer,
-          adminServiceUrl: env.adminServiceUrl,
-          mgmtServiceUrl: env.mgmtServiceUrl,
-          authServiceUrl: env.adminServiceUrl,
-        };
-      });
-
-    this.appNameForm = this.fb.group({
-      state: [{ value: '', disabled: true }, []],
-      name: [{ value: '', disabled: true }, [Validators.required]],
-    });
-
     this.oidcForm = this.fb.group({
       devMode: [{ value: false, disabled: true }, []],
       clientId: [{ value: '', disabled: true }],
@@ -174,6 +158,25 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     return seconds + 's';
   }
 
+  public openNameDialog(): void {
+    const dialogRef = this.dialog.open(NameDialogComponent, {
+      data: {
+        name: this.app.name,
+        titleKey: 'APP.NAMEDIALOG.TITLE',
+        descKey: 'APP.NAMEDIALOG.DESCRIPTION',
+        labelKey: 'APP.NAMEDIALOG.NAME',
+      },
+      width: '400px',
+    });
+
+    dialogRef.afterClosed().subscribe(name => {
+      if (name) {
+        this.app.name = name;
+        this.saveApp();
+      }
+    });
+  }
+
   public ngOnInit(): void {
     this.subscription = this.route.params.subscribe(params => this.getData(params));
   }
@@ -188,15 +191,18 @@ export class AppDetailComponent implements OnInit, OnDestroy {
         i18nTitle: 'APP.PAGES.NEXTSTEPS.0.TITLE',
         i18nDesc: 'APP.PAGES.NEXTSTEPS.0.DESC',
         routerLink: ['/projects', this.projectId],
+        iconClasses: 'las la-user-tag',
       },
       {
         i18nTitle: 'APP.PAGES.NEXTSTEPS.1.TITLE',
         i18nDesc: 'APP.PAGES.NEXTSTEPS.1.DESC',
         routerLink: ['/users', 'create'],
+        iconClasses: 'las la-user-plus',
       }, {
         i18nTitle: 'APP.PAGES.NEXTSTEPS.2.TITLE',
         i18nDesc: 'APP.PAGES.NEXTSTEPS.2.DESC',
         href: 'https://docs.zitadel.ch',
+        iconClasses: 'las la-people-carry',
       },
     ];
   }
@@ -216,8 +222,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
         this.mgmtService.getAppByID(projectid, id).then(app => {
           if (app.app) {
             this.app = app.app;
-            this.appNameForm.patchValue(this.app);
-
             if (this.app.oidcConfig) {
               this.getAuthMethodOptions('OIDC');
 
@@ -245,7 +249,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
             }
 
             if (allowed) {
-              this.appNameForm.enable();
               this.oidcForm.enable();
               this.apiForm.enable();
             }
@@ -426,19 +429,15 @@ export class AppDetailComponent implements OnInit, OnDestroy {
   }
 
   public saveApp(): void {
-    if (this.appNameForm.valid) {
-      this.app.name = this.name?.value;
-
-      this.mgmtService
-        .updateApp(this.projectId, this.app.id, this.name?.value)
-        .then(() => {
-          this.toast.showInfo('APP.TOAST.UPDATED', true);
-          this.editState = false;
-        })
-        .catch(error => {
-          this.toast.showError(error);
-        });
-    }
+    this.mgmtService
+      .updateApp(this.projectId, this.app.id, this.app.name)
+      .then(() => {
+        this.toast.showInfo('APP.TOAST.UPDATED', true);
+        this.editState = false;
+      })
+      .catch(error => {
+        this.toast.showError(error);
+      });
   }
 
   public toggleRefreshToken(event: MatCheckboxChange): void {
@@ -462,10 +461,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
 
   public saveOIDCApp(): void {
     this.requestRedirectValuesSubject$.next();
-    if (this.appNameForm.valid) {
-      this.app.name = this.name?.value;
-    }
-
     if (this.oidcForm.valid) {
       if (this.app.oidcConfig) {
         this.app.oidcConfig.responseTypesList = this.responseTypesList?.value;
@@ -577,10 +572,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     this._location.back();
   }
 
-  public get name(): AbstractControl | null {
-    return this.appNameForm.get('name');
-  }
-
   public get clientId(): AbstractControl | null {
     return this.oidcForm.get('clientId');
   }

console/src/app/pages/projects/apps/apps.module.ts

@@ -24,10 +24,12 @@ import { AppRadioModule } from 'src/app/modules/app-radio/app-radio.module';
 import { CardModule } from 'src/app/modules/card/card.module';
 import { ChangesModule } from 'src/app/modules/changes/changes.module';
 import { ClientKeysModule } from 'src/app/modules/client-keys/client-keys.module';
+import { InfoRowModule } from 'src/app/modules/info-row/info-row.module';
 import { InfoSectionModule } from 'src/app/modules/info-section/info-section.module';
 import { InputModule } from 'src/app/modules/input/input.module';
 import { LinksModule } from 'src/app/modules/links/links.module';
 import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
+import { NameDialogModule } from 'src/app/modules/name-dialog/name-dialog.module';
 import { OriginPipeModule } from 'src/app/pipes/origin-pipe/origin-pipe.module';
 import { RedirectPipeModule } from 'src/app/pipes/redirect-pipe/redirect-pipe.module';
 
@@ -39,49 +41,52 @@ import { AppsRoutingModule } from './apps-routing.module';
 import { RedirectUrisComponent } from './redirect-uris/redirect-uris.component';
 
 @NgModule({
-    declarations: [
-        AppCreateComponent,
-        AppDetailComponent,
-        AppSecretDialogComponent,
-        RedirectUrisComponent,
-        AdditionalOriginsComponent,
-    ],
-    imports: [
-        CommonModule,
-        A11yModule,
-        RedirectPipeModule,
-        LinksModule,
-        AppRadioModule,
-        AppsRoutingModule,
-        FormsModule,
-        TranslateModule,
-        OriginPipeModule,
-        ReactiveFormsModule,
-        HasRoleModule,
-        MatMenuModule,
-        MatChipsModule,
-        ClientKeysModule,
-        MatIconModule,
-        MatSelectModule,
-        MatButtonToggleModule,
-        MatButtonModule,
-        MatProgressSpinnerModule,
-        MatProgressBarModule,
-        MatDialogModule,
-        MatCheckboxModule,
-        CardModule,
-        MatTooltipModule,
-        TranslateModule,
-        MatStepperModule,
-        MatRadioModule,
-        CopyToClipboardModule,
-        MatSlideToggleModule,
-        InputModule,
-        MetaLayoutModule,
-        MatSliderModule,
-        ChangesModule,
-        InfoSectionModule,
-    ],
-    exports: [TranslateModule],
+  declarations: [
+    AppCreateComponent,
+    AppDetailComponent,
+    AppSecretDialogComponent,
+    RedirectUrisComponent,
+    AdditionalOriginsComponent,
+  ],
+  imports: [
+    CommonModule,
+    A11yModule,
+    RedirectPipeModule,
+    LinksModule,
+    NameDialogModule,
+    AppRadioModule,
+    AppsRoutingModule,
+    FormsModule,
+    InfoRowModule,
+    TranslateModule,
+    OriginPipeModule,
+    MatMenuModule,
+    ReactiveFormsModule,
+    HasRoleModule,
+    MatMenuModule,
+    MatChipsModule,
+    ClientKeysModule,
+    MatIconModule,
+    MatSelectModule,
+    MatButtonToggleModule,
+    MatButtonModule,
+    MatProgressSpinnerModule,
+    MatProgressBarModule,
+    MatDialogModule,
+    MatCheckboxModule,
+    CardModule,
+    MatTooltipModule,
+    TranslateModule,
+    MatStepperModule,
+    MatRadioModule,
+    CopyToClipboardModule,
+    MatSlideToggleModule,
+    InputModule,
+    MetaLayoutModule,
+    MatSliderModule,
+    ChangesModule,
+    InfoSectionModule,
+  ],
+  exports: [TranslateModule],
 })
 export class AppsModule { }

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

@@ -57,6 +57,6 @@
 
 .error {
   font-size: 13px;
-  color: #f44336;
+  color: var(--warn);
   margin: 0 .5rem 1.5rem .5rem;
 }