feat(console): pinned org list, project grant detail view, state change, i18n, domain dialog, policy refactor, theme fixes, refactor user and projects (#449)

* pinned organisations

* project grant detail, state update, user-list pad

* rm entry components

* members nav, i18n, disable actions on non active

* add org domain dialog

* mv password policy rm to detail view

* prefix pinned orgs for userid, fix collapsed pad

* fix app back navigation

* rem pwd required validator

* fix org item overflow

* routing

* move users modules to users page

* reorganize projects

* remove child init of translate

* hide same preferred loginname

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

@@ -12,7 +12,8 @@ const routes: Routes = [
     },
     {
         path: 'granted-projects',
-        loadChildren: () => import('./pages/granted-projects/granted-projects.module').then(m => m.GrantedProjectsModule),
+        loadChildren: () => import('./pages/projects/granted-projects/granted-projects.module')
+            .then(m => m.GrantedProjectsModule),
         canActivate: [AuthGuard, RoleGuard],
         data: {
             roles: ['project.read'],
@@ -20,20 +21,16 @@ const routes: Routes = [
     },
     {
         path: 'projects',
-        loadChildren: () => import('./pages/owned-projects/owned-projects.module').then(m => m.OwnedProjectsModule),
+        loadChildren: () => import('./pages/projects/owned-projects/owned-projects.module')
+            .then(m => m.OwnedProjectsModule),
         canActivate: [AuthGuard, RoleGuard],
         data: {
             roles: ['project.read'],
         },
     },
-    {
-        path: 'user',
-        loadChildren: () => import('./pages/user-detail/user-detail.module').then(m => m.UserDetailModule),
-        canActivate: [AuthGuard],
-    },
     {
         path: 'users',
-        loadChildren: () => import('./pages/user-list/user-list.module').then(m => m.UserListModule),
+        loadChildren: () => import('./pages/users/users.module').then(m => m.UsersModule),
         canActivate: [AuthGuard, RoleGuard],
         data: {
             roles: ['user.read'],
@@ -55,7 +52,6 @@ const routes: Routes = [
             roles: ['org.read'],
         },
     },
-
     {
         path: 'grant-create/project/:projectid/grant/:grantid',
         loadChildren: () => import('src/app/pages/user-grant-create/user-grant-create.module')

console/src/app/app.component.html

@@ -54,7 +54,7 @@
                 <div class="list">
                     <ng-container *ngIf="authService.authenticationChanged | async">
                         <a class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }"
-                            [routerLink]="['/user/me']">
+                            [routerLink]="['/users/me']">
                             <i class="icon las la-user-circle"></i>
                             <span class="label">{{ 'MENU.PERSONAL_INFO' | translate }}</span>
                         </a>
@@ -104,7 +104,7 @@
                             <div class="line"></div>
                         </div>
 
-                        <a class="nav-item" [routerLinkActive]="['active']" [routerLink]="[ '/users']"
+                        <a class="nav-item" [routerLinkActive]="['active']" [routerLink]="[ '/users/all']"
                             [routerLinkActiveOptions]="{ exact: true }">
                             <i class="icon las la-users"></i>
                             <span class="label">{{ 'MENU.USER' | translate }}</span>

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

@@ -20,7 +20,7 @@ export class AccountsCardComponent implements OnInit {
     constructor(public authService: AuthService, private router: Router, private userService: AuthUserService) {
         this.userService.getMyUserSessions().then(sessions => {
             this.users = sessions.toObject().userSessionsList;
-            const index = this.users.findIndex(user => user.userName === this.profile.userName);
+            const index = this.users.findIndex(user => user.loginName === this.profile.preferredLoginName);
             this.users.splice(index, 1);
 
             this.loadingUsers = false;
@@ -34,7 +34,7 @@ export class AccountsCardComponent implements OnInit {
     }
 
     public editUserProfile(): void {
-        this.router.navigate(['user/me']);
+        this.router.navigate(['users/me']);
         this.close.emit();
     }
 

console/src/app/modules/add-member-dialog/member-create-dialog.module.ts

@@ -28,8 +28,5 @@ import { MemberCreateDialogComponent } from './member-create-dialog.component';
         SearchRolesAutocompleteModule,
         OrgMemberRolesAutocompleteModule,
     ],
-    entryComponents: [
-        MemberCreateDialogComponent,
-    ],
 })
 export class MemberCreateDialogModule { }

console/src/app/modules/meta-layout/meta-layout.component.scss

@@ -17,11 +17,11 @@
     .meta {
         position: relative;
         flex: 1 0 300px;
+        padding: 1rem;
 
 		@media only screen and (min-width: 1500px) {
 			flex-basis: 400px;
 		}
-        padding: 1rem;
         
         .meta-content {
             max-height: calc(100vh - 60px);
@@ -32,6 +32,7 @@
         &.hidden {
             flex: 0 0 0 !important;
             width: 0;
+            padding: 1px;
 
             .hide {
                 transform: rotate(180deg);

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

@@ -29,6 +29,8 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
 
     @Input() allowCreate: boolean = false;
     @Input() allowDelete: boolean = false;
+    @Input() public disabled: boolean = false;
+
 
     @Input() userId: string = '';
     @Input() projectId: string = '';

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

@@ -14,8 +14,5 @@ import { WarnDialogComponent } from './warn-dialog.component';
         TranslateModule,
         MatButtonModule,
     ],
-    entryComponents: [
-        WarnDialogComponent,
-    ],
 })
 export class WarnDialogModule { }

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

@@ -32,7 +32,7 @@
             <span class="fill-space"></span>
             <div class="footer">
                 <a color="accent" mat-button
-                    [routerLink]="['/user/me']">{{'HOME.SECURITYANDPRIVACY_BUTTON' | translate}}</a>
+                    [routerLink]="['/users/me']">{{'HOME.SECURITYANDPRIVACY_BUTTON' | translate}}</a>
             </div>
         </div>
 
@@ -75,7 +75,7 @@
                 </div>
                 <span class="fill-space"></span>
                 <div class="footer">
-                    <a color="accent" mat-button [routerLink]="['/user/me']">{{'HOME.USERS_BUTTON' | translate}}</a>
+                    <a color="accent" mat-button [routerLink]="['/users/me']">{{'HOME.USERS_BUTTON' | translate}}</a>
                 </div>
             </div>
         </ng-template>

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

@@ -1,10 +1,8 @@
 import { CommonModule } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { HttpLoaderFactory } from 'src/app/app.module';
+import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 
 import { HomeRoutingModule } from './home-routing.module';
@@ -20,13 +18,7 @@ import { HomeComponent } from './home.component';
         HasRoleModule,
         HomeRoutingModule,
         MatButtonModule,
-        TranslateModule.forChild({
-            loader: {
-                provide: TranslateLoader,
-                useFactory: HttpLoaderFactory,
-                deps: [HttpClient],
-            },
-        }),
+        TranslateModule,
     ],
 })
 export class HomeModule { }

console/src/app/pages/iam/iam-members/iam-members.component.html

@@ -1,5 +1,11 @@
 <div class="max-width-container">
     <div class="container">
+        <div class="left">
+            <a [routerLink]="[ '/iam']" mat-icon-button>
+                <mat-icon class="icon">arrow_back</mat-icon>
+            </a>
+        </div>
+        <div class="right">
             <div class="head">
                 <h1>{{ 'IAM.MEMBER.TITLE' | translate }}</h1>
                 <p class="desc">{{ 'IAM.MEMBER.DESCRIPTION' | translate }}</p>
@@ -25,8 +31,8 @@
                     </button>
                 </ng-template>
                 <ng-template appHasRole [appHasRole]="['org.member.write']">
-                <a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()" color="primary"
-                    mat-raised-button>
+                    <a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()"
+                        color="primary" mat-raised-button>
                         <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
                     </a>
                 </ng-template>
@@ -36,7 +42,8 @@
                 <div class="spinner-container" *ngIf="dataSource?.loading$ | async">
                     <mat-spinner diameter="50"></mat-spinner>
                 </div>
-            <table mat-table class="background-style full-width-table" aria-label="Elements" [dataSource]="dataSource">
+                <table mat-table class="background-style full-width-table" aria-label="Elements"
+                    [dataSource]="dataSource">
                     <ng-container matColumnDef="select">
                         <th class="selection" mat-header-cell *matHeaderCellDef>
                             <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
@@ -89,8 +96,10 @@
                     </tr>
                 </table>
 
-            <mat-paginator class="background-style" #paginator [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
+                <mat-paginator class="background-style" #paginator [pageSize]="50"
+                    [pageSizeOptions]="[25, 50, 100, 250]">
                 </mat-paginator>
             </div>
         </div>
     </div>
+</div>

console/src/app/pages/iam/iam-members/iam-members.component.scss

@@ -1,6 +1,22 @@
 .container {
+    display: flex;
     padding-bottom: 3rem;
 
+    .left {
+        width: 100px;
+        display: flex;
+        padding: 1rem;
+        justify-content: center;
+
+        a {
+            margin-top: .2rem;
+        }
+    }
+
+    .right {
+        flex: 1;
+        padding-top: 1rem;
+
         .head {
             display: flex;
             align-items: center;
@@ -24,6 +40,7 @@
             }
         }
     }
+}
 
 .table-header-row {
   display: flex;

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

@@ -3,14 +3,13 @@ import { Location } from '@angular/common';
 import { Component } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
+import { lowerCaseValidator, numberValidator, symbolValidator, upperCaseValidator } from 'src/app/pages/validators';
 import { CreateOrgRequest, CreateUserRequest, Gender, OrgSetUpResponse } from 'src/app/proto/generated/admin_pb';
 import { PasswordComplexityPolicy } from 'src/app/proto/generated/auth_pb';
 import { AdminService } from 'src/app/services/admin.service';
 import { AuthUserService } from 'src/app/services/auth-user.service';
 import { ToastService } from 'src/app/services/toast.service';
 
-import { lowerCaseValidator, numberValidator, symbolValidator, upperCaseValidator } from '../../user-detail/validators';
-
 function passwordConfirmValidator(c: AbstractControl): any {
     if (!c.parent || !c) {
         return;
@@ -64,7 +63,7 @@ export class OrgCreateComponent {
         private fb: FormBuilder,
         private authUserService: AuthUserService,
     ) {
-        const validators: Validators[] = [Validators.required];
+        const validators: Validators[] = [];
 
         this.orgForm = this.fb.group({
             name: ['', [Validators.required]],

console/src/app/pages/orgs/org-create/org-create.module.ts

@@ -1,5 +1,4 @@
 import { CommonModule } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -7,8 +6,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { HttpLoaderFactory } from 'src/app/app.module';
+import { TranslateModule } from '@ngx-translate/core';
 import { PipesModule } from 'src/app/pipes/pipes.module';
 
 import { OrgCreateRoutingModule } from './org-create-routing.module';
@@ -27,13 +25,7 @@ import { OrgCreateComponent } from './org-create.component';
         MatIconModule,
         MatSelectModule,
         PipesModule,
-        TranslateModule.forChild({
-            loader: {
-                provide: TranslateLoader,
-                useFactory: HttpLoaderFactory,
-                deps: [HttpClient],
-            },
-        }),
+        TranslateModule,
     ],
 })
 export class OrgCreateModule { }

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

@@ -0,0 +1,18 @@
+<span class="title" mat-dialog-title>{{'ORG.DOMAINS.ADD.TITLE' | translate}}</span>
+<div mat-dialog-content>
+    <p class="desc"> {{'ORG.DOMAINS.ADD.DESCRIPTION' | translate}}</p>
+
+    <mat-form-field label="Access Code" required="true">
+        <mat-label>Code</mat-label>
+        <input matInput [(ngModel)]="newdomain" />
+    </mat-form-field>
+</div>
+<div mat-dialog-actions class="action">
+    <button mat-button (click)="closeDialog()">
+        {{'ACTIONS.CANCEL' | translate}}
+    </button>
+
+    <button color="warn" mat-raised-button class="ok-button" [disabled]="!newdomain" (click)="closeDialogWithSuccess()">
+        {{'ACTIONS.ADD' | translate}}
+    </button>
+</div>

console/src/app/pages/orgs/org-detail/add-domain-dialog/add-domain-dialog.component.scss

@@ -0,0 +1,26 @@
+.title {
+    font-size: 1.2rem;
+    margin-top: 0;
+}
+
+.desc {
+    color: #8795a1;
+    font-size: .9rem;
+}
+
+mat-form-field {
+    width: 100%;
+}
+
+.action {
+    display: flex;
+    justify-content: flex-end;
+
+    .ok-button {
+      margin-left: 0.5rem;
+    }
+
+    button {
+      border-radius: 0.5rem;
+    }
+}

console/src/app/pages/orgs/org-detail/add-domain-dialog/add-domain-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddDomainDialogComponent } from './add-domain-dialog.component';
+
+describe('WarnDialogComponent', () => {
+    let component: AddDomainDialogComponent;
+    let fixture: ComponentFixture<AddDomainDialogComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [AddDomainDialogComponent],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(AddDomainDialogComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,26 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+    selector: 'app-add-domain-dialog',
+    templateUrl: './add-domain-dialog.component.html',
+    styleUrls: ['./add-domain-dialog.component.scss'],
+})
+export class AddDomainDialogComponent implements OnInit {
+    public newdomain: string = '';
+    constructor(
+        public dialogRef: MatDialogRef<AddDomainDialogComponent>,
+        @Inject(MAT_DIALOG_DATA) public data: any,
+    ) { }
+
+    ngOnInit(): void {
+    }
+
+    public closeDialog(): void {
+        this.dialogRef.close(false);
+    }
+
+    public closeDialogWithSuccess(): void {
+        this.dialogRef.close(this.newdomain);
+    }
+}

console/src/app/pages/orgs/org-detail/add-domain-dialog/add-domain-dialog.module.ts

@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { AddDomainDialogComponent } from './add-domain-dialog.component';
+
+@NgModule({
+    declarations: [AddDomainDialogComponent],
+    imports: [
+        CommonModule,
+        TranslateModule,
+        MatButtonModule,
+        MatFormFieldModule,
+        MatInputModule,
+        FormsModule,
+    ],
+})
+export class AddDomainDialogModule { }

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

@@ -15,16 +15,8 @@
             </div>
 
             <p class="new-desc">{{'ORG.PAGES.ORGDOMAIN_VERIFICATION' | translate}}</p>
-            <div class="new-row">
-                <mat-form-field appearance="outline">
-                    <mat-label>new domain</mat-label>
-                    <input matInput [(ngModel)]="newDomain" />
-                </mat-form-field>
-
-                <button matTooltip="Add domain" mat-icon-button color="primary" (click)="saveNewOrgDomain()">
-                    <mat-icon>check</mat-icon>
-                </button>
-            </div>
+            <button matTooltip="Add domain" mat-raised-button color="primary"
+                (click)="addNewDomain()">{{'ORG.DOMAINS.NEW' | translate}} </button>
         </app-card>
 
         <ng-template appHasRole [appHasRole]="['policy.read']">

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

@@ -81,16 +81,6 @@ h1 {
     color: #818a8a;
 }
 
-.new-row {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-
-    mat-form-field {
-        flex: 1;
-    }
-}
-
 .side {
     .details {
         margin-bottom: 1rem;

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

@@ -11,6 +11,8 @@ import { Org, OrgDomainView, OrgMember, OrgMemberSearchResponse, OrgState } from
 import { OrgService } from 'src/app/services/org.service';
 import { ToastService } from 'src/app/services/toast.service';
 
+import { AddDomainDialogComponent } from './add-domain-dialog/add-domain-dialog.component';
+
 
 @Component({
     selector: 'app-org-detail',
@@ -31,7 +33,6 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
 
     public domains: OrgDomainView.AsObject[] = [];
     public primaryDomain: string = '';
-    public newDomain: string = '';
 
     constructor(
         private dialog: MatDialog,
@@ -64,23 +65,32 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
     public changeState(event: MatButtonToggleChange | any): void {
         if (event.value === OrgState.ORGSTATE_ACTIVE) {
             this.orgService.ReactivateMyOrg().then(() => {
-                this.toast.showInfo('Reactivated Org');
+                this.toast.showInfo('ORG.TOAST.REACTIVATED', true);
             }).catch((error) => {
                 this.toast.showError(error);
             });
         } else if (event.value === OrgState.ORGSTATE_INACTIVE) {
             this.orgService.DeactivateMyOrg().then(() => {
-                this.toast.showInfo('Deactivated Org');
+                this.toast.showInfo('ORG.TOAST.DEACTIVATED', true);
             }).catch((error) => {
                 this.toast.showError(error);
             });
         }
     }
 
-    public saveNewOrgDomain(): void {
-        this.orgService.AddMyOrgDomain(this.newDomain).then(domain => {
+    public addNewDomain(): void {
+        const dialogRef = this.dialog.open(AddDomainDialogComponent, {
+            data: {},
+            width: '400px',
+        });
+
+        dialogRef.afterClosed().subscribe(resp => {
+            if (resp) {
+                this.orgService.AddMyOrgDomain(resp).then(domain => {
                     this.domains.push(domain.toObject());
-            this.newDomain = '';
+                    this.toast.showInfo('ORG.TOAST.DOMAINADDED', true);
+                });
+            }
         });
     }
 
@@ -98,7 +108,7 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
         dialogRef.afterClosed().subscribe(resp => {
             if (resp) {
                 this.orgService.RemoveMyOrgDomain(domain).then(() => {
-                    this.toast.showInfo('Removed');
+                    this.toast.showInfo('ORG.TOAST.DOMAINREMOVED', true);
                     const index = this.domains.findIndex(d => d.domain === domain);
                     if (index > -1) {
                         this.domains.splice(index, 1);

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

@@ -11,9 +11,11 @@
     </div>
 
     <div class="container">
+        <p class="n-items" *ngIf="!loading && selection.selected.length > 0">{{'PROJECT.PAGES.PINNED' | translate}}</p>
+
         <div matTooltip="{{'ORG.PAGES.SELECTORGTOOLTIP' | translate}}" class="item card"
-            *ngFor="let org of orgList; index as i" (click)="selectOrg(org, $event)"
-            [ngClass]="{ selected: selection.isSelected(org),active: activeOrg?.id === org?.id }">
+            *ngFor="let org of selection.selected; index as i" (click)="selectOrg(org, $event)"
+            [ngClass]="{ active: activeOrg?.id === org?.id }">
             <div class="text-part">
                 <span class="description">{{org.id}}</span>
 
@@ -23,17 +25,31 @@
                 <div class="icons">
                 </div>
             </div>
-            <button [matMenuTriggerFor]="editMenu" class="edit-button" mat-icon-button>
-                <mat-icon>more_vert</mat-icon>
+            <button [ngClass]="{ selected: selection.isSelected(org)}" (click)="selection.toggle(org)"
+                class="edit-button" mat-icon-button>
+                <mat-icon>push_pin_outline</mat-icon>
             </button>
+        </div>
+    </div>
+    <div class="container">
+        <p class="n-items" *ngIf="!loading && notPinned.length > 0">{{'PROJECT.PAGES.ALL' | translate}}</p>
 
-            <mat-menu #editMenu="matMenu">
-                <ng-template matMenuContent>
-                    <button (click)="routeToOrg(org)" mat-menu-item>
-                        {{'ACTIONS.VIEW' | translate}}
+        <div matTooltip="{{'ORG.PAGES.SELECTORGTOOLTIP' | translate}}" class="item card"
+            *ngFor="let org of notPinned; index as i" (click)="selectOrg(org, $event)"
+            [ngClass]="{ active: activeOrg?.id === org?.id }">
+            <div class="text-part">
+                <span class="description">{{org.id}}</span>
+
+                <span class="name" *ngIf="org.name">{{ org.name }}</span>
+                <span class="name" *ngIf="!org.name">No Name</span>
+                <span class="fill-space"></span>
+                <div class="icons">
+                </div>
+            </div>
+            <button [ngClass]="{ selected: selection.isSelected(org)}" (click)="selection.toggle(org)"
+                class="edit-button" mat-icon-button>
+                <mat-icon>push_pin_outline</mat-icon>
             </button>
-                </ng-template>
-            </mat-menu>
         </div>
 
         <ng-template appHasRole [appHasRole]="['iam.write']">

console/src/app/pages/orgs/org-grid/org-grid.component.scss

@@ -35,9 +35,10 @@ h1 {
         position: relative;
         z-index: 100;
         margin: 1rem;
-        flex-basis: 250px;
+        flex-basis: 230px;
         display: flex;
         text-decoration: none;
+        overflow: hidden;
         cursor: pointer;
         padding-top: 0;
         padding-right: 0;
@@ -45,14 +46,14 @@ h1 {
         padding-left: 1rem;
         border-radius: 0.5rem;
         box-sizing: border-box;
-        min-height: 166px;
+        min-height: 130px;
 
         * {
             box-sizing: border-box;
         }
 
         &.active {
-            border: 2px solid #db4c69;
+            border: 2px solid #38649d;
         }
 
         .selection-icon {
@@ -151,16 +152,28 @@ h1 {
         }
 
         .edit-button {
+            opacity: 0;
+            user-select: none;            
             position: absolute;
             bottom: 0;
             right: 0;
             margin: 0;
             margin-bottom: 0.25rem;
+            color: #8795a1;
+
+            &:hover {
+                opacity: 1;
+                color: white;
+            }
+
+            &.selected {
+                opacity: 1;
+            }
         }
 
 
         &:hover {
-            .selection-icon {
+            .edit-button {
                 opacity: 1;
             }
 
@@ -180,7 +193,7 @@ h1 {
                 }
             }
 
-            .selection-icon {
+            .edit-button {
                 opacity: 1;
             }
         }
@@ -188,13 +201,13 @@ h1 {
 
     .add-org-button {
         z-index: 100;
-        flex-basis: 250px;
+        flex-basis: 230px;
         cursor: pointer;
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
-        min-height: 166px;
+        min-height: 130px;
         border-radius: 0.5rem;
         margin: 1rem;
         box-sizing: border-box;
@@ -221,3 +234,10 @@ h1 {
         }
     }
 }
+
+.n-items {
+    padding: 0 1rem;
+    font-size: .8rem;
+    color: #8795a1;
+    flex-basis: 100%;
+}

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

@@ -1,6 +1,8 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
+import { Observable, of } from 'rxjs';
+import { switchMap, take } from 'rxjs/operators';
 import { Org } from 'src/app/proto/generated/auth_pb';
 import { AuthUserService } from 'src/app/services/auth-user.service';
 import { AuthService } from 'src/app/services/auth.service';
@@ -17,23 +19,87 @@ export class OrgGridComponent {
 
     public selection: SelectionModel<Org.AsObject> = new SelectionModel<Org.AsObject>(true, []);
     public selectedIndex: number = -1;
+    public loading: boolean = false;
+
+    public notPinned: Array<Org.AsObject> = [];
+
     constructor(
         public authService: AuthService,
         private userService: AuthUserService,
         private toast: ToastService,
         private router: Router,
     ) {
+        this.loading = true;
         this.getData(10, 0);
 
         this.authService.GetActiveOrg().then(org => this.activeOrg = org);
+
+        this.selection.changed.subscribe(selection => {
+            this.setPrefixedItem('pinned-orgs', JSON.stringify(
+                this.selection.selected.map(item => item.id),
+            )).pipe(take(1)).subscribe(() => {
+                selection.added.forEach(element => {
+                    const index = this.notPinned.findIndex(item => item.id === element.id);
+                    this.notPinned.splice(index, 1);
+                });
+
+                this.notPinned.push(...selection.removed);
+            });
+        });
+    }
+
+    public reorganizeItems(): void {
+        this.getPrefixedItem('pinned-orgs').pipe(take(1)).subscribe(storageEntry => {
+            if (storageEntry) {
+                const array: string[] = JSON.parse(storageEntry);
+                const toSelect: Org.AsObject[] = this.orgList.filter((item, index) => {
+                    if (array.includes(item.id)) {
+                        // this.notPinned.splice(index, 1);
+                        return true;
+                    }
+                });
+                this.selection.select(...toSelect);
+
+                const toNotPinned: Org.AsObject[] = this.orgList.filter((item, index) => {
+                    if (!array.includes(item.id)) {
+                        return true;
+                    }
+                });
+                this.notPinned = toNotPinned;
+            }
+        });
+    }
+
+    private getPrefixedItem(key: string): Observable<string | null> {
+        return this.authService.user.pipe(
+            take(1),
+            switchMap(user => {
+                return of(localStorage.getItem(`${user.id}:${key}`));
+            }),
+        );
+    }
+
+    private setPrefixedItem(key: string, value: any): Observable<void> {
+        return this.authService.user.pipe(
+            take(1),
+            switchMap(user => {
+                return of(localStorage.setItem(`${user.id}:${key}`, value));
+            }),
+        );
     }
 
     private getData(limit: number, offset: number): void {
         this.userService.SearchMyProjectOrgs(limit, offset).then(res => {
             this.orgList = res.toObject().resultList;
+            console.log(this.orgList);
+
+            this.notPinned = Object.assign([], this.orgList);
+            this.reorganizeItems();
+            this.loading = false;
         }).catch(error => {
             console.error(error);
             this.toast.showError(error);
+            this.loading = false;
         });
     }
 

console/src/app/pages/orgs/orgs.module.ts

@@ -1,5 +1,4 @@
 import { CommonModule } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -11,8 +10,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { HttpLoaderFactory } from 'src/app/app.module';
+import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { CardModule } from 'src/app/modules/card/card.module';
 import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
@@ -20,6 +18,7 @@ import { WarnDialogModule } from 'src/app/modules/warn-dialog/warn-dialog.module
 
 import { ChangesModule } from '../../modules/changes/changes.module';
 import { OrgContributorsModule } from './org-contributors/org-contributors.module';
+import { AddDomainDialogModule } from './org-detail/add-domain-dialog/add-domain-dialog.module';
 import { OrgDetailComponent } from './org-detail/org-detail.component';
 import { OrgGridComponent } from './org-grid/org-grid.component';
 import { OrgsRoutingModule } from './orgs-routing.module';
@@ -48,13 +47,8 @@ import { PolicyGridComponent } from './policy-grid/policy-grid.component';
         WarnDialogModule,
         MatMenuModule,
         ChangesModule,
-        TranslateModule.forChild({
-            loader: {
-                provide: TranslateLoader,
-                useFactory: HttpLoaderFactory,
-                deps: [HttpClient],
-            },
-        }),
+        AddDomainDialogModule,
+        TranslateModule,
     ],
     exports: [],
     schemas: [NO_ERRORS_SCHEMA],

console/src/app/pages/orgs/password-policy/password-policy.component.html

@@ -10,6 +10,14 @@
                 <h1 *ngIf="(titleSub | async) || '' as titletrans">{{ titletrans | translate }}</h1>
 
                 <p class="desc" *ngIf="(descSub | async) || '' as desctrans">{{ desctrans | translate }}</p>
+
+                <span class="fill-space"></span>
+                <ng-template appHasRole [appHasRole]="['iam.policy.write']">
+                    <button matTooltip="{{'ORG.POLICY.DELETE' | translate}}" color="warn" (click)="deletePolicy()"
+                        mat-stroked-button>
+                        {{'ORG.POLICY.DELETE' | translate}}
+                    </button>
+                </ng-template>
             </div>
 
             <div>

console/src/app/pages/orgs/password-policy/password-policy.component.scss

@@ -30,12 +30,21 @@
                 font-size: 1.2rem;
             }
 
+            .fill-space {
+                flex: 1;
+            }
+          
             .desc {
                 width: 100%;
                 display: block;
                 font-size: .9rem;
                 color: #8795a1;
             }
+
+            button {
+                border-radius: .5rem;
+                margin-bottom: .5rem;
+            }
         }
 
         .content {

console/src/app/pages/orgs/password-policy/password-policy.component.ts

@@ -3,12 +3,6 @@ import { FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { BehaviorSubject, Subscription } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
-import {
-    OrgIamPolicy,
-    PasswordAgePolicy,
-    PasswordComplexityPolicy,
-    PasswordLockoutPolicy,
-} from 'src/app/proto/generated/management_pb';
 import { AdminService } from 'src/app/services/admin.service';
 import { OrgService } from 'src/app/services/org.service';
 import { StorageService } from 'src/app/services/storage.service';
@@ -37,11 +31,7 @@ export class PasswordPolicyComponent implements OnInit, OnDestroy {
 
     componentAction: PolicyComponentAction = PolicyComponentAction.CREATE;
 
-    policyData!: PasswordLockoutPolicy.AsObject |
-        PasswordAgePolicy.AsObject |
-        PasswordComplexityPolicy.AsObject |
-        OrgIamPolicy.AsObject;
-    policyType: PolicyComponentType = PolicyComponentType.COMPLEXITY;
+    public policyType: PolicyComponentType = PolicyComponentType.COMPLEXITY;
 
     public PolicyComponentType: any = PolicyComponentType;
     public PolicyComponentAction: any = PolicyComponentAction;
@@ -159,6 +149,32 @@ export class PasswordPolicyComponent implements OnInit, OnDestroy {
         }
     }
 
+    public deletePolicy(): void {
+        switch (this.policyType) {
+            case PolicyComponentType.LOCKOUT:
+                this.orgService.DeletePasswordLockoutPolicy(this.lockoutData.id).then(() => {
+                    this.toast.showInfo('Successfully deleted');
+                }).catch(error => {
+                    this.toast.showError(error);
+                });
+                break;
+            case PolicyComponentType.AGE:
+                this.orgService.DeletePasswordAgePolicy(this.ageData.id).then(() => {
+                    this.toast.showInfo('Successfully deleted');
+                }).catch(error => {
+                    this.toast.showError(error);
+                });
+                break;
+            case PolicyComponentType.COMPLEXITY:
+                this.orgService.DeletePasswordComplexityPolicy(this.complexityData.id).then(() => {
+                    this.toast.showInfo('Successfully deleted');
+                }).catch(error => {
+                    this.toast.showError(error);
+                });
+                break;
+        }
+    }
+
     public incrementLength(): void {
         if (this.complexityData?.minLength !== undefined) {
             this.complexityData.minLength++;

console/src/app/pages/orgs/password-policy/password-policy.module.ts

@@ -1,5 +1,4 @@
 import { CommonModule } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -7,8 +6,9 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { HttpLoaderFactory } from 'src/app/app.module';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 
 import { PasswordPolicyRoutingModule } from './password-policy-routing.module';
 import { PasswordPolicyComponent } from './password-policy.component';
@@ -24,13 +24,9 @@ import { PasswordPolicyComponent } from './password-policy.component';
         MatButtonModule,
         MatSlideToggleModule,
         MatIconModule,
-        TranslateModule.forChild({
-            loader: {
-                provide: TranslateLoader,
-                useFactory: HttpLoaderFactory,
-                deps: [HttpClient],
-            },
-        }),
+        HasRoleModule,
+        MatTooltipModule,
+        TranslateModule,
     ],
 })
 export class PasswordPolicyModule { }

console/src/app/pages/orgs/policy-grid/policy-grid.component.html

@@ -48,10 +48,6 @@
             <button mat-icon-button disabled>
                 <i *ngIf="complexityPolicy" class="icon las la-check-circle"></i>
             </button>
-            <button matTooltip="{{'ORG.POLICY.DELETE' | translate}}" color="warn"
-                (click)="deletePolicy(PolicyComponentType.COMPLEXITY)" mat-icon-button>
-                <i class="las la-trash"></i>
-            </button>
         </div>
 
         <p *ngIf="complexityPolicy?.description; else showDescComplexity" class="desc">
@@ -107,12 +103,6 @@
                 <button mat-icon-button disabled>
                     <i *ngIf="iamPolicy" class="icon las la-check-circle"></i>
                 </button>
-                <ng-template appHasRole [appHasRole]="['iam.policy.write']">
-                    <button matTooltip="{{'ORG.POLICY.DELETE' | translate}}" color="warn"
-                        (click)="deletePolicy(PolicyComponentType.IAM_POLICY)" mat-icon-button>
-                        <i class="las la-trash"></i>
-                    </button>
-                </ng-template>
             </div>
 
             <p *ngIf="iamPolicy?.description; else showDescIAM" class="desc">

console/src/app/pages/orgs/policy-grid/policy-grid.component.ts

@@ -47,30 +47,4 @@ export class PolicyGridComponent implements OnInit {
         this.orgService.GetMyOrgIamPolicy().then(data => this.iamPolicy = data.toObject())
             .catch(error => { });
     }
-
-    public deletePolicy(type: PolicyComponentType): void {
-        switch (type) {
-            case PolicyComponentType.LOCKOUT:
-                this.orgService.DeletePasswordLockoutPolicy(this.lockoutPolicy.id).then(() => {
-                    this.toast.showInfo('Successfully deleted');
-                }).catch(error => {
-                    this.toast.showError(error);
-                });
-                break;
-            case PolicyComponentType.AGE:
-                this.orgService.DeletePasswordAgePolicy(this.agePolicy.id).then(() => {
-                    this.toast.showInfo('Successfully deleted');
-                }).catch(error => {
-                    this.toast.showError(error);
-                });
-                break;
-            case PolicyComponentType.COMPLEXITY:
-                this.orgService.DeletePasswordLockoutPolicy(this.lockoutPolicy.id).then(() => {
-                    this.toast.showInfo('Successfully deleted');
-                }).catch(error => {
-                    this.toast.showError(error);
-                });
-                break;
-        }
-    }
 }

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

@@ -1,19 +0,0 @@
-<div class="max-width-container">
-    <div class="container">
-        <div class="left">
-            <a *ngIf="projectid" [routerLink]="[ '/projects', projectid]" mat-icon-button>
-                <mat-icon class="icon">arrow_back</mat-icon>
-            </a>
-        </div>
-        <div class="right">
-            <div class="head">
-                <h1>{{ 'PROJECT.GRANT.DETAIL.TITLE' | translate }}</h1>
-                <p class="desc">{{ 'PROJECT.GRANT.DETAIL.DESC' | translate }}</p>
-            </div>
-
-            <app-project-grant-members *ngIf="this.projectid && this.grantid" [disabled]="isZitadel"
-                [projectId]="projectid" [grantId]="grantid" [type]="projectType">
-            </app-project-grant-members>
-        </div>
-    </div>
-</div>

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

@@ -1,43 +0,0 @@
-.container {
-    display: flex;
-    padding-bottom: 3rem;
-
-    .left {
-        width: 100px;
-        display: flex;
-        padding: 1rem;
-        justify-content: center;
-
-        a {
-            margin-top: .2rem;
-        }
-    }
-
-    .right {
-        flex: 1;
-        padding-top: 1rem;
-
-        .head {
-            display: flex;
-            align-items: center;
-            border-bottom: 1px solid #ffffff20;
-            margin-bottom: 2rem;
-            flex-wrap: wrap;
-          
-            a {
-                display: block;
-            }
-          
-            h1 {
-                font-size: 1.2rem;
-            }
-          
-            .desc {
-                width: 100%;
-                display: block;
-                font-size: .9rem;
-                color: #8795a1;
-            }
-        }
-    }
-}

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

@@ -1,32 +0,0 @@
-import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { ProjectType } from 'src/app/proto/generated/management_pb';
-import { OrgService } from 'src/app/services/org.service';
-
-@Component({
-    selector: 'app-project-grant-detail',
-    templateUrl: './project-grant-detail.component.html',
-    styleUrls: ['./project-grant-detail.component.scss'],
-})
-export class ProjectGrantDetailComponent {
-    public projectid: string = '';
-    public grantid: string = '';
-
-    public projectType: ProjectType = ProjectType.PROJECTTYPE_OWNED;
-    public disabled: boolean = false;
-
-    public isZitadel: boolean = false;
-
-    constructor(
-        private orgService: OrgService,
-        private route: ActivatedRoute) {
-        this.route.params.subscribe(params => {
-            this.projectid = params.projectid;
-            this.grantid = params.grantid;
-
-            this.orgService.GetIam().then(iam => {
-                this.isZitadel = iam.toObject().iamProjectId === this.projectid;
-            });
-        });
-    }
-}

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

@@ -1,6 +1,6 @@
 <div class="max-width-container">
     <div class="head">
-        <a (click)="navigateBack()" mat-icon-button>
+        <a [routerLink]="['/projects', projectId]" mat-icon-button>
             <mat-icon class="icon">arrow_back</mat-icon>
         </a>
         <h1>{{ 'APP.PAGES.TITLE' | translate }} {{app?.name}}</h1>
@@ -16,11 +16,9 @@
             <div class="content">
                 <mat-button-toggle-group formControlName="state" class="toggle" (change)="changeState($event)">
                     <mat-button-toggle [value]="AppState.APPSTATE_INACTIVE" matTooltip="Deactivate Org">
-                        <!-- <i class="las la-toggle-off"></i> -->
                         {{'APP.PAGES.DETAIL.STATE.'+AppState.APPSTATE_INACTIVE | translate}}
                     </mat-button-toggle>
                     <mat-button-toggle [value]="AppState.APPSTATE_ACTIVE" matTooltip="Activate Org">
-                        <!-- <i class="las la-toggle-on"></i> -->
                         {{'APP.PAGES.DETAIL.STATE.'+AppState.APPSTATE_ACTIVE | translate}}
                     </mat-button-toggle>
                 </mat-button-toggle-group>

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

@@ -1,5 +1,4 @@
 import { CommonModule } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -15,8 +14,7 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { HttpLoaderFactory } from 'src/app/app.module';
+import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { CardModule } from 'src/app/modules/card/card.module';
 
@@ -52,16 +50,7 @@ import { AppsRoutingModule } from './apps-routing.module';
         MatCheckboxModule,
         CardModule,
         MatTooltipModule,
-        TranslateModule.forChild({
-            loader: {
-                provide: TranslateLoader,
-                useFactory: HttpLoaderFactory,
-                deps: [HttpClient],
-            },
-        }),
-    ],
-    entryComponents: [
-        AppSecretDialogComponent,
+        TranslateModule,
     ],
     exports: [TranslateModule],
     schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],

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

@@ -26,7 +26,8 @@ const routes: Routes = [
         data: {
             type: ProjectType.PROJECTTYPE_GRANTED,
         },
-        loadChildren: () => import('../../modules/project-members/project-members.module').then(m => m.ProjectMembersModule),
+        loadChildren: () => import('src/app/modules/project-members/project-members.module')
+            .then(m => m.ProjectMembersModule),
     },
     {
         path: ':id/grant/:grantId',

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

@@ -1,5 +1,4 @@
 import { CommonModule } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -15,17 +14,16 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
+import { CardModule } from 'src/app/modules/card/card.module';
+import { ChangesModule } from 'src/app/modules/changes/changes.module';
+import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
+import { ProjectContributorsModule } from 'src/app/modules/project-contributors/project-contributors.module';
+import { ProjectRolesModule } from 'src/app/modules/project-roles/project-roles.module';
 import { UserGrantsModule } from 'src/app/modules/user-grants/user-grants.module';
+import { PipesModule } from 'src/app/pipes/pipes.module';
 
-import { HttpLoaderFactory } from '../../app.module';
-import { HasRoleModule } from '../../directives/has-role/has-role.module';
-import { CardModule } from '../../modules/card/card.module';
-import { ChangesModule } from '../../modules/changes/changes.module';
-import { MetaLayoutModule } from '../../modules/meta-layout/meta-layout.module';
-import { ProjectContributorsModule } from '../../modules/project-contributors/project-contributors.module';
-import { ProjectRolesModule } from '../../modules/project-roles/project-roles.module';
-import { PipesModule } from '../../pipes/pipes.module';
 import { GrantedProjectDetailComponent } from './granted-project-detail/granted-project-detail.component';
 import { GrantedProjectGridComponent } from './granted-project-grid/granted-project-grid.component';
 import { GrantedProjectListComponent } from './granted-project-list/granted-project-list.component';
@@ -66,13 +64,7 @@ import { GrantedProjectsComponent } from './granted-projects.component';
         MatTooltipModule,
         MatSortModule,
         PipesModule,
-        TranslateModule.forChild({
-            loader: {
-                provide: TranslateLoader,
-                useFactory: HttpLoaderFactory,
-                deps: [HttpClient],
-            },
-        }),
+        TranslateModule,
     ],
     schemas: [NO_ERRORS_SCHEMA],
 })

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

@@ -82,8 +82,9 @@
                     <app-card *ngIf="project?.projectId" title="{{ 'GRANTS.PROJECT.TITLE' | translate }}"
                         description="{{'GRANTS.PROJECT.DESCRIPTION' | translate }}">
                         <app-user-grants [context]="userGrantContext" [projectId]="projectId"
-                            [allowCreate]="['user.grant.write'] | hasRole"
-                            [allowDelete]="['user.grant.delete'] | hasRole">
+                            [disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE"
+                            [allowCreate]="project?.state == ProjectState.PROJECTSTATE_ACTIVE && (['user.grant.write'] | hasRole)"
+                            [allowDelete]="project?.state == ProjectState.PROJECTSTATE_ACTIVE && (['user.grant.delete'] | hasRole)">
                         </app-user-grants>
                     </app-card>
                 </ng-template>

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

@@ -1,12 +1,14 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { Location } from '@angular/common';
 import { Component, OnDestroy, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Params } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { Subscription } from 'rxjs';
 import { ChangeType } from 'src/app/modules/changes/changes.component';
 import { UserGrantContext } from 'src/app/modules/user-grants/user-grants-datasource';
+import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
 import {
     Application,
     ApplicationSearchResponse,
@@ -69,6 +71,7 @@ export class OwnedProjectDetailComponent implements OnInit, OnDestroy {
         private projectService: ProjectService,
         private _location: Location,
         private orgService: OrgService,
+        private dialog: MatDialog,
     ) {
     }
 
@@ -99,18 +102,47 @@ export class OwnedProjectDetailComponent implements OnInit, OnDestroy {
 
     public changeState(newState: ProjectState): void {
         if (newState === ProjectState.PROJECTSTATE_ACTIVE) {
+            const dialogRef = this.dialog.open(WarnDialogComponent, {
+                data: {
+                    confirmKey: 'ACTIONS.REACTIVATE',
+                    cancelKey: 'ACTIONS.CANCEL',
+                    titleKey: 'PROJECT.PAGES.DIALOG.REACTIVATE.TITLE',
+                    descriptionKey: 'PROJECT.PAGES.DIALOG.REACTIVATE.DESCRIPTION',
+                },
+                width: '400px',
+            });
+            dialogRef.afterClosed().subscribe(resp => {
+                if (resp) {
                     this.projectService.ReactivateProject(this.projectId).then(() => {
                         this.toast.showInfo('Reactivated Project');
+                        this.project.state = ProjectState.PROJECTSTATE_ACTIVE;
                     }).catch(error => {
                         this.toast.showError(error);
                     });
+                }
+            });
+
         } else if (newState === ProjectState.PROJECTSTATE_INACTIVE) {
+            const dialogRef = this.dialog.open(WarnDialogComponent, {
+                data: {
+                    confirmKey: 'ACTIONS.DEACTIVATE',
+                    cancelKey: 'ACTIONS.CANCEL',
+                    titleKey: 'PROJECT.PAGES.DIALOG.DEACTIVATE.TITLE',
+                    descriptionKey: 'PROJECT.PAGES.DIALOG.DEACTIVATE.DESCRIPTION',
+                },
+                width: '400px',
+            });
+            dialogRef.afterClosed().subscribe(resp => {
+                if (resp) {
                     this.projectService.DeactivateProject(this.projectId).then(() => {
                         this.toast.showInfo('Deactivated Project');
+                        this.project.state = ProjectState.PROJECTSTATE_INACTIVE;
                     }).catch(error => {
                         this.toast.showError(error);
                     });
                 }
+            });
+        }
     }
 
     public saveProject(): void {

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

@@ -38,7 +38,6 @@ export class OwnedProjectGridComponent implements OnChanges {
     @Input() loading: boolean = false;
 
     public selection: SelectionModel<ProjectView.AsObject> = new SelectionModel<ProjectView.AsObject>(true, []);
-    public selectedIndex: number = -1;
 
     public showNewProject: boolean = false;
     public ProjectState: any = ProjectState;

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

@@ -31,12 +31,13 @@ const routes: Routes = [
         data: {
             type: ProjectType.PROJECTTYPE_OWNED,
         },
-        loadChildren: () => import('../../modules/project-members/project-members.module').then(m => m.ProjectMembersModule),
+        loadChildren: () => import('src/app/modules/project-members/project-members.module')
+            .then(m => m.ProjectMembersModule),
     },
     {
         path: ':projectid/apps',
         data: { animation: 'AddPage' },
-        loadChildren: () => import('../apps/apps.module').then(m => m.AppsModule),
+        loadChildren: () => import('src/app/pages/projects/apps/apps.module').then(m => m.AppsModule),
     },
     {
         path: ':projectid/roles/create',

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

@@ -1,5 +1,4 @@
 import { CommonModule } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -16,19 +15,18 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { AvatarModule } from 'src/app/modules/avatar/avatar.module';
+import { CardModule } from 'src/app/modules/card/card.module';
+import { ChangesModule } from 'src/app/modules/changes/changes.module';
+import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
+import { ProjectContributorsModule } from 'src/app/modules/project-contributors/project-contributors.module';
 import { ProjectRolesModule } from 'src/app/modules/project-roles/project-roles.module';
 import { UserGrantsModule } from 'src/app/modules/user-grants/user-grants.module';
+import { WarnDialogModule } from 'src/app/modules/warn-dialog/warn-dialog.module';
+import { PipesModule } from 'src/app/pipes/pipes.module';
 
-import { HttpLoaderFactory } from '../../app.module';
-import { HasRoleModule } from '../../directives/has-role/has-role.module';
-import { CardModule } from '../../modules/card/card.module';
-import { ChangesModule } from '../../modules/changes/changes.module';
-import { MetaLayoutModule } from '../../modules/meta-layout/meta-layout.module';
-import { ProjectContributorsModule } from '../../modules/project-contributors/project-contributors.module';
-import { PipesModule } from '../../pipes/pipes.module';
-import { UserListModule } from '../user-list/user-list.module';
 import { OwnedProjectDetailComponent } from './owned-project-detail/owned-project-detail.component';
 import { OwnedProjectGridComponent } from './owned-project-grid/owned-project-grid.component';
 import { OwnedProjectListComponent } from './owned-project-list/owned-project-list.component';
@@ -64,10 +62,10 @@ import { ProjectGrantsComponent } from './project-grants/project-grants.componen
         MatFormFieldModule,
         MatInputModule,
         ChangesModule,
-        UserListModule,
         MatChipsModule,
         MatIconModule,
         MatButtonModule,
+        WarnDialogModule,
         MatProgressSpinnerModule,
         MetaLayoutModule,
         MatProgressBarModule,
@@ -79,13 +77,7 @@ import { ProjectGrantsComponent } from './project-grants/project-grants.componen
         MatTooltipModule,
         MatSortModule,
         PipesModule,
-        TranslateModule.forChild({
-            loader: {
-                provide: TranslateLoader,
-                useFactory: HttpLoaderFactory,
-                deps: [HttpClient],
-            },
-        }),
+        TranslateModule,
     ],
     schemas: [NO_ERRORS_SCHEMA],
 })

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

@@ -0,0 +1,58 @@
+<div class="max-width-container">
+    <div class="container">
+        <div class="left">
+            <a *ngIf="projectid" [routerLink]="[ '/projects', projectid]" mat-icon-button>
+                <mat-icon class="icon">arrow_back</mat-icon>
+            </a>
+        </div>
+        <div class="right">
+            <div class="head">
+                <h1>{{ 'PROJECT.GRANT.DETAIL.TITLE' | translate }}</h1>
+                <p class="desc">{{ 'PROJECT.GRANT.DETAIL.DESC' | translate }}</p>
+            </div>
+            <div class="master-row">
+                <div class="left-col">
+                    <div class="row">
+                        <span class="first">{{'PROJECT.GRANT.DETAIL.PROJECTNAME' | translate}}</span>
+                        <span class="fill-space"></span>
+                        <span>{{grant?.projectName}}</span>
+                    </div>
+                    <div class="row">
+                        <span class="first">{{'PROJECT.GRANT.DETAIL.RESOURCEOWNER' | translate}}</span>
+                        <span class="fill-space"></span>
+                        <span>{{grant?.resourceOwnerName}}</span>
+                    </div>
+                </div>
+
+                <span class="fill-space"></span>
+
+                <div>
+                    <button mat-stroked-button color="accent"
+                        *ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_ACTIVE" class="state-button"
+                        (click)="changeState(ProjectGrantState.PROJECTGRANTSTATE_INACTIVE)">{{'USER.PAGES.DEACTIVATE' | translate}}</button>
+                    <button mat-stroked-button color="accent"
+                        *ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_INACTIVE" class="state-button"
+                        (click)="changeState(ProjectGrantState.PROJECTGRANTSTATE_ACTIVE)">{{'USER.PAGES.REACTIVATE' | translate}}</button>
+                </div>
+            </div>
+
+            <mat-form-field class="form-field" appearance="outline" *ngIf="grant && grant.roleKeysList">
+                <mat-label>{{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}</mat-label>
+                <mat-select [(ngModel)]="grant.roleKeysList" multiple (selectionChange)="updateRoles($event)">
+                    <mat-option *ngFor="let role of memberRoleOptions" [value]="role.key">
+                        {{role.key}}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+
+            <div class="divider"></div>
+
+            <h1>{{ 'PROJECT.GRANT.DETAIL.MEMBERTITLE' | translate }}</h1>
+            <p class="desc">{{ 'PROJECT.GRANT.DETAIL.MEMBERDESC' | translate }}</p>
+
+            <app-project-grant-members *ngIf="this.projectid && this.grantid" [disabled]="isZitadel"
+                [projectId]="projectid" [grantId]="grantid" [type]="projectType">
+            </app-project-grant-members>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,92 @@
+.container {
+    display: flex;
+    padding-bottom: 3rem;
+
+    h1 {
+        font-size: 1.2rem;
+    }
+  
+    .desc {
+        display: block;
+        font-size: .9rem;
+        color: #8795a1;
+    }
+
+    .left {
+        width: 100px;
+        display: flex;
+        padding: 1rem;
+        justify-content: center;
+
+        a {
+            margin-top: .2rem;
+        }
+    }
+
+    .right {
+        flex: 1;
+        padding-top: 1rem;
+
+        .head {
+            display: flex;
+            align-items: center;
+            border-bottom: 1px solid #ffffff20;
+            margin-bottom: 2rem;
+            flex-wrap: wrap;
+          
+            a {
+                display: block;
+            }
+
+            h1 {
+                margin-top: 0.2rem;
+                font-size: 2rem;
+            }
+        }
+
+        .master-row {
+            display: flex;
+            flex-wrap: wrap;
+            width: 100%;
+
+            .left-col {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                margin-bottom: 2rem;
+    
+                .row {
+                    max-width: 400px;
+                    display: flex;
+                    align-items: center;
+                    padding: .5rem 0;
+    
+                    span {
+                        font-size: .9rem;
+                    }
+    
+                    .first {
+                        color: #8795a1;
+                    }
+                }
+            }
+
+            .fill-space {
+                flex: 1;
+            }
+
+            .state-button {
+                border-radius: .5rem;
+            }
+        }
+        
+        mat-form-field {
+            width: 100%;
+        }
+
+        .divider {
+            height: 1px; 
+            background-color: #ffffff20;
+        }
+    }
+}

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

@@ -0,0 +1,88 @@
+import { Component } from '@angular/core';
+import { MatSelectChange } from '@angular/material/select';
+import { ActivatedRoute } from '@angular/router';
+import {
+    ProjectGrant,
+    ProjectGrantState,
+    ProjectGrantView,
+    ProjectRoleView,
+    ProjectType,
+} from 'src/app/proto/generated/management_pb';
+import { OrgService } from 'src/app/services/org.service';
+import { ProjectService } from 'src/app/services/project.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+@Component({
+    selector: 'app-project-grant-detail',
+    templateUrl: './project-grant-detail.component.html',
+    styleUrls: ['./project-grant-detail.component.scss'],
+})
+export class ProjectGrantDetailComponent {
+    public grant!: ProjectGrantView.AsObject;
+    public projectid: string = '';
+    public grantid: string = '';
+
+    public projectType: ProjectType = ProjectType.PROJECTTYPE_OWNED;
+    public disabled: boolean = false;
+
+    public isZitadel: boolean = false;
+    ProjectGrantState: any = ProjectGrantState;
+
+    public memberRoleOptions: ProjectRoleView.AsObject[] = [];
+
+    constructor(
+        private orgService: OrgService,
+        private projectService: ProjectService,
+        private route: ActivatedRoute,
+        private toast: ToastService,
+    ) {
+        this.route.params.subscribe(params => {
+            this.projectid = params.projectid;
+            this.grantid = params.grantid;
+
+            this.orgService.GetIam().then(iam => {
+                this.isZitadel = iam.toObject().iamProjectId === this.projectid;
+            });
+
+            this.getRoleOptions(params.projectid);
+
+            this.projectService.ProjectGrantByID(this.grantid, this.projectid).then((grant) => {
+                this.grant = grant.toObject();
+            });
+        });
+    }
+
+    public changeState(newState: ProjectGrantState): void {
+        if (newState === ProjectGrantState.PROJECTGRANTSTATE_ACTIVE) {
+            this.projectService.ReactivateProjectGrant(this.grantid, this.projectid).then(() => {
+                this.toast.showInfo('PROJECT.TOAST.REACTIVATED', true);
+                this.grant.state = newState;
+            }).catch(error => {
+                this.toast.showError(error);
+            });
+        } else if (newState === ProjectGrantState.PROJECTGRANTSTATE_INACTIVE) {
+            this.projectService.DeactivateProjectGrant(this.grantid, this.projectid).then(() => {
+                this.toast.showInfo('PROJECT.TOAST.DEACTIVATED', true);
+                this.grant.state = newState;
+            }).catch(error => {
+                this.toast.showError(error);
+            });
+        }
+    }
+
+    public getRoleOptions(projectId: string): void {
+        this.projectService.SearchProjectRoles(projectId, 100, 0).then(resp => {
+            this.memberRoleOptions = resp.toObject().resultList;
+            console.log(resp.toObject());
+        });
+    }
+
+    updateRoles(selectionChange: MatSelectChange): void {
+        this.projectService.UpdateProjectGrant(this.grant.id, this.grant.projectId, selectionChange.value)
+            .then((newgrant: ProjectGrant) => {
+                this.toast.showInfo('Grant updated!');
+            }).catch(error => {
+                this.toast.showError(error);
+            });
+    }
+}

console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.module.ts

@@ -5,9 +5,11 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipsModule } from '@angular/material/chips';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -33,6 +35,8 @@ import { ProjectGrantMembersModule } from './project-grant-members/project-grant
         MatIconModule,
         MatTableModule,
         MatPaginatorModule,
+        MatFormFieldModule,
+        MatSelectModule,
         MatSortModule,
         MatTooltipModule,
         ReactiveFormsModule,