feat(console): project view model, remove orgid from routes

console/package.json

@@ -37,8 +37,8 @@
     "grpc": "^1.24.3",
     "grpc-web": "^1.1.0",
     "hammerjs": "^2.0.8",
-    "moment": "^2.26.0",
-    "ngx-moment": "^3.5.0",
+    "ngx-moment": "^4.0.1",
+    "moment": "^2.27.0",
     "prettier-stylelint": "^0.4.2",
     "rxjs": "~6.5.5",
     "ts-protoc-gen": "^0.12.0",
@@ -47,17 +47,17 @@
     "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.901.7",
-    "@angular/cli": "~9.1.7",
+    "@angular/cli": "~9.1.9",
+    "@angular-devkit/build-angular": "~0.901.9",
     "@angular/compiler-cli": "~9.1.10",
-    "@angular/language-service": "~9.1.10",
-    "@types/jasmine": "~3.5.10",
+    "@angular/language-service": "~9.1.11",
+    "@types/jasmine": "~3.5.11",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^14.0.13",
     "codelyzer": "^5.2.2",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~5.0.2",
-    "karma": "^5.0.9",
+    "karma": "^5.1.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.3",
     "karma-jasmine": "^3.3.1",

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

@@ -32,7 +32,7 @@ const routes: Routes = [
         },
     },
     {
-        path: 'orgs',
+        path: 'org',
         loadChildren: () => import('./pages/orgs/orgs.module').then(m => m.OrgsModule),
         canActivate: [AuthGuard, RoleGuard],
         data: {

console/src/app/app.component.html

@@ -18,7 +18,7 @@
 
     <mat-menu #menu="matMenu">
         <mat-progress-bar *ngIf="orgLoading" color="accent" mode="indeterminate"></mat-progress-bar>
-        <button class="show-all" mat-menu-item [routerLink]="[ '/orgs' ]">Show all organizations</button>
+        <button class="show-all" mat-menu-item [routerLink]="[ '/org/overview' ]">Show all organizations</button>
 
         <button [ngClass]="{'active': temporg.id === org?.id}" [disabled]="!temporg.id" *ngFor="let temporg of orgs"
             mat-menu-item (click)="setActiveOrg(temporg)">
@@ -27,7 +27,7 @@
         </button>
 
         <ng-template appHasRole [appHasRole]="['iam.write']">
-            <button mat-menu-item [routerLink]="[ '/orgs/create' ]">
+            <button mat-menu-item [routerLink]="[ '/org/create' ]">
                 <mat-icon class="avatar">add</mat-icon>
                 {{'MENU.NEWORG' | translate}}
             </button>
@@ -63,8 +63,7 @@
                     <span class="label">{{ 'MENU.PERSONAL_INFO' | translate }}</span>
                 </a>
 
-                <a *ngIf="showOrgSection && org?.id" class="nav-item" [routerLinkActive]="['active']"
-                    [routerLink]="[ '/orgs', org.id]">
+                <a *ngIf="showOrgSection" class="nav-item" [routerLinkActive]="['active']" [routerLink]="[ '/org']">
                     <i class="icon las la-archway"></i>
                     <span class="label">{{org?.name ? org.name : 'MENU.ORGANIZATION' | translate}}</span>
                 </a>
@@ -89,9 +88,10 @@
 
             </div>
             <span class="fill-space"></span>
-            <div class="footer">
+            <!-- <div class="footer">
                 <a href="https://caos.ch/impressum/" target="_blank" rel="noreferrer">AGB</a>
-                <a href="https://caos.ch/impressum/" target="_blank" rel="noreferrer">Impressum</a></div>
+                <a href="https://caos.ch/impressum/" target="_blank" rel="noreferrer">Impressum</a>
+            </div> -->
         </div>
     </mat-drawer>
     <mat-drawer-content class="content">

console/src/app/modules/changes/changes.component.html

@@ -5,6 +5,7 @@
         <span class="seq">
             {{dateFromTimestamp(event.changeDate) | localizedDate: 'EEE dd. MMM, HH:mm'}}
         </span>
+        <span class="editor">{{event.editor}}</span>
         <span class="desc">{{'CHANGES.EVENTS.'+event.eventType | translate}}</span>
     </li>
     <div class="sp-wrapper">

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

@@ -17,7 +17,11 @@
         border-radius: .5rem;
         display: flex;
         flex-direction: column;
-
+        .editor {
+            color: #81868a;
+            font-size: 12px;
+            align-self: flex-end;
+        }
         .seq {
             color: #81868a;
             font-size: 12px;

console/src/app/modules/changes/changes.component.ts

@@ -100,13 +100,15 @@ export class ChangesComponent implements OnInit {
         // Map snapshot with doc ref (needed for cursor)
         return from(col).pipe(
             tap((res: Changes) => {
-                console.log('more cahnge');
+                console.log('more changes');
                 let values = res.toObject().changesList;
                 // If prepending, reverse the batch order
                 values = false ? values.reverse() : values;
 
                 // update source with new values, done loading
                 this._data.next(values);
+                console.log(values);
+
                 // console.log(values);
                 this._loading.next(false);
 

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

@@ -15,6 +15,7 @@
     }
 
     .meta {
+        overflow-y: hidden;
         position: relative;
         flex: 1 0 300px;
         background: linear-gradient(to bottom right, #4072b410 20%,transparent 50%);

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

@@ -6,8 +6,7 @@
         <h1>{{ 'APP.PAGES.TITLE' | translate }} {{app?.name}}</h1>
 
         <p class="desc">{{ 'APP.PAGES.DESCRIPTION' | translate }}</p>
-        <p *ngIf="isZitadel" class="zitadel-warning">This belongs to Zitadel project. If you change something, Zitadel
-            may not behave as intended!</p>
+        <p *ngIf="isZitadel" class="zitadel-warning">{{'PROJECT.PAGES.ZITADELPROJECT' | translate}}</p>
     </div>
 
     <span *ngIf="errorMessage" class="err-container">{{errorMessage}}</span>

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

@@ -235,7 +235,8 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     }
 
     public regenerateOIDCClientSecret(): void {
-        this.projectService.RegenerateOIDCClientSecret(this.app.id).then((data: OIDCConfig) => {
+        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, {

console/src/app/pages/apps/app-secret-dialog/app-secret-dialog.component.html

@@ -6,10 +6,10 @@ <h1 mat-dialog-title>
     <p *ngIf="data.clientId">ClientId: {{data.clientId}}</p>
 
     <div *ngIf="data.clientSecret" class="flex">
-        <button matTooltip="copy to clipboard" (click)="copytoclipboard(data.clientSecret)" mat-icon-button>
-            <mat-icon *ngIf="!copied" svgIcon="mdi_content_copy"></mat-icon>
-            <mat-icon *ngIf="copied">check</mat-icon>
-
+        <button color="primary" [disabled]="copied == data.clientSecret" matTooltip="copy to clipboard"
+            (click)="copytoclipboard(data.clientSecret)" mat-icon-button>
+            <i *ngIf="copied != data.clientSecret" class="las la-clipboard"></i>
+            <i *ngIf="copied == data.clientSecret" class="las la-clipboard-check"></i>
         </button>
         <span class="secret">{{data.clientSecret}}</span>
     </div>

console/src/app/pages/apps/app-secret-dialog/app-secret-dialog.component.ts

@@ -7,7 +7,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
     styleUrls: ['./app-secret-dialog.component.scss'],
 })
 export class AppSecretDialogComponent {
-    public copied: boolean = false;
+    public copied: string = '';
     constructor(public dialogRef: MatDialogRef<AppSecretDialogComponent>,
         @Inject(MAT_DIALOG_DATA) public data: any) { }
 
@@ -27,9 +27,9 @@ export class AppSecretDialogComponent {
         selBox.select();
         document.execCommand('copy');
         document.body.removeChild(selBox);
-        this.copied = true;
+        this.copied = value;
         setTimeout(() => {
-            this.copied = false;
+            this.copied = '';
         }, 3000);
     }
 }

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

@@ -87,7 +87,7 @@ export class OrgContributorsComponent implements OnInit {
 
     public showDetail(): void {
         if (this.org?.state === OrgState.ORGSTATE_ACTIVE) {
-            this.router.navigate(['orgs', this.org.id, 'members']);
+            this.router.navigate(['org/members']);
         }
     }
 }

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

@@ -46,6 +46,13 @@ <h1>{{'ORG.PAGES.ORGDETAILUSER_TITLE' | translate}}</h1>
             <form [formGroup]="userForm" (ngSubmit)="finish()" class="form">
                 <div class="content">
                     <p class="section">{{ 'USER.CREATE.NAMEANDEMAILSECTION' | translate }}</p>
+                    <mat-form-field class="formfield">
+                      <mat-label>{{ 'USER.PROFILE.USERNAME' | translate }}</mat-label>
+                      <input matInput formControlName="userName" required />
+                      <mat-error *ngIf="userName?.invalid && userName?.errors?.required">
+                        {{ 'USER.VALIDATION.REQUIRED' | translate }}
+                      </mat-error>
+                    </mat-form-field>
                     <mat-form-field class="formfield">
                         <mat-label>{{ 'USER.PROFILE.EMAIL' | translate }}</mat-label>
                         <input matInput formControlName="email" required />
@@ -143,4 +150,4 @@ <h1>{{'ORG.PAGES.ORGDETAILUSER_TITLE' | translate}}</h1>
             {{'CONTINUE' | translate}}
         </button>
     </ng-container>
-</div>
+</div>

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

@@ -78,11 +78,11 @@ export class OrgCreateComponent {
                 validators.push(Validators.pattern(/[0-9]/g));
             }
             if (this.policy.hasSymbol) {
-                // All characters that are not a digit or an English letter \W or a whitespace \S
-                validators.push(Validators.pattern(/[\W\S]/));
+                validators.push(Validators.pattern(/[^a-z0-9]/gi));
             }
 
             this.userForm = this.fb.group({
+                userName: ['', [Validators.required]],
                 firstName: ['', [Validators.required]],
                 lastName: ['', [Validators.required]],
                 email: ['', [Validators.required]],
@@ -96,6 +96,7 @@ export class OrgCreateComponent {
             console.log('no password complexity policy defined!');
             console.error(error);
             this.userForm = this.fb.group({
+                userName: ['', [Validators.required]],
                 firstName: ['', [Validators.required]],
                 lastName: ['', [Validators.required]],
                 email: ['', [Validators.required]],
@@ -117,6 +118,7 @@ export class OrgCreateComponent {
         createOrgRequest.setDomain(this.domain?.value);
 
         const registerUserRequest: CreateUserRequest = new CreateUserRequest();
+        registerUserRequest.setUserName(this.userName?.value);
         registerUserRequest.setEmail(this.email?.value);
         registerUserRequest.setFirstName(this.firstName?.value);
         registerUserRequest.setLastName(this.lastName?.value);
@@ -151,6 +153,9 @@ export class OrgCreateComponent {
         return this.orgForm.get('domain');
     }
 
+    public get userName(): AbstractControl | null {
+      return this.userForm.get('userName');
+    }
 
     public get firstName(): AbstractControl | null {
         return this.userForm.get('firstName');

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

@@ -2,7 +2,6 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { MatButtonToggleChange } from '@angular/material/button-toggle';
 import { MatTableDataSource } from '@angular/material/table';
-import { ActivatedRoute, Params } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { Subscription } from 'rxjs';
 import { ChangeType } from 'src/app/modules/changes/changes.component';
@@ -17,7 +16,6 @@ import { ToastService } from 'src/app/services/toast.service';
     styleUrls: ['./org-detail.component.scss'],
 })
 export class OrgDetailComponent implements OnInit, OnDestroy {
-    public orgId: string = '';
     public org!: Org.AsObject;
 
     public dataSource: MatTableDataSource<OrgMember.AsObject> = new MatTableDataSource<OrgMember.AsObject>();
@@ -34,23 +32,20 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
 
     constructor(
         public translate: TranslateService,
-        private route: ActivatedRoute,
         private orgService: OrgService,
         private toast: ToastService,
     ) { }
 
     public ngOnInit(): void {
-        this.subscription = this.route.params.subscribe(params => this.getData(params));
+        this.getData();
     }
 
     public ngOnDestroy(): void {
         this.subscription.unsubscribe();
     }
 
-    private async getData({ id }: Params): Promise<void> {
-        this.orgId = id;
-
-        this.orgService.GetOrgById(this.orgId).then((org: Org) => {
+    private async getData(): Promise<void> {
+        this.orgService.GetMyOrg().then((org: Org) => {
             this.org = org.toObject();
         }).catch(error => {
             this.toast.showError(error.message);
@@ -64,15 +59,15 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
 
     public changeState(event: MatButtonToggleChange | any): void {
         if (event.value === OrgState.ORGSTATE_ACTIVE) {
-            this.orgService.ReactivateOrg(this.orgId).then(() => {
+            this.orgService.ReactivateMyOrg().then(() => {
                 this.toast.showInfo('Reactivated Org');
-            }).catch(error => {
+            }).catch((error) => {
                 this.toast.showError(error.message);
             });
         } else if (event.value === OrgState.ORGSTATE_INACTIVE) {
-            this.orgService.DeactivateOrg(this.orgId).then(() => {
+            this.orgService.DeactivateMyOrg().then(() => {
                 this.toast.showInfo('Deactivated Org');
-            }).catch(error => {
+            }).catch((error) => {
                 this.toast.showError(error.message);
             });
         }
@@ -88,6 +83,10 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
         console.log(domain);
         this.orgService.RemoveMyOrgDomain(domain).then(() => {
             this.toast.showInfo('Removed');
+            const index = this.domains.findIndex(d => d.domain === domain);
+            if (index > -1) {
+                this.domains.splice(index, 1);
+            }
         }).catch(error => {
             this.toast.showError(error.message);
         });

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

@@ -16,6 +16,7 @@ <h1>{{ 'ORG.PAGES.LIST' | translate }}</h1>
             [ngClass]="{ selected: selection.isSelected(org),active: activeOrg?.id === org?.id }">
             <!-- <mat-icon matTooltip="select org" (click)="selection.toggle(org)" class="selection-icon">
                 check_circle</mat-icon> -->
+
             <div class="text-part">
                 <!-- <span *ngIf="org?.changeDate" class="top">last modified on
                     {{

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

@@ -70,6 +70,7 @@ h1 {
         }
 
         .text-part {
+            position: relative;
             flex: 1;
             display: flex;
             flex-direction: column;

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

@@ -1,7 +1,7 @@
 <div class="max-width-container">
     <div class="container">
         <div class="left">
-            <a *ngIf="org" [routerLink]="[ '/orgs', org.id]" mat-icon-button>
+            <a *ngIf="org" [routerLink]="[ '/org']" mat-icon-button>
                 <mat-icon class="icon">arrow_back</mat-icon>
             </a>
         </div>

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

@@ -3,7 +3,6 @@ import { AfterViewInit, Component, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTable } from '@angular/material/table';
-import { ActivatedRoute } from '@angular/router';
 import { tap } from 'rxjs/operators';
 import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
 import { Org, ProjectMember, ProjectType, User } from 'src/app/proto/generated/management_pb';
@@ -31,15 +30,12 @@ export class OrgMembersComponent implements AfterViewInit {
 
     constructor(private orgService: OrgService,
         private dialog: MatDialog,
-        private toast: ToastService,
-        private route: ActivatedRoute) {
-        this.route.params.subscribe(params => {
-            this.orgService.GetOrgById(params.orgid).then(org => {
-                this.org = org.toObject();
-                console.log(this.org);
-                this.dataSource = new ProjectMembersDataSource(this.orgService);
-                this.dataSource.loadMembers(0, 25, 'asc');
-            });
+        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');
         });
     }