feat(console): split granted from owned project modules, general ui ux fixes (#286)

* add iam label, user avatar

* avatar component

* split granted and owned modules

* move components to resp module

* refactor project contributors, g project nav

* rem console logs, add avatar for org members

* fix changes loading, auth user page

* refactor home, i18n

* fix changes side overflow

* lint

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

@@ -99,8 +99,6 @@ export class AppCreateComponent implements OnInit, OnDestroy {
         this.oidcApp.responseTypesList = this.responseTypesList?.value;
         this.oidcApp.authMethodType = this.authMethodType?.value;
 
-        console.log(this.oidcApp);
-
         this.projectService
             .CreateOIDCApp(this.oidcApp)
             .then((data: Application) => {
@@ -119,7 +117,6 @@ export class AppCreateComponent implements OnInit, OnDestroy {
             });
 
             dialogRef.afterClosed().subscribe(result => {
-                console.log('The dialog was closed');
                 this.router.navigate(['projects', this.projectId, 'apps', app.id]);
             });
         } else {

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

@@ -118,7 +118,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
         this.projectService.GetApplicationById(projectid, id).then(app => {
             this.app = app.toObject();
             this.appNameForm.patchValue(this.app);
-            console.log(this.grpcService.clientid, this.app.oidcConfig?.clientId);
 
             if (this.app.state !== AppState.APPSTATE_ACTIVE) {
                 this.appNameForm.controls['name'].disable();
@@ -220,8 +219,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
                 this.app.oidcConfig.redirectUrisList = this.redirectUrisList;
                 this.app.oidcConfig.postLogoutRedirectUrisList = this.postLogoutRedirectUrisList;
 
-                console.log(this.app.oidcConfig);
-
                 this.projectService
                     .UpdateOIDCAppConfig(this.projectId, this.app.id, this.app.oidcConfig)
                     .then((data: OIDCConfig) => {
@@ -235,9 +232,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     }
 
     public regenerateOIDCClientSecret(): void {
-        console.log(this.app.id, this.projectId);
         this.projectService.RegenerateOIDCClientSecret(this.app.id, this.projectId).then((data: OIDCConfig) => {
-            console.log(data.toObject());
             this.toast.showInfo('OIDC Secret Regenerated');
             this.dialog.open(AppSecretDialogComponent, {
                 data: {

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

@@ -86,7 +86,6 @@ export class GrantedProjectDetailComponent implements OnInit, OnDestroy {
         if (this.projectId && this.grantId) {
             this.projectService.GetGrantedProjectByID(this.projectId, this.grantId).then(proj => {
                 this.project = proj.toObject();
-                console.log(this.project);
             }).catch(error => {
                 this.toast.showError(error.message);
             });

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

@@ -90,7 +90,6 @@ export class GrantedProjectListComponent implements OnInit, OnDestroy {
             this.totalResult = res.toObject().totalResult;
             this.dataSource.data = this.grantedProjectList;
             this.loadingSubject.next(false);
-            console.log(this.grantedProjectList);
         }).catch(error => {
             console.error(error);
             this.toast.showError(error.message);

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

@@ -0,0 +1,48 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard } from 'src/app/guards/auth.guard';
+import { RoleGuard } from 'src/app/guards/role.guard';
+
+import { GrantedProjectDetailComponent } from './granted-project-detail/granted-project-detail.component';
+import { GrantedProjectsComponent } from './granted-projects.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: GrantedProjectsComponent,
+        data: { animation: 'HomePage' },
+    },
+    {
+        path: 'create',
+        loadChildren: () => import('../project-create/project-create.module').then(m => m.ProjectCreateModule),
+        canActivate: [AuthGuard, RoleGuard],
+        data: {
+            roles: ['project.write'],
+        },
+    },
+    {
+        path: ':id/grant/:grantId',
+        component: GrantedProjectDetailComponent,
+        data: { animation: 'HomePage' },
+    },
+    {
+        path: ':projectid/members',
+        loadChildren: () => import('../../modules/project-members/project-members.module').then(m => m.ProjectMembersModule),
+    },
+    {
+        path: ':projectid/roles/create',
+        loadChildren: () => import('../project-role-create/project-role-create.module').then(m => m.ProjectRoleCreateModule),
+
+    },
+    {
+        path: ':projectid/grants/create',
+        loadChildren: () => import('../project-grant-create/project-grant-create.module')
+            .then(m => m.ProjectGrantCreateModule),
+    },
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule],
+})
+export class GrantedProjectsRoutingModule { }

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

@@ -2,9 +2,6 @@
     <h1>{{ 'PROJECT.PAGES.LIST' | translate }}</h1>
     <p class="sub">{{ 'PROJECT.PAGES.LISTDESCRIPTION' | translate }}</p>
 
-    <h2>Owned Projects</h2>
-    <app-owned-project-list></app-owned-project-list>
-
     <h2>Granted Projects</h2>
     <app-granted-project-list>
     </app-granted-project-list>

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

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ProjectContributorsComponent } from './project-contributors.component';
+import { GrantedProjectsComponent } from './granted-projects.component';
 
-describe('ProjectContributorsComponent', () => {
-    let component: ProjectContributorsComponent;
-    let fixture: ComponentFixture<ProjectContributorsComponent>;
+describe('GrantedProjectsComponent', () => {
+    let component: GrantedProjectsComponent;
+    let fixture: ComponentFixture<GrantedProjectsComponent>;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            declarations: [ProjectContributorsComponent],
+            declarations: [GrantedProjectsComponent],
         })
             .compileComponents();
     }));
 
     beforeEach(() => {
-        fixture = TestBed.createComponent(ProjectContributorsComponent);
+        fixture = TestBed.createComponent(GrantedProjectsComponent);
         component = fixture.componentInstance;
         fixture.detectChanges();
     });

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

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

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

@@ -0,0 +1,91 @@
+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';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+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 { 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 { SearchUserAutocompleteModule } from '../../modules/search-user-autocomplete/search-user-autocomplete.module';
+import { PipesModule } from '../../pipes/pipes.module';
+import { OrgContributorsModule } from '../orgs/org-contributors/org-contributors.module';
+import { UserListModule } from '../user-list/user-list.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';
+import { GrantedProjectsRoutingModule } from './granted-projects-routing.module';
+import { GrantedProjectsComponent } from './granted-projects.component';
+
+@NgModule({
+    declarations: [
+        GrantedProjectsComponent,
+        GrantedProjectListComponent,
+        GrantedProjectGridComponent,
+        GrantedProjectDetailComponent,
+    ],
+    imports: [
+        CommonModule,
+        GrantedProjectsRoutingModule,
+        ProjectContributorsModule,
+        FormsModule,
+        TranslateModule,
+        ReactiveFormsModule,
+        HasRoleModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatFormFieldModule,
+        MatInputModule,
+        ChangesModule,
+        UserListModule,
+        MatMenuModule,
+        MatChipsModule,
+        MatIconModule,
+        MatSelectModule,
+        MatButtonModule,
+        MatProgressSpinnerModule,
+        MetaLayoutModule,
+        MatProgressBarModule,
+        MatDialogModule,
+        MatButtonToggleModule,
+        MatTabsModule,
+        ProjectRolesModule,
+        SearchUserAutocompleteModule,
+        MatCheckboxModule,
+        CardModule,
+        MatTooltipModule,
+        MatSortModule,
+        PipesModule,
+        OrgContributorsModule,
+        TranslateModule.forChild({
+            loader: {
+                provide: TranslateLoader,
+                useFactory: HttpLoaderFactory,
+                deps: [HttpClient],
+            },
+        }),
+    ],
+    schemas: [NO_ERRORS_SCHEMA],
+})
+export class GrantedProjectsModule { }

console/src/app/pages/granted-projects/project-grant-members/project-grant-members-datasource.ts

@@ -34,7 +34,6 @@ export class ProjectGrantMembersDataSource extends DataSource<ProjectMember.AsOb
                 catchError(() => of([])),
                 finalize(() => this.loadingSubject.next(false)),
             ).subscribe(members => {
-                console.log(members);
                 this.membersSubject.next(members);
             });
 

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

@@ -101,7 +101,6 @@ export class ProjectGrantMembersComponent implements AfterViewInit, OnInit {
 
         dialogRef.afterClosed().subscribe(resp => {
             if (resp) {
-                console.log(resp);
                 const users: User.AsObject[] = resp.users;
                 const roles: string[] = resp.roles;
 

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

@@ -4,7 +4,6 @@
         <ng-template #lighttheme>
             <img src="../assets/images/zitadel-logo-oneline-lightdesign.svg" />
         </ng-template>
-        <p>{{'HOME.DESCRIPTION' | translate}}</p>
     </div>
 
     <div class="container">

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

@@ -53,8 +53,8 @@
         }
         
         img {
-            height: 90px;
-            margin-bottom: 2rem;
+            height: 60px;
+            align-self: flex-end;
         }
 	}
 
@@ -73,14 +73,6 @@
 			display: flex;
             flex-direction: column;
             transition: border-color .1s;
-            
-            &:hover {
-                i {
-                    color: #fe11e280;
-                }
-                // border-width: 2px;
-                border-color: #fe11e270;
-            }
 
 			.top {
 				padding: 1rem 2rem;

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

@@ -7,7 +7,11 @@
                 <ng-container *ngFor="let member of membersSubject | async">
                     <div (click)="showDetail()" class="avatar-circle"
                         matTooltip="{{ member.email }} | {{member.rolesList?.join(' ')}}">
-                        <i class="avatar las la-user-circle"></i>
+                        <app-avatar *ngIf="member && (member.displayName || (member.firstName && member.lastName))"
+                            class="avatar dontcloseonclick"
+                            [name]="member.displayName ? member.displayName : (member.firstName + ' '+ member.lastName)"
+                            [size]="32">
+                        </app-avatar>
                     </div>
                 </ng-container>
             </ng-container>

console/src/app/pages/iam/iam-contributors/iam-contributors.component.ts

@@ -53,7 +53,6 @@ export class IamContributorsComponent implements OnInit {
             catchError(() => of([])),
             finalize(() => this.loadingSubject.next(false)),
         ).subscribe(members => {
-            console.log(members);
             this.membersSubject.next(members);
         });
     }

console/src/app/pages/iam/iam-contributors/iam-contributors.module.ts

@@ -12,6 +12,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
 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 { MemberCreateDialogModule } from '../../../modules/add-member-dialog/member-create-dialog.module';
 import { IamContributorsComponent } from './iam-contributors.component';
@@ -30,6 +31,7 @@ import { IamContributorsComponent } from './iam-contributors.component';
         MatPaginatorModule,
         MatIconModule,
         RouterModule,
+        AvatarModule,
         MatProgressSpinnerModule,
         MatCheckboxModule,
         MatTooltipModule,

console/src/app/pages/iam/iam-members/iam-members-datasource.ts

@@ -32,7 +32,6 @@ export class IamMembersDataSource extends DataSource<ProjectMember.AsObject> {
             from(promise).pipe(
                 map(resp => {
                     this.totalResult = resp.toObject().totalResult;
-                    console.log(this.totalResult);
                     return resp.toObject().resultList;
                 }),
                 catchError(() => of([])),

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

@@ -7,7 +7,11 @@
                 <ng-container *ngFor="let member of membersSubject | async">
                     <div (click)="showDetail()" class="avatar-circle"
                         matTooltip="{{ member.email }} | {{member.rolesList?.join(' ')}}">
-                        <i class="avatar las la-user-circle"></i>
+                        <app-avatar *ngIf="member && (member.displayName || (member.firstName && member.lastName))"
+                            class="avatar dontcloseonclick"
+                            [name]="member.displayName ? member.displayName : (member.firstName + ' '+ member.lastName)"
+                            [size]="32">
+                        </app-avatar>
                     </div>
                 </ng-container>
             </ng-container>

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

@@ -54,7 +54,6 @@ export class OrgContributorsComponent implements OnInit {
             catchError(() => of([])),
             finalize(() => this.loadingSubject.next(false)),
         ).subscribe(members => {
-            console.log(members);
             this.membersSubject.next(members);
         });
     }

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

@@ -12,6 +12,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
 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 { MemberCreateDialogModule } from '../../../modules/add-member-dialog/member-create-dialog.module';
 import { OrgContributorsComponent } from './org-contributors.component';
@@ -34,6 +35,7 @@ import { OrgContributorsComponent } from './org-contributors.component';
         MatCheckboxModule,
         MatTooltipModule,
         TranslateModule,
+        AvatarModule,
     ],
     exports: [
         OrgContributorsComponent,

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

@@ -100,7 +100,6 @@ export class OrgCreateComponent {
                 confirmPassword: ['', [...validators, passwordConfirmValidator]],
             });
         }).catch(error => {
-            console.log('no password complexity policy defined!');
             console.error(error);
             this.userForm = this.fb.group({
                 userName: ['', [Validators.required]],

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

@@ -24,7 +24,7 @@
                     <input matInput [(ngModel)]="newDomain" />
                 </mat-form-field>
 
-                <button matTooltip="Add domain" mat-icon-button color="accent" (click)="saveNewOrgDomain()">
+                <button matTooltip="Add domain" mat-icon-button color="primary" (click)="saveNewOrgDomain()">
                     <mat-icon>check</mat-icon>
                 </button>
 

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

@@ -52,7 +52,6 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
         });
 
         this.orgService.SearchMyOrgDomains(0, 100).then(result => {
-            console.log(result.toObject().resultList);
             this.domains = result.toObject().resultList;
         });
     }
@@ -81,7 +80,6 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
     }
 
     public removeDomain(domain: string): void {
-        console.log(domain);
         this.orgService.RemoveMyOrgDomain(domain).then(() => {
             this.toast.showInfo('Removed');
             const index = this.domains.findIndex(d => d.domain === domain);

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

@@ -31,7 +31,6 @@ export class OrgGridComponent {
     private getData(limit: number, offset: number): void {
         this.userService.SearchMyProjectOrgs(limit, offset).then(res => {
             this.orgList = res.toObject().resultList;
-            console.log(this.orgList);
         }).catch(error => {
             console.error(error);
             this.toast.showError(error.message);

console/src/app/pages/orgs/org-member-roles-autocomplete/org-member-roles-autocomplete.component.ts

@@ -21,7 +21,6 @@ export class OrgMemberRolesAutocompleteComponent {
     constructor(private orgService: OrgService, private toast: ToastService) {
         this.orgService.GetOrgMemberRoles().then(resp => {
             this.allRoles = resp.toObject().rolesList;
-            console.log(this.allRoles);
         }).catch(error => {
             this.toast.showError(error.message);
         });

console/src/app/pages/orgs/org-members/org-members-datasource.ts

@@ -31,7 +31,6 @@ export class ProjectMembersDataSource extends DataSource<ProjectMember.AsObject>
             from(promise).pipe(
                 map(resp => {
                     this.totalResult = resp.toObject().totalResult;
-                    console.log(this.totalResult);
                     return resp.toObject().resultList;
                 }),
                 catchError(() => of([])),

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

@@ -33,7 +33,6 @@ export class OrgMembersComponent implements AfterViewInit {
         private toast: ToastService) {
         this.orgService.GetMyOrg().then(org => {
             this.org = org.toObject();
-            console.log(this.org);
             this.dataSource = new ProjectMembersDataSource(this.orgService);
             this.dataSource.loadMembers(0, 25, 'asc');
         });

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

@@ -124,7 +124,6 @@ export class PasswordPolicyComponent implements OnInit, OnDestroy {
                             break;
                         case PolicyComponentType.IAM_POLICY:
                             this.iamData = data.toObject();
-                            console.log(this.iamData);
                             break;
                     }
                 });
@@ -236,7 +235,6 @@ export class PasswordPolicyComponent implements OnInit, OnDestroy {
 
                     break;
                 case PolicyComponentType.COMPLEXITY:
-                    console.log(this.complexityData);
                     this.orgService.CreatePasswordComplexityPolicy(
                         this.complexityData.description,
                         this.complexityData.hasLowercase,
@@ -252,7 +250,6 @@ export class PasswordPolicyComponent implements OnInit, OnDestroy {
                     break;
 
                 case PolicyComponentType.IAM_POLICY:
-                    console.log(this.complexityData);
                     const orgId = this.sessionStorage.getItem('organization');
                     if (orgId) {
                         this.adminService.CreateOrgIamPolicy(
@@ -294,7 +291,6 @@ export class PasswordPolicyComponent implements OnInit, OnDestroy {
 
                     break;
                 case PolicyComponentType.COMPLEXITY:
-                    console.log(this.complexityData);
                     this.orgService.UpdatePasswordComplexityPolicy(
                         this.complexityData.description,
                         this.complexityData.hasLowercase,
@@ -310,7 +306,6 @@ export class PasswordPolicyComponent implements OnInit, OnDestroy {
                     break;
 
                 case PolicyComponentType.IAM_POLICY:
-                    console.log(this.complexityData);
                     const orgId = this.sessionStorage.getItem('organization');
                     if (orgId) {
                         this.adminService.UpdateOrgIamPolicy(

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

@@ -85,7 +85,6 @@ export class OwnedProjectDetailComponent implements OnInit, OnDestroy {
         if (this.projectId) {
             this.projectService.GetProjectById(id).then(proj => {
                 this.project = proj.toObject();
-                console.log(this.project);
             }).catch(error => {
                 this.toast.showError(error.message);
             });

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

@@ -56,7 +56,6 @@ export class OwnedProjectListComponent implements OnInit, OnDestroy {
     ) { }
 
     public ngOnInit(): void {
-        console.log('asdf');
         this.getData(10, 0);
     }
 
@@ -85,14 +84,12 @@ export class OwnedProjectListComponent implements OnInit, OnDestroy {
     }
 
     private async getData(limit: number, offset: number): Promise<void> {
-        console.log('getprojects');
         this.loadingSubject.next(true);
         this.projectService.SearchProjects(limit, offset).then(res => {
             this.ownedProjectList = res.toObject().resultList;
             this.totalResult = res.toObject().totalResult;
             this.dataSource.data = this.ownedProjectList;
             this.loadingSubject.next(false);
-            console.log(this.ownedProjectList);
         }).catch(error => {
             console.error(error);
             this.toast.showError(error.message);

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

@@ -3,14 +3,13 @@ import { RouterModule, Routes } from '@angular/router';
 import { AuthGuard } from 'src/app/guards/auth.guard';
 import { RoleGuard } from 'src/app/guards/role.guard';
 
-import { GrantedProjectDetailComponent } from './granted-project-detail/granted-project-detail.component';
 import { OwnedProjectDetailComponent } from './owned-project-detail/owned-project-detail.component';
-import { ProjectsComponent } from './projects.component';
+import { OwnedProjectsComponent } from './owned-projects.component';
 
 const routes: Routes = [
     {
         path: '',
-        component: ProjectsComponent,
+        component: OwnedProjectsComponent,
         data: { animation: 'HomePage' },
     },
     {
@@ -21,11 +20,6 @@ const routes: Routes = [
             roles: ['project.write'],
         },
     },
-    {
-        path: ':id/grant/:grantId',
-        component: GrantedProjectDetailComponent,
-        data: { animation: 'HomePage' },
-    },
     {
         path: ':id',
         component: OwnedProjectDetailComponent,
@@ -33,7 +27,7 @@ const routes: Routes = [
     },
     {
         path: ':projectid/members',
-        loadChildren: () => import('./project-members/project-members.module').then(m => m.ProjectMembersModule),
+        loadChildren: () => import('../../modules/project-members/project-members.module').then(m => m.ProjectMembersModule),
     },
     {
         path: ':projectid/apps',
@@ -56,4 +50,4 @@ const routes: Routes = [
     imports: [RouterModule.forChild(routes)],
     exports: [RouterModule],
 })
-export class ProjectsRoutingModule { }
+export class OwnedProjectsRoutingModule { }

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

@@ -0,0 +1,7 @@
+<div class="max-width-container">
+    <h1>{{ 'PROJECT.PAGES.LIST' | translate }}</h1>
+    <p class="sub">{{ 'PROJECT.PAGES.LISTDESCRIPTION' | translate }}</p>
+
+    <h2>Owned Projects</h2>
+    <app-owned-project-list></app-owned-project-list>
+</div>

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

@@ -0,0 +1,13 @@
+h1 {
+    font-family: ailerons;
+    margin-top: 0;
+}
+
+.sub {
+    color: #81868a;
+    margin-bottom: 2rem;
+}
+
+.max-width-container {
+    padding-bottom: 3rem;
+}

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

@@ -3,11 +3,11 @@ import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs';
 
 @Component({
-    selector: 'app-projects',
-    templateUrl: './projects.component.html',
-    styleUrls: ['./projects.component.scss'],
+    selector: 'app-owned-projects',
+    templateUrl: './owned-projects.component.html',
+    styleUrls: ['./owned-projects.component.scss'],
 })
-export class ProjectsComponent implements OnInit, OnDestroy {
+export class OwnedProjectsComponent implements OnInit, OnDestroy {
     // public projectId: string = '';
     // public grantId: string = '';
     private sub: Subscription = new Subscription();

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

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
@@ -20,55 +20,45 @@ 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 { HttpLoaderFactory } from 'src/app/app.module';
-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';
-import { SearchUserAutocompleteModule } from 'src/app/modules/search-user-autocomplete/search-user-autocomplete.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 { SearchUserAutocompleteModule } from '../../modules/search-user-autocomplete/search-user-autocomplete.module';
+import { PipesModule } from '../../pipes/pipes.module';
 import { OrgContributorsModule } from '../orgs/org-contributors/org-contributors.module';
 import { UserListModule } from '../user-list/user-list.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';
 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';
+import { OwnedProjectsRoutingModule } from './owned-projects-routing.module';
+import { OwnedProjectsComponent } from './owned-projects.component';
 import { ProjectApplicationGridComponent } from './project-application-grid/project-application-grid.component';
 import { ProjectApplicationsComponent } from './project-applications/project-applications.component';
-import { ProjectContributorsComponent } from './project-contributors/project-contributors.component';
 import {
     ProjectGrantMembersCreateDialogComponent,
 } from './project-grant-members-create-dialog/project-grant-members-create-dialog.component';
-import { ProjectGrantMembersComponent } from './project-grant-members/project-grant-members.component';
 import { ProjectGrantsComponent } from './project-grants/project-grants.component';
-import { ProjectsRoutingModule } from './projects-routing.module';
-import { ProjectsComponent } from './projects.component';
 
 @NgModule({
     declarations: [
-        GrantedProjectListComponent,
-        GrantedProjectGridComponent,
-        GrantedProjectDetailComponent,
-
+        OwnedProjectsComponent,
         OwnedProjectListComponent,
         OwnedProjectGridComponent,
         OwnedProjectDetailComponent,
-
-        ProjectApplicationsComponent,
         ProjectApplicationGridComponent,
+        ProjectApplicationsComponent,
         ProjectGrantsComponent,
-        ProjectGrantMembersComponent,
         ProjectGrantMembersCreateDialogComponent,
-        ProjectContributorsComponent,
-        ProjectsComponent,
     ],
     imports: [
-        ProjectsRoutingModule,
         CommonModule,
+        OwnedProjectsRoutingModule,
+        ProjectContributorsModule,
         FormsModule,
         TranslateModule,
         ReactiveFormsModule,
@@ -106,10 +96,6 @@ import { ProjectsComponent } from './projects.component';
             },
         }),
     ],
-    entryComponents: [
-        ProjectGrantMembersCreateDialogComponent,
-    ],
-    exports: [],
-    schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
+    schemas: [NO_ERRORS_SCHEMA],
 })
-export class ProjectsModule { }
+export class OwnedProjectsModule { }

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

@@ -29,7 +29,6 @@ export class ProjectGrantsDataSource extends DataSource<ProjectGrant.AsObject> {
             catchError(() => of([])),
             finalize(() => this.loadingSubject.next(false)),
         ).subscribe(grants => {
-            console.log(grants);
             this.grantsSubject.next(grants);
         });
     }

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

@@ -80,7 +80,6 @@ export class ProjectGrantsComponent implements OnInit, AfterViewInit {
         this.expandedElement = this.expandedElement === grant ? null : grant;
         this.projectService.SearchProjectGrantMembers(this.projectId, grant.id, 10, 0).then(ret => {
             this.selectedGrantMembers = ret.toObject().resultList;
-            console.log(this.selectedGrantMembers);
         });
     }
 
@@ -96,13 +95,6 @@ export class ProjectGrantsComponent implements OnInit, AfterViewInit {
             width: '400px',
         });
 
-        console.log({
-            orgId: grant.grantedOrgId,
-            grantId: grant.id,
-            projectId: grant.projectId,
-            roleKeysList: grant.roleKeysList,
-        });
-
         dialogRef.afterClosed().subscribe((dataToAdd: ProjectGrantMembersCreateDialogExportType) => {
             if (dataToAdd) {
                 dataToAdd.userIds.forEach(userid => {

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

@@ -25,7 +25,6 @@ export class ProjectCreateComponent implements OnInit {
     public ngOnInit(): void { }
 
     public saveProject(): void {
-        console.log(this.project);
         this.projectService
             .CreateProject(this.project)
             .then((data: Project) => {

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

@@ -35,7 +35,6 @@ export class ProjectGrantCreateComponent implements OnInit, OnDestroy {
     public ngOnInit(): void {
         this.routeSubscription = this.route.params.subscribe(params => {
             this.projectId = params.projectid;
-            console.log(params);
         });
     }
 
@@ -45,7 +44,6 @@ export class ProjectGrantCreateComponent implements OnInit, OnDestroy {
 
     public searchOrg(domain: any): void {
         this.orgService.getOrgByDomainGlobal(domain.value).then((ret) => {
-            console.log(ret.toObject());
             const tmp = ret.toObject();
             this.authService.GetActiveOrg().then((org) => {
                 if (tmp !== org) {
@@ -66,12 +64,10 @@ export class ProjectGrantCreateComponent implements OnInit, OnDestroy {
         this.projectService
             .CreateProjectGrant(this.org.id, this.projectId, this.rolesKeyList)
             .then((data) => {
-                console.log(data);
                 this.close();
             })
             .catch(error => {
                 this.toast.showError(error.message);
-                console.log(error);
             });
     }
 

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

@@ -86,14 +86,12 @@ export class ProjectRoleCreateComponent implements OnInit, OnDestroy {
     public addRole(): void {
         const promises = this.formArray.value.map((role: ProjectRoleAdd.AsObject) => {
             role.id = this.projectId;
-            console.log(role);
             return this.projectService.AddProjectRole(role);
         });
 
         Promise.all(promises).then(() => {
             this.router.navigate(['projects', this.projectId]);
         }).catch(data => {
-            console.log(data);
             this.toast.showError(data.message);
         });
     }

console/src/app/pages/projects/project-contributors/project-contributors.component.html

@@ -1,26 +0,0 @@
-<div class="groups">
-    <span class="header">{{ 'PROJECT.MEMBER.TITLE' | translate }}</span>
-    <span class="sub-header">{{ 'PROJECT.MEMBER.TITLEDESC' | translate }}</span>
-    <div class="people">
-        <div class="img-list">
-            <ng-container *ngIf="totalResult < 10; else compact">
-                <ng-container *ngFor="let member of membersSubject | async">
-                    <div (click)="showDetail()" class="avatar-circle"
-                        matTooltip="{{ member.email }} | {{member.rolesList?.join(' ')}}">
-                        <i class="avatar las la-user-circle"></i>
-                    </div>
-                </ng-container>
-            </ng-container>
-            <ng-template #compact>
-                <div (click)="showDetail()" class="avatar-circle" matTooltip="Click to show detail">
-                    <span>{{totalResult}}</span>
-                </div>
-            </ng-template>
-            <button class="add-img" (click)="openAddMember()"
-                [disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE" mat-icon-button
-                aria-label="Edit contributors">
-                <mat-icon>add</mat-icon>
-            </button>
-        </div>
-    </div>
-</div>

console/src/app/pages/projects/project-contributors/project-contributors.component.scss

@@ -1,72 +0,0 @@
-.groups {
-    padding-top: 1rem;
-
-    .header {
-      display: block;
-      margin-bottom: 1rem;
-      font-weight: 400;
-    }
-
-    .sub-header {
-        font-size: .8rem;
-        color: #81868a;
-    }
-  
-    .people {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      margin-bottom: 1rem;
-  
-      .owner {
-        margin-right: 1rem;
-      }
-  
-      .img-list {
-        width: 100%;
-        margin-top: 0.5rem;
-        margin-left: 1rem;
-        display: flex;
-        align-items: center;
-  
-        .avatar-img, .avatar-circle {
-          float: left;
-          margin: 0 8px 0 -15px;
-          height: 32px;
-          width: 32px;
-          border-radius: 50%;
-          box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0, 0, 0, 0.5);
-        }
-
-        .add-img {
-            float: left;
-            margin: 0 8px 0 -15px;
-        }
-
-        .avatar-img {
-            &:before {
-                content: '';
-                display: block;
-                position: absolute;
-                top: 0;
-                bottom: 0;
-                height: 32px;
-                width: 32px;
-            }
-        }
-
-        .avatar-circle {
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background-color: indianred;
-        }
-  
-        .margin-neg {
-          margin-left: -1rem;
-        }
-      }
-    }
-  }
-  

console/src/app/pages/projects/project-contributors/project-contributors.component.ts

@@ -1,100 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
-import { Router } from '@angular/router';
-import { BehaviorSubject, from, of } from 'rxjs';
-import { catchError, finalize, map } from 'rxjs/operators';
-import {
-    ProjectGrantView,
-    ProjectMemberSearchResponse,
-    ProjectMemberView,
-    ProjectState,
-    ProjectType,
-    ProjectView,
-    User,
-} from 'src/app/proto/generated/management_pb';
-import { ProjectService } from 'src/app/services/project.service';
-import { ToastService } from 'src/app/services/toast.service';
-
-import {
-    CreationType,
-    MemberCreateDialogComponent,
-} from '../../../modules/add-member-dialog/member-create-dialog.component';
-
-@Component({
-    selector: 'app-project-contributors',
-    templateUrl: './project-contributors.component.html',
-    styleUrls: ['./project-contributors.component.scss'],
-})
-export class ProjectContributorsComponent implements OnInit {
-    @Input() public project!: ProjectView.AsObject | ProjectGrantView.AsObject;
-    @Input() public projectType!: ProjectType;
-
-    @Input() public disabled: boolean = false;
-
-    public totalResult: number = 0;
-    public membersSubject: BehaviorSubject<ProjectMemberView.AsObject[]>
-        = new BehaviorSubject<ProjectMemberView.AsObject[]>([]);
-    public ProjectState: any = ProjectState;
-    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
-
-    constructor(private projectService: ProjectService,
-        private dialog: MatDialog,
-        private toast: ToastService,
-        private router: Router) { }
-
-    public ngOnInit(): void {
-        console.log('project grant members');
-        const promise: Promise<ProjectMemberSearchResponse> | undefined =
-            this.projectType === ProjectType.PROJECTTYPE_OWNED ?
-                this.projectService.SearchProjectMembers(this.project.projectId, 100, 0) :
-                this.projectType === ProjectType.PROJECTTYPE_GRANTED ?
-                    this.projectService.SearchProjectGrantMembers(this.project.projectId,
-                        this.project.projectId, 100, 0) : undefined;
-        if (promise) {
-            from(promise).pipe(
-                map(resp => {
-                    this.totalResult = resp.toObject().totalResult;
-                    return resp.toObject().resultList;
-                }),
-                catchError(() => of([])),
-                finalize(() => this.loadingSubject.next(false)),
-            ).subscribe(members => {
-                console.log(members);
-                this.membersSubject.next(members);
-            });
-        }
-    }
-
-    public openAddMember(): void {
-        const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
-            data: {
-                creationType: CreationType.PROJECT_OWNED,
-                projectId: this.project.projectId,
-            },
-            width: '400px',
-        });
-
-        dialogRef.afterClosed().subscribe(resp => {
-            if (resp) {
-                const users: User.AsObject[] = resp.users;
-                const roles: string[] = resp.roles;
-
-                if (users && users.length && roles && roles.length) {
-                    Promise.all(users.map(user => {
-                        return this.projectService.AddProjectMember(this.project.projectId, user.id, roles);
-                    })).then(() => {
-                        this.toast.showError('members added');
-                    }).catch(error => {
-                        this.toast.showError(error.message);
-                    });
-                }
-            }
-        });
-    }
-
-    public showDetail(): void {
-        if (this.project?.state === ProjectState.PROJECTSTATE_ACTIVE) {
-            this.router.navigate(['projects', this.project.projectId, 'members']);
-        }
-    }
-}

console/src/app/pages/projects/project-members/project-members-datasource.ts

@@ -1,68 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { BehaviorSubject, from, Observable, of } from 'rxjs';
-import { catchError, finalize, map } from 'rxjs/operators';
-import { ProjectMember, ProjectMemberSearchResponse, ProjectType, ProjectView } from 'src/app/proto/generated/management_pb';
-import { ProjectService } from 'src/app/services/project.service';
-
-/**
- * Data source for the ProjectMembers view. This class should
- * encapsulate all logic for fetching and manipulating the displayed data
- * (including sorting, pagination, and filtering).
- */
-export class ProjectMembersDataSource extends DataSource<ProjectMember.AsObject> {
-    public totalResult: number = 0;
-    public membersSubject: BehaviorSubject<ProjectMember.AsObject[]> = new BehaviorSubject<ProjectMember.AsObject[]>([]);
-    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
-    public loading$: Observable<boolean> = this.loadingSubject.asObservable();
-
-    constructor(private projectService: ProjectService) {
-        super();
-    }
-
-    public loadMembers(project: ProjectView.AsObject,
-        projectType: ProjectType,
-        pageIndex: number, pageSize: number, grantId?: string, sortDirection?: string): void {
-        const offset = pageIndex * pageSize;
-
-        this.loadingSubject.next(true);
-        // TODO
-        const promise: Promise<ProjectMemberSearchResponse> | undefined =
-            projectType === ProjectType.PROJECTTYPE_OWNED ?
-                this.projectService.SearchProjectMembers(project.projectId, pageSize, offset) :
-                projectType === ProjectType.PROJECTTYPE_GRANTED && grantId ?
-                    this.projectService.SearchProjectGrantMembers(project.projectId,
-                        grantId, pageSize, offset) : undefined;
-        if (promise) {
-            from(promise).pipe(
-                map(resp => {
-                    this.totalResult = resp.toObject().totalResult;
-                    console.log(this.totalResult);
-                    return resp.toObject().resultList;
-                }),
-                catchError(() => of([])),
-                finalize(() => this.loadingSubject.next(false)),
-            ).subscribe(members => {
-                this.membersSubject.next(members);
-            });
-        }
-    }
-
-
-    /**
-     * Connect this data source to the table. The table will only update when
-     * the returned stream emits new items.
-     * @returns A stream of the items to be rendered.
-     */
-    public connect(): Observable<ProjectMember.AsObject[]> {
-        return this.membersSubject.asObservable();
-    }
-
-    /**
-     *  Called when the table is being destroyed. Use this function, to clean up
-     * any open connections or free any held resources that were set up during connect.
-     */
-    public disconnect(): void {
-        this.membersSubject.complete();
-        this.loadingSubject.complete();
-    }
-}

console/src/app/pages/projects/project-members/project-members-routing.module.ts

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

console/src/app/pages/projects/project-members/project-members.component.html

@@ -1,107 +0,0 @@
-<div class="max-width-container">
-    <div class="container">
-        <div class="left">
-            <a *ngIf="project" [routerLink]="[ '/projects', project.projectId]" mat-icon-button>
-                <mat-icon class="icon">arrow_back</mat-icon>
-            </a>
-        </div>
-        <div class="right">
-            <div class="head">
-                <h1>{{project?.name}} {{ 'PROJECT.MEMBER.TITLE' | translate }}</h1>
-                <p class="desc">{{ 'PROJECT.MEMBER.DESCRIPTION' | translate }}</p>
-            </div>
-
-            <div class="table-header-row" *ngIf="project">
-                <div class="col">
-                    <ng-container *ngIf="!selection.hasValue()">
-                        <span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
-                        <span class="count">{{dataSource?.membersSubject.value.length}}</span>
-                    </ng-container>
-                    <ng-container *ngIf="selection.hasValue()">
-                        <span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
-                        <span class="count">{{selection?.selected?.length}}</span>
-                    </ng-container>
-                </div>
-                <span class="fill-space"></span>
-                <ng-template appHasRole
-                    [appHasRole]="['project.member.delete:' + project.projectId, 'project.member.delete']">
-                    <button (click)="removeProjectMemberSelection()" color="warn"
-                        matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button" mat-icon-button
-                        *ngIf="selection.hasValue()">
-                        <i class="las la-trash"></i>
-                    </button>
-                </ng-template>
-                <ng-template appHasRole
-                    [appHasRole]="['project.member.write:'+project.projectId,'project.member.write']">
-                    <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>
-            </div>
-
-            <div class="table-wrapper">
-                <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">
-                    <ng-container matColumnDef="select">
-                        <th class="selection" mat-header-cell *matHeaderCellDef>
-                            <mat-checkbox (change)="$event ? masterToggle() : null"
-                                [checked]="selection.hasValue() && isAllSelected()"
-                                [indeterminate]="selection.hasValue() && !isAllSelected()">
-                            </mat-checkbox>
-                        </th>
-                        <td class="selection" mat-cell *matCellDef="let row">
-                            <mat-checkbox (click)="$event.stopPropagation()"
-                                (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
-                            </mat-checkbox>
-                        </td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="firstname">
-                        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
-                        <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
-                            {{member.firstName}} </td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="lastname">
-                        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
-                        <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
-                            {{member.lastName}} </td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="username">
-                        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
-                        <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
-                            {{member.userName}} </td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="email">
-                        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
-                        <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
-                            {{member.email}}
-                        </td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="roles">
-                        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.ROLES' | translate }} </th>
-                        <td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
-                            <span class="role app-label" *ngFor="let role of member.rolesList; index as i">
-                                {{ 'ROLES.'+role | translate }}</span>
-                        </td>
-                    </ng-container>
-
-                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                    <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
-                    </tr>
-                </table>
-
-                <mat-paginator class="background-style" #paginator [pageSize]="50"
-                    [pageSizeOptions]="[25, 50, 100, 250]">
-                </mat-paginator>
-            </div>
-        </div>
-    </div>
-</div>

console/src/app/pages/projects/project-members/project-members.component.scss

@@ -1,123 +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: #81868a;
-            }
-        }
-    }
-}
-
-.table-header-row {
-  display: flex;
-  align-items: center;
-
-  .col {
-      display: flex;
-      flex-direction: column;
-      .desc {
-          font-size: .8rem;
-          color: #81868a;
-      }
-      .count {
-          font-size: 2rem;
-      }
-  }
-
-  .fill-space {
-      flex: 1;
-  }
-
-  .icon-button {
-      margin-right: .5rem;
-  }
-
-  .add-button {
-      border-radius: .5rem;
-  }
-}
-
-.table-wrapper {
-    overflow: auto;
-
-    .spinner-container {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    table, mat-paginator {
-        width: 100%;
-
-        td, th {
-            padding: .5rem;
-            &:first-child {
-                padding-left: 0;
-                padding-right: 1rem;
-            }
-
-            &:last-child {
-                padding-right: 0;
-            }
-        }
-
-        .action {
-            width: 40px;
-        }
-
-        .data-row {
-            &:hover {
-                background-color: #ffffff05;
-            }
-        }
-
-        .selection {
-            width: 50px;
-            max-width: 50px;
-        }
-
-        .role {
-            display: inline-block;
-            margin: .25rem;
-        }
-    }
-}
-
-.pointer {
-    outline: none;
-    cursor: pointer;
-}

console/src/app/pages/projects/project-members/project-members.component.spec.ts

@@ -1,34 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-
-import { ProjectMembersComponent } from './project-members.component';
-
-describe('ProjectMembersComponent', () => {
-  let component: ProjectMembersComponent;
-  let fixture: ComponentFixture<ProjectMembersComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ProjectMembersComponent],
-      imports: [
-        NoopAnimationsModule,
-        MatPaginatorModule,
-        MatSortModule,
-        MatTableModule,
-      ],
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ProjectMembersComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should compile', () => {
-    expect(component).toBeTruthy();
-  });
-});

console/src/app/pages/projects/project-members/project-members.component.ts

@@ -1,121 +0,0 @@
-import { SelectionModel } from '@angular/cdk/collections';
-import { AfterViewInit, Component, ViewChild } from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatTable } from '@angular/material/table';
-import { ActivatedRoute } from '@angular/router';
-import { tap } from 'rxjs/operators';
-import { ProjectMember, ProjectType, ProjectView } from 'src/app/proto/generated/management_pb';
-import { ProjectService } from 'src/app/services/project.service';
-import { ToastService } from 'src/app/services/toast.service';
-
-import { ProjectMembersDataSource } from './project-members-datasource';
-
-@Component({
-    selector: 'app-project-members',
-    templateUrl: './project-members.component.html',
-    styleUrls: ['./project-members.component.scss'],
-})
-export class ProjectMembersComponent implements AfterViewInit {
-    public project!: ProjectView.AsObject;
-    public projectType: ProjectType = ProjectType.PROJECTTYPE_OWNED;
-    public disabled: boolean = false;
-    @ViewChild(MatPaginator) public paginator!: MatPaginator;
-    @ViewChild(MatTable) public table!: MatTable<ProjectMember.AsObject>;
-    public dataSource!: ProjectMembersDataSource;
-    public selection: SelectionModel<ProjectMember.AsObject> = new SelectionModel<ProjectMember.AsObject>(true, []);
-
-    /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-    public displayedColumns: string[] = ['select', 'firstname', 'lastname', 'username', 'email', 'roles'];
-
-    constructor(private projectService: ProjectService,
-        private toast: ToastService,
-        private route: ActivatedRoute) {
-        this.route.params.subscribe(params => {
-            this.projectService.GetProjectById(params.projectid).then(project => {
-                this.project = project.toObject();
-                console.log(this.project);
-                this.dataSource = new ProjectMembersDataSource(this.projectService);
-                this.dataSource.loadMembers(this.project, this.projectType, 0, 25, 'asc');
-            });
-        });
-    }
-
-    public ngAfterViewInit(): void {
-        this.paginator.page
-            .pipe(
-                tap(() => this.loadMembersPage()),
-            )
-            .subscribe();
-
-    }
-
-    private loadMembersPage(): void {
-        this.dataSource.loadMembers(
-            this.project,
-            this.projectType,
-            this.paginator.pageIndex,
-            this.paginator.pageSize,
-        );
-    }
-
-    public removeProjectMemberSelection(): void {
-        Promise.all(this.selection.selected.map(member => {
-            return this.projectService.RemoveProjectMember(this.project.projectId, member.userId).then(() => {
-                this.toast.showInfo('Removed successfully');
-            }).catch(error => {
-                this.toast.showError(error.message);
-            });
-        }));
-    }
-
-    public removeMember(member: ProjectMember.AsObject): void {
-        this.projectService.RemoveProjectMember(this.project.projectId, member.userId).then(() => {
-            this.toast.showInfo('Member removed successfully');
-        }).catch(error => {
-            this.toast.showError(error.message);
-        });
-    }
-
-    public isAllSelected(): boolean {
-        const numSelected = this.selection.selected.length;
-        const numRows = this.dataSource.membersSubject.value.length;
-        return numSelected === numRows;
-    }
-
-    public masterToggle(): void {
-        this.isAllSelected() ?
-            this.selection.clear() :
-            this.dataSource.membersSubject.value.forEach(row => this.selection.select(row));
-    }
-
-    public openAddMember(): void {
-
-        // TODO
-        // const dialogRef = this.dialog.open(ProjectMemberCreateDialogComponent, {
-        //     data: {
-        //         creationType: this.project.type ===
-        //             ProjectType.PROJECTTYPE_GRANTED ? CreationType.PROJECT_GRANTED :
-        //             ProjectType.PROJECTTYPE_OWNED ? CreationType.PROJECT_OWNED : undefined,
-        //         projectId: this.project.id,
-        //     },
-        //     width: '400px',
-        // });
-
-        // dialogRef.afterClosed().subscribe(resp => {
-        //     if (resp) {
-        //         const users: User.AsObject[] = resp.users;
-        //         const roles: string[] = resp.roles;
-
-        //         if (users && users.length && roles && roles.length) {
-        //             Promise.all(users.map(user => {
-        //                 return this.projectService.AddProjectMember(this.project.id, user.id, roles);
-        //             })).then(() => {
-        //                 this.toast.showError('members added');
-        //             }).catch(error => {
-        //                 this.toast.showError(error.message);
-        //             });
-        //         }
-        //     }
-        // });
-    }
-}

console/src/app/pages/projects/project-members/project-members.module.ts

@@ -1,42 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-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 { MatIconModule } from '@angular/material/icon';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { TranslateModule } from '@ngx-translate/core';
-import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
-
-import { ProjectMembersRoutingModule } from './project-members-routing.module';
-import { ProjectMembersComponent } from './project-members.component';
-
-
-@NgModule({
-    declarations: [ProjectMembersComponent],
-    imports: [
-        ProjectMembersRoutingModule,
-        CommonModule,
-        MatAutocompleteModule,
-        HasRoleModule,
-        MatChipsModule,
-        MatButtonModule,
-        MatCheckboxModule,
-        MatIconModule,
-        MatTableModule,
-        MatPaginatorModule,
-        MatSortModule,
-        MatTooltipModule,
-        ReactiveFormsModule,
-        MatProgressSpinnerModule,
-        FormsModule,
-        TranslateModule,
-    ],
-})
-export class ProjectMembersModule { }

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

@@ -49,7 +49,6 @@ export class UserCreateComponent implements OnDestroy {
     ) {
         this.orgService.GetMyOrgIamPolicy().then((iampolicy) => {
             this.userLoginMustBeDomain = iampolicy.toObject().userLoginMustBeDomain;
-            console.log(this.userLoginMustBeDomain);
             this.initForm();
         }).catch(error => {
             console.error(error);
@@ -83,7 +82,6 @@ export class UserCreateComponent implements OnDestroy {
 
     public createUser(): void {
         this.user = this.userForm.value;
-        console.log(this.user);
 
         this.userService
             .CreateUser(this.user)

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

@@ -1,222 +1,235 @@
-<div class="max-width-container">
-    <h1>{{ 'USER.TITLE' | translate }}</h1>
-    <p class="sub">{{'USER.DESCRIPTION' | translate}}</p>
+<app-meta-layout>
+    <div class="max-width-container">
+        <h1>{{ 'USER.TITLE' | translate }}</h1>
+        <p class="sub">{{'USER.DESCRIPTION' | translate}}</p>
 
-    <mat-progress-bar *ngIf="loading" color="accent" mode="indeterminate"></mat-progress-bar>
+        <mat-progress-bar *ngIf="loading" color="accent" mode="indeterminate"></mat-progress-bar>
 
-    <span *ngIf="!loading && !user">{{ 'USER.PAGES.NOUSER' | translate }}</span>
+        <span *ngIf="!loading && !user">{{ 'USER.PAGES.NOUSER' | translate }}</span>
 
-    <div class="col" *ngIf="user">
-        <app-card title="{{ 'USER.PROFILE.TITLE' | translate }}"
-            description="{{'USER.PROFILE.DESCRIPTION' | translate}}">
-            <app-detail-form [genders]="genders" [languages]="languages" [profile]="user"
-                (changedLanguage)="changedLanguage($event)" (submitData)="saveProfile($event)">
-            </app-detail-form>
+        <app-card title="{{ 'USER.PAGES.LOGINNAMES' | translate }}"
+            description="{{ 'USER.PAGES.LOGINNAMESDESC' | translate }}" *ngIf="user">
+            <div class="login-name-row" *ngFor="let login of user?.loginNamesList">
+                <span>{{login}}</span>
+                <button color="primary" [disabled]="copied == login"
+                    [matTooltip]="(copied != login ? 'USER.PAGES.COPY' : 'USER.PAGES.COPIED' ) | translate"
+                    (click)="copytoclipboard(login)" mat-icon-button>
+                    <i *ngIf="copied != login" class="las la-clipboard"></i>
+                    <i *ngIf="copied == login" class="las la-clipboard-check"></i>
+                </button>
+            </div>
         </app-card>
 
-        <app-card title="Theme" class="theme-card">
-            <app-theme-setting></app-theme-setting>
+        <div class="col" *ngIf="user">
+            <app-card title="{{ 'USER.PROFILE.TITLE' | translate }}"
+                description="{{'USER.PROFILE.DESCRIPTION' | translate}}">
+                <app-detail-form [genders]="genders" [languages]="languages" [profile]="user"
+                    (changedLanguage)="changedLanguage($event)" (submitData)="saveProfile($event)">
+                </app-detail-form>
+            </app-card>
+
+            <app-card title="Theme" class="theme-card">
+                <app-theme-setting></app-theme-setting>
+            </app-card>
+        </div>
+
+        <app-card *ngIf="user" title="{{'USER.PASSWORD.TITLE' | translate}}"
+            description="{{'USER.PASSWORD.DESCRIPTION' | translate}}">
+            <form *ngIf="passwordForm" [formGroup]="passwordForm" (ngSubmit)="setPassword()">
+                <div class="content">
+                    <mat-form-field class="formfield">
+                        <mat-label>{{ 'USER.PASSWORD.OLD' | translate }}</mat-label>
+                        <input autocomplete="off" name="password" type="password" matInput
+                            formControlName="currentPassword" />
+                        <mat-error *ngIf="currentPassword?.errors?.required">{{ 'USER.PASSWORD.REQUIRED' | translate }}
+                        </mat-error>
+                    </mat-form-field>
+                    <mat-form-field class="formfield">
+                        <mat-label>{{ 'USER.PASSWORD.NEW' | translate }}</mat-label>
+                        <input autocomplete="off" name="new password" type="password" matInput
+                            formControlName="newPassword" />
+
+                        <mat-error *ngIf="newPassword?.errors?.required">
+                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                        </mat-error>
+                        <mat-error *ngIf="newPassword?.errors?.symbolValidator">
+                            {{ 'USER.VALIDATION.SYMBOLERROR' | translate }}
+                        </mat-error>
+                        <mat-error *ngIf="newPassword?.errors?.numberValidator">
+                            {{ 'USER.VALIDATION.NUMBERERROR' | translate }}
+                        </mat-error>
+                        <mat-error *ngIf="newPassword?.errors?.upperCaseValidator">
+                            {{ 'USER.VALIDATION.UPPERCASEMISSING' | translate }}
+                        </mat-error>
+                        <mat-error *ngIf="newPassword?.errors?.lowerCaseValidator">
+                            {{ 'USER.VALIDATION.LOWERCASEMISSING' | translate }}
+                        </mat-error>
+                        <mat-error *ngIf="newPassword?.errors?.minlength">
+                            {{ 'USER.VALIDATION.MINLENGTH' | translate:newPassword?.errors?.minlength }}
+                        </mat-error>
+
+                    </mat-form-field>
+                    <mat-form-field class="formfield">
+                        <mat-label>{{ 'USER.PASSWORD.CONFIRM' | translate }}</mat-label>
+                        <input autocomplete="off" name="password repeating" type="password" matInput
+                            formControlName="confirmPassword" />
+
+                        <mat-error *ngIf="confirmPassword?.errors?.required">
+                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                        </mat-error>
+                        <mat-error *ngIf="confirmPassword?.errors?.symbolValidator">
+                            {{ 'USER.VALIDATION.SYMBOLERROR' | translate }}
+                        </mat-error>
+                        <mat-error *ngIf="confirmPassword?.errors?.numberValidator">
+                            {{ 'USER.VALIDATION.NUMBERERROR' | translate }}
+                        </mat-error>
+                        <mat-error *ngIf="confirmPassword?.errors?.notequal">
+                            {{ 'USER.PASSWORD.NOTEQUAL' | translate }}
+                        </mat-error>
+                        <mat-error *ngIf="confirmPassword?.errors?.upperCaseValidator">
+                            {{ 'USER.VALIDATION.UPPERCASEMISSING' | translate }}
+                        </mat-error>
+                        <mat-error *ngIf="confirmPassword?.errors?.lowerCaseValidator">
+                            {{ 'USER.VALIDATION.LOWERCASEMISSING' | translate }}
+                        </mat-error>
+                        <mat-error *ngIf="confirmPassword?.errors?.minlength">
+                            {{ 'USER.VALIDATION.MINLENGTH' | translate:confirmPassword?.errors?.minlength }}
+                        </mat-error>
+                    </mat-form-field>
+                </div>
+                <div class="btn-container">
+                    <button [disabled]="passwordForm.invalid" mat-raised-button
+                        color="primary">{{ 'USER.PASSWORD.RESET' | translate }}</button>
+                </div>
+            </form>
         </app-card>
+
+        <app-card *ngIf="user" title="{{ 'USER.LOGINMETHODS.TITLE' | translate }}"
+            description="{{ 'USER.LOGINMETHODS.DESCRIPTION' | translate }}">
+            <div class="method-col">
+                <div class="method-row">
+                    <span class="label">{{ 'USER.EMAIL' | translate }}</span>
+
+                    <ng-container *ngIf="!emailEditState; else emailEdit">
+                        <div class="actions">
+                            <span class="name">{{user?.email}}</span>
+                            <mat-icon *ngIf="user?.isEmailVerified" color="primary" aria-hidden="false"
+                                aria-label="verified icon">
+                                check_circle_outline</mat-icon>
+                            <ng-container *ngIf="user?.email && !user?.isEmailVerified">
+                                <mat-icon color="warn" aria-hidden="false" aria-label="not verified icon">highlight_off
+                                </mat-icon>
+                                <a class="verify" matTooltip="{{'USER.LOGINMETHODS.EMAIL.RESEND' | translate}}"
+                                    (click)="resendVerification()">{{'USER.LOGINMETHODS.RESENDCODE' | translate}}</a>
+                            </ng-container>
+                        </div>
+
+                        <div class="actions">
+                            <button (click)="emailEditState = true" mat-icon-button>
+                                <mat-icon>edit</mat-icon>
+                            </button>
+                        </div>
+                    </ng-container>
+                    <ng-template #emailEdit>
+                        <mat-form-field class="name">
+                            <mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>
+                            <input matInput [(ngModel)]="user.email" />
+                        </mat-form-field>
+                        <button (click)="emailEditState = false" mat-icon-button>
+                            <mat-icon>close</mat-icon>
+                        </button>
+                        <button [disabled]="!user.email" class="submit-button" type="button" color="primary"
+                            (click)="saveEmail()" mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
+                    </ng-template>
+                </div>
+
+                <div class="method-row">
+                    <span class="label">{{ 'USER.PHONE' | translate }}</span>
+
+                    <ng-container *ngIf="!phoneEditState; else phoneEdit">
+                        <div class="actions">
+                            <span class="name">{{user?.phone}}</span>
+                            <mat-icon *ngIf="user?.isPhoneVerified" color="primary" aria-hidden="false"
+                                aria-label="verified icon">
+                                check_circle_outline</mat-icon>
+                            <ng-container *ngIf="user?.phone && !user?.isPhoneVerified">
+                                <mat-icon color="warn" aria-hidden="false" aria-label="not verified icon">highlight_off
+                                </mat-icon>
+                                <a class="verify" matTooltip="{{'USER.LOGINMETHODS.ENTERCODE_DESC' | translate}}"
+                                    (click)="enterCode()">{{'USER.LOGINMETHODS.ENTERCODE' | translate}}</a>
+                                <a class="verify" matTooltip="{{'USER.LOGINMETHODS.PHONE.RESEND' | translate}}"
+                                    (click)="resendPhoneVerification()">{{'USER.LOGINMETHODS.RESENDCODE' | translate}}</a>
+                            </ng-container>
+                        </div>
+
+                        <div class="actions">
+                            <button (click)="phoneEditState = true" mat-icon-button>
+                                <mat-icon>edit</mat-icon>
+                            </button>
+                            <button color="warn" *ngIf="user?.phone" (click)="deletePhone()" mat-icon-button>
+                                <i class="las la-trash"></i>
+                            </button>
+                        </div>
+                    </ng-container>
+
+                    <ng-template #phoneEdit>
+                        <mat-form-field class="name">
+                            <mat-label>{{ 'USER.PHONE' | translate }}</mat-label>
+                            <input matInput [(ngModel)]="user.phone" />
+                        </mat-form-field>
+                        <button (click)="phoneEditState = false" mat-icon-button>
+                            <mat-icon>close</mat-icon>
+                        </button>
+                        <button [disabled]="!user.phone" type="button" color="primary" (click)="savePhone()"
+                            mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
+                    </ng-template>
+                </div>
+            </div>
+        </app-card>
+
+        <app-auth-user-mfa *ngIf="user"></app-auth-user-mfa>
+
+        <!-- <app-card title="{{ 'USER.ADDRESS.TITLE' | translate }}" *ngIf="user">
+            <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> -->
     </div>
 
-
-    <app-card title="{{ 'USER.PAGES.LOGINNAMES' | translate }}"
-        description="{{ 'USER.PAGES.LOGINNAMESDESC' | translate }}" *ngIf="user">
-        <div class="login-name-row" *ngFor="let login of user?.loginNamesList">
-            <span>{{login}}</span>
-            <button color="primary" [disabled]="copied == login"
-                [matTooltip]="(copied != login ? 'USER.PAGES.COPY' : 'USER.PAGES.COPIED' ) | translate"
-                (click)="copytoclipboard(login)" mat-icon-button>
-                <i *ngIf="copied != login" class="las la-clipboard"></i>
-                <i *ngIf="copied == login" class="las la-clipboard-check"></i>
-            </button>
-        </div>
-    </app-card>
-
-
-    <app-card *ngIf="user" title="{{'USER.PASSWORD.TITLE' | translate}}"
-        description="{{'USER.PASSWORD.DESCRIPTION' | translate}}">
-        <form *ngIf="passwordForm" [formGroup]="passwordForm" (ngSubmit)="setPassword()">
-            <div class="content">
-                <mat-form-field class="formfield">
-                    <mat-label>{{ 'USER.PASSWORD.OLD' | translate }}</mat-label>
-                    <input autocomplete="off" name="password" type="password" matInput
-                        formControlName="currentPassword" />
-                    <mat-error *ngIf="currentPassword?.errors?.required">{{ 'USER.PASSWORD.REQUIRED' | translate }}
-                    </mat-error>
-                </mat-form-field>
-                <mat-form-field class="formfield">
-                    <mat-label>{{ 'USER.PASSWORD.NEW' | translate }}</mat-label>
-                    <input autocomplete="off" name="new password" type="password" matInput
-                        formControlName="newPassword" />
-
-                    <mat-error *ngIf="newPassword?.errors?.required">
-                        {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                    </mat-error>
-                    <mat-error *ngIf="newPassword?.errors?.symbolValidator">
-                        {{ 'USER.VALIDATION.SYMBOLERROR' | translate }}
-                    </mat-error>
-                    <mat-error *ngIf="newPassword?.errors?.numberValidator">
-                        {{ 'USER.VALIDATION.NUMBERERROR' | translate }}
-                    </mat-error>
-                    <mat-error *ngIf="newPassword?.errors?.upperCaseValidator">
-                        {{ 'USER.VALIDATION.UPPERCASEMISSING' | translate }}
-                    </mat-error>
-                    <mat-error *ngIf="newPassword?.errors?.lowerCaseValidator">
-                        {{ 'USER.VALIDATION.LOWERCASEMISSING' | translate }}
-                    </mat-error>
-                    <mat-error *ngIf="newPassword?.errors?.minlength">
-                        {{ 'USER.VALIDATION.MINLENGTH' | translate:newPassword?.errors?.minlength }}
-                    </mat-error>
-
-                </mat-form-field>
-                <mat-form-field class="formfield">
-                    <mat-label>{{ 'USER.PASSWORD.CONFIRM' | translate }}</mat-label>
-                    <input autocomplete="off" name="password repeating" type="password" matInput
-                        formControlName="confirmPassword" />
-
-                    <mat-error *ngIf="confirmPassword?.errors?.required">
-                        {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                    </mat-error>
-                    <mat-error *ngIf="confirmPassword?.errors?.symbolValidator">
-                        {{ 'USER.VALIDATION.SYMBOLERROR' | translate }}
-                    </mat-error>
-                    <mat-error *ngIf="confirmPassword?.errors?.numberValidator">
-                        {{ 'USER.VALIDATION.NUMBERERROR' | translate }}
-                    </mat-error>
-                    <mat-error *ngIf="confirmPassword?.errors?.notequal">
-                        {{ 'USER.PASSWORD.NOTEQUAL' | translate }}
-                    </mat-error>
-                    <mat-error *ngIf="confirmPassword?.errors?.upperCaseValidator">
-                        {{ 'USER.VALIDATION.UPPERCASEMISSING' | translate }}
-                    </mat-error>
-                    <mat-error *ngIf="confirmPassword?.errors?.lowerCaseValidator">
-                        {{ 'USER.VALIDATION.LOWERCASEMISSING' | translate }}
-                    </mat-error>
-                    <mat-error *ngIf="confirmPassword?.errors?.minlength">
-                        {{ 'USER.VALIDATION.MINLENGTH' | translate:confirmPassword?.errors?.minlength }}
-                    </mat-error>
-                </mat-form-field>
-            </div>
-            <div class="btn-container">
-                <button [disabled]="passwordForm.invalid" mat-raised-button
-                    color="primary">{{ 'USER.PASSWORD.RESET' | translate }}</button>
-            </div>
-        </form>
-    </app-card>
-
-    <app-card *ngIf="user" title="{{ 'USER.LOGINMETHODS.TITLE' | translate }}"
-        description="{{ 'USER.LOGINMETHODS.DESCRIPTION' | translate }}">
-        <div class="method-col">
-            <div class="method-row">
-                <span class="label">{{ 'USER.EMAIL' | translate }}</span>
-
-                <ng-container *ngIf="!emailEditState; else emailEdit">
-                    <div class="actions">
-                        <span class="name">{{email?.email}}</span>
-                        <mat-icon *ngIf="email?.isemailverified" color="primary" aria-hidden="false"
-                            aria-label="verified icon">
-                            check_circle_outline</mat-icon>
-                        <ng-container *ngIf="email?.email && !email?.isemailverified">
-                            <mat-icon color="warn" aria-hidden="false" aria-label="not verified icon">highlight_off
-                            </mat-icon>
-                            <a class="verify" matTooltip="{{'USER.LOGINMETHODS.EMAIL.RESEND' | translate}}"
-                                (click)="resendVerification()">{{'USER.LOGINMETHODS.RESENDCODE' | translate}}</a>
-                        </ng-container>
-                    </div>
-
-                    <div class="actions">
-                        <button (click)="emailEditState = true" mat-icon-button>
-                            <mat-icon>edit</mat-icon>
-                        </button>
-                    </div>
-                </ng-container>
-                <ng-template #emailEdit>
-                    <mat-form-field class="name">
-                        <mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>
-                        <input matInput [(ngModel)]="email.email" />
-                    </mat-form-field>
-                    <button (click)="emailEditState = false" mat-icon-button>
-                        <mat-icon>close</mat-icon>
-                    </button>
-                    <button [disabled]="!email.email" class="submit-button" type="button" color="primary"
-                        (click)="saveEmail()" mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
-                </ng-template>
-            </div>
-
-            <div class="method-row">
-                <span class="label">{{ 'USER.PHONE' | translate }}</span>
-
-                <ng-container *ngIf="!phoneEditState; else phoneEdit">
-                    <div class="actions">
-                        <span class="name">{{phone?.phone}}</span>
-                        <mat-icon *ngIf="phone?.isPhoneVerified" color="primary" aria-hidden="false"
-                            aria-label="verified icon">
-                            check_circle_outline</mat-icon>
-                        <ng-container *ngIf="phone?.phone && !phone?.isPhoneVerified">
-                            <mat-icon color="warn" aria-hidden="false" aria-label="not verified icon">highlight_off
-                            </mat-icon>
-                            <a class="verify" matTooltip="{{'USER.LOGINMETHODS.ENTERCODE_DESC' | translate}}"
-                                (click)="enterCode()">{{'USER.LOGINMETHODS.ENTERCODE' | translate}}</a>
-                            <a class="verify" matTooltip="{{'USER.LOGINMETHODS.PHONE.RESEND' | translate}}"
-                                (click)="resendPhoneVerification()">{{'USER.LOGINMETHODS.RESENDCODE' | translate}}</a>
-                        </ng-container>
-                    </div>
-
-                    <div class="actions">
-                        <button (click)="phoneEditState = true" mat-icon-button>
-                            <mat-icon>edit</mat-icon>
-                        </button>
-                        <button color="warn" *ngIf="phone?.phone" (click)="deletePhone()" mat-icon-button>
-                            <i class="las la-trash"></i>
-                        </button>
-                    </div>
-                </ng-container>
-
-                <ng-template #phoneEdit>
-                    <mat-form-field class="name">
-                        <mat-label>{{ 'USER.PHONE' | translate }}</mat-label>
-                        <input matInput [(ngModel)]="phone.phone" />
-                    </mat-form-field>
-                    <button (click)="phoneEditState = false" mat-icon-button>
-                        <mat-icon>close</mat-icon>
-                    </button>
-                    <button [disabled]="!phone.phone" type="button" color="primary" (click)="savePhone()"
-                        mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
-                </ng-template>
+    <metainfo *ngIf="user" class="side">
+        <div class="details">
+            <div class="row" *ngIf="user?.loginNamesList">
+                <span class="first">Login Names:</span>
+                <span class="second"><span style="display: block;"
+                        *ngFor="let login of user?.loginNamesList">{{login}}</span></span>
             </div>
         </div>
-    </app-card>
 
-    <app-auth-user-mfa *ngIf="user"></app-auth-user-mfa>
-
-    <app-card title="{{ 'USER.ADDRESS.TITLE' | translate }}" *ngIf="user">
-        <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>
-</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/auth-user-detail/auth-user-detail.component.scss

@@ -82,60 +82,59 @@ h1 {
   }
   
 .method-col {
-  display: flex;
-  flex-direction: column;
-  margin: -.5rem;
-
-  .method-row {
     display: flex;
-    align-items: center;
-    justify-content: space-evenly;
-    padding: .5rem;
-    border-bottom: 1px solid #ffffff20;
-    flex-wrap: wrap;
+    flex-direction: column;
+    margin: -.5rem;
 
-    .label, .name {
-      margin-right: 1rem;
+    .method-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-evenly;
+        padding: .5rem;
+        border-bottom: 1px solid #ffffff20;
+        flex-wrap: wrap;
+
+        .label, .name {
+        margin-right: 1rem;
+        }
+
+        .actions {
+            flex: 1;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        }
+
+        .label {
+            flex: 1;
+            font-size: .9rem;
+            color: #818a8a;
+        }
+
+        mat-icon {
+            margin-right: .5rem;
+        }
+
+        .submit-button {
+            border-radius: .5rem;
+        }
+
+        .verify {
+            text-decoration: none;
+            font-size: .8rem;
+            color: #81868a;
+            border-radius: .5rem;
+            cursor: pointer;
+            word-wrap: none;
+            white-space: nowrap;
+            margin-right: 1rem;
+
+            &:hover {
+                color: white;
+                text-decoration: underline;
+            }
+        }
     }
-
-    .actions {
-        flex: 1;
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-    }
-
-    .label {
-    flex: 1;
-      font-size: .9rem;
-      color: #818a8a;
-      text-transform: uppercase;
-    }
-
-    mat-icon {
-      margin-right: .5rem;
-    }
-
-    .submit-button {
-      border-radius: .5rem;
-    }
-
-    .verify {
-      text-decoration: none;
-      font-size: .8rem;
-      color: #81868a;
-      border-radius: .5rem;
-      cursor: pointer;
-      word-wrap: none;
-      white-space: nowrap;
-      margin-right: 1rem;
-
-      &:hover {
-          color: white;
-          text-decoration: underline;
-      }
-    }
-  }
 }
 
 .col {
@@ -153,3 +152,122 @@ h1 {
         max-width: 300px;
     }
 }
+
+.side {
+    .details {
+        margin-bottom: 1rem;
+        border-bottom: 1px solid #81868a40;
+        padding-bottom: 1rem;
+    
+        .row {
+            display: flex;
+            margin-bottom: 0.5rem;
+            align-items: center;
+    
+            button {
+                display: none;
+                visibility: hidden;
+            }
+    
+            &:hover {
+                button {
+                    display: inline-block;
+                    visibility: visible;
+                    mat-icon {
+                        font-size: 1.2rem;
+                    }
+                }
+            }
+    
+            .first {
+                flex: 1;
+                font-size: 0.8rem;
+                margin-right: 0.5rem;
+                white-space: nowrap;
+            }
+    
+            .fill-space {
+                flex: 1;
+            }
+    
+            .second {
+                font-size: 0.8rem;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                margin-left: 1rem;
+                text-align: right;
+            }
+
+            a {
+                &:hover {
+                    cursor: pointer;
+                    text-decoration: underline;
+                }
+            }
+        }
+
+        .side-section {
+            color: #81868a;
+        }
+    }  
+
+    .details {
+        margin-bottom: 1rem;
+        border-bottom: 1px solid #81868a40;
+        padding-bottom: 1rem;
+    
+        .row {
+            display: flex;
+            margin-bottom: 0.5rem;
+            align-items: center;
+    
+            button {
+                display: none;
+                visibility: hidden;
+            }
+    
+            &:hover {
+                button {
+                    display: inline-block;
+                    visibility: visible;
+                    mat-icon {
+                        font-size: 1.2rem;
+                    }
+                }
+            }
+    
+            .first {
+                flex: 1;
+                font-size: 0.8rem;
+                margin-right: 0.5rem;
+            }
+    
+            .fill-space {
+                flex: 1;
+            }
+    
+            .second {
+                font-size: 0.8rem;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                margin-left: 1rem;
+            }
+
+            a {
+                &:hover {
+                    cursor: pointer;
+                    text-decoration: underline;
+                }
+            }
+        }
+
+        .side-section {
+            color: #81868a;
+        }
+    }    
+
+    app-changes {
+        flex: 1;
+        min-height: 0;
+    }
+}

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

@@ -3,6 +3,7 @@ import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/fo
 import { MatDialog } from '@angular/material/dialog';
 import { TranslateService } from '@ngx-translate/core';
 import { Subscription } from 'rxjs';
+import { ChangeType } from 'src/app/modules/changes/changes.component';
 import { Gender, UserAddress, UserEmail, UserPhone, UserProfile, UserView } from 'src/app/proto/generated/auth_pb';
 import { PasswordComplexityPolicy } from 'src/app/proto/generated/management_pb';
 import { AuthUserService } from 'src/app/services/auth-user.service';
@@ -39,14 +40,12 @@ function passwordConfirmValidator(c: AbstractControl): any {
 })
 export class AuthUserDetailComponent implements OnDestroy {
     public user!: UserView.AsObject;
-    public email: UserEmail.AsObject = { email: '' } as any;
-    public phone: UserPhone.AsObject = { phone: '' } as any;
     public address: UserAddress.AsObject = { id: '' } as any;
     public genders: Gender[] = [Gender.GENDER_MALE, Gender.GENDER_FEMALE, Gender.GENDER_DIVERSE];
     public languages: string[] = ['de', 'en'];
 
     public passwordForm!: FormGroup;
-    public addressForm!: FormGroup;
+    // public addressForm!: FormGroup;
     private subscription: Subscription = new Subscription();
 
     public emailEditState: boolean = false;
@@ -57,6 +56,7 @@ export class AuthUserDetailComponent implements OnDestroy {
     public policy!: PasswordComplexityPolicy.AsObject;
     public copied: string = '';
 
+    public ChangeType: any = ChangeType;
     public userLoginMustBeDomain: boolean = false;
 
     constructor(
@@ -70,7 +70,6 @@ export class AuthUserDetailComponent implements OnDestroy {
         const validators: Validators[] = [Validators.required];
         this.orgService.GetPasswordComplexityPolicy().then(data => {
             this.policy = data.toObject();
-            console.log(this.policy);
             if (this.policy.minLength) {
                 validators.push(Validators.minLength(this.policy.minLength));
             }
@@ -92,11 +91,6 @@ export class AuthUserDetailComponent implements OnDestroy {
                 newPassword: ['', validators],
                 confirmPassword: ['', [...validators, passwordConfirmValidator]],
             });
-
-            this.passwordForm.controls['newPassword'].valueChanges.subscribe(() => {
-                console.log(this.passwordForm.controls['newPassword'].errors);
-            });
-
         }).catch(error => {
             this.toast.showError(error.message);
             console.error(error.message);
@@ -107,13 +101,13 @@ export class AuthUserDetailComponent implements OnDestroy {
             });
         });
 
-        this.addressForm = this.fb.group({
-            streetAddress: [''],
-            postalCode: [''],
-            locality: [''],
-            region: [''],
-            country: [''],
-        });
+        // this.addressForm = this.fb.group({
+        //     streetAddress: [''],
+        //     postalCode: [''],
+        //     locality: [''],
+        //     region: [''],
+        //     country: [''],
+        // });
 
         this.loading = true;
         this.getData().then(() => {
@@ -128,14 +122,12 @@ export class AuthUserDetailComponent implements OnDestroy {
     }
 
     public saveProfile(profileData: UserProfile.AsObject): void {
-        console.log(profileData);
         this.user.firstName = profileData.firstName;
         this.user.lastName = profileData.lastName;
         this.user.nickName = profileData.nickName;
         this.user.displayName = profileData.displayName;
         this.user.gender = profileData.gender;
         this.user.preferredLanguage = profileData.preferredLanguage;
-        console.log(this.user);
         this.userService
             .SaveMyUserProfile(
                 this.user.firstName,
@@ -160,7 +152,6 @@ export class AuthUserDetailComponent implements OnDestroy {
             this.userService
                 .ChangeMyPassword(this.currentPassword.value, this.newPassword.value).then((data: any) => {
                     this.toast.showInfo('Password Set');
-                    this.email = data.toObject();
                 }).catch(data => {
                     this.toast.showError(data.message);
                 });
@@ -171,9 +162,9 @@ export class AuthUserDetailComponent implements OnDestroy {
         this.emailEditState = false;
 
         this.userService
-            .SaveMyUserEmail(this.email).then((data: UserEmail) => {
+            .SaveMyUserEmail(this.user.email).then((data: UserEmail) => {
                 this.toast.showInfo('Saved Email');
-                this.email = data.toObject();
+                this.user.email = data.toObject().email;
                 this.emailEditState = false;
             }).catch(data => {
                 this.toast.showError(data.message);
@@ -182,21 +173,20 @@ export class AuthUserDetailComponent implements OnDestroy {
     }
 
     public deletePhone(): void {
-        this.phone.phone = '';
+        this.user.phone = '';
         this.savePhone();
     }
 
     public enterCode(): void {
         const dialogRef = this.dialog.open(CodeDialogComponent, {
             data: {
-                number: this.phone.phone,
+                number: this.user.phone,
             },
             width: '400px',
         });
 
         dialogRef.afterClosed().subscribe(code => {
             if (code) {
-                console.log(code);
                 this.userService.VerifyMyUserPhone(code).then(() => {
                     this.toast.showInfo('Verified Phone');
                 }).catch(error => {
@@ -211,20 +201,16 @@ export class AuthUserDetailComponent implements OnDestroy {
     }
 
     public resendVerification(): void {
-        this.userService.ResendEmailVerification().then((data: any) => {
+        this.userService.ResendEmailVerification().then(() => {
             this.toast.showInfo('Saved Email');
-            this.email = data.toObject();
         }).catch(data => {
             this.toast.showError(data.message);
         });
     }
 
     public resendPhoneVerification(): void {
-        console.log('resendverification');
-        this.userService.ResendPhoneVerification().then((data: any) => {
-            console.log(data);
+        this.userService.ResendPhoneVerification().then(() => {
             this.toast.showInfo('Phoneverification was successfully sent!');
-            this.email = data.toObject();
         }).catch(data => {
             this.toast.showError(data.message);
         });
@@ -232,13 +218,10 @@ export class AuthUserDetailComponent implements OnDestroy {
 
     public savePhone(): void {
         this.phoneEditState = false;
-        if (!this.phone.id) {
-            this.phone.id = this.user.id;
-        }
         this.userService
-            .SaveMyUserPhone(this.phone).then((data: UserPhone) => {
+            .SaveMyUserPhone(this.user.phone).then((data: UserPhone) => {
                 this.toast.showInfo('Saved Phone');
-                this.phone = data.toObject();
+                this.user.phone = data.toObject().phone;
                 this.phoneEditState = false;
             }).catch(data => {
                 this.toast.showError(data.message);
@@ -246,32 +229,32 @@ 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 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 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');
@@ -285,17 +268,13 @@ export class AuthUserDetailComponent implements OnDestroy {
 
     private async getData(): Promise<void> {
         this.userService.GetMyUser().then(user => {
-            console.log(user.toObject());
             this.user = user.toObject();
         }).catch(err => {
             console.error(err);
         });
 
-        this.email = (await this.userService.GetMyUserEmail()).toObject();
-        this.phone = (await this.userService.GetMyUserPhone()).toObject();
-        this.address = (await this.userService.GetMyUserAddress()).toObject();
-
-        this.addressForm.patchValue(this.address);
+        // this.address = (await this.userService.GetMyUserAddress()).toObject();
+        // this.addressForm.patchValue(this.address);
     }
 
     public copytoclipboard(value: string): void {

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

@@ -35,7 +35,6 @@ export class AuthUserMfaComponent implements OnInit, OnDestroy {
     public addOTP(): void {
         this.userService.AddMfaOTP().then((otpresp) => {
             const otp: MfaOtpResponse.AsObject = otpresp.toObject();
-            console.log(otp);
             const dialogRef = this.dialog.open(DialogOtpComponent, {
                 data: otp.url,
                 width: '400px',
@@ -44,7 +43,6 @@ export class AuthUserMfaComponent implements OnInit, OnDestroy {
             dialogRef.afterClosed().subscribe((code) => {
                 if (code) {
                     this.userService.VerifyMfaOTP(code).then((res) => {
-                        console.log(res.toObject());
                         // TODO: show state
                     });
                 }

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

@@ -5,7 +5,7 @@
             <div class="crescent"></div>
         </div>
         <p class="heading">Choose a style</p>
-        <p>Pop or subtle. Day or night.<br>
+        <p class="desc">Pop or subtle. Day or night.<br>
             Customize your interface
         </p>
         <label for="switch">

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

@@ -13,8 +13,8 @@ $dark-background: #2d2e30;
 .circle {
   position: relative;
   border-radius: 100%;
-  width: 8rem;
-  height: 8rem;
+  width: 6rem;
+  height: 6rem;
   background: linear-gradient(40deg, #FF0080,#FF8C00 70%);
   margin: auto;
 }
@@ -22,8 +22,8 @@ $dark-background: #2d2e30;
   position: absolute;
   border-radius: 100%;
   right: 0;
-  width: 6rem;
-  height: 6rem;
+  width: 4rem;
+  height: 4rem;
   background: white;
   transform: scale(0);
   transform-origin: top right;
@@ -33,20 +33,27 @@ p {
   font-size: 90%;
 }
 .heading {
-  font-size: 140%;
+  font-size: 100%;
   font-weight: bolder;
   margin: 2rem 0 .2rem 0;
 }
+
+.desc {
+    font-size: 14px;
+    color: #81868a;
+}
+
 label, .toggle {
   height: 2.8rem;
   border-radius: 100px;
 }
+
 label {
   width: 100%;
   background-color: rgba(0,0,0,.1);
   border-radius: 100px;
   position: relative;
-  margin: 1.8rem 0 1rem 0; 
+  margin: 1rem 0 1rem 0; 
   cursor: pointer;
 }
 .toggle {

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

@@ -1,5 +1,4 @@
 <app-meta-layout>
-
     <div *ngIf="user" class="max-width-container">
         <div class="head">
             <a (click)="navigateBack()" mat-icon-button>
@@ -176,7 +175,7 @@
 
         <app-user-mfa *ngIf="user" [user]="user"></app-user-mfa>
 
-        <app-card title="{{ 'USER.ADDRESS.TITLE' | translate }}">
+        <!-- <app-card title="{{ 'USER.ADDRESS.TITLE' | translate }}">
             <form [formGroup]="addressForm" (ngSubmit)="saveAddress()">
                 <div class="content">
                     <mat-form-field class="formfield">
@@ -204,7 +203,7 @@
                     <button type="submit" color="primary" mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
                 </div>
             </form>
-        </app-card>
+        </app-card> -->
 
         <app-card *ngIf="user?.id" title="{{ 'USER.GRANTS.TITLE' | translate }}"
             description="{{'USER.GRANTS.DESCRIPTION' | translate }}">

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

@@ -74,21 +74,20 @@
         flex-wrap: wrap;
     
         .label, .name {
-          margin-right: 1rem;
+            margin-right: 1rem;
         }
     
         .actions {
             flex: 1;
-          display: flex;
-          justify-content: flex-end;
-          align-items: center;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
         }
     
         .label {
-        flex: 1;
-          font-size: .9rem;
-          color: #818a8a;
-          text-transform: uppercase;
+            flex: 1;
+            font-size: .9rem;
+            color: #818a8a;
         }
     
         mat-icon {
@@ -122,10 +121,6 @@
 }
 
 .side {
-    // height: calc(100vh - 60px - 2rem);
-    // display: flex;
-    // flex-direction: column;
-
     .details {
         margin-bottom: 1rem;
         border-bottom: 1px solid #81868a40;