fix(console): edit project role, address form cleanup, assets, i18n (#339)

* remove grant detail module, role detail dialog

* change appearance, i18n, remove address form

console/src/app/app.component.html

@@ -3,7 +3,7 @@
         <button aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()">
             <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
         </button>
-        <a *ngIf="(isHandset$ | async) == false" class="title ailerons" [routerLink]="['/']">
+        <a *ngIf="(isHandset$ | async) == false" class="title" [routerLink]="['/']">
             <img class="logo" *ngIf="componentCssClass == 'dark-theme'; else lighttheme"
                 src="../assets/images/zitadel-logo-oneline-darkdesign.svg" />
             <ng-template #lighttheme>

console/src/app/app.component.scss

@@ -19,7 +19,7 @@
 		font-weight: 400;
 		margin-left: 1rem;
 		line-height: 1.2rem;
-        font-family: 'Rubik';
+        font-family: 'Lato';
         margin-right: 1rem;
     }
 
@@ -41,7 +41,6 @@
 		.docs {
 			text-decoration: none;
 			font-size: 1.4rem;
-			font-family: 'ailerons', sans-serif;
 		}
 
         .avatar {
@@ -117,7 +116,6 @@
             
                     .label {
                         margin-bottom: 0;
-                        font-family: 'Rubik';
                         font-weight: 500;
                         font-size: .9rem;
                     }

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

@@ -23,11 +23,11 @@
 </div>
 <div mat-dialog-actions class="action">
     <button mat-button (click)="closeDialog()">
-        cancel
+        {{'ACTIONS.CANCEL' | translate}}
     </button>
 
     <button [disabled]="users.length == 0 || roles.length == 0" color="primary" mat-raised-button class="ok-button"
         (click)="closeDialogWithSuccess()">
-        Add
+        {{'ACTIONS.ADD' | translate}}
     </button>
 </div>

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

@@ -18,9 +18,7 @@
             .title {
                 margin: 0;
                 font-weight: 400;
-                font-family: 'Rubik';
                 font-size: 18px;
-                // margin-top: .3rem;
             }
 
             .fill-space {

console/src/app/modules/project-roles/project-role-detail/project-role-detail.component.html

@@ -0,0 +1,30 @@
+<h1 mat-dialog-title>
+    <span class="title">{{'PROJECT.ROLE.EDITTITLE' | translate}}</span>
+</h1>
+<p class="desc"> {{'PROJECT.ROLE.EDITDESCRIPTION' | translate}}</p>
+<div mat-dialog-content>
+    <form *ngIf="formGroup" class="full-width" [formGroup]="formGroup" (ngSubmit)="submitForm()">
+        <mat-form-field class="formfield">
+            <mat-label>{{ 'PROJECT.ROLE.KEY' | translate }}</mat-label>
+            <input matInput formControlName="key" />
+        </mat-form-field>
+        <mat-form-field class="formfield">
+            <mat-label>{{ 'PROJECT.ROLE.DISPLAY_NAME' | translate }}</mat-label>
+            <input matInput formControlName="displayName" />
+        </mat-form-field>
+        <mat-form-field class="formfield">
+            <mat-label>{{ 'PROJECT.ROLE.GROUP' | translate }}</mat-label>
+            <input matInput formControlName="group" />
+        </mat-form-field>
+    </form>
+</div>
+
+<div mat-dialog-actions class="action">
+    <button mat-button (click)="closeDialog()">
+        {{'ACTIONS.CANCEL' | translate}}
+    </button>
+
+    <button [disabled]="formGroup.invalid" color="primary" mat-raised-button class="ok-button" (click)="submitForm()">
+        {{'ACTIONS.SAVE' | translate}}
+    </button>
+</div>

console/src/app/modules/project-roles/project-role-detail/project-role-detail.component.scss

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

console/src/app/modules/project-roles/project-role-detail/project-role-detail.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { UserGrantComponent } from './user-grant.component';
+import { ProjectRoleDetailComponent } from './project-role-detail.component';
 
-describe('UserGrantComponent', () => {
+describe('ProjectRoleDetailComponent', () => {
-    let component: UserGrantComponent;
+    let component: ProjectRoleDetailComponent;
-    let fixture: ComponentFixture<UserGrantComponent>;
+    let fixture: ComponentFixture<ProjectRoleDetailComponent>;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            declarations: [UserGrantComponent],
+            declarations: [ProjectRoleDetailComponent],
         })
             .compileComponents();
     }));
 
     beforeEach(() => {
-        fixture = TestBed.createComponent(UserGrantComponent);
+        fixture = TestBed.createComponent(ProjectRoleDetailComponent);
         component = fixture.componentInstance;
         fixture.detectChanges();
     });

console/src/app/modules/project-roles/project-role-detail/project-role-detail.component.ts

@@ -0,0 +1,59 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { ProjectService } from 'src/app/services/project.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+@Component({
+    selector: 'app-project-role-detail',
+    templateUrl: './project-role-detail.component.html',
+    styleUrls: ['./project-role-detail.component.scss'],
+})
+export class ProjectRoleDetailComponent implements OnInit {
+    public projectId: string = '';
+
+    public formGroup!: FormGroup;
+    constructor(private projectService: ProjectService, private toast: ToastService,
+        public dialogRef: MatDialogRef<ProjectRoleDetailComponent>,
+        @Inject(MAT_DIALOG_DATA) public data: any) {
+
+        this.projectId = data.projectId;
+        this.formGroup = new FormGroup({
+            key: new FormControl({ value: '', disabled: true }, [Validators.required]),
+            displayName: new FormControl(''),
+            group: new FormControl(''),
+        });
+        console.log(data);
+
+        this.formGroup.patchValue(data.role);
+    }
+
+    ngOnInit(): void {
+    }
+
+    submitForm(): void {
+        if (this.formGroup.valid && this.key?.value && this.group?.value && this.displayName?.value) {
+            this.projectService.ChangeProjectRole(this.projectId, this.key.value, this.key.value, this.group.value)
+                .then(() => {
+                    this.toast.showInfo('Role updated');
+                    this.dialogRef.close(true);
+                }).catch(error => {
+                    this.toast.showError(error.message);
+                });
+        }
+    }
+
+    public closeDialog(): void {
+        this.dialogRef.close(false);
+    }
+
+    public get key(): AbstractControl | null {
+        return this.formGroup.get('key');
+    }
+    public get displayName(): AbstractControl | null {
+        return this.formGroup.get('displayName');
+    }
+    public get group(): AbstractControl | null {
+        return this.formGroup.get('group');
+    }
+}

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

@@ -47,26 +47,25 @@
 
         <ng-container matColumnDef="key">
             <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.KEY' | translate }} </th>
-            <td mat-cell *matCellDef="let role"> {{role.key}} </td>
+            <td (click)="openDetailDialog(role)" mat-cell *matCellDef="let role"> {{role.key}} </td>
         </ng-container>
 
         <ng-container matColumnDef="displayname">
             <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.DISPLAY_NAME' | translate }} </th>
-            <td mat-cell *matCellDef="let role"> {{role.displayName}} </td>
+            <td (click)="openDetailDialog(role)" mat-cell *matCellDef="let role"> {{role.displayName}} </td>
         </ng-container>
 
         <ng-container matColumnDef="group">
             <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.GROUP' | translate }} </th>
             <td mat-cell *matCellDef="let role">
-                <span class="role app-label" *ngIf="role.group"
+                <span class="role app-label" *ngIf="role.group" (click)="selectAllOfGroup(role.group)"
-                    matTooltip="Add all of group {{role.group}} to selection"
+                    [matTooltip]="'PROJECT.ROLE.SELECTGROUPTOOLTIP' | translate: role">{{role.group}}</span>
-                    (click)="selectAllOfGroup(role.group)">{{role.group}}</span>
             </td>
         </ng-container>
 
         <ng-container matColumnDef="creationDate">
             <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.CREATIONDATE' | translate }} </th>
-            <td mat-cell *matCellDef="let role">
+            <td (click)="openDetailDialog(role)" mat-cell *matCellDef="let role">
                 <span>{{role.creationDate | timestampToDate | date: 'dd. MMM, HH:mm' }}</span>
             </td>
         </ng-container>

console/src/app/modules/project-roles/project-roles.component.ts

@@ -1,5 +1,6 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, 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';
@@ -7,6 +8,7 @@ import { ProjectRole } from 'src/app/proto/generated/management_pb';
 import { ProjectService } from 'src/app/services/project.service';
 import { ToastService } from 'src/app/services/toast.service';
 
+import { ProjectRoleDetailComponent } from './project-role-detail/project-role-detail.component';
 import { ProjectRolesDataSource } from './project-roles-datasource';
 
 
@@ -28,7 +30,7 @@ export class ProjectRolesComponent implements AfterViewInit, OnInit {
     /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
     public displayedColumns: string[] = ['select', 'key', 'displayname', 'group', 'creationDate'];
 
-    constructor(private projectService: ProjectService, private toast: ToastService) { }
+    constructor(private projectService: ProjectService, private toast: ToastService, private dialog: MatDialog) { }
 
     public ngOnInit(): void {
         console.log(this.projectId);
@@ -108,4 +110,14 @@ export class ProjectRolesComponent implements AfterViewInit, OnInit {
                 this.toast.showError(data.message);
             });
     }
+
+    public openDetailDialog(role: ProjectRole.AsObject): void {
+        this.dialog.open(ProjectRoleDetailComponent, {
+            data: {
+                role,
+                projectId: this.projectId,
+            },
+            width: '400px',
+        });
+    }
 }

console/src/app/modules/project-roles/project-roles.module.ts

@@ -1,8 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { 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 { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@@ -13,16 +16,22 @@ import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { PipesModule } from 'src/app/pipes/pipes.module';
 
+import { ProjectRoleDetailComponent } from './project-role-detail/project-role-detail.component';
 import { ProjectRolesComponent } from './project-roles.component';
 
+
 @NgModule({
-    declarations: [ProjectRolesComponent],
+    declarations: [ProjectRolesComponent, ProjectRoleDetailComponent],
     imports: [
         CommonModule,
         MatButtonModule,
         HasRoleModule,
         MatTableModule,
         MatPaginatorModule,
+        MatFormFieldModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatInputModule,
         MatIconModule,
         MatProgressSpinnerModule,
         MatCheckboxModule,

console/src/app/modules/user-grant/user-grant-routing.module.ts

@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { UserGrantComponent } from './user-grant.component';
-
-const routes: Routes = [
-    {
-        path: '',
-        component: UserGrantComponent,
-        data: { animation: 'AddPage' },
-    },
-];
-
-@NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule],
-})
-export class UserGrantRoutingModule { }

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

@@ -1,15 +0,0 @@
-<div class="max-width-container">
-    <div class="container">
-        <div class="left">
-            <a *ngIf="userid" [routerLink]="[ '/users', userid]" mat-icon-button>
-                <mat-icon class="icon">arrow_back</mat-icon>
-            </a>
-        </div>
-        <div class="right">
-            <div class="head">
-                <h1>{{ 'GRANTS.DETAIL.TITLE' | translate }}</h1>
-                <p class="desc">{{ 'GRANTS.DETAIL.DESCRIPTION' | translate }}</p>
-            </div>
-        </div>
-    </div>
-</div>

console/src/app/modules/user-grant/user-grant.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/modules/user-grant/user-grant.component.ts

@@ -1,44 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { UserGrantView } from 'src/app/proto/generated/management_pb';
-import { MgmtUserService } from 'src/app/services/mgmt-user.service';
-import { ToastService } from 'src/app/services/toast.service';
-
-@Component({
-    selector: 'app-user-grant',
-    templateUrl: './user-grant.component.html',
-    styleUrls: ['./user-grant.component.scss'],
-})
-export class UserGrantComponent implements OnInit {
-    public userid: string = '';
-    public grantid: string = '';
-
-    public grantView!: UserGrantView.AsObject;
-    constructor(
-        private mgmtUserService: MgmtUserService,
-        private route: ActivatedRoute,
-        private toast: ToastService,
-    ) {
-        this.route.params.subscribe(params => {
-            this.userid = params.projectid;
-            this.grantid = params.grantid;
-
-            this.mgmtUserService.UserGrantByID(this.grantid, this.userid).then(resp => {
-                this.grantView = resp.toObject();
-                console.log(this.grantView);
-            });
-        });
-    }
-
-    ngOnInit(): void {
-    }
-
-    updateGrant(): void {
-        this.mgmtUserService.UpdateUserGrant(this.grantid, this.userid, this.grantView.roleKeysList).then(() => {
-            this.toast.showInfo('Roles updated');
-        }).catch(error => {
-            this.toast.showError(error.message);
-        });
-    }
-
-}

console/src/app/modules/user-grant/user-grant.module.ts

@@ -1,29 +0,0 @@
-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 { UserGrantRoutingModule } from './user-grant-routing.module';
-import { UserGrantComponent } from './user-grant.component';
-
-@NgModule({
-    declarations: [UserGrantComponent],
-    imports: [
-        CommonModule,
-        UserGrantRoutingModule,
-        MatIconModule,
-        MatButtonModule,
-        TranslateModule.forChild({
-            loader: {
-                provide: TranslateLoader,
-                useFactory: HttpLoaderFactory,
-                deps: [HttpClient],
-            },
-        }),
-    ],
-    schemas: [],
-})
-export class UserGrantModule { }

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

@@ -88,7 +88,6 @@
                 margin-top: 1rem;
                 font-size: 1.2rem;
                 margin-bottom: 0.5rem;
-                font-family: 'Rubik', sans-serif;
             }
 
             .description {
@@ -186,7 +185,6 @@
         border-radius: 0.5rem;
         margin: 1rem;
         box-sizing: border-box;
-        font-family: 'Rubik', sans-serif;
 
         .icon {
             display: flex;

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

@@ -1,5 +1,4 @@
 h1 {
-    font-family: ailerons;
     margin-top: 0;
 }
 

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

@@ -1,24 +1,4 @@
 
-.circle {
-    position: relative;
-    border-radius: 100%;
-    width: 8rem;
-    height: 8rem;
-    background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
-    margin: auto;
-  }
-  .crescent {
-    position: absolute;
-    border-radius: 100%;
-    right: 0;
-    width: 6rem;
-    height: 6rem;
-    background: #212224;
-    transform: scale(1);
-    transform-origin: top right;
-    transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
-  }
-
 .wrapper {
 	width: 80%;
 	max-width: 1350px;
@@ -43,7 +23,6 @@
 
 		h1 {
 			font-size: 3rem;
-			font-family: ailerons;
 		}
 		p {
 			color: #8795a1;
@@ -78,7 +57,6 @@
 				padding: 1rem 2rem;
 				h2 {
 					margin-top: .5rem;
-                    font-family: 'Rubik';
                     display: flex;
                     align-items: center;
 				}

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

@@ -1,5 +1,4 @@
 h1 {
-    font-family: ailerons;
     margin-top: 0;
 }
 

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

@@ -1,5 +1,4 @@
 h1 {
-    font-family: ailerons;
     margin-top: 0;
 }
 

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

@@ -1,5 +1,4 @@
 h1 {
-    font-family: ailerons;
     margin-top: 0;
 }
 
@@ -88,7 +87,6 @@ h1 {
                 margin-top: 1rem;
                 font-size: 1.2rem;
                 margin-bottom: 0.5rem;
-                font-family: 'Rubik', sans-serif;
             }
 
             .description {
@@ -200,7 +198,6 @@ h1 {
         border-radius: 0.5rem;
         margin: 1rem;
         box-sizing: border-box;
-        font-family: 'Rubik', sans-serif;
 
         .icon {
             display: flex;

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

@@ -84,7 +84,6 @@
                 margin-top: 1rem;
                 font-size: 1.2rem;
                 margin-bottom: 0.5rem;
-                font-family: 'Rubik', sans-serif;
             }
 
             .description {
@@ -182,7 +181,6 @@
         border-radius: 0.5rem;
         margin: 1rem;
         box-sizing: border-box;
-        font-family: 'Rubik', sans-serif;
 
         .icon {
             display: flex;

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

@@ -1,5 +1,4 @@
 h1 {
-    font-family: ailerons;
     margin-top: 0;
 }
 

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

@@ -41,7 +41,6 @@ const routes: Routes = [
     {
         path: ':projectid/roles/create',
         loadChildren: () => import('../project-role-create/project-role-create.module').then(m => m.ProjectRoleCreateModule),
-
     },
     {
         path: ':projectid/grants/create',

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

@@ -1,5 +1,4 @@
 h1 {
-    font-family: ailerons;
     margin-top: 0;
 }
 

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

@@ -5,10 +5,6 @@
     .fill-space {
         flex: 1;
     }
-
-    h3 {
-        font-family: 'Rubik';
-    }
 }
 
 .app-container {

console/src/app/pages/project-grant-create/project-grant-create.component.scss

@@ -1,7 +1,3 @@
-h1 {
-    font-family: ailerons;
-}
-
 .container {
 	padding: 4rem 4rem 2rem 4rem;
 

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

@@ -12,7 +12,6 @@
 
         h1 {
             font-size: 3rem;
-            font-family: ailerons;
         }
         p {
             color: #8795a1;

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

@@ -229,7 +229,6 @@
             </div>
         </div>
 
-        <!-- <p class="side-section">{{ 'CHANGES.USER.TITLE' | translate }}</p> -->
         <app-changes [changeType]="ChangeType.MYUSER" [id]="user.id"></app-changes>
     </metainfo>
 </app-meta-layout>

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

@@ -1,5 +1,4 @@
 h1 {
-  font-family: ailerons;
   margin-top: 0;
 }
 

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

@@ -45,7 +45,6 @@ export class AuthUserDetailComponent implements OnDestroy {
     public languages: string[] = ['de', 'en'];
 
     public passwordForm!: FormGroup;
-    // public addressForm!: FormGroup;
     private subscription: Subscription = new Subscription();
 
     public emailEditState: boolean = false;
@@ -101,14 +100,6 @@ export class AuthUserDetailComponent implements OnDestroy {
             });
         });
 
-        // this.addressForm = this.fb.group({
-        //     streetAddress: [''],
-        //     postalCode: [''],
-        //     locality: [''],
-        //     region: [''],
-        //     country: [''],
-        // });
-
         this.loading = true;
         this.getData().then(() => {
             this.loading = false;
@@ -229,33 +220,6 @@ export class AuthUserDetailComponent implements OnDestroy {
             });
     }
 
-    // public saveAddress(): void {
-    //     this.address = this.addressForm.value;
-    //     this.userService
-    //         .SaveMyUserAddress(this.address as UserAddress.AsObject).then((data: UserAddress) => {
-    //             this.toast.showInfo('Saved Address');
-    //             this.address = data.toObject();
-    //         }).catch(data => {
-    //             this.toast.showError(data.message);
-    //         });
-    // }
-
-    // public get streetAddress(): AbstractControl | null {
-    //     return this.addressForm.get('streetAddress');
-    // }
-    // public get postalCode(): AbstractControl | null {
-    //     return this.addressForm.get('postalCode');
-    // }
-    // public get locality(): AbstractControl | null {
-    //     return this.addressForm.get('locality');
-    // }
-    // public get region(): AbstractControl | null {
-    //     return this.addressForm.get('region');
-    // }
-    // public get country(): AbstractControl | null {
-    //     return this.addressForm.get('country');
-    // }
-
     public get currentPassword(): AbstractControl | null {
         return this.passwordForm.get('currentPassword');
     }
@@ -272,9 +236,6 @@ export class AuthUserDetailComponent implements OnDestroy {
         }).catch(err => {
             console.error(err);
         });
-
-        // this.address = (await this.userService.GetMyUserAddress()).toObject();
-        // this.addressForm.patchValue(this.address);
     }
 
     public copytoclipboard(value: string): void {

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

@@ -1,9 +1,5 @@
 $dark-background: #2d2e30;
 
-// * {
-//     transition: background-color .5s ease-in-out;
-// }
-
 :root {
     transition: none;
 }
@@ -11,11 +7,13 @@ $dark-background: #2d2e30;
 .theme-app {
     position: relative;
 }
+
 .theme-content {
   display: flex;
   flex-direction: column;
   text-align: center;
 }
+
 .circle {
   position: relative;
   border-radius: 100%;
@@ -24,6 +22,7 @@ $dark-background: #2d2e30;
   background: linear-gradient(40deg, #FF0080,#FF8C00 70%);
   margin: auto;
 }
+
 .crescent {
   position: absolute;
   border-radius: 100%;
@@ -35,9 +34,11 @@ $dark-background: #2d2e30;
   transform-origin: top right;
   transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
+
 p { 
   font-size: 90%;
 }
+
 .heading {
   font-size: 100%;
   font-weight: bolder;
@@ -62,11 +63,13 @@ label {
   margin: 1rem 0 1rem 0; 
   cursor: pointer;
 }
+
 .toggle {
   position: absolute;
   background-color: #fafafa;
   box-shadow: 0 2px 15px rgba(0,0,0,.15);
 }
+
 .names {
   font-size: 90%;
   font-weight: bolder;
@@ -79,38 +82,37 @@ label {
   user-select: none;
 }
 
-/* -------- Switch Styles ------------*/
 [type="checkbox"] {
   display: none;
 }
-/* Toggle */
+
 [type="checkbox"]:checked + .theme-app .toggle{
   transform: translateX(100%);
   background-color: $dark-background;
 }
+
 [type="checkbox"]:checked + .theme-app .dark{
   opacity: 1;
 }
+
 [type="checkbox"]:checked + .theme-app .light{
   opacity: .5;
 }
-/* App */
+
 [type="checkbox"]:checked + .theme-app{
   background-color:  $dark-background;
   color: #fafafa;
 }
-/* Circle */
+
 [type="checkbox"]:checked + .theme-app .crescent{
   transform: scale(1);
   background: $dark-background;
 }
+
 [type="checkbox"]:checked + .theme-app .circle{
   background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
 }
+
 [type="checkbox"]:checked + .theme-app .main-circle{
   background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
 }
-/* Fab */
-[type="checkbox"]:checked + .theme-app .fab{
-  background-color: $dark-background;
-}

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

@@ -18,10 +18,6 @@ const routes: Routes = [
             roles: ['user.read'],
         },
     },
-    {
-        path: ':id/grant/:grantid',
-        loadChildren: () => import('src/app/modules/user-grant/user-grant.module').then(m => m.UserGrantModule),
-    },
 ];
 
 @NgModule({

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

@@ -4,7 +4,7 @@
             <a (click)="navigateBack()" mat-icon-button>
                 <mat-icon class="icon">arrow_back</mat-icon>
             </a>
-            <h1>{{ 'USER.PROFILE.TITLE' | translate }} {{user?.firstName}}</h1>
+            <h1>{{ 'USER.PROFILE.TITLE' | translate }} {{user?.displayName}}</h1>
 
             <p class="desc">{{ 'USER.PROFILE.DESCRIPTION' | translate }}</p>
         </div>
@@ -175,36 +175,6 @@
 
         <app-user-mfa *ngIf="user" [user]="user"></app-user-mfa>
 
-        <!-- <app-card title="{{ 'USER.ADDRESS.TITLE' | translate }}">
-            <form [formGroup]="addressForm" (ngSubmit)="saveAddress()">
-                <div class="content">
-                    <mat-form-field class="formfield">
-                        <mat-label>{{ 'USER.ADDRESS.STREET' | translate }}</mat-label>
-                        <input matInput formControlName="streetAddress" />
-                    </mat-form-field>
-                    <mat-form-field class="formfield">
-                        <mat-label>{{ 'USER.ADDRESS.POSTAL_CODE' | translate }}</mat-label>
-                        <input matInput formControlName="postalCode" />
-                    </mat-form-field>
-                    <mat-form-field class="formfield">
-                        <mat-label>{{ 'USER.ADDRESS.LOCALITY' | translate }}</mat-label>
-                        <input matInput formControlName="locality" />
-                    </mat-form-field>
-                    <mat-form-field class="formfield">
-                        <mat-label>{{ 'USER.ADDRESS.REGION' | translate }}</mat-label>
-                        <input matInput formControlName="region" />
-                    </mat-form-field>
-                    <mat-form-field class="formfield">
-                        <mat-label>{{ 'USER.ADDRESS.COUNTRY' | translate }}</mat-label>
-                        <input matInput formControlName="country" />
-                    </mat-form-field>
-                </div>
-                <div class="btn-container">
-                    <button type="submit" color="primary" mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
-                </div>
-            </form>
-        </app-card> -->
-
         <app-card *ngIf="user?.id" title="{{ 'GRANTS.USER.TITLE' | translate }}"
             description="{{'GRANTS.USER.DESCRIPTION' | translate }}">
             <app-user-grants [filterValue]="user?.id" [allowCreate]="['user.grant.write'] | hasRole"
@@ -221,7 +191,6 @@
             </div>
         </div>
 
-        <p class="side-section">{{ 'CHANGES.USER.TITLE' | translate }}</p>
         <app-changes [changeType]="ChangeType.USER" [id]="user.id"></app-changes>
     </metainfo>
 </app-meta-layout>

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

@@ -104,14 +104,6 @@ export class UserDetailComponent implements OnInit, OnDestroy {
                 confirmPassword: ['', [passwordConfirmValidator]],
             });
         });
-
-        // this.addressForm = this.fb.group({
-        //     streetAddress: [''],
-        //     postalCode: [''],
-        //     locality: [''],
-        //     region: [''],
-        //     country: [''],
-        // });
     }
 
     public ngOnInit(): void {
@@ -231,46 +223,10 @@ export class UserDetailComponent implements OnInit, OnDestroy {
             });
     }
 
-    // public saveAddress(): void {
-    //     if (!this.address.id) {
-    //         this.address.id = this.user.id;
-    //     }
-
-    //     this.address.streetAddress = this.streetAddress?.value;
-    //     this.address.postalCode = this.postalCode?.value;
-    //     this.address.locality = this.locality?.value;
-    //     this.address.region = this.region?.value;
-    //     this.address.country = this.country?.value;
-
-    //     this.mgmtUserService
-    //         .SaveUserAddress(this.address as UserAddress.AsObject).then((data: UserAddress) => {
-    //             this.toast.showInfo('Saved Address');
-    //             this.address = data.toObject();
-    //         }).catch(data => {
-    //             this.toast.showError(data.message);
-    //         });
-    // }
-
     public navigateBack(): void {
         this._location.back();
     }
 
-    // public get streetAddress(): AbstractControl | null {
-    //     return this.addressForm.get('streetAddress');
-    // }
-    // public get postalCode(): AbstractControl | null {
-    //     return this.addressForm.get('postalCode');
-    // }
-    // public get locality(): AbstractControl | null {
-    //     return this.addressForm.get('locality');
-    // }
-    // public get region(): AbstractControl | null {
-    //     return this.addressForm.get('region');
-    // }
-    // public get country(): AbstractControl | null {
-    //     return this.addressForm.get('country');
-    // }
-
     public get password(): AbstractControl | null {
         return this.passwordForm.get('password');
     }
@@ -285,7 +241,5 @@ export class UserDetailComponent implements OnInit, OnDestroy {
         }).catch(err => {
             console.error(err);
         });
-        // this.address = (await this.mgmtUserService.GetUserAddress(id)).toObject();
-        // this.addressForm.patchValue(this.address);
     }
 }

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

@@ -1,5 +1,4 @@
 h1 {
-    font-family: ailerons;
     margin-top: 0;
 }
 

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

@@ -36,8 +36,10 @@ import {
     ProjectMemberRoles,
     ProjectMemberSearchRequest,
     ProjectMemberSearchResponse,
+    ProjectRole,
     ProjectRoleAdd,
     ProjectRoleAddBulk,
+    ProjectRoleChange,
     ProjectRoleRemove,
     ProjectRoleSearchQuery,
     ProjectRoleSearchRequest,
@@ -386,6 +388,22 @@ export class ProjectService {
         );
     }
 
+
+    public async ChangeProjectRole(projectId: string, key: string, displayName: string, group: string):
+        Promise<ProjectRole> {
+        const req = new ProjectRoleChange();
+        req.setId(projectId);
+        req.setKey(key);
+        req.setGroup(group);
+        req.setDisplayName(displayName);
+        return await this.request(
+            c => c.changeProjectRole,
+            req,
+            f => f,
+        );
+    }
+
+
     public async RemoveProjectMember(id: string, userId: string): Promise<Empty> {
         const req = new ProjectMemberRemove();
         req.setId(id);

console/src/assets/i18n/de.json

@@ -32,10 +32,12 @@
     "ACTIONS": {
         "SAVE": "speichern",
         "NEW": "neu",
+        "ADD":"Hinzufügen",
         "CREATE": "create",
         "CONTINUE": "Weiter",
         "BACK": "zurück",
         "CLOSE": "schliessen",
+        "CANCEL":"abbrechen",
         "INFO": "Info",
         "OK": "Ok",
         "VIEW": "Ansehen",
@@ -396,8 +398,11 @@
             "ACTIONS": "Aktion",
             "ADDTITLE": "Rolle erstellen",
             "ADDDESCRIPTION": "Geben Sie die Daten für die zu erstellende Rolle ein!",
+            "EDITTITLE": "Rolle ändern",
+            "EDITDESCRIPTION": "Geben Sie die Daten für die zu verändernde Rolle ein!",
             "DELETE":"Rolle löschen",
-            "CREATIONDATE":"Erstelldatum"
+            "CREATIONDATE":"Erstelldatum",
+            "SELECTGROUPTOOLTIP":"Selektiere alle Rollen der Gruppe {{group}}"
         },
         "TABLE": {
             "TOTAL": "Einträge gesamt:",

console/src/assets/i18n/en.json

@@ -32,10 +32,12 @@
     "ACTIONS": {
         "SAVE": "Save",
         "NEW": "New",
+        "ADD":"Add",
         "CREATE": "Create",
         "CONTINUE": "Continue",
         "BACK": "back",
         "CLOSE": "Close",
+        "CANCEL":"cancel",
         "INFO": "Info",
         "OK": "OK",
         "VIEW": "Show",
@@ -397,8 +399,11 @@
             "ACTIONS": "Actions",
             "ADDTITLE": "Create role",
             "ADDDESCRIPTION": "Enter the data for the new role!",
+            "EDITTITLE": "Edit role",
+            "EDITDESCRIPTION": "Enter the new data for the role!",
             "DELETE":"Delete Role",
-            "CREATIONDATE":"Created"
+            "CREATIONDATE":"Created",
+            "SELECTGROUPTOOLTIP":"Select all Roles of the group {{group}}"
         },
         "TABLE": {
             "TOTAL": "Entries total:",
@@ -535,7 +540,7 @@
     },
     "CHANGES": {
         "LISTTITLE":"Last Changes",
-        "BOTTOM":"Bottom",
+        "BOTTOM":"You've arrived at the bottom",
         "ORG": {
             "TITLE":"Activity",
             "DESCRIPTION":"Here you can see the latest events that have affected an organization change"

console/src/index.html

@@ -10,7 +10,7 @@
     <link href="https://fonts.googleapis.com/css?family=Manjari|Roboto+Slab&amp;display=swap" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&amp;display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
     <link rel="stylesheet"
         href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
     <link rel="manifest" href="manifest.webmanifest">

console/src/styles.scss

@@ -109,7 +109,7 @@ $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
 
 
 $custom-typography: mat-typography-config(
-    $font-family: 'Rubik'
+    $font-family: 'Lato'
 );
 @include mat-core($custom-typography);
 
@@ -121,7 +121,7 @@ $custom-typography: mat-typography-config(
     @include angular-material-theme($light-theme);
     color: #202124;
 
-	.crescent, .side, .main-container {
+	.side, .main-container {
         background-color: white;
         transition: background-color .5s ease-in-out;
     }
@@ -131,7 +131,7 @@ $custom-typography: mat-typography-config(
     @include component-themes($dark-theme);
     @include angular-material-theme($dark-theme);
 
-	.crescent, .side, .main-container {
+	.side, .main-container {
         background-color: #212224;
         transition: background-color .5s ease-in-out;
     }
@@ -154,7 +154,7 @@ body {
 }
 body {
     margin: 0;
-    font-family: 'Rubik', -apple-system, BlinkMacSystemFont,
+    font-family: 'Lato', -apple-system, BlinkMacSystemFont,
     "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans",
     "Droid Sans", "Helvetica Neue", sans-serif;