fix(console): ui/ux improvements, delete user phone, pinned cards, user grant role load fix (#357)

* project grant member edit

* project grant member dialog, import cleanup

* readd project roles

* user login-methods cleanup

* fix sw config, user grant context

* delete user grants, context for creation, search

* contributor box shadow

* password to detail view

* user detail notification

* ui ux improvements

* pinned section

* project pinnable grid, rem columns, move buttons

* user detail mfa, move user comonents, user grant

* del phone

* user detail service

* delete phone for auth, mgmt user

console/src/app/app.component.html

@@ -59,7 +59,9 @@
                         <span class="label">{{ 'MENU.PERSONAL_INFO' | translate }}</span>
                     </a>
 
-                    <div *ngIf="authService.authenticationChanged | async" class="divider"><span></span></div>
+                    <div *ngIf="authService.authenticationChanged | async" class="divider">
+                        <div class="line"></div>
+                    </div>
 
                     <a *ngIf="iamreadwrite" class="nav-item" [routerLinkActive]="['active']" [routerLink]="[ '/iam']">
                         <i class="icon las la-gem"></i>
@@ -71,12 +73,17 @@
                         <span class="label">{{org?.name ? org.name : 'MENU.ORGANIZATION' | translate}}</span>
                     </a>
 
-                    <div *ngIf="showOrgSection" class="divider"><span></span></div>
+                    <div *ngIf="showOrgSection" class="divider">
+                        <div class="line"></div>
+                        <span>{{'MENU.PROJECTSSECTION' | translate}}</span>
+                        <div class="line"></div>
+                    </div>
 
                     <a *ngIf="showProjectSection" class="nav-item" [routerLinkActive]="['active']"
                         [routerLink]="[ '/projects']">
                         <i class="icon las la-layer-group"></i>
-                        <span class="label">{{ 'MENU.PROJECT' | translate }}</span>
+                        <span class="label">{{org?.name ? org.name : 'MENU.ORGANIZATION' | translate}}
+                            {{ 'MENU.PROJECT' | translate }}</span>
                     </a>
 
                     <a *ngIf="showProjectSection" class="nav-item" [routerLinkActive]="['active']"
@@ -85,7 +92,13 @@
                         <span class="label">{{ 'MENU.GRANTEDPROJECT' | translate }}</span>
                     </a>
 
-                    <div *ngIf="showProjectSection" class="divider"><span></span></div>
+                    <div *ngIf="showProjectSection" class="divider">
+                        <div class="line"></div>
+                        <span class="label">
+                            {{ 'MENU.USERSECTION' | translate }}</span>
+                        <div class="line"></div>
+
+                    </div>
 
                     <a *ngIf="showUserSection" class="nav-item" [routerLinkActive]="['active']"
                         [routerLink]="[ '/users']" [routerLinkActiveOptions]="{ exact: true }">

console/src/app/app.component.scss

@@ -194,8 +194,23 @@
 }
 
 .divider {
-    display: block;
+    display: flex;
-    background-color: #ffffff10;
+    align-items: center;
-    height: 1px;
+    width: 100%;
     margin: .5rem 0;
+
+    span {
+        border: 1px solid #ffffff10;
+        padding: 2px 1rem;
+        border-radius: .5rem;
+        color: #8795a1;
+        font-size: 12px;
+    }
+    .line {
+        display: block;
+        background-color: #ffffff10;
+        height: 1px;
+        margin: .5rem 0;
+        flex: 1;
+    }
 }

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

@@ -77,25 +77,22 @@
 
         <ng-container matColumnDef="roleNamesList">
             <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }} </th>
-            <td mat-cell *matCellDef="let grant">
+            <td mat-cell *matCellDef="let grant; let i = index">
-                <!-- TODO check behaviour for empty role projects -->
+                <ng-container *ngIf="loadedProjectId !== grant.projectId">
-                <ng-container *ngIf="roleOptions.length === 0; else showOptions">
                     <span class="role app-label" *ngFor="let role of grant.roleKeysList">{{role}}</span>
                     <button mat-icon-button (click)="loadRoleOptions(grant.projectId)">
-                        <mat-icon>edit</mat-icon>
+                        <i class="las la-edit"></i>
                     </button>
                 </ng-container>
-                <ng-template #showOptions>
+                <mat-form-field class="form-field" appearance="outline" *ngIf="loadedProjectId === grant.projectId">
-                    <mat-form-field class="form-field" appearance="outline" *ngIf="projectId">
+                    <mat-label>{{ 'PROJECT.GRANT.TITLE' | translate }}</mat-label>
-                        <mat-label>{{ 'PROJECT.GRANT.TITLE' | translate }}</mat-label>
+                    <mat-select [(ngModel)]="grant.roleKeysList" multiple [disabled]="allowCreate == false"
-                        <mat-select [(ngModel)]="grant.roleKeysList" multiple [disabled]="allowCreate == false"
+                        (selectionChange)="updateRoles(grant, $event)">
-                            (selectionChange)="updateRoles(grant, $event)">
+                        <mat-option *ngFor="let role of roleOptions" [value]="role.key">
-                            <mat-option *ngFor="let role of roleOptions" [value]="role.key">
+                            {{role.key}}
-                                {{ role.displayName }} {{role.key}}
+                        </mat-option>
-                            </mat-option>
+                    </mat-select>
-                        </mat-select>
+                </mat-form-field>
-                    </mat-form-field>
-                </ng-template>
             </td>
         </ng-container>
 

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

@@ -37,6 +37,7 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
     public roleOptions: ProjectRoleView.AsObject[] = [];
     public routerLink: any = [''];
 
+    public loadedProjectId: string = '';
     constructor(
         private userService: MgmtUserService,
         private projectService: ProjectService,
@@ -121,16 +122,14 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
 
     public getRoleOptions(projectId: string): void {
         this.projectService.SearchProjectRoles(projectId, 100, 0).then(resp => {
+            this.loadedProjectId = projectId;
             this.roleOptions = resp.toObject().resultList;
-            console.log(this.roleOptions);
         });
     }
 
     updateRoles(grant: UserGrant.AsObject, selectionChange: MatSelectChange): void {
-        console.log(grant, selectionChange.value);
         this.userService.UpdateUserGrant(grant.id, grant.userId, selectionChange.value)
             .then((newmember: UserGrant) => {
-                console.log(newmember.toObject());
                 this.toast.showInfo('Grant updated!');
             }).catch(error => {
                 this.toast.showError(error.message);

console/src/app/pages/granted-projects/granted-project-detail/granted-project-detail.component.html

@@ -1,7 +1,7 @@
 <app-meta-layout>
     <div class="max-width-container">
         <div class="head" *ngIf="project?.id">
-            <a [routerLink]="[ '/projects' ]" mat-icon-button>
+            <a [routerLink]="[ '/granted-projects' ]" mat-icon-button>
                 <mat-icon class="icon">arrow_back</mat-icon>
             </a>
             <h1>{{ 'PROJECT.PAGES.TITLE' | translate }} {{project?.projectName}}</h1>
@@ -24,10 +24,6 @@
     </div>
     <metainfo class="side">
         <div class="details">
-            <div class="row">
-                <span class="first">{{'PROJECT.TYPE.TITLE' | translate}}:</span>
-                <span class="second">{{'PROJECT.TYPE.'+ ProjectType.PROJECTTYPE_GRANTED | translate}}</span>
-            </div>
             <div class="row">
                 <span class="first">{{'PROJECT.STATE.TITLE' | translate}}:</span>
                 <span *ngIf="project && project.state !== undefined"

console/src/app/pages/granted-projects/granted-project-grid/granted-project-grid.component.html

@@ -1,56 +1,59 @@
 <div class="view-toggle">
-    <div class="anim-list" @list *ngIf="selection.selected.length > 0">
+    <button (click)="changedView.emit(true)" mat-icon-button>
-        <!-- <ng-template appHasRole [appHasRole]="['project.write']">
-            <button (click)="deactivateProjects(selection.selected)" @animate
-                matTooltip="{{'PROJECT.TABLE.DEACTIVATE' | translate}}" class="left-button" mat-icon-button>
-                <i class="las la-toggle-off"></i>
-            </button>
-            <button @animate (click)="reactivateProjects(selection.selected)" class="left-button"
-                matTooltip="{{'PROJECT.TABLE.ACTIVATE' | translate}}" mat-icon-button>
-                <i class="las la-toggle-on"></i>
-            </button>
-        </ng-template> -->
-    </div>
-    <button [disabled]="selection.selected.length > 0" (click)="changedView.emit(true)" mat-icon-button>
         <i class="show list view las la-th-list"></i>
     </button>
 </div>
 <div class="container">
     <mat-progress-bar *ngIf="loading" class="spinner" color="accent" mode="indeterminate"></mat-progress-bar>
-    <div class="item card" *ngFor="let item of items; index as i" (click)="selectItem(item, $event)"
+
-        [ngClass]="{ selected: selection.isSelected(item), inactive: item.state !== ProjectState.PROJECTSTATE_ACTIVE}">
+    <p class="n-items" *ngIf="!loading && selection.selected.length > 0">{{'PROJECT.PAGES.PINNED' | translate}}</p>
-        <mat-icon matTooltip="select item" (click)="selection.toggle(item)" class="selection-icon">
+
-            check_circle</mat-icon>
+    <div class="item card" *ngFor="let item of selection.selected; index as i"
+        [ngClass]="{ inactive: item.state !== ProjectState.PROJECTSTATE_ACTIVE}"
+        [routerLink]="[item.projectId, 'grant', item.id]">
         <div class="text-part">
-            <span *ngIf="item.changeDate" class="top">last modified on
+            <span *ngIf="item.changeDate" class="top">{{'PROJECT.PAGES.LASTMODIFIED' | translate}}
                 {{
                         item.changeDate | timestampToDate | date: 'EEE dd. MMM, HH:mm'
             }}</span>
             <span class="name" *ngIf="item.projectName">{{ item.projectName }}</span>
-            <span class="description" *ngIf="item.grantedOrgName">{{item.grantedOrgName}}</span>
+            <span class="description" *ngIf="item.resourceOwnerName">{{item.resourceOwnerName}}</span>
-            <!-- <span class="description" *ngIf="item.state">{{'PROJECT.STATE.'+item.state | translate}}</span> -->
+            <span *ngIf="item.changeDate" class="created">{{'PROJECT.PAGES.CREATEDON' | translate}}
-            <span *ngIf="item.changeDate" class="created">created on
+                {{ item.creationDate | timestampToDate | date: 'EEE dd. MMM, HH:mm' }}</span>
-                {{
-                        item.creationDate | timestampToDate | date: 'EEE dd. MMM, HH:mm'
-            }}</span>
             <span class="fill-space"></span>
             <div class="icons">
             </div>
         </div>
-        <button [matMenuTriggerFor]="editMenu" class="edit-button" mat-icon-button>
+        <button [ngClass]="{ selected: selection.isSelected(item)}" (click)="selection.toggle(item)" class="edit-button"
-            <mat-icon>more_vert</mat-icon>
+            mat-icon-button>
+            <mat-icon>push_pin_outline</mat-icon>
         </button>
-
-        <mat-menu #editMenu="matMenu">
-            <ng-template matMenuContent>
-                <button (click)="selectItem(item)" mat-menu-item>
-                    {{'ACTIONS.VIEW' | translate}}
-                </button>
-                <button (click)="selection.toggle(item)" mat-menu-item>
-                    {{'ACTIONS.INFO' | translate}}
-                </button>
-            </ng-template>
-        </mat-menu>
     </div>
-    <p class="n-items" *ngIf="!loading && items.length === 0">{{'PROJECT.PAGES.NOITEMS' | translate}}</p>
+
+</div>
+<div class="container">
+    <p class="n-items" *ngIf="!loading && notPinned.length > 0">{{'PROJECT.PAGES.ALL' | translate}}</p>
+
+    <div class="item card" *ngFor="let item of notPinned; index as i" [routerLink]="[item.projectId, 'grant', item.id]"
+        [ngClass]="{ inactive: item.state !== ProjectState.PROJECTSTATE_ACTIVE}">
+        <div class="text-part">
+            <span *ngIf="item.changeDate" class="top">{{'PROJECT.PAGES.LASTMODIFIED' | translate}}
+                {{
+                        item.changeDate | timestampToDate | date: 'EEE dd. MMM, HH:mm'
+            }}</span>
+            <span class="name" *ngIf="item.projectName">{{ item.projectName }}</span>
+            <span class="description" *ngIf="item.resourceOwnerName">{{item.resourceOwnerName}}</span>
+            <span *ngIf="item.changeDate" class="created">{{'PROJECT.PAGES.CREATEDON' | translate}}
+                {{ item.creationDate | timestampToDate | date: 'EEE dd. MMM, HH:mm' }}</span>
+            <span class="fill-space"></span>
+            <div class="icons">
+            </div>
+        </div>
+        <button [ngClass]="{ selected: selection.isSelected(item)}" (click)="selection.toggle(item)" class="edit-button"
+            mat-icon-button>
+            <mat-icon>push_pin_outline</mat-icon>
+        </button>
+    </div>
+    <p class="n-items" *ngIf="!loading && items.length === 0 && selection.selected.length === 0">
+        {{'PROJECT.PAGES.NOITEMS' | translate}}</p>
 </div>

console/src/app/pages/granted-projects/granted-project-grid/granted-project-grid.component.scss

@@ -52,18 +52,6 @@
             color: #8795a1;
         }
 
-        .selection-icon {
-            opacity: 0;
-            position: absolute;
-            top: -12px;
-            left: -12px;
-            user-select: none;
-
-            &:hover {
-                color: white;
-            }
-        }
-
         img {
             height: 50px;
             width: 50px;
@@ -136,16 +124,26 @@
         }
 
         .edit-button {
+            opacity: 0;
+            user-select: none;            
             position: absolute;
             bottom: 0;
             right: 0;
             margin: 0;
             margin-bottom: 0.25rem;
+            color: #8795a1;
+
+            &:hover {
+                color: white;
+            }
+
+            &.selected {
+                opacity: 1;
+            }
         }
 
-
         &:hover {
-            .selection-icon {
+            .edit-button {
                 opacity: 1;
             }
 
@@ -163,7 +161,7 @@
                 }
             }
 
-            .selection-icon {
+            .edit-button {
                 opacity: 1;
             }
 

console/src/app/pages/granted-projects/granted-project-grid/granted-project-grid.component.ts

@@ -1,10 +1,8 @@
 import { animate, animateChild, query, stagger, style, transition, trigger } from '@angular/animations';
 import { SelectionModel } from '@angular/cdk/collections';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
-import { Router } from '@angular/router';
+import { ProjectGrantView, ProjectState, ProjectType } from 'src/app/proto/generated/management_pb';
-import { ProjectGrantView, ProjectState, ProjectType, ProjectView } from 'src/app/proto/generated/management_pb';
+import { AuthService } from 'src/app/services/auth.service';
-import { ProjectService } from 'src/app/services/project.service';
-import { ToastService } from 'src/app/services/toast.service';
 
 @Component({
     selector: 'app-granted-project-grid',
@@ -30,30 +28,73 @@ import { ToastService } from 'src/app/services/toast.service';
         ]),
     ],
 })
-export class GrantedProjectGridComponent {
+export class GrantedProjectGridComponent implements OnChanges {
     @Input() items: Array<ProjectGrantView.AsObject> = [];
+    public notPinned: Array<ProjectGrantView.AsObject> = [];
     @Output() newClicked: EventEmitter<boolean> = new EventEmitter();
     @Output() changedView: EventEmitter<boolean> = new EventEmitter();
     @Input() loading: boolean = false;
-
+    public selection: SelectionModel<ProjectGrantView.AsObject> = new SelectionModel<ProjectGrantView.AsObject>(true, []);
-    public selection: SelectionModel<ProjectView.AsObject> = new SelectionModel<ProjectView.AsObject>(true, []);
-    public selectedIndex: number = -1;
 
     public showNewProject: boolean = false;
     public ProjectState: any = ProjectState;
     public ProjectType: any = ProjectType;
 
-    constructor(private router: Router, private projectService: ProjectService, private toast: ToastService) { }
+    constructor(private authService: AuthService) {
+        this.selection.changed.subscribe(selection => {
+            this.setPrefixedItem('pinned-granted-projects', JSON.stringify(
+                this.selection.selected.map(item => item.projectId),
+            )).then(() => {
+                const filtered = this.notPinned.filter(item => item === selection.added.find(i => i === item));
+                filtered.forEach((f, i) => {
+                    this.notPinned.splice(i, 1);
+                });
 
-    public selectItem(item: ProjectGrantView.AsObject, event?: any): void {
+                this.notPinned.push(...selection.removed);
-        if (event && !event.target.classList.contains('mat-icon')) {
+            });
-            this.router.navigate(['granted-projects', item.projectId, 'grant', `${item.id}`]);
+        });
-        } else if (!event) {
-            this.router.navigate(['granted-projects', item.projectId, 'grant', `${item.id}`]);
-        }
     }
 
     public addItem(): void {
         this.newClicked.emit(true);
     }
+
+    public ngOnChanges(changes: SimpleChanges): void {
+        if (changes.items.currentValue && changes.items.currentValue.length > 0) {
+            this.notPinned = Object.assign([], this.items);
+            this.reorganizeItems();
+        }
+    }
+
+    public reorganizeItems(): void {
+        this.getPrefixedItem('pinned-granted-projects').then(storageEntry => {
+            if (storageEntry) {
+                const array: string[] = JSON.parse(storageEntry);
+                const toSelect: ProjectGrantView.AsObject[] = this.items.filter((item, index) => {
+                    if (array.includes(item.projectId)) {
+                        // this.notPinned.splice(index, 1);
+                        return true;
+                    }
+                });
+                this.selection.select(...toSelect);
+
+                const toNotPinned: ProjectGrantView.AsObject[] = this.items.filter((item, index) => {
+                    if (!array.includes(item.projectId)) {
+                        return true;
+                    }
+                });
+                this.notPinned = toNotPinned;
+            }
+        });
+    }
+
+    private async getPrefixedItem(key: string): Promise<string | null> {
+        const prefix = (await this.authService.GetActiveOrg()).id;
+        return localStorage.getItem(`${prefix}:${key}`);
+    }
+
+    private async setPrefixedItem(key: string, value: any): Promise<void> {
+        const prefix = (await this.authService.GetActiveOrg()).id;
+        return localStorage.setItem(`${prefix}:${key}`, value);
+    }
 }

console/src/app/pages/granted-projects/granted-project-list/granted-project-list.component.html

@@ -53,19 +53,13 @@
 
             <ng-container matColumnDef="name">
                 <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.NAME' | translate }} </th>
-                <td mat-cell *matCellDef="let project"> {{project.name}} </td>
+                <td mat-cell *matCellDef="let project"> {{project.projectName}} </td>
             </ng-container>
 
-            <ng-container matColumnDef="orgName">
+            <ng-container matColumnDef="resourceOwnerName">
-                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.ORGNAME' | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.RESOURCEOWNER' | translate }} </th>
                 <td class="pointer" mat-cell *matCellDef="let project">
-                    {{project.orgName}} </td>
+                    {{project.resourceOwnerName}} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="orgDomain">
-                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.ORGDOMAIN' | translate }} </th>
-                <td class="pointer" mat-cell *matCellDef="let project">
-                    {{project?.orgDomain}} </td>
             </ng-container>
 
             <ng-container matColumnDef="state">

console/src/app/pages/granted-projects/granted-project-list/granted-project-list.component.ts

@@ -40,7 +40,7 @@ export class GrantedProjectListComponent implements OnInit, OnDestroy {
         new MatTableDataSource<ProjectGrantView.AsObject>();
 
     public grantedProjectList: ProjectGrantView.AsObject[] = [];
-    public displayedColumns: string[] = ['select', 'name', 'orgName', 'orgDomain', 'state', 'creationDate', 'changeDate'];
+    public displayedColumns: string[] = ['select', 'name', 'resourceOwnerName', 'state', 'creationDate', 'changeDate'];
     public selection: SelectionModel<ProjectGrantView.AsObject> = new SelectionModel<ProjectGrantView.AsObject>(true, []);
 
     private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
@@ -88,6 +88,9 @@ export class GrantedProjectListComponent implements OnInit, OnDestroy {
         this.projectService.SearchGrantedProjects(limit, offset).then(res => {
             this.grantedProjectList = res.toObject().resultList;
             this.totalResult = res.toObject().totalResult;
+            if (this.totalResult > 5) {
+                this.grid = false;
+            }
             this.dataSource.data = this.grantedProjectList;
             this.loadingSubject.next(false);
         }).catch(error => {

console/src/app/pages/granted-projects/granted-projects.component.ts

@@ -1,29 +1,10 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { Subscription } from 'rxjs';
 
 @Component({
     selector: 'app-granted-projects',
     templateUrl: './granted-projects.component.html',
     styleUrls: ['./granted-projects.component.scss'],
 })
-export class GrantedProjectsComponent implements OnInit, OnDestroy {
+export class GrantedProjectsComponent {
-    // public projectId: string = '';
+    constructor() { }
-    // public grantId: string = '';
-    private sub: Subscription = new Subscription();
-    constructor(private route: ActivatedRoute,
-    ) {
-        // this.route.params.subscribe((params) => {
-        //     this.projectId = params.projectId;
-        //     this.grantId = params.grantId;
-        // });
-    }
-
-    ngOnInit(): void {
-    }
-
-
-    public ngOnDestroy(): void {
-        // this.sub.unsubscribe();
-    }
 }

console/src/app/pages/granted-projects/granted-projects.module.ts

@@ -7,7 +7,6 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { MatMenuModule } from '@angular/material/menu';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@@ -51,7 +50,6 @@ import { GrantedProjectsComponent } from './granted-projects.component';
         HasRoleModule,
         MatTableModule,
         MatPaginatorModule,
-        MatMenuModule,
         MatFormFieldModule,
         MatInputModule,
         ChangesModule,

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

@@ -23,7 +23,7 @@
             </div>
         </form>
 
-        <div *ngIf="name?.touched" @openClose>
+        <!-- <div *ngIf="name?.touched" @openClose>
             <p class="desc">{{ 'ORG.PAGES.ORGDOMAIN_VERIFICATION' | translate }}</p>
 
             <p>{{domain?.value}}/.well-known/caos-developer-domain-association.txt</p>
@@ -36,7 +36,7 @@
             </div>
 
             <p class="desc">{{ 'ORG.PAGES.ORGDOMAIN_VERIFICATION_SKIP' | translate }}</p>
-        </div>
+        </div> -->
     </ng-container>
 
     <ng-container *ngIf="currentCreateStep == createSteps">

console/src/app/pages/orgs/org-detail/org-detail.component.html

@@ -8,11 +8,8 @@
             <div *ngFor="let domain of domains" class="domain">
                 <span class="title">{{domain.domain}}</span>
                 <i matTooltip="verified" *ngIf="domain.verified" class="verified las la-check-circle"></i>
-                <i matTooltip="primary" *ngIf="domain.primary" class="primary las la-chess-queen"></i>
+                <i matTooltip="primary" *ngIf="domain.primary" class="primary las la-star"></i>
                 <span class="fill-space"></span>
-                <!-- <button disabled mat-icon-button
-                    matTooltip="download /.well-known/caos-developer-domain-association.txt and deploy it on your domain. Then verify"><i
-                        class="las la-file-download"></i></button> -->
                 <button matTooltip="Remove domain" color="warn" mat-icon-button (click)="removeDomain(domain.domain)"><i
                         class="las la-trash"></i></button>
             </div>
@@ -27,11 +24,6 @@
                 <button matTooltip="Add domain" mat-icon-button color="primary" (click)="saveNewOrgDomain()">
                     <mat-icon>check</mat-icon>
                 </button>
-
-                <!-- <button disabled mat-icon-button
-                    matTooltip="download /.well-known/caos-developer-domain-association.txt and deploy it on your domain. Then verify"><i
-                        class="las la-file-download"></i></button> -->
-                <!-- <button disabled mat-icon-button matTooltip="Verify"><i class=" las la-check-circle"></i></button> -->
             </div>
         </app-card>
 
@@ -43,12 +35,11 @@
     <metainfo class="side">
         <div class="details">
             <div class="row">
-                <span class="first">Domains:</span>
+                <span class="first">{{'ORG.PAGES.PRIMARYDOMAIN'  | translate}}</span>
-                <span class="second"><span style="display: block;"
+                <span class="second"><span style="display: block;">{{primaryDomain}}</span></span>
-                        *ngFor="let domain of domains">{{domain.domain}}</span></span>
             </div>
             <div class="row">
-                <span class="first">State:</span>
+                <span class="first">{{'ORG.PAGES.STATE'  | translate}}</span>
                 <span *ngIf="org && org.state !== undefined"
                     class="second">{{'ORG.STATE.'+org.state | translate}}</span>
             </div>

console/src/app/pages/orgs/org-detail/org-detail.component.ts

@@ -28,6 +28,7 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
     private subscription: Subscription = new Subscription();
 
     public domains: OrgDomainView.AsObject[] = [];
+    public primaryDomain: string = '';
     public newDomain: string = '';
 
     constructor(
@@ -53,6 +54,7 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
 
         this.orgService.SearchMyOrgDomains(0, 100).then(result => {
             this.domains = result.toObject().resultList;
+            this.primaryDomain = this.domains.find(domain => domain.primary)?.domain ?? '';
         });
     }
 

console/src/app/pages/owned-projects/owned-project-detail/owned-project-detail.component.html

@@ -13,31 +13,34 @@
                 </button>
             </ng-template>
 
+            <span class="fill-space"></span>
+
+            <button mat-stroked-button color="accent" [disabled]="isZitadel"
+                *ngIf="project?.state === ProjectState.PROJECTSTATE_ACTIVE" class="state-button"
+                (click)="changeState(ProjectState.PROJECTSTATE_INACTIVE)">{{'PROJECT.TABLE.DEACTIVATE' | translate}}</button>
+            <button mat-stroked-button color="accent" [disabled]="isZitadel"
+                *ngIf="project?.state === ProjectState.PROJECTSTATE_INACTIVE" class="state-button"
+                (click)="changeState(ProjectState.PROJECTSTATE_ACTIVE)">{{'PROJECT.TABLE.ACTIVATE' | translate}}</button>
+
             <div class="full-width">
-                <ng-container *ngIf="editstate">
+                <div class="line">
-                    <mat-form-field *ngIf="editstate && project?.name" class="formfield"
+                    <ng-container *ngIf="editstate">
-                        hintLabel="The name is required!">
+                        <mat-form-field *ngIf="editstate && project?.name" class="formfield"
-                        <mat-label>Project Name</mat-label>
+                            hintLabel="The name is required!">
-                        <input matInput [(ngModel)]="project.name" />
+                            <mat-label>{{'PROJECT.NAME' | translate}}</mat-label>
-                    </mat-form-field>
+                            <input matInput [(ngModel)]="project.name" />
-                    <button class="icon-button" *ngIf="editstate" mat-icon-button (click)="updateName()">
+                        </mat-form-field>
-                        <mat-icon>check</mat-icon>
+                        <button class="icon-button" *ngIf="editstate" mat-icon-button (click)="updateName()">
-                    </button>
+                            <mat-icon>check</mat-icon>
-                    <button mat-stroked-button color="accent" [disabled]="isZitadel"
+                        </button>
-                        *ngIf="project?.state === ProjectState.PROJECTSTATE_ACTIVE" class="second"
+                    </ng-container>
-                        (click)="changeState(ProjectState.PROJECTSTATE_INACTIVE)">{{'PROJECT.TABLE.DEACTIVATE' | translate}}</button>
+                    <span class="fill-space"></span>
-                    <button mat-stroked-button color="accent" [disabled]="isZitadel"
+                </div>
-                        *ngIf="project?.state === ProjectState.PROJECTSTATE_INACTIVE" class="second"
-                        (click)="changeState(ProjectState.PROJECTSTATE_ACTIVE)">{{'PROJECT.TABLE.ACTIVATE' | translate}}</button>
-                </ng-container>
                 <p class="desc">{{ 'PROJECT.PAGES.DESCRIPTION' | translate }}</p>
-                <p *ngIf="isZitadel" class="zitadel-warning">This belongs to Zitadel project. If you change something,
+                <p *ngIf="isZitadel" class="zitadel-warning">{{'PROJECT.PAGES.ZITADELPROJECT' | translate}}</p>
-                    Zitadel
-                    may not behave as intended!</p>
             </div>
         </div>
 
-        <!-- show only on owned projects-->
         <ng-container *ngIf="project">
             <ng-template appHasRole [appHasRole]="['project.app.read:' + project.projectId, 'project.app.read']">
                 <app-project-application-grid *ngIf="grid"
@@ -89,10 +92,6 @@
     </div>
     <metainfo class="side">
         <div class="details">
-            <div class="row">
-                <span class="first">{{'PROJECT.TYPE.TITLE' | translate}}:</span>
-                <span class="second">{{'PROJECT.TYPE.'+ ProjectType.PROJECTTYPE_OWNED | translate}}</span>
-            </div>
             <div class="row">
                 <span class="first">{{'PROJECT.STATE.TITLE' | translate}}:</span>
                 <span *ngIf="project && project.state !== undefined"

console/src/app/pages/owned-projects/owned-project-detail/owned-project-detail.component.scss

@@ -5,6 +5,14 @@
     flex-wrap: wrap;
     margin-bottom: 1rem;
 
+    .fill-space {
+        flex: 1;
+    }
+
+    .state-button {
+        border-radius: .5rem;
+    }
+
     a {
         display: block;
     }

console/src/app/pages/owned-projects/owned-project-grid/owned-project-grid.component.html

@@ -1,16 +1,4 @@
 <div class="view-toggle">
-    <div class="anim-list" @list *ngIf="selection.selected.length > 0">
-        <ng-template appHasRole [appHasRole]="['project.write']">
-            <button (click)="deactivateProjects(selection.selected)" @animate
-                matTooltip="{{'PROJECT.TABLE.DEACTIVATE' | translate}}" class="left-button" mat-icon-button>
-                <i class="las la-toggle-off"></i>
-            </button>
-            <button @animate (click)="reactivateProjects(selection.selected)" class="left-button"
-                matTooltip="{{'PROJECT.TABLE.ACTIVATE' | translate}}" mat-icon-button>
-                <i class="las la-toggle-on"></i>
-            </button>
-        </ng-template>
-    </div>
     <button [disabled]="selection.selected.length > 0" (click)="changedView.emit(true)" mat-icon-button>
         <i class="show list view las la-th-list"></i>
     </button>
@@ -18,19 +6,19 @@
 
 <div class="container">
     <mat-progress-bar *ngIf="loading" class="spinner" color="accent" mode="indeterminate"></mat-progress-bar>
-    <div class="item card" *ngFor="let item of items; index as i" (click)="selectItem(item, $event)"
+
-        [ngClass]="{ selected: selection.isSelected(item), inactive: item.state !== ProjectState.PROJECTSTATE_ACTIVE}">
+    <p class="n-items" *ngIf="!loading && selection.selected.length > 0">{{'PROJECT.PAGES.PINNED' | translate}}</p>
-        <mat-icon matTooltip="select item" (click)="selection.toggle(item)" class="selection-icon">
+
-            check_circle</mat-icon>
+    <div class="item card" *ngFor="let item of selection.selected; index as i" [routerLink]="[item.projectId]"
+        [ngClass]="{ inactive: item.state !== ProjectState.PROJECTSTATE_ACTIVE}">
         <div class="text-part">
-            <span *ngIf="item.changeDate" class="top">last modified on
+            <span *ngIf="item.changeDate" class="top">{{'PROJECT.PAGES.LASTMODIFIED' | translate}}
                 {{
                         item.changeDate | timestampToDate | date: 'EEE dd. MMM, HH:mm'
             }}</span>
             <span class="name" *ngIf="item.name">{{ item.name }}</span>
-            <!-- <span class="description" *ngIf="item.state">{{'PROJECT.STATE.'+item.state | translate}}</span> -->
 
-            <span *ngIf="item.changeDate" class="created">created on
+            <span *ngIf="item.changeDate" class="created">{{'PROJECT.PAGES.CREATEDON' | translate}}
                 {{
                         item.creationDate | timestampToDate | date: 'EEE dd. MMM, HH:mm'
             }}</span>
@@ -38,20 +26,37 @@
             <div class="icons">
             </div>
         </div>
-        <button [matMenuTriggerFor]="editMenu" class="edit-button" mat-icon-button>
+        <button [ngClass]="{ selected: selection.isSelected(item)}" (click)="selection.toggle(item)" class="edit-button"
-            <mat-icon>more_vert</mat-icon>
+            mat-icon-button>
+            <mat-icon>push_pin_outline</mat-icon>
         </button>
+    </div>
 
-        <mat-menu #editMenu="matMenu">
+</div>
-            <ng-template matMenuContent>
+<div class="container">
-                <button (click)="selectItem(item)" mat-menu-item>
+    <p class="n-items" *ngIf="!loading && notPinned.length > 0">{{'PROJECT.PAGES.ALL' | translate}}</p>
-                    {{'ACTIONS.VIEW' | translate}}
+
-                </button>
+    <div class="item card" *ngFor="let item of notPinned; index as i" [routerLink]="[item.projectId]"
-                <button (click)="selection.toggle(item)" mat-menu-item>
+        [ngClass]="{ inactive: item.state !== ProjectState.PROJECTSTATE_ACTIVE}">
-                    {{'ACTIONS.INFO' | translate}}
+        <div class="text-part">
-                </button>
+            <span *ngIf="item.changeDate" class="top">{{'PROJECT.PAGES.LASTMODIFIED' | translate}}
-            </ng-template>
+                {{
-        </mat-menu>
+                        item.changeDate | timestampToDate | date: 'EEE dd. MMM, HH:mm'
+            }}</span>
+            <span class="name" *ngIf="item.name">{{ item.name }}</span>
+
+            <span *ngIf="item.changeDate" class="created">{{'PROJECT.PAGES.CREATEDON' | translate}}
+                {{
+                        item.creationDate | timestampToDate | date: 'EEE dd. MMM, HH:mm'
+            }}</span>
+            <span class="fill-space"></span>
+            <div class="icons">
+            </div>
+        </div>
+        <button [ngClass]="{ selected: selection.isSelected(item)}" (click)="selection.toggle(item)" class="edit-button"
+            mat-icon-button>
+            <mat-icon>push_pin_outline</mat-icon>
+        </button>
     </div>
 
     <p class="n-items" *ngIf="!loading && items.length === 0">{{'PROJECT.PAGES.NOITEMS' | translate}}</p>

console/src/app/pages/owned-projects/owned-project-grid/owned-project-grid.component.scss

@@ -52,14 +52,6 @@
             color: #8795a1;
         }
 
-        .selection-icon {
-            opacity: 0;
-            position: absolute;
-            top: -12px;
-            left: -12px;
-            user-select: none;
-        }
-
         img {
             height: 50px;
             width: 50px;
@@ -132,16 +124,27 @@
         }
 
         .edit-button {
+            opacity: 0;
+            user-select: none;            
             position: absolute;
             bottom: 0;
             right: 0;
             margin: 0;
             margin-bottom: 0.25rem;
+            color: #8795a1;
+
+            &:hover {
+                color: white;
+            }
+
+            &.selected {
+                opacity: 1;
+            }
         }
 
 
         &:hover {
-            .selection-icon {
+            .edit-button {
                 opacity: 1;
             }
 
@@ -159,7 +162,7 @@
                 }
             }
 
-            .selection-icon {
+            .edit-button {
                 opacity: 1;
             }
 

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

@@ -1,10 +1,9 @@
 import { animate, animateChild, query, stagger, style, transition, trigger } from '@angular/animations';
 import { SelectionModel } from '@angular/cdk/collections';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { Router } from '@angular/router';
 import { ProjectState, ProjectType, ProjectView } from 'src/app/proto/generated/management_pb';
-import { ProjectService } from 'src/app/services/project.service';
+import { AuthService } from 'src/app/services/auth.service';
-import { ToastService } from 'src/app/services/toast.service';
 
 @Component({
     selector: 'app-owned-project-grid',
@@ -30,8 +29,10 @@ import { ToastService } from 'src/app/services/toast.service';
         ]),
     ],
 })
-export class OwnedProjectGridComponent {
+export class OwnedProjectGridComponent implements OnChanges {
     @Input() items: Array<ProjectView.AsObject> = [];
+    public notPinned: Array<ProjectView.AsObject> = [];
+
     @Output() newClicked: EventEmitter<boolean> = new EventEmitter();
     @Output() changedView: EventEmitter<boolean> = new EventEmitter();
     @Input() loading: boolean = false;
@@ -43,7 +44,20 @@ export class OwnedProjectGridComponent {
     public ProjectState: any = ProjectState;
     public ProjectType: any = ProjectType;
 
-    constructor(private router: Router, private projectService: ProjectService, private toast: ToastService) { }
+    constructor(private router: Router, private authService: AuthService) {
+        this.selection.changed.subscribe(selection => {
+            this.setPrefixedItem('pinned-projects', JSON.stringify(
+                this.selection.selected.map(item => item.projectId),
+            )).then(() => {
+                const filtered = this.notPinned.filter(item => item === selection.added.find(i => i === item));
+                filtered.forEach((f, i) => {
+                    this.notPinned.splice(i, 1);
+                });
+
+                this.notPinned.push(...selection.removed);
+            });
+        });
+    }
 
     public selectItem(item: ProjectView.AsObject, event?: any): void {
         if (event && !event.target.classList.contains('mat-icon')) {
@@ -57,23 +71,42 @@ export class OwnedProjectGridComponent {
         this.newClicked.emit(true);
     }
 
-    public reactivateProjects(selected: ProjectView.AsObject[]): void {
+    public ngOnChanges(changes: SimpleChanges): void {
-        Promise.all([selected.map(proj => {
+        if (changes.items.currentValue && changes.items.currentValue.length > 0) {
-            return this.projectService.ReactivateProject(proj.projectId);
+            this.notPinned = Object.assign([], this.items);
-        })]).then(() => {
+            this.reorganizeItems();
-            this.toast.showInfo('Successful reactivated all projects');
+        }
-        }).catch(error => {
+    }
-            this.toast.showError(error.message);
+
+    public reorganizeItems(): void {
+        this.getPrefixedItem('pinned-projects').then(storageEntry => {
+            if (storageEntry) {
+                const array: string[] = JSON.parse(storageEntry);
+                const toSelect: ProjectView.AsObject[] = this.items.filter((item, index) => {
+                    if (array.includes(item.projectId)) {
+                        // this.notPinned.splice(index, 1);
+                        return true;
+                    }
+                });
+                this.selection.select(...toSelect);
+
+                const toNotPinned: ProjectView.AsObject[] = this.items.filter((item, index) => {
+                    if (!array.includes(item.projectId)) {
+                        return true;
+                    }
+                });
+                this.notPinned = toNotPinned;
+            }
         });
     }
 
-    public deactivateProjects(selected: ProjectView.AsObject[]): void {
+    private async getPrefixedItem(key: string): Promise<string | null> {
-        Promise.all([selected.map(proj => {
+        const prefix = (await this.authService.GetActiveOrg()).id;
-            return this.projectService.DeactivateProject(proj.projectId);
+        return localStorage.getItem(`${prefix}:${key}`);
-        })]).then(() => {
+    }
-            this.toast.showInfo('Successful deactivated all projects');
+
-        }).catch(error => {
+    private async setPrefixedItem(key: string, value: any): Promise<void> {
-            this.toast.showError(error.message);
+        const prefix = (await this.authService.GetActiveOrg()).id;
-        });
+        return localStorage.setItem(`${prefix}:${key}`, value);
     }
 }

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

@@ -88,6 +88,9 @@ export class OwnedProjectListComponent implements OnInit, OnDestroy {
         this.projectService.SearchProjects(limit, offset).then(res => {
             this.ownedProjectList = res.toObject().resultList;
             this.totalResult = res.toObject().totalResult;
+            if (this.totalResult > 5) {
+                this.grid = false;
+            }
             this.dataSource.data = this.ownedProjectList;
             this.loadingSubject.next(false);
         }).catch(error => {

console/src/app/pages/owned-projects/owned-projects.component.ts

@@ -1,29 +1,10 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { Subscription } from 'rxjs';
 
 @Component({
     selector: 'app-owned-projects',
     templateUrl: './owned-projects.component.html',
     styleUrls: ['./owned-projects.component.scss'],
 })
-export class OwnedProjectsComponent implements OnInit, OnDestroy {
+export class OwnedProjectsComponent {
-    // public projectId: string = '';
+    constructor() { }
-    // public grantId: string = '';
-    private sub: Subscription = new Subscription();
-    constructor(private route: ActivatedRoute,
-    ) {
-        // this.route.params.subscribe((params) => {
-        //     this.projectId = params.projectId;
-        //     this.grantId = params.grantId;
-        // });
-    }
-
-    ngOnInit(): void {
-    }
-
-
-    public ngOnDestroy(): void {
-        // this.sub.unsubscribe();
-    }
 }

console/src/app/pages/owned-projects/owned-projects.module.ts

@@ -8,7 +8,6 @@ import { MatChipsModule } from '@angular/material/chips';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { MatMenuModule } from '@angular/material/menu';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@@ -64,7 +63,6 @@ import { ProjectGrantsComponent } from './project-grants/project-grants.componen
         MatInputModule,
         ChangesModule,
         UserListModule,
-        MatMenuModule,
         MatChipsModule,
         MatIconModule,
         MatButtonModule,

console/src/app/pages/owned-projects/project-grants/project-grants.component.html

@@ -50,12 +50,6 @@
                 {{grant.grantedOrgName}} </td>
         </ng-container>
 
-        <ng-container matColumnDef="grantedOrgDomain">
-            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.GRANTEDORGDOMAIN' | translate }} </th>
-            <td class="pointer" mat-cell *matCellDef="let grant">
-                {{grant.grantedOrgDomain}} </td>
-        </ng-container>
-
         <ng-container matColumnDef="creationDate">
             <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.CREATIONDATE' | translate }} </th>
             <td class="pointer" mat-cell *matCellDef="let grant">

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

@@ -1,13 +1,11 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { SelectionModel } from '@angular/cdk/collections';
 import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTable } from '@angular/material/table';
 import { tap } from 'rxjs/operators';
 import { ProjectGrant, ProjectMemberView } from 'src/app/proto/generated/management_pb';
 import { ProjectService } from 'src/app/services/project.service';
-import { ToastService } from 'src/app/services/toast.service';
 
 import { ProjectGrantsDataSource } from './project-grants-datasource';
 
@@ -34,9 +32,9 @@ export class ProjectGrantsComponent implements OnInit, AfterViewInit {
     public selectedGrantMembers: ProjectMemberView.AsObject[] = [];
 
     /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-    public displayedColumns: string[] = ['select', 'grantedOrgName', 'grantedOrgDomain', 'creationDate', 'changeDate', 'roleNamesList'];
+    public displayedColumns: string[] = ['select', 'grantedOrgName', 'creationDate', 'changeDate', 'roleNamesList'];
 
-    constructor(private projectService: ProjectService, private toast: ToastService, private dialog: MatDialog) { }
+    constructor(private projectService: ProjectService) { }
 
     public ngOnInit(): void {
         this.dataSource = new ProjectGrantsDataSource(this.projectService);

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

@@ -117,6 +117,9 @@
                         <button (click)="phoneEditState = false" mat-icon-button>
                             <mat-icon>close</mat-icon>
                         </button>
+                        <button *ngIf="user.phone" color="warn" (click)="deletePhone()" mat-icon-button>
+                            <i class="las la-trash"></i>
+                        </button>
                         <button [disabled]="!user.phone" type="button" color="primary" (click)="savePhone()"
                             mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
                     </ng-template>
@@ -129,10 +132,9 @@
 
     <metainfo *ngIf="user" class="side">
         <div class="details">
-            <div class="row" *ngIf="user?.loginNamesList">
+            <div class="row" *ngIf="user?.preferredLoginName">
-                <span class="first">Login Names:</span>
+                <span class="first">Preferred Loginname:</span>
-                <span class="second"><span style="display: block;"
+                <span class="second"><span style="display: block;">{{user.preferredLoginName}}</span></span>
-                        *ngFor="let login of user?.loginNamesList">{{login}}</span></span>
             </div>
         </div>
 

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

@@ -1,35 +1,13 @@
 import { Component, OnDestroy } from '@angular/core';
-import { AbstractControl, FormBuilder } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { TranslateService } from '@ngx-translate/core';
 import { Subscription } from 'rxjs';
 import { ChangeType } from 'src/app/modules/changes/changes.component';
 import { Gender, UserAddress, UserEmail, UserPhone, UserProfile, UserView } from 'src/app/proto/generated/auth_pb';
 import { AuthUserService } from 'src/app/services/auth-user.service';
-import { OrgService } from 'src/app/services/org.service';
 import { ToastService } from 'src/app/services/toast.service';
 
-import { CodeDialogComponent } from '../code-dialog/code-dialog.component';
+import { CodeDialogComponent } from './code-dialog/code-dialog.component';
-
-function passwordConfirmValidator(c: AbstractControl): any {
-    if (!c.parent || !c) {
-        return;
-    }
-    const pwd = c.parent.get('newPassword');
-    const cpwd = c.parent.get('confirmPassword');
-
-    if (!pwd || !cpwd) {
-        return;
-    }
-    if (pwd.value !== cpwd.value) {
-        return {
-            invalid: true,
-            notequal: {
-                valid: false,
-            },
-        };
-    }
-}
 
 @Component({
     selector: 'app-auth-user-detail',
@@ -58,9 +36,7 @@ export class AuthUserDetailComponent implements OnDestroy {
         public translate: TranslateService,
         private toast: ToastService,
         private userService: AuthUserService,
-        private fb: FormBuilder,
         private dialog: MatDialog,
-        private orgService: OrgService,
     ) {
         this.loading = true;
         this.getData().then(() => {
@@ -151,6 +127,16 @@ export class AuthUserDetailComponent implements OnDestroy {
         });
     }
 
+    public deletePhone(): void {
+        this.userService.RemoveMyUserPhone().then(() => {
+            this.toast.showInfo('Phone removed with success!');
+            this.user.phone = '';
+            this.phoneEditState = false;
+        }).catch(data => {
+            this.toast.showError(data.message);
+        });
+    }
+
     public savePhone(): void {
         this.phoneEditState = false;
         this.userService

console/src/app/pages/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.html

@@ -2,7 +2,11 @@
     <div class="col">
         <div class="row" *ngFor="let mfa of mfaSubject | async">
             <span>{{'USER.MFA.TYPE.'+ mfa.type | translate}}</span>
-            <span>{{'USER.MFA.STATE.'+ mfa.state | translate}}</span>
+            <i matTooltip="{{'USER.MFA.STATE.'+ mfa.state | translate}}" *ngIf="mfa.state === MFAState.MFASTATE_READY"
+                class="verified las la-check-circle"></i>
+            <i matTooltip="{{'USER.MFA.STATE.'+ mfa.state | translate}}"
+                *ngIf="mfa.state === MFAState.MFASTATE_NOT_READY || mfa.state === MFAState.MFASTATE_REMOVED"
+                class="primary las la-ban"></i>
             <button mat-icon-button (click)="deleteMFA(mfa.type)" color="warn"
                 matTooltip="{{'ACTIONS.DELETE' | translate}}">
                 <i class="las la-trash"></i>

console/src/app/pages/user-detail/code-dialog/code-dialog.module.ts

@@ -1,34 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { TranslateModule } from '@ngx-translate/core';
-
-import { CodeDialogComponent } from './code-dialog.component';
-
-@NgModule({
-    declarations: [
-        CodeDialogComponent,
-    ],
-    imports: [
-        CommonModule,
-        FormsModule,
-        MatDialogModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatButtonModule,
-        MatIconModule,
-        TranslateModule,
-    ],
-    entryComponents: [
-        CodeDialogComponent,
-    ],
-    exports: [
-        CodeDialogComponent,
-    ],
-})
-export class CodeDialogModule { }

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

@@ -9,8 +9,7 @@ describe('PasswordComponent', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             declarations: [PasswordComponent],
-        })
+        }).compileComponents();
-            .compileComponents();
     }));
 
     beforeEach(() => {

console/src/app/pages/user-detail/user-detail.module.ts

@@ -20,15 +20,15 @@ import { UserGrantsModule } from 'src/app/modules/user-grants/user-grants.module
 import { PipesModule } from 'src/app/pipes/pipes.module';
 
 import { AuthUserDetailComponent } from './auth-user-detail/auth-user-detail.component';
-import { AuthUserMfaComponent } from './auth-user-mfa/auth-user-mfa.component';
+import { AuthUserMfaComponent } from './auth-user-detail/auth-user-mfa/auth-user-mfa.component';
-import { CodeDialogModule } from './code-dialog/code-dialog.module';
+import { CodeDialogComponent } from './auth-user-detail/code-dialog/code-dialog.component';
+import { DialogOtpComponent } from './auth-user-detail/dialog-otp/dialog-otp.component';
 import { DetailFormModule } from './detail-form/detail-form.module';
-import { DialogOtpComponent } from './dialog-otp/dialog-otp.component';
+import { PasswordComponent } from './password/password.component';
 import { ThemeSettingComponent } from './theme-setting/theme-setting.component';
 import { UserDetailRoutingModule } from './user-detail-routing.module';
 import { UserDetailComponent } from './user-detail/user-detail.component';
 import { UserMfaComponent } from './user-mfa/user-mfa.component';
-import { PasswordComponent } from './password/password.component';
 
 @NgModule({
     declarations: [
@@ -39,6 +39,7 @@ import { PasswordComponent } from './password/password.component';
         UserMfaComponent,
         ThemeSettingComponent,
         PasswordComponent,
+        CodeDialogComponent,
     ],
     imports: [
         UserDetailRoutingModule,
@@ -53,7 +54,6 @@ import { PasswordComponent } from './password/password.component';
         PipesModule,
         MatFormFieldModule,
         UserGrantsModule,
-        CodeDialogModule,
         MatInputModule,
         MatButtonModule,
         MatIconModule,

console/src/app/pages/user-detail/user-detail/user-detail.component.html

@@ -6,6 +6,17 @@
             </a>
             <h1>{{ 'USER.PROFILE.TITLE' | translate }} {{user?.displayName}}</h1>
 
+            <span class="fill-space"></span>
+
+            <ng-template appHasRole [appHasRole]="['user.write', 'user.write:'+user?.id]">
+                <button mat-stroked-button color="accent" *ngIf="user?.state === UserState.USERSTATE_ACTIVE"
+                    class="state-button"
+                    (click)="changeState(UserState.USERSTATE_INACTIVE)">{{'USER.PAGES.DEACTIVATE' | translate}}</button>
+                <button mat-stroked-button color="accent" *ngIf="user?.state === UserState.USERSTATE_INACTIVE"
+                    class="state-button"
+                    (click)="changeState(UserState.USERSTATE_ACTIVE)">{{'USER.PAGES.REACTIVATE' | translate}}</button>
+            </ng-template>
+
             <p class="desc">{{ 'USER.PROFILE.DESCRIPTION' | translate }}</p>
         </div>
 
@@ -13,6 +24,19 @@
 
         <span *ngIf="!loading && !user">{{ 'USER.PAGES.NOUSER' | translate }}</span>
 
+        <app-card title="{{ 'USER.PAGES.LOGINNAMES' | translate }}"
+            description="{{ 'USER.PAGES.LOGINNAMESDESC' | translate }}" *ngIf="user">
+            <div class="login-name-row" *ngFor="let login of user?.loginNamesList">
+                <span>{{login}}</span>
+                <button color="primary" [disabled]="copied == login"
+                    [matTooltip]="(copied != login ? 'USER.PAGES.COPY' : 'USER.PAGES.COPIED' ) | translate"
+                    (click)="copytoclipboard(login)" mat-icon-button>
+                    <i *ngIf="copied != login" class="las la-clipboard"></i>
+                    <i *ngIf="copied == login" class="las la-clipboard-check"></i>
+                </button>
+            </div>
+        </app-card>
+
         <ng-template appHasRole [appHasRole]="['user.read', 'user.read:'+user?.id]">
             <app-card title="{{ 'USER.PROFILE.TITLE' | translate }}"
                 description="{{'USER.PROFILE.DESCRIPTION' | translate}}">
@@ -108,6 +132,9 @@
                         <button (click)="phoneEditState = false" mat-icon-button>
                             <mat-icon>close</mat-icon>
                         </button>
+                        <button *ngIf="user.phone" color="warn" (click)="deletePhone()" mat-icon-button>
+                            <i class="las la-trash"></i>
+                        </button>
                         <button [disabled]="!user.phone" type="button" color="primary" (click)="savePhone()"
                             mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
                     </ng-template>
@@ -126,10 +153,9 @@
 
     <metainfo *ngIf="user" class="side">
         <div class="details">
-            <div class="row" *ngIf="user?.loginNamesList">
+            <div class="row" *ngIf="user?.preferredLoginName">
-                <span class="first">Login Names:</span>
+                <span class="first">Preferred Loginname:</span>
-                <span class="second"><span style="display: block;"
+                <span class="second"><span style="display: block;">{{user.preferredLoginName}}</span></span>
-                        *ngFor="let login of user?.loginNamesList">{{login}}</span></span>
             </div>
         </div>
 

console/src/app/pages/user-detail/user-detail/user-detail.component.scss

@@ -21,6 +21,14 @@
       font-size: .9rem;
       color: #8795a1;
   }
+
+  .fill-space {
+      flex: 1;
+  }
+
+  .state-button {
+      border-radius: .5rem;
+  }
 }
 
 .card-actions {

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

@@ -36,6 +36,8 @@ export class UserDetailComponent implements OnInit, OnDestroy {
     public loading: boolean = false;
 
     public UserState: any = UserState;
+    public copied: string = '';
+
     constructor(
         public translate: TranslateService,
         private route: ActivatedRoute,
@@ -60,6 +62,22 @@ export class UserDetailComponent implements OnInit, OnDestroy {
         this.subscription.unsubscribe();
     }
 
+    public changeState(newState: UserState): void {
+        if (newState === UserState.USERSTATE_ACTIVE) {
+            this.mgmtUserService.ReactivateUser(this.user.id).then(() => {
+                this.toast.showInfo('reactivated User');
+            }).catch(error => {
+                this.toast.showError(error.message);
+            });
+        } else if (newState === UserState.USERSTATE_INACTIVE) {
+            this.mgmtUserService.DeactivateUser(this.user.id).then(() => {
+                this.toast.showInfo('deactivated User');
+            }).catch(error => {
+                this.toast.showError(error.message);
+            });
+        }
+    }
+
     public saveProfile(profileData: UserProfile.AsObject): void {
         this.user.firstName = profileData.firstName;
         this.user.lastName = profileData.lastName;
@@ -100,6 +118,16 @@ export class UserDetailComponent implements OnInit, OnDestroy {
         });
     }
 
+    public deletePhone(): void {
+        this.mgmtUserService.RemoveUserPhone(this.user.id).then(() => {
+            this.toast.showInfo('Phone removed with success!');
+            this.user.phone = '';
+            this.phoneEditState = false;
+        }).catch(data => {
+            this.toast.showError(data.message);
+        });
+    }
+
     public saveEmail(): void {
         this.emailEditState = false;
         this.mgmtUserService
@@ -117,6 +145,7 @@ export class UserDetailComponent implements OnInit, OnDestroy {
             .SaveUserPhone(this.user.id, this.user.phone).then((data: UserPhone) => {
                 this.toast.showInfo('Saved Phone');
                 this.user.phone = data.toObject().phone;
+                this.phoneEditState = false;
             }).catch(data => {
                 this.toast.showError(data.message);
             });
@@ -143,4 +172,22 @@ export class UserDetailComponent implements OnInit, OnDestroy {
                 this.toast.showError(data.message);
             });
     }
+
+    public copytoclipboard(value: string): void {
+        const selBox = document.createElement('textarea');
+        selBox.style.position = 'fixed';
+        selBox.style.left = '0';
+        selBox.style.top = '0';
+        selBox.style.opacity = '0';
+        selBox.value = value;
+        document.body.appendChild(selBox);
+        selBox.focus();
+        selBox.select();
+        document.execCommand('copy');
+        document.body.removeChild(selBox);
+        this.copied = value;
+        setTimeout(() => {
+            this.copied = '';
+        }, 3000);
+    }
 }

console/src/app/pages/user-detail/user-mfa/user-mfa.component.html

@@ -1,4 +1,5 @@
-<app-card title="{{'USER.MFA.TITLE' | translate}}" description="{{'USER.MFA.DESCRIPTION' | translate}}">
+<app-card title="{{'USER.MFA.TITLE' | translate}}" description="{{'USER.MFA.DESCRIPTION' | translate}}"
+    *ngIf="mfaSubject && (mfaSubject | async)?.length > 0">
     <div class="col">
         <div class="row" *ngFor="let mfa of mfaSubject | async">
             <span>{{'USER.MFA.TYPE.'+ mfa.type | translate}}</span>

console/src/app/proto/generated/auth_grpc_web_pb.d.ts

@@ -17,6 +17,7 @@ import {
   MyProjectOrgSearchRequest,
   MyProjectOrgSearchResponse,
   PasswordChange,
+  PasswordComplexityPolicy,
   UpdateUserAddressRequest,
   UpdateUserEmailRequest,
   UpdateUserPhoneRequest,
@@ -133,6 +134,13 @@ export class AuthServiceClient {
                response: UserPhone) => void
   ): grpcWeb.ClientReadableStream<UserPhone>;
 
+  removeMyUserPhone(
+    request: google_protobuf_empty_pb.Empty,
+    metadata: grpcWeb.Metadata | undefined,
+    callback: (err: grpcWeb.Error,
+               response: google_protobuf_empty_pb.Empty) => void
+  ): grpcWeb.ClientReadableStream<google_protobuf_empty_pb.Empty>;
+
   verifyMyUserPhone(
     request: VerifyUserPhoneRequest,
     metadata: grpcWeb.Metadata | undefined,
@@ -182,6 +190,13 @@ export class AuthServiceClient {
                response: google_protobuf_empty_pb.Empty) => void
   ): grpcWeb.ClientReadableStream<google_protobuf_empty_pb.Empty>;
 
+  getMyPasswordComplexityPolicy(
+    request: google_protobuf_empty_pb.Empty,
+    metadata: grpcWeb.Metadata | undefined,
+    callback: (err: grpcWeb.Error,
+               response: PasswordComplexityPolicy) => void
+  ): grpcWeb.ClientReadableStream<PasswordComplexityPolicy>;
+
   addMfaOTP(
     request: google_protobuf_empty_pb.Empty,
     metadata: grpcWeb.Metadata | undefined,
@@ -303,6 +318,11 @@ export class AuthServicePromiseClient {
     metadata?: grpcWeb.Metadata
   ): Promise<UserPhone>;
 
+  removeMyUserPhone(
+    request: google_protobuf_empty_pb.Empty,
+    metadata?: grpcWeb.Metadata
+  ): Promise<google_protobuf_empty_pb.Empty>;
+
   verifyMyUserPhone(
     request: VerifyUserPhoneRequest,
     metadata?: grpcWeb.Metadata
@@ -338,6 +358,11 @@ export class AuthServicePromiseClient {
     metadata?: grpcWeb.Metadata
   ): Promise<google_protobuf_empty_pb.Empty>;
 
+  getMyPasswordComplexityPolicy(
+    request: google_protobuf_empty_pb.Empty,
+    metadata?: grpcWeb.Metadata
+  ): Promise<PasswordComplexityPolicy>;
+
   addMfaOTP(
     request: google_protobuf_empty_pb.Empty,
     metadata?: grpcWeb.Metadata

console/src/app/proto/generated/auth_grpc_web_pb.js

@@ -1124,6 +1124,86 @@ proto.caos.zitadel.auth.api.v1.AuthServicePromiseClient.prototype.changeMyUserPh
 };
 
 
+/**
+ * @const
+ * @type {!grpc.web.MethodDescriptor<
+ *   !proto.google.protobuf.Empty,
+ *   !proto.google.protobuf.Empty>}
+ */
+const methodDescriptor_AuthService_RemoveMyUserPhone = new grpc.web.MethodDescriptor(
+  '/caos.zitadel.auth.api.v1.AuthService/RemoveMyUserPhone',
+  grpc.web.MethodType.UNARY,
+  google_protobuf_empty_pb.Empty,
+  google_protobuf_empty_pb.Empty,
+  /**
+   * @param {!proto.google.protobuf.Empty} request
+   * @return {!Uint8Array}
+   */
+  function(request) {
+    return request.serializeBinary();
+  },
+  google_protobuf_empty_pb.Empty.deserializeBinary
+);
+
+
+/**
+ * @const
+ * @type {!grpc.web.AbstractClientBase.MethodInfo<
+ *   !proto.google.protobuf.Empty,
+ *   !proto.google.protobuf.Empty>}
+ */
+const methodInfo_AuthService_RemoveMyUserPhone = new grpc.web.AbstractClientBase.MethodInfo(
+  google_protobuf_empty_pb.Empty,
+  /**
+   * @param {!proto.google.protobuf.Empty} request
+   * @return {!Uint8Array}
+   */
+  function(request) {
+    return request.serializeBinary();
+  },
+  google_protobuf_empty_pb.Empty.deserializeBinary
+);
+
+
+/**
+ * @param {!proto.google.protobuf.Empty} request The
+ *     request proto
+ * @param {?Object<string, string>} metadata User defined
+ *     call metadata
+ * @param {function(?grpc.web.Error, ?proto.google.protobuf.Empty)}
+ *     callback The callback function(error, response)
+ * @return {!grpc.web.ClientReadableStream<!proto.google.protobuf.Empty>|undefined}
+ *     The XHR Node Readable Stream
+ */
+proto.caos.zitadel.auth.api.v1.AuthServiceClient.prototype.removeMyUserPhone =
+    function(request, metadata, callback) {
+  return this.client_.rpcCall(this.hostname_ +
+      '/caos.zitadel.auth.api.v1.AuthService/RemoveMyUserPhone',
+      request,
+      metadata || {},
+      methodDescriptor_AuthService_RemoveMyUserPhone,
+      callback);
+};
+
+
+/**
+ * @param {!proto.google.protobuf.Empty} request The
+ *     request proto
+ * @param {?Object<string, string>} metadata User defined
+ *     call metadata
+ * @return {!Promise<!proto.google.protobuf.Empty>}
+ *     A native promise that resolves to the response
+ */
+proto.caos.zitadel.auth.api.v1.AuthServicePromiseClient.prototype.removeMyUserPhone =
+    function(request, metadata) {
+  return this.client_.unaryCall(this.hostname_ +
+      '/caos.zitadel.auth.api.v1.AuthService/RemoveMyUserPhone',
+      request,
+      metadata || {},
+      methodDescriptor_AuthService_RemoveMyUserPhone);
+};
+
+
 /**
  * @const
  * @type {!grpc.web.MethodDescriptor<
@@ -1684,6 +1764,86 @@ proto.caos.zitadel.auth.api.v1.AuthServicePromiseClient.prototype.changeMyPasswo
 };
 
 
+/**
+ * @const
+ * @type {!grpc.web.MethodDescriptor<
+ *   !proto.google.protobuf.Empty,
+ *   !proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy>}
+ */
+const methodDescriptor_AuthService_GetMyPasswordComplexityPolicy = new grpc.web.MethodDescriptor(
+  '/caos.zitadel.auth.api.v1.AuthService/GetMyPasswordComplexityPolicy',
+  grpc.web.MethodType.UNARY,
+  google_protobuf_empty_pb.Empty,
+  proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy,
+  /**
+   * @param {!proto.google.protobuf.Empty} request
+   * @return {!Uint8Array}
+   */
+  function(request) {
+    return request.serializeBinary();
+  },
+  proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.deserializeBinary
+);
+
+
+/**
+ * @const
+ * @type {!grpc.web.AbstractClientBase.MethodInfo<
+ *   !proto.google.protobuf.Empty,
+ *   !proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy>}
+ */
+const methodInfo_AuthService_GetMyPasswordComplexityPolicy = new grpc.web.AbstractClientBase.MethodInfo(
+  proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy,
+  /**
+   * @param {!proto.google.protobuf.Empty} request
+   * @return {!Uint8Array}
+   */
+  function(request) {
+    return request.serializeBinary();
+  },
+  proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.deserializeBinary
+);
+
+
+/**
+ * @param {!proto.google.protobuf.Empty} request The
+ *     request proto
+ * @param {?Object<string, string>} metadata User defined
+ *     call metadata
+ * @param {function(?grpc.web.Error, ?proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy)}
+ *     callback The callback function(error, response)
+ * @return {!grpc.web.ClientReadableStream<!proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy>|undefined}
+ *     The XHR Node Readable Stream
+ */
+proto.caos.zitadel.auth.api.v1.AuthServiceClient.prototype.getMyPasswordComplexityPolicy =
+    function(request, metadata, callback) {
+  return this.client_.rpcCall(this.hostname_ +
+      '/caos.zitadel.auth.api.v1.AuthService/GetMyPasswordComplexityPolicy',
+      request,
+      metadata || {},
+      methodDescriptor_AuthService_GetMyPasswordComplexityPolicy,
+      callback);
+};
+
+
+/**
+ * @param {!proto.google.protobuf.Empty} request The
+ *     request proto
+ * @param {?Object<string, string>} metadata User defined
+ *     call metadata
+ * @return {!Promise<!proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy>}
+ *     A native promise that resolves to the response
+ */
+proto.caos.zitadel.auth.api.v1.AuthServicePromiseClient.prototype.getMyPasswordComplexityPolicy =
+    function(request, metadata) {
+  return this.client_.unaryCall(this.hostname_ +
+      '/caos.zitadel.auth.api.v1.AuthService/GetMyPasswordComplexityPolicy',
+      request,
+      metadata || {},
+      methodDescriptor_AuthService_GetMyPasswordComplexityPolicy);
+};
+
+
 /**
  * @const
  * @type {!grpc.web.MethodDescriptor<

console/src/app/proto/generated/auth_pb.d.ts

@@ -1302,6 +1302,68 @@ export namespace Change {
   }
 }
 
+export class PasswordComplexityPolicy extends jspb.Message {
+  getId(): string;
+  setId(value: string): void;
+
+  getDescription(): string;
+  setDescription(value: string): void;
+
+  getCreationDate(): google_protobuf_timestamp_pb.Timestamp | undefined;
+  setCreationDate(value?: google_protobuf_timestamp_pb.Timestamp): void;
+  hasCreationDate(): boolean;
+  clearCreationDate(): void;
+
+  getChangeDate(): google_protobuf_timestamp_pb.Timestamp | undefined;
+  setChangeDate(value?: google_protobuf_timestamp_pb.Timestamp): void;
+  hasChangeDate(): boolean;
+  clearChangeDate(): void;
+
+  getMinLength(): number;
+  setMinLength(value: number): void;
+
+  getHasLowercase(): boolean;
+  setHasLowercase(value: boolean): void;
+
+  getHasUppercase(): boolean;
+  setHasUppercase(value: boolean): void;
+
+  getHasNumber(): boolean;
+  setHasNumber(value: boolean): void;
+
+  getHasSymbol(): boolean;
+  setHasSymbol(value: boolean): void;
+
+  getSequence(): number;
+  setSequence(value: number): void;
+
+  getIsDefault(): boolean;
+  setIsDefault(value: boolean): void;
+
+  serializeBinary(): Uint8Array;
+  toObject(includeInstance?: boolean): PasswordComplexityPolicy.AsObject;
+  static toObject(includeInstance: boolean, msg: PasswordComplexityPolicy): PasswordComplexityPolicy.AsObject;
+  static serializeBinaryToWriter(message: PasswordComplexityPolicy, writer: jspb.BinaryWriter): void;
+  static deserializeBinary(bytes: Uint8Array): PasswordComplexityPolicy;
+  static deserializeBinaryFromReader(message: PasswordComplexityPolicy, reader: jspb.BinaryReader): PasswordComplexityPolicy;
+}
+
+export namespace PasswordComplexityPolicy {
+  export type AsObject = {
+    id: string,
+    description: string,
+    creationDate?: google_protobuf_timestamp_pb.Timestamp.AsObject,
+    changeDate?: google_protobuf_timestamp_pb.Timestamp.AsObject,
+    minLength: number,
+    hasLowercase: boolean,
+    hasUppercase: boolean,
+    hasNumber: boolean,
+    hasSymbol: boolean,
+    sequence: number,
+    isDefault: boolean,
+  }
+}
+
 export enum UserSessionState { 
   USERSESSIONSTATE_UNSPECIFIED = 0,
   USERSESSIONSTATE_ACTIVE = 1,

console/src/app/proto/generated/auth_pb.js

@@ -43,6 +43,7 @@ goog.exportSymbol('proto.caos.zitadel.auth.api.v1.OIDCClientAuth', null, global)
 goog.exportSymbol('proto.caos.zitadel.auth.api.v1.OIDCResponseType', null, global);
 goog.exportSymbol('proto.caos.zitadel.auth.api.v1.Org', null, global);
 goog.exportSymbol('proto.caos.zitadel.auth.api.v1.PasswordChange', null, global);
+goog.exportSymbol('proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy', null, global);
 goog.exportSymbol('proto.caos.zitadel.auth.api.v1.PasswordID', null, global);
 goog.exportSymbol('proto.caos.zitadel.auth.api.v1.PasswordRequest', null, global);
 goog.exportSymbol('proto.caos.zitadel.auth.api.v1.SearchMethod', null, global);
@@ -870,6 +871,27 @@ if (goog.DEBUG && !COMPILED) {
    */
   proto.caos.zitadel.auth.api.v1.Change.displayName = 'proto.caos.zitadel.auth.api.v1.Change';
 }
+/**
+ * Generated by JsPbCodeGenerator.
+ * @param {Array=} opt_data Optional initial data array, typically from a
+ * server response, or constructed directly in Javascript. The array is used
+ * in place and becomes part of the constructed object. It is not cloned.
+ * If no data is provided, the constructed object will be empty, but still
+ * valid.
+ * @extends {jspb.Message}
+ * @constructor
+ */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy = function(opt_data) {
+  jspb.Message.initialize(this, opt_data, 0, -1, null, null);
+};
+goog.inherits(proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy, jspb.Message);
+if (goog.DEBUG && !COMPILED) {
+  /**
+   * @public
+   * @override
+   */
+  proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.displayName = 'proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy';
+}
 
 /**
  * List of repeated fields within this message type.
@@ -10049,6 +10071,451 @@ proto.caos.zitadel.auth.api.v1.Change.prototype.hasData = function() {
 };
 
 
+
+
+
+if (jspb.Message.GENERATE_TO_OBJECT) {
+/**
+ * Creates an object representation of this proto suitable for use in Soy templates.
+ * Field names that are reserved in JavaScript and will be renamed to pb_name.
+ * To access a reserved field use, foo.pb_<name>, eg, foo.pb_default.
+ * For the list of reserved names please see:
+ *     com.google.apps.jspb.JsClassTemplate.JS_RESERVED_WORDS.
+ * @param {boolean=} opt_includeInstance Whether to include the JSPB instance
+ *     for transitional soy proto support: http://goto/soy-param-migration
+ * @return {!Object}
+ */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.toObject = function(opt_includeInstance) {
+  return proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.toObject(opt_includeInstance, this);
+};
+
+
+/**
+ * Static version of the {@see toObject} method.
+ * @param {boolean|undefined} includeInstance Whether to include the JSPB
+ *     instance for transitional soy proto support:
+ *     http://goto/soy-param-migration
+ * @param {!proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy} msg The msg instance to transform.
+ * @return {!Object}
+ * @suppress {unusedLocalVariables} f is only used for nested messages
+ */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.toObject = function(includeInstance, msg) {
+  var f, obj = {
+    id: jspb.Message.getFieldWithDefault(msg, 1, ""),
+    description: jspb.Message.getFieldWithDefault(msg, 2, ""),
+    creationDate: (f = msg.getCreationDate()) && google_protobuf_timestamp_pb.Timestamp.toObject(includeInstance, f),
+    changeDate: (f = msg.getChangeDate()) && google_protobuf_timestamp_pb.Timestamp.toObject(includeInstance, f),
+    minLength: jspb.Message.getFieldWithDefault(msg, 5, 0),
+    hasLowercase: jspb.Message.getFieldWithDefault(msg, 6, false),
+    hasUppercase: jspb.Message.getFieldWithDefault(msg, 7, false),
+    hasNumber: jspb.Message.getFieldWithDefault(msg, 8, false),
+    hasSymbol: jspb.Message.getFieldWithDefault(msg, 9, false),
+    sequence: jspb.Message.getFieldWithDefault(msg, 10, 0),
+    isDefault: jspb.Message.getFieldWithDefault(msg, 11, false)
+  };
+
+  if (includeInstance) {
+    obj.$jspbMessageInstance = msg;
+  }
+  return obj;
+};
+}
+
+
+/**
+ * Deserializes binary data (in protobuf wire format).
+ * @param {jspb.ByteSource} bytes The bytes to deserialize.
+ * @return {!proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy}
+ */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.deserializeBinary = function(bytes) {
+  var reader = new jspb.BinaryReader(bytes);
+  var msg = new proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy;
+  return proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.deserializeBinaryFromReader(msg, reader);
+};
+
+
+/**
+ * Deserializes binary data (in protobuf wire format) from the
+ * given reader into the given message object.
+ * @param {!proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy} msg The message object to deserialize into.
+ * @param {!jspb.BinaryReader} reader The BinaryReader to use.
+ * @return {!proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy}
+ */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.deserializeBinaryFromReader = function(msg, reader) {
+  while (reader.nextField()) {
+    if (reader.isEndGroup()) {
+      break;
+    }
+    var field = reader.getFieldNumber();
+    switch (field) {
+    case 1:
+      var value = /** @type {string} */ (reader.readString());
+      msg.setId(value);
+      break;
+    case 2:
+      var value = /** @type {string} */ (reader.readString());
+      msg.setDescription(value);
+      break;
+    case 3:
+      var value = new google_protobuf_timestamp_pb.Timestamp;
+      reader.readMessage(value,google_protobuf_timestamp_pb.Timestamp.deserializeBinaryFromReader);
+      msg.setCreationDate(value);
+      break;
+    case 4:
+      var value = new google_protobuf_timestamp_pb.Timestamp;
+      reader.readMessage(value,google_protobuf_timestamp_pb.Timestamp.deserializeBinaryFromReader);
+      msg.setChangeDate(value);
+      break;
+    case 5:
+      var value = /** @type {number} */ (reader.readUint64());
+      msg.setMinLength(value);
+      break;
+    case 6:
+      var value = /** @type {boolean} */ (reader.readBool());
+      msg.setHasLowercase(value);
+      break;
+    case 7:
+      var value = /** @type {boolean} */ (reader.readBool());
+      msg.setHasUppercase(value);
+      break;
+    case 8:
+      var value = /** @type {boolean} */ (reader.readBool());
+      msg.setHasNumber(value);
+      break;
+    case 9:
+      var value = /** @type {boolean} */ (reader.readBool());
+      msg.setHasSymbol(value);
+      break;
+    case 10:
+      var value = /** @type {number} */ (reader.readUint64());
+      msg.setSequence(value);
+      break;
+    case 11:
+      var value = /** @type {boolean} */ (reader.readBool());
+      msg.setIsDefault(value);
+      break;
+    default:
+      reader.skipField();
+      break;
+    }
+  }
+  return msg;
+};
+
+
+/**
+ * Serializes the message to binary data (in protobuf wire format).
+ * @return {!Uint8Array}
+ */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.serializeBinary = function() {
+  var writer = new jspb.BinaryWriter();
+  proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.serializeBinaryToWriter(this, writer);
+  return writer.getResultBuffer();
+};
+
+
+/**
+ * Serializes the given message to binary data (in protobuf wire
+ * format), writing to the given BinaryWriter.
+ * @param {!proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy} message
+ * @param {!jspb.BinaryWriter} writer
+ * @suppress {unusedLocalVariables} f is only used for nested messages
+ */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.serializeBinaryToWriter = function(message, writer) {
+  var f = undefined;
+  f = message.getId();
+  if (f.length > 0) {
+    writer.writeString(
+      1,
+      f
+    );
+  }
+  f = message.getDescription();
+  if (f.length > 0) {
+    writer.writeString(
+      2,
+      f
+    );
+  }
+  f = message.getCreationDate();
+  if (f != null) {
+    writer.writeMessage(
+      3,
+      f,
+      google_protobuf_timestamp_pb.Timestamp.serializeBinaryToWriter
+    );
+  }
+  f = message.getChangeDate();
+  if (f != null) {
+    writer.writeMessage(
+      4,
+      f,
+      google_protobuf_timestamp_pb.Timestamp.serializeBinaryToWriter
+    );
+  }
+  f = message.getMinLength();
+  if (f !== 0) {
+    writer.writeUint64(
+      5,
+      f
+    );
+  }
+  f = message.getHasLowercase();
+  if (f) {
+    writer.writeBool(
+      6,
+      f
+    );
+  }
+  f = message.getHasUppercase();
+  if (f) {
+    writer.writeBool(
+      7,
+      f
+    );
+  }
+  f = message.getHasNumber();
+  if (f) {
+    writer.writeBool(
+      8,
+      f
+    );
+  }
+  f = message.getHasSymbol();
+  if (f) {
+    writer.writeBool(
+      9,
+      f
+    );
+  }
+  f = message.getSequence();
+  if (f !== 0) {
+    writer.writeUint64(
+      10,
+      f
+    );
+  }
+  f = message.getIsDefault();
+  if (f) {
+    writer.writeBool(
+      11,
+      f
+    );
+  }
+};
+
+
+/**
+ * optional string id = 1;
+ * @return {string}
+ */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.getId = function() {
+  return /** @type {string} */ (jspb.Message.getFieldWithDefault(this, 1, ""));
+};
+
+
+/** @param {string} value */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.setId = function(value) {
+  jspb.Message.setProto3StringField(this, 1, value);
+};
+
+
+/**
+ * optional string description = 2;
+ * @return {string}
+ */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.getDescription = function() {
+  return /** @type {string} */ (jspb.Message.getFieldWithDefault(this, 2, ""));
+};
+
+
+/** @param {string} value */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.setDescription = function(value) {
+  jspb.Message.setProto3StringField(this, 2, value);
+};
+
+
+/**
+ * optional google.protobuf.Timestamp creation_date = 3;
+ * @return {?proto.google.protobuf.Timestamp}
+ */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.getCreationDate = function() {
+  return /** @type{?proto.google.protobuf.Timestamp} */ (
+    jspb.Message.getWrapperField(this, google_protobuf_timestamp_pb.Timestamp, 3));
+};
+
+
+/** @param {?proto.google.protobuf.Timestamp|undefined} value */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.setCreationDate = function(value) {
+  jspb.Message.setWrapperField(this, 3, value);
+};
+
+
+/**
+ * Clears the message field making it undefined.
+ */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.clearCreationDate = function() {
+  this.setCreationDate(undefined);
+};
+
+
+/**
+ * Returns whether this field is set.
+ * @return {boolean}
+ */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.hasCreationDate = function() {
+  return jspb.Message.getField(this, 3) != null;
+};
+
+
+/**
+ * optional google.protobuf.Timestamp change_date = 4;
+ * @return {?proto.google.protobuf.Timestamp}
+ */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.getChangeDate = function() {
+  return /** @type{?proto.google.protobuf.Timestamp} */ (
+    jspb.Message.getWrapperField(this, google_protobuf_timestamp_pb.Timestamp, 4));
+};
+
+
+/** @param {?proto.google.protobuf.Timestamp|undefined} value */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.setChangeDate = function(value) {
+  jspb.Message.setWrapperField(this, 4, value);
+};
+
+
+/**
+ * Clears the message field making it undefined.
+ */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.clearChangeDate = function() {
+  this.setChangeDate(undefined);
+};
+
+
+/**
+ * Returns whether this field is set.
+ * @return {boolean}
+ */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.hasChangeDate = function() {
+  return jspb.Message.getField(this, 4) != null;
+};
+
+
+/**
+ * optional uint64 min_length = 5;
+ * @return {number}
+ */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.getMinLength = function() {
+  return /** @type {number} */ (jspb.Message.getFieldWithDefault(this, 5, 0));
+};
+
+
+/** @param {number} value */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.setMinLength = function(value) {
+  jspb.Message.setProto3IntField(this, 5, value);
+};
+
+
+/**
+ * optional bool has_lowercase = 6;
+ * Note that Boolean fields may be set to 0/1 when serialized from a Java server.
+ * You should avoid comparisons like {@code val === true/false} in those cases.
+ * @return {boolean}
+ */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.getHasLowercase = function() {
+  return /** @type {boolean} */ (jspb.Message.getFieldWithDefault(this, 6, false));
+};
+
+
+/** @param {boolean} value */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.setHasLowercase = function(value) {
+  jspb.Message.setProto3BooleanField(this, 6, value);
+};
+
+
+/**
+ * optional bool has_uppercase = 7;
+ * Note that Boolean fields may be set to 0/1 when serialized from a Java server.
+ * You should avoid comparisons like {@code val === true/false} in those cases.
+ * @return {boolean}
+ */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.getHasUppercase = function() {
+  return /** @type {boolean} */ (jspb.Message.getFieldWithDefault(this, 7, false));
+};
+
+
+/** @param {boolean} value */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.setHasUppercase = function(value) {
+  jspb.Message.setProto3BooleanField(this, 7, value);
+};
+
+
+/**
+ * optional bool has_number = 8;
+ * Note that Boolean fields may be set to 0/1 when serialized from a Java server.
+ * You should avoid comparisons like {@code val === true/false} in those cases.
+ * @return {boolean}
+ */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.getHasNumber = function() {
+  return /** @type {boolean} */ (jspb.Message.getFieldWithDefault(this, 8, false));
+};
+
+
+/** @param {boolean} value */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.setHasNumber = function(value) {
+  jspb.Message.setProto3BooleanField(this, 8, value);
+};
+
+
+/**
+ * optional bool has_symbol = 9;
+ * Note that Boolean fields may be set to 0/1 when serialized from a Java server.
+ * You should avoid comparisons like {@code val === true/false} in those cases.
+ * @return {boolean}
+ */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.getHasSymbol = function() {
+  return /** @type {boolean} */ (jspb.Message.getFieldWithDefault(this, 9, false));
+};
+
+
+/** @param {boolean} value */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.setHasSymbol = function(value) {
+  jspb.Message.setProto3BooleanField(this, 9, value);
+};
+
+
+/**
+ * optional uint64 sequence = 10;
+ * @return {number}
+ */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.getSequence = function() {
+  return /** @type {number} */ (jspb.Message.getFieldWithDefault(this, 10, 0));
+};
+
+
+/** @param {number} value */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.setSequence = function(value) {
+  jspb.Message.setProto3IntField(this, 10, value);
+};
+
+
+/**
+ * optional bool is_default = 11;
+ * Note that Boolean fields may be set to 0/1 when serialized from a Java server.
+ * You should avoid comparisons like {@code val === true/false} in those cases.
+ * @return {boolean}
+ */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.getIsDefault = function() {
+  return /** @type {boolean} */ (jspb.Message.getFieldWithDefault(this, 11, false));
+};
+
+
+/** @param {boolean} value */
+proto.caos.zitadel.auth.api.v1.PasswordComplexityPolicy.prototype.setIsDefault = function(value) {
+  jspb.Message.setProto3BooleanField(this, 11, value);
+};
+
+
 /**
  * @enum {number}
  */

console/src/app/proto/generated/management_grpc_web_pb.d.ts

@@ -309,6 +309,13 @@ export class ManagementServiceClient {
                response: UserPhone) => void
   ): grpcWeb.ClientReadableStream<UserPhone>;
 
+  removeUserPhone(
+    request: UserID,
+    metadata: grpcWeb.Metadata | undefined,
+    callback: (err: grpcWeb.Error,
+               response: google_protobuf_empty_pb.Empty) => void
+  ): grpcWeb.ClientReadableStream<google_protobuf_empty_pb.Empty>;
+
   resendPhoneVerificationCode(
     request: UserID,
     metadata: grpcWeb.Metadata | undefined,
@@ -1085,6 +1092,11 @@ export class ManagementServicePromiseClient {
     metadata?: grpcWeb.Metadata
   ): Promise<UserPhone>;
 
+  removeUserPhone(
+    request: UserID,
+    metadata?: grpcWeb.Metadata
+  ): Promise<google_protobuf_empty_pb.Empty>;
+
   resendPhoneVerificationCode(
     request: UserID,
     metadata?: grpcWeb.Metadata

console/src/app/proto/generated/management_grpc_web_pb.js

@@ -2086,6 +2086,86 @@ proto.caos.zitadel.management.api.v1.ManagementServicePromiseClient.prototype.ch
 };
 
 
+/**
+ * @const
+ * @type {!grpc.web.MethodDescriptor<
+ *   !proto.caos.zitadel.management.api.v1.UserID,
+ *   !proto.google.protobuf.Empty>}
+ */
+const methodDescriptor_ManagementService_RemoveUserPhone = new grpc.web.MethodDescriptor(
+  '/caos.zitadel.management.api.v1.ManagementService/RemoveUserPhone',
+  grpc.web.MethodType.UNARY,
+  proto.caos.zitadel.management.api.v1.UserID,
+  google_protobuf_empty_pb.Empty,
+  /**
+   * @param {!proto.caos.zitadel.management.api.v1.UserID} request
+   * @return {!Uint8Array}
+   */
+  function(request) {
+    return request.serializeBinary();
+  },
+  google_protobuf_empty_pb.Empty.deserializeBinary
+);
+
+
+/**
+ * @const
+ * @type {!grpc.web.AbstractClientBase.MethodInfo<
+ *   !proto.caos.zitadel.management.api.v1.UserID,
+ *   !proto.google.protobuf.Empty>}
+ */
+const methodInfo_ManagementService_RemoveUserPhone = new grpc.web.AbstractClientBase.MethodInfo(
+  google_protobuf_empty_pb.Empty,
+  /**
+   * @param {!proto.caos.zitadel.management.api.v1.UserID} request
+   * @return {!Uint8Array}
+   */
+  function(request) {
+    return request.serializeBinary();
+  },
+  google_protobuf_empty_pb.Empty.deserializeBinary
+);
+
+
+/**
+ * @param {!proto.caos.zitadel.management.api.v1.UserID} request The
+ *     request proto
+ * @param {?Object<string, string>} metadata User defined
+ *     call metadata
+ * @param {function(?grpc.web.Error, ?proto.google.protobuf.Empty)}
+ *     callback The callback function(error, response)
+ * @return {!grpc.web.ClientReadableStream<!proto.google.protobuf.Empty>|undefined}
+ *     The XHR Node Readable Stream
+ */
+proto.caos.zitadel.management.api.v1.ManagementServiceClient.prototype.removeUserPhone =
+    function(request, metadata, callback) {
+  return this.client_.rpcCall(this.hostname_ +
+      '/caos.zitadel.management.api.v1.ManagementService/RemoveUserPhone',
+      request,
+      metadata || {},
+      methodDescriptor_ManagementService_RemoveUserPhone,
+      callback);
+};
+
+
+/**
+ * @param {!proto.caos.zitadel.management.api.v1.UserID} request The
+ *     request proto
+ * @param {?Object<string, string>} metadata User defined
+ *     call metadata
+ * @return {!Promise<!proto.google.protobuf.Empty>}
+ *     A native promise that resolves to the response
+ */
+proto.caos.zitadel.management.api.v1.ManagementServicePromiseClient.prototype.removeUserPhone =
+    function(request, metadata) {
+  return this.client_.unaryCall(this.hostname_ +
+      '/caos.zitadel.management.api.v1.ManagementService/RemoveUserPhone',
+      request,
+      metadata || {},
+      methodDescriptor_ManagementService_RemoveUserPhone);
+};
+
+
 /**
  * @const
  * @type {!grpc.web.MethodDescriptor<

console/src/app/services/auth-user.service.ts

@@ -156,6 +156,14 @@ export class AuthUserService {
         );
     }
 
+    public async RemoveMyUserPhone(): Promise<Empty> {
+        return await this.request(
+            c => c.removeMyUserPhone,
+            new Empty(),
+            f => f,
+        );
+    }
+
     private async getMyzitadelPermissions(): Promise<any> {
         return await this.request(
             c => c.getMyZitadelPermissions,

console/src/app/services/mgmt-user.service.ts

@@ -197,6 +197,16 @@ export class MgmtUserService {
         );
     }
 
+    public async RemoveUserPhone(id: string): Promise<Empty> {
+        const req = new UserID();
+        req.setId(id);
+        return await this.request(
+            c => c.removeUserPhone,
+            req,
+            f => f,
+        );
+    }
+
     public async DeactivateUser(id: string): Promise<UserPhone> {
         const req = new UserID();
         req.setId(id);

console/src/app/services/storage.service.ts

@@ -1,8 +1,6 @@
 import { Injectable } from '@angular/core';
 import { OAuthStorage } from 'angular-oauth2-oidc';
 
-import { GrpcService } from './grpc.service';
-
 
 @Injectable({
     providedIn: 'root',
@@ -11,7 +9,7 @@ import { GrpcService } from './grpc.service';
 export class StorageService implements OAuthStorage {
     private storage: Storage = window.sessionStorage;
 
-    constructor(private grpcService: GrpcService) { }
+    constructor() { }
 
     public setItem<TValue = string>(key: string, value: TValue): void {
         this.storage.setItem(this.getPrefixedKey(key), JSON.stringify(value));

console/src/assets/i18n/de.json

@@ -20,12 +20,14 @@
     },
     "MENU": {
         "PERSONAL_INFO": "Persönliche Informationen",
-        "IAM":"IAM",
+        "IAM":"Administration",
         "ORGANIZATION": "Organisation",
+        "PROJECTSSECTION":"Projekte",
         "PROJECT": "Projekte",
         "GRANTEDPROJECT":"Berechtigte Projekte",
+        "USERSECTION":"Benutzer",
         "USER": "Benutzer",
-        "LOGOUT": "abmelden",
+        "LOGOUT": "alle Benutzer abmelden",
         "NEWORG":"Neue Organisation",
         "IAMADMIN":"Sie sind ein IAM Administrator. Sie haben erweiterte Berechtigungen!",
         "SHOWORGS":"Alle organisationen anzeigen"
@@ -64,7 +66,9 @@
             "LOGINNAMESDESC":"Mit diesen Namen können Sie sich anmelden",
             "COPY":"In die Zwischenablage kopieren",
             "COPIED":"In die Zwischenablage kopiert!",
-            "NOUSER":"Kein User"
+            "NOUSER":"Kein User",
+            "REACTIVATE":"Reaktivieren",
+            "DEACTIVATE":"Deaktivieren"
         },
         "MFA": {
             "TITLE": "Multifaktor-Authentifizierung",
@@ -220,7 +224,9 @@
             "ORGDOMAIN_VERIFICATION_SKIP":"Sie können die Überprüfung vorerst überspringen und Ihre Organisation weiter erstellen. Um Ihre Organisation jedoch verwenden zu können, muss dieser Schritt abgeschlossen sein!",
             "ORGDETAILUSER_TITLE":"Organisationsbesitzer hinzufügen",
             "DOWNLOAD_FILE":"File download",
-            "SELECTORGTOOLTIP":"Wähle diese Organisation"
+            "SELECTORGTOOLTIP":"Wähle diese Organisation",
+            "PRIMARYDOMAIN":"Primäre Domain",
+            "STATE":"Status"
         },
         "DOMAINS": {
             "TITLE":"Domains",
@@ -330,7 +336,11 @@
             "TYPE":{
                 "OWNED":"Eigene Projekte",
                 "GRANTED":"Berechtigte Projekte"
-            }
+            },
+            "PINNED":"Angepinnt",
+            "ALL": "Alle",
+            "CREATEDON":"erstellt am",
+            "LASTMODIFIED":"zuletzt verändert am"
         },
         "STATE": {
             "TITLE":"Status",
@@ -420,7 +430,8 @@
             "STATE":"Status",
             "TYPE":"Typ",
             "CREATIONDATE":"Erstelldatum",
-            "CHANGEDATE":"Letzte Änderung"
+            "CHANGEDATE":"Letzte Änderung",
+            "RESOURCEOWNER":"Besitzer"
         }
     },
     "APP": {

console/src/assets/i18n/en.json

@@ -20,12 +20,14 @@
     },
     "MENU": {
         "PERSONAL_INFO": "Personal Information",
-        "IAM":"IAM",
+        "IAM":"Administration",
         "ORGANIZATION": "Organization",
+        "PROJECTSSECTION":"Projects",
         "PROJECT": "Projects",
         "GRANTEDPROJECT":"Granted Projects",
+        "USERSECTION":"Benutzer",
         "USER": "Users",
-        "LOGOUT": "Log out",
+        "LOGOUT": "Logout all users",
         "NEWORG":"New Organization",
         "IAMADMIN":"You are an IAM Administrator. Note that you have enhanced permissions!",
         "SHOWORGS":"Show all organizations"
@@ -64,7 +66,9 @@
             "LOGINNAMESDESC":"You can log into zitadel with these names",
             "COPY":"Copy to clipboard",
             "COPIED":"Copied to clipboard!",
-            "NOUSER":"No User"
+            "NOUSER":"No User",
+            "REACTIVATE":"Reactivate",
+            "DEACTIVATE":"Deactivate"
         },
         "MFA": {
             "TITLE": "Multifactor Authentication",
@@ -221,16 +225,18 @@
             "ORGDOMAIN_VERIFICATION_SKIP":"You can skip verification for now and continue to create your organization, but in order to use your organization this step has to be completed!",
             "ORGDETAILUSER_TITLE":"Configure Organization Owner",
             "DOWNLOAD_FILE":"Download file",
-            "SELECTORGTOOLTIP":"Select this organization"
+            "SELECTORGTOOLTIP":"Select this organization",
+            "PRIMARYDOMAIN":"Primary Domain",
+            "STATE":"State"
         },
         "DOMAINS": {
             "TITLE":"Domains",
             "DESCRIPTION":"Configure your domains on which your users will be registered."
         },
         "STATE": {
-            "0": "nicht definiert",
+            "0": "not defined",
-            "1": "aktiv",
+            "1": "active",
-            "2": "inaktiv"
+            "2": "deactivated"
         },
         "MEMBER": {
             "TITLE":"Organization Managers",
@@ -331,7 +337,11 @@
             "TYPE":{
                 "OWNED":"Owned Projects",
                 "GRANTED":"Granted Projects"
-            }
+            },
+            "PINNED":"Pinned",
+            "ALL": "All",
+            "CREATEDON":"created on",
+            "LASTMODIFIED":"last modified on"
         },
         "STATE": {
             "TITLE":"State",
@@ -421,7 +431,8 @@
             "STATE":"Status",
             "TYPE":"Type",
             "CREATIONDATE":"Created At",
-            "CHANGEDATE":"Last Modified"
+            "CHANGEDATE":"Last Modified",
+            "RESOURCEOWNER":"Owner"
         }
     },
     "APP": {

console/src/styles/table.scss

@@ -22,7 +22,7 @@
         color: mat-color($foreground, text);
         white-space: nowrap;
         background-color: #8795a1;
-        padding: .5rem 1rem;
+        padding: 3px 1rem;
     }
 
     td {