fix(console): bugs and some imperfections (#1557)

* org refresh, mfa name attribute

* fix org change

console/src/app/app.module.ts

@@ -38,6 +38,7 @@ import { WarnDialogModule } from './modules/warn-dialog/warn-dialog.module';
 import { SignedoutComponent } from './pages/signedout/signedout.component';
 import { HasFeaturePipeModule } from './pipes/has-feature-pipe/has-feature-pipe.module';
 import { HasRolePipeModule } from './pipes/has-role-pipe/has-role-pipe.module';
+import { AuthenticationService } from './services/authentication.service';
 import { GrpcAuthService } from './services/grpc-auth.service';
 import { GrpcService } from './services/grpc.service';
 import { AuthInterceptor } from './services/interceptors/auth.interceptor';
@@ -175,6 +176,7 @@ const authConfig: AuthConfig = {
         SeoService,
         RefreshService,
         GrpcService,
+        AuthenticationService,
         GrpcAuthService,
         { provide: 'windowObject', useValue: window },
     ],

console/src/app/guards/auth.guard.ts

@@ -21,5 +21,4 @@ export class AuthGuard implements CanActivate {
         }
         return this.auth.authenticated;
     }
-
 }

console/src/app/guards/role.guard.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router';
 import { Observable } from 'rxjs';
-import { filter, first, switchMap } from 'rxjs/operators';
+import { filter, switchMap } from 'rxjs/operators';
 
 import { GrpcAuthService } from '../services/grpc-auth.service';
 
@@ -18,7 +18,6 @@ export class RoleGuard implements CanActivate {
     ): Observable<boolean> {
         return this.authService.fetchedZitadelPermissions.pipe(
             filter((permissionsFetched) => !!permissionsFetched),
-            first(),
         ).pipe(
             switchMap(_ => this.authService.isAllowed(route.data['roles'])),
         );

console/src/app/modules/policy-grid/policy-grid.component.scss

@@ -2,6 +2,7 @@ h2 {
   font-size: 1.2rem;
   letter-spacing: .05em;
   text-transform: uppercase;
+  margin-top: 2rem;
 }
 
 .top-desc {

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

@@ -11,6 +11,13 @@
   color: var(--grey);
   font-size: 14px;
 }
+
+h2 {
+    font-size: 1.2rem;
+    letter-spacing: .05em;
+    text-transform: uppercase;
+    margin-top: 2rem;
+}
   
 .tier {
     display: flex;

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

@@ -6,6 +6,8 @@
             <app-card title="{{ 'ORG.DOMAINS.TITLE' | translate }}"
                 description="{{ 'ORG.DOMAINS.DESCRIPTION' | translate }}">
 
+                <button (click)="loadDomains()" card-actions mat-icon-button><mat-icon>refresh</mat-icon></button>
+
                 <div *ngFor="let domain of domains" class="domain">
                     <span *ngIf="canwrite$ | async" (click)="verifyDomain(domain)"
                         class="title">{{domain.domainName}}</span>

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

@@ -6,6 +6,7 @@ h2 {
   font-size: 1.2rem;
   letter-spacing: .05em;
   text-transform: uppercase;
+  margin-top: 2rem;
 }
   
 .top-desc {

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

@@ -113,12 +113,14 @@ export class OrgDetailComponent implements OnInit {
 
         dialogRef.afterClosed().subscribe(resp => {
             if (resp) {
-                this.mgmtService.addOrgDomain(resp).then(resp => {
+                this.mgmtService.addOrgDomain(resp).then(() => {
-                    const newDomain = resp;
-
-                    // TODO send domainname only 
-                    // this.verifyDomain(newDomainView.toObject());
                     this.toast.showInfo('ORG.TOAST.DOMAINADDED', true);
+
+                    setTimeout(() => {
+                        this.loadDomains();
+                    }, 1000);
+                }).catch(error => {
+                    this.toast.showError(error);
                 });
             }
         });

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

@@ -9,6 +9,7 @@ import { GrantedProject, Project, Role } from 'src/app/proto/generated/zitadel/p
 import { User } from 'src/app/proto/generated/zitadel/user_pb';
 import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
+import { StorageKey, StorageService } from 'src/app/services/storage.service';
 import { ToastService } from 'src/app/services/toast.service';
 
 @Component({
@@ -51,6 +52,7 @@ export class UserGrantCreateComponent implements OnDestroy {
         private route: ActivatedRoute,
         private authService: GrpcAuthService,
         private mgmtService: ManagementService,
+        private storage: StorageService,
     ) {
         this.subscription = this.route.params.subscribe((params: Params) => {
             const { projectid, grantid, userid } = params;
@@ -83,9 +85,10 @@ export class UserGrantCreateComponent implements OnDestroy {
             }
         });
 
-        this.authService.getActiveOrg().then(org => {
+        const temporg = this.storage.getItem<Org.AsObject>(StorageKey.organization);
-            this.org = org;
+        if (temporg) {
-        });
+            this.org = temporg;
+        }
     }
 
     public close(): void {

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

@@ -9,10 +9,11 @@
                 </td>
             </ng-container>
 
-            <ng-container matColumnDef="attr">
+            <ng-container matColumnDef="name">
-                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.ATTRIBUTE' | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.NAME' | translate }} </th>
-                <td mat-cell *matCellDef="let mfa"><span *ngIf="mfa?.attribute" class="centered">
+                <td mat-cell *matCellDef="let mfa">
-                        {{ mfa?.attribute }}
+                    <span *ngIf="mfa?.u2f?.name" class="centered">
+                        {{ mfa.u2f.name }}
                     </span>
                 </td>
             </ng-container>

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

@@ -26,7 +26,7 @@ export interface WebAuthNOptions {
     styleUrls: ['./auth-user-mfa.component.scss'],
 })
 export class AuthUserMfaComponent implements OnInit, OnDestroy {
-    public displayedColumns: string[] = ['type', 'attr', 'state', 'actions'];
+    public displayedColumns: string[] = ['type', 'name', 'state', 'actions'];
     private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
     public loading$: Observable<boolean> = this.loadingSubject.asObservable();
 

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

@@ -9,10 +9,11 @@
                 </td>
             </ng-container>
 
-            <ng-container matColumnDef="attr">
+            <ng-container matColumnDef="name">
-                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.ATTRIBUTE' | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.NAME' | translate }} </th>
-                <td mat-cell *matCellDef="let mfa"><span *ngIf="mfa?.attribute" class="centered">
+                <td mat-cell *matCellDef="let mfa">
-                        {{ mfa.attribute }}
+                    <span *ngIf="mfa?.u2f?.name" class="centered">
+                        {{ mfa.u2f.name }}
                     </span>
                 </td>
             </ng-container>

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

@@ -20,7 +20,7 @@ export interface MFAItem {
     styleUrls: ['./user-mfa.component.scss'],
 })
 export class UserMfaComponent implements OnInit, OnDestroy {
-    public displayedColumns: string[] = ['type', 'attr', 'state', 'actions'];
+    public displayedColumns: string[] = ['type', 'name', 'state', 'actions'];
     @Input() private user!: User.AsObject;
     public mfaSubject: BehaviorSubject<AuthFactor.AsObject[]> = new BehaviorSubject<AuthFactor.AsObject[]>([]);
     private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

console/src/assets/i18n/de.json

@@ -218,7 +218,7 @@
         "MFA": {
             "TABLETYPE":"Typ",
             "TABLESTATE":"Status",
-            "ATTRIBUTE":"Attribut",
+            "NAME":"Name",
             "TABLEACTIONS":"Aktionen",
             "TITLE": "Multifaktor-Authentisierung",
             "DESCRIPTION": "Füge einen zusätzlichen Faktor hinzu, um Dein Konto optimal zu schützen.",

console/src/assets/i18n/en.json

@@ -218,7 +218,7 @@
         "MFA": {
             "TABLETYPE":"Type",
             "TABLESTATE":"Status",
-            "ATTRIBUTE":"Attribut",
+            "NAME":"Name",
             "TABLEACTIONS":"Actions",
             "TITLE": "Multifactor Authentication",
             "DESCRIPTION": "Add a second factor to ensure optimal security for your account.",