fix(console): update dependencies, use prettier as default linter, refresh on policy change (#4375)

* privatelabeling refresh, org context color

* chore(deps): bump @grpc/grpc-js from 1.6.10 to 1.7.0 in /console (#4358)

Bumps [@grpc/grpc-js](https://github.com/grpc/grpc-node) from 1.6.10 to 1.7.0.
- [Release notes](https://github.com/grpc/grpc-node/releases)
- [Commits](https://github.com/grpc/grpc-node/compare/@grpc/grpc-js@1.6.10...@grpc/grpc-js@1.7.0)

---
updated-dependencies:
- dependency-name: "@grpc/grpc-js"
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps): bump ngx-color from 8.0.2 to 8.0.3 in /console (#4357)

Bumps [ngx-color](https://github.com/scttcper/ngx-color) from 8.0.2 to 8.0.3.
- [Release notes](https://github.com/scttcper/ngx-color/releases)
- [Commits](https://github.com/scttcper/ngx-color/compare/v8.0.2...v8.0.3)

---
updated-dependencies:
- dependency-name: ngx-color
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump @types/node from 17.0.45 to 18.7.16 in /console (#4341)

Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 17.0.45 to 18.7.16.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node)

---
updated-dependencies:
- dependency-name: "@types/node"
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump jasmine-core from 4.2.0 to 4.4.0 in /console (#4317)

Bumps [jasmine-core](https://github.com/jasmine/jasmine) from 4.2.0 to 4.4.0.
- [Release notes](https://github.com/jasmine/jasmine/releases)
- [Changelog](https://github.com/jasmine/jasmine/blob/main/RELEASE.md)
- [Commits](https://github.com/jasmine/jasmine/compare/v4.2.0...v4.4.0)

---
updated-dependencies:
- dependency-name: jasmine-core
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump @types/jasmine from 4.0.3 to 4.3.0 in /console (#4279)

Bumps [@types/jasmine](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/jasmine) from 4.0.3 to 4.3.0.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/jasmine)

---
updated-dependencies:
- dependency-name: "@types/jasmine"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* quicklink

* cli core

* material cdk

* eslint

* add grantid

* show oidc config error

* use prettier config, linter

* rm stylelint, fix lint

* prettier - ignore proto output

* labelling

* update contribution guide

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Elio Bischof <eliobischof@gmail.com>

console/src/app/pages/actions/action-table/action-table.component.spec.ts

@@ -8,9 +8,8 @@ describe('ActionTableComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ActionTableComponent ]
-    })
-    .compileComponents();
+      declarations: [ActionTableComponent],
+    }).compileComponents();
   });
 
   beforeEach(() => {

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

@@ -7,11 +7,11 @@ const routes: Routes = [
   {
     path: '',
     component: ActionsComponent,
-},
+  },
 ];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class ActionsRoutingModule { }
+export class ActionsRoutingModule {}

console/src/app/pages/actions/actions.component.spec.ts

@@ -8,9 +8,8 @@ describe('ActionsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ActionsComponent ]
-    })
-    .compileComponents();
+      declarations: [ActionsComponent],
+    }).compileComponents();
   });
 
   beforeEach(() => {

console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.spec.ts

@@ -3,23 +3,22 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { AddKeyDialogComponent } from './add-key-dialog.component';
 
 describe('AddKeyDialogComponent', () => {
-    let component: AddKeyDialogComponent;
-    let fixture: ComponentFixture<AddKeyDialogComponent>;
+  let component: AddKeyDialogComponent;
+  let fixture: ComponentFixture<AddKeyDialogComponent>;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [AddKeyDialogComponent],
-        })
-            .compileComponents();
-    }));
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [AddKeyDialogComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(AddKeyDialogComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddKeyDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.spec.ts

@@ -3,23 +3,22 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { AddKeyDialogComponent } from './add-key-dialog.component';
 
 describe('AddKeyDialogComponent', () => {
-    let component: AddKeyDialogComponent;
-    let fixture: ComponentFixture<AddKeyDialogComponent>;
+  let component: AddKeyDialogComponent;
+  let fixture: ComponentFixture<AddKeyDialogComponent>;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [AddKeyDialogComponent],
-        })
-            .compileComponents();
-    }));
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [AddKeyDialogComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(AddKeyDialogComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddKeyDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

console/src/app/pages/domains/add-domain-dialog/add-domain-dialog.component.spec.ts

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

console/src/app/pages/domains/add-domain-dialog/add-domain-dialog.component.ts

@@ -8,10 +8,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 })
 export class AddDomainDialogComponent {
   public newdomain: string = '';
-  constructor(
-    public dialogRef: MatDialogRef<AddDomainDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any,
-  ) { }
+  constructor(public dialogRef: MatDialogRef<AddDomainDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {}
 
   public closeDialog(): void {
     this.dialogRef.close(false);

console/src/app/pages/domains/add-domain-dialog/add-domain-dialog.module.ts

@@ -8,13 +8,7 @@ import { InputModule } from 'src/app/modules/input/input.module';
 import { AddDomainDialogComponent } from './add-domain-dialog.component';
 
 @NgModule({
-    declarations: [AddDomainDialogComponent],
-    imports: [
-        CommonModule,
-        TranslateModule,
-        MatButtonModule,
-        InputModule,
-        FormsModule,
-    ],
+  declarations: [AddDomainDialogComponent],
+  imports: [CommonModule, TranslateModule, MatButtonModule, InputModule, FormsModule],
 })
-export class AddDomainDialogModule { }
+export class AddDomainDialogModule {}

console/src/app/pages/domains/domain-verification/domain-verification.component.spec.ts

@@ -3,23 +3,22 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { DomainVerificationComponent } from './domain-verification.component';
 
 describe('DomainVerificationComponent', () => {
-    let component: DomainVerificationComponent;
-    let fixture: ComponentFixture<DomainVerificationComponent>;
+  let component: DomainVerificationComponent;
+  let fixture: ComponentFixture<DomainVerificationComponent>;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [DomainVerificationComponent],
-        })
-            .compileComponents();
-    }));
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [DomainVerificationComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(DomainVerificationComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DomainVerificationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

console/src/app/pages/domains/domains.component.spec.ts

@@ -8,9 +8,8 @@ describe('OrgDomainsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ OrgDomainsComponent ]
-    })
-    .compileComponents();
+      declarations: [OrgDomainsComponent],
+    }).compileComponents();
   });
 
   beforeEach(() => {

console/src/app/pages/failed-events/failed-events.component.spec.ts

@@ -3,23 +3,22 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { FailedEventsComponent } from './failed-events.component';
 
 describe('FailedEventsComponent', () => {
-    let component: FailedEventsComponent;
-    let fixture: ComponentFixture<FailedEventsComponent>;
+  let component: FailedEventsComponent;
+  let fixture: ComponentFixture<FailedEventsComponent>;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [FailedEventsComponent],
-        })
-            .compileComponents();
-    }));
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [FailedEventsComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(FailedEventsComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FailedEventsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

console/src/app/pages/grants/grants.component.spec.ts

@@ -3,23 +3,22 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { GrantsComponent } from './grants.component';
 
 describe('GrantsComponent', () => {
-    let component: GrantsComponent;
-    let fixture: ComponentFixture<GrantsComponent>;
+  let component: GrantsComponent;
+  let fixture: ComponentFixture<GrantsComponent>;
 
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            declarations: [GrantsComponent],
-        })
-            .compileComponents();
-    });
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [GrantsComponent],
+    }).compileComponents();
+  });
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(GrantsComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GrantsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

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

@@ -9,16 +9,7 @@ import { GrantsRoutingModule } from './grants-routing.module';
 import { GrantsComponent } from './grants.component';
 
 @NgModule({
-    declarations: [
-        GrantsComponent,
-    ],
-    imports: [
-        CommonModule,
-        GrantsRoutingModule,
-        UserGrantsModule,
-        TranslateModule,
-        HasRoleModule,
-        HasRolePipeModule,
-    ],
+  declarations: [GrantsComponent],
+  imports: [CommonModule, GrantsRoutingModule, UserGrantsModule, TranslateModule, HasRoleModule, HasRolePipeModule],
 })
-export class GrantsModule { }
+export class GrantsModule {}

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

@@ -15,4 +15,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
 })
-export class HomeRoutingModule { }
+export class HomeRoutingModule {}

console/src/app/pages/iam-views/iam-views.component.spec.ts

@@ -3,23 +3,22 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { IamViewsComponent } from './iam-views.component';
 
 describe('IamViewsComponent', () => {
-    let component: IamViewsComponent;
-    let fixture: ComponentFixture<IamViewsComponent>;
+  let component: IamViewsComponent;
+  let fixture: ComponentFixture<IamViewsComponent>;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [IamViewsComponent],
-        })
-            .compileComponents();
-    }));
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [IamViewsComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(IamViewsComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IamViewsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

console/src/app/pages/instance-settings/instance-settings.component.spec.ts

@@ -8,9 +8,8 @@ describe('InstanceSettingsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ InstanceSettingsComponent ]
-    })
-    .compileComponents();
+      declarations: [InstanceSettingsComponent],
+    }).compileComponents();
   });
 
   beforeEach(() => {

console/src/app/pages/instance-settings/instance-settings.component.ts

@@ -6,19 +6,19 @@ import { SidenavSetting } from 'src/app/modules/sidenav/sidenav.component';
 import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
 
 import {
-    BRANDING,
-    COMPLEXITY,
-    DOMAIN,
-    GENERAL,
-    IDP,
-    LOCKOUT,
-    LOGIN,
-    LOGINTEXTS,
-    MESSAGETEXTS,
-    NOTIFICATIONS,
-    OIDC,
-    PRIVACYPOLICY,
-    SECRETS,
+  BRANDING,
+  COMPLEXITY,
+  DOMAIN,
+  GENERAL,
+  IDP,
+  LOCKOUT,
+  LOGIN,
+  LOGINTEXTS,
+  MESSAGETEXTS,
+  NOTIFICATIONS,
+  OIDC,
+  PRIVACYPOLICY,
+  SECRETS,
 } from '../../modules/settings-list/settings';
 
 @Component({

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

@@ -5,28 +5,35 @@
       <i class="las la-info-circle"></i>
     </a>
   </p>
-  <cnsl-members-table [dataSource]="dataSource" [memberRoleOptions]="memberRoleOptions"
-    (updateRoles)="updateRoles($event.member, $event.change)" [factoryLoadFunc]="changePageFactory"
-    (changedSelection)="selection = $event" [refreshTrigger]="changePage"
-    [canWrite]="['iam.member.write$'] | hasRole | async" [canDelete]="['iam.member.delete$'] | hasRole | async"
-    (deleteMember)="removeMember($event)">
-
+  <cnsl-members-table
+    [dataSource]="dataSource"
+    [memberRoleOptions]="memberRoleOptions"
+    (updateRoles)="updateRoles($event.member, $event.change)"
+    [factoryLoadFunc]="changePageFactory"
+    (changedSelection)="selection = $event"
+    [refreshTrigger]="changePage"
+    [canWrite]="['iam.member.write$'] | hasRole | async"
+    [canDelete]="['iam.member.delete$'] | hasRole | async"
+    (deleteMember)="removeMember($event)"
+  >
     <ng-template cnslHasRole selectactions [hasRole]="['iam.member.delete']">
-      <button color="warn" (click)="removeMemberSelection()" matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}"
-        mat-raised-button>
+      <button
+        color="warn"
+        (click)="removeMemberSelection()"
+        matTooltip="{{ 'ORG_DETAIL.TABLE.DELETE' | translate }}"
+        mat-raised-button
+      >
         <i class="las la-trash"></i>
-        <span>{{'ACTIONS.SELECTIONDELETE' | translate}}</span>
-        <cnsl-action-keys [type]="ActionKeysType.DELETE" (actionTriggered)="removeMemberSelection()">
-        </cnsl-action-keys>
+        <span>{{ 'ACTIONS.SELECTIONDELETE' | translate }}</span>
+        <cnsl-action-keys [type]="ActionKeysType.DELETE" (actionTriggered)="removeMemberSelection()"> </cnsl-action-keys>
       </button>
     </ng-template>
     <ng-template cnslHasRole writeactions [hasRole]="['iam.member.write']">
       <button color="primary" (click)="openAddMember()" class="cnsl-action-button" mat-raised-button>
         <mat-icon class="icon">add</mat-icon>
         <span>{{ 'ACTIONS.NEW' | translate }}</span>
-        <cnsl-action-keys (actionTriggered)="openAddMember()">
-        </cnsl-action-keys>
+        <cnsl-action-keys (actionTriggered)="openAddMember()"> </cnsl-action-keys>
       </button>
     </ng-template>
   </cnsl-members-table>
-</cnsl-detail-layout>
+</cnsl-detail-layout>

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

@@ -4,15 +4,15 @@ import { RouterModule, Routes } from '@angular/router';
 import { OrgCreateComponent } from './org-create.component';
 
 const routes: Routes = [
-    {
-        path: '',
-        component: OrgCreateComponent,
-        data: { animation: 'DetailPage' },
-    },
+  {
+    path: '',
+    component: OrgCreateComponent,
+    data: { animation: 'DetailPage' },
+  },
 ];
 
 @NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule],
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
 })
-export class OrgCreateRoutingModule { }
+export class OrgCreateRoutingModule {}

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

@@ -3,23 +3,22 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { OrgCreateComponent } from './org-create.component';
 
 describe('OrgCreateComponent', () => {
-    let component: OrgCreateComponent;
-    let fixture: ComponentFixture<OrgCreateComponent>;
+  let component: OrgCreateComponent;
+  let fixture: ComponentFixture<OrgCreateComponent>;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [OrgCreateComponent],
-        })
-            .compileComponents();
-    }));
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [OrgCreateComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(OrgCreateComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OrgCreateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

console/src/app/pages/org-list/org-list-routing.module.ts

@@ -4,15 +4,14 @@ import { RouterModule, Routes } from '@angular/router';
 import { OrgListComponent } from './org-list.component';
 
 const routes: Routes = [
-    {
-        path: '',
-        component: OrgListComponent,
-    },
-
+  {
+    path: '',
+    component: OrgListComponent,
+  },
 ];
 
 @NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule],
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
 })
-export class OrgListRoutingModule { }
+export class OrgListRoutingModule {}

console/src/app/pages/org-list/org-list.component.spec.ts

@@ -3,23 +3,22 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { OrgListComponent } from './org-list.component';
 
 describe('OrgListComponent', () => {
-    let component: OrgListComponent;
-    let fixture: ComponentFixture<OrgListComponent>;
+  let component: OrgListComponent;
+  let fixture: ComponentFixture<OrgListComponent>;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [OrgListComponent],
-        })
-            .compileComponents();
-    }));
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [OrgListComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(OrgListComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OrgListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

console/src/app/pages/org-settings/org-settings.component.ts

@@ -6,15 +6,15 @@ import { SidenavSetting } from 'src/app/modules/sidenav/sidenav.component';
 import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
 
 import {
-    BRANDING,
-    COMPLEXITY,
-    DOMAIN,
-    IDP,
-    LOCKOUT,
-    LOGIN,
-    LOGINTEXTS,
-    MESSAGETEXTS,
-    PRIVACYPOLICY,
+  BRANDING,
+  COMPLEXITY,
+  DOMAIN,
+  IDP,
+  LOCKOUT,
+  LOGIN,
+  LOGINTEXTS,
+  MESSAGETEXTS,
+  PRIVACYPOLICY,
 } from '../../modules/settings-list/settings';
 
 @Component({

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

@@ -9,8 +9,7 @@ describe('OrgDetailComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [OrgDetailComponent],
-    })
-      .compileComponents();
+    }).compileComponents();
   }));
 
   beforeEach(() => {

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

@@ -20,22 +20,23 @@ export class OrgMembersDataSource extends DataSource<Member.AsObject> {
     const offset = pageIndex * pageSize;
 
     this.loadingSubject.next(true);
-    from(this.service.listOrgMembers(pageSize, offset)).pipe(
-      map(resp => {
-        this.totalResult = resp.details?.totalResult || 0;
-        if (resp.details?.viewTimestamp) {
-          this.viewTimestamp = resp.details.viewTimestamp;
-        }
-        return resp.resultList;
-      }),
-      catchError(() => of([])),
-      finalize(() => this.loadingSubject.next(false)),
-    ).subscribe(members => {
-      this.membersSubject.next(members);
-    });
+    from(this.service.listOrgMembers(pageSize, offset))
+      .pipe(
+        map((resp) => {
+          this.totalResult = resp.details?.totalResult || 0;
+          if (resp.details?.viewTimestamp) {
+            this.viewTimestamp = resp.details.viewTimestamp;
+          }
+          return resp.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.

console/src/app/pages/orgs/org-members/org-members-routing.module.ts

@@ -4,15 +4,15 @@ import { RouterModule, Routes } from '@angular/router';
 import { OrgMembersComponent } from './org-members.component';
 
 const routes: Routes = [
-    {
-        path: '',
-        component: OrgMembersComponent,
-        data: { animation: 'AddPage' },
-    },
+  {
+    path: '',
+    component: OrgMembersComponent,
+    data: { animation: 'AddPage' },
+  },
 ];
 
 @NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule],
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
 })
-export class OrgMembersRoutingModule { }
+export class OrgMembersRoutingModule {}

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

@@ -1,31 +1,39 @@
-<cnsl-detail-layout title="{{org?.name}} {{ 'ORG.MEMBER.TITLE' | translate }}">
+<cnsl-detail-layout title="{{ org?.name }} {{ 'ORG.MEMBER.TITLE' | translate }}">
   <p class="subinfo" sub>
     <span class="cnsl-secondary-text">{{ 'ORG.MEMBER.DESCRIPTION' | translate }}</span>
     <a mat-icon-button href="https://docs.zitadel.com/docs/manuals/admin-managers" target="_blank">
       <i class="las la-info-circle"></i>
     </a>
   </p>
-  <cnsl-members-table [dataSource]="dataSource" [memberRoleOptions]="memberRoleOptions"
-    (updateRoles)="updateRoles($event.member, $event.change)" [factoryLoadFunc]="changePageFactory"
-    (changedSelection)="selection = $event" [refreshTrigger]="changePage"
-    [canDelete]="['org.member.delete:'+org?.id,'org.member.delete$'] | hasRole | async"
-    [canWrite]="['org.member.write$'] | hasRole | async" (deleteMember)="removeOrgMember($event)">
-    <ng-template cnslHasRole selectactions [hasRole]="['org.member.delete:'+org?.id,'org.member.delete']">
-      <button (click)="removeOrgMemberSelection()" matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}"
-        mat-raised-button color="warn">
+  <cnsl-members-table
+    [dataSource]="dataSource"
+    [memberRoleOptions]="memberRoleOptions"
+    (updateRoles)="updateRoles($event.member, $event.change)"
+    [factoryLoadFunc]="changePageFactory"
+    (changedSelection)="selection = $event"
+    [refreshTrigger]="changePage"
+    [canDelete]="['org.member.delete:' + org?.id, 'org.member.delete$'] | hasRole | async"
+    [canWrite]="['org.member.write$'] | hasRole | async"
+    (deleteMember)="removeOrgMember($event)"
+  >
+    <ng-template cnslHasRole selectactions [hasRole]="['org.member.delete:' + org?.id, 'org.member.delete']">
+      <button
+        (click)="removeOrgMemberSelection()"
+        matTooltip="{{ 'ORG_DETAIL.TABLE.DELETE' | translate }}"
+        mat-raised-button
+        color="warn"
+      >
         <i class="las la-trash"></i>
-        <span>{{'ACTIONS.SELECTIONDELETE' | translate}}</span>
-        <cnsl-action-keys [type]="ActionKeysType.DELETE" (actionTriggered)="removeOrgMemberSelection()">
-        </cnsl-action-keys>
+        <span>{{ 'ACTIONS.SELECTIONDELETE' | translate }}</span>
+        <cnsl-action-keys [type]="ActionKeysType.DELETE" (actionTriggered)="removeOrgMemberSelection()"> </cnsl-action-keys>
       </button>
     </ng-template>
-    <ng-template cnslHasRole writeactions [hasRole]="['org.member.write:'+org?.id,'org.member.write']">
+    <ng-template cnslHasRole writeactions [hasRole]="['org.member.write:' + org?.id, 'org.member.write']">
       <button color="primary" (click)="openAddMember()" class="cnsl-action-button" mat-raised-button>
         <mat-icon class="icon">add</mat-icon>
         <span>{{ 'ACTIONS.NEW' | translate }}</span>
-        <cnsl-action-keys (actionTriggered)="openAddMember()">
-        </cnsl-action-keys>
+        <cnsl-action-keys (actionTriggered)="openAddMember()"> </cnsl-action-keys>
       </button>
     </ng-template>
   </cnsl-members-table>
-</cnsl-detail-layout>
+</cnsl-detail-layout>

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

@@ -9,14 +9,12 @@ describe('OrgMembersComponent', () => {
   let component: OrgMembersComponent;
   let fixture: ComponentFixture<OrgMembersComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        declarations: [OrgMembersComponent],
-        imports: [NoopAnimationsModule, MatSortModule, MatTableModule],
-      }).compileComponents();
-    }),
-  );
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [OrgMembersComponent],
+      imports: [NoopAnimationsModule, MatSortModule, MatTableModule],
+    }).compileComponents();
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(OrgMembersComponent);

console/src/app/pages/projects/apps/additional-origins/additional-origins.component.html

@@ -1,28 +1,32 @@
 <form class="form" (ngSubmit)="add(originInput)">
-    <cnsl-form-field class="formfield">
-        <cnsl-label>{{ title }}</cnsl-label>
+  <cnsl-form-field class="formfield">
+    <cnsl-label>{{ title }}</cnsl-label>
 
-        <input #originInput cnslInput [placeholder]="placeholder" [formControl]="redirectControl">
-    </cnsl-form-field>
-    <button matTooltip="{{'ACTIONS.ADD' | translate}}" type="submit" mat-icon-button
-        [disabled]="redirectControl.invalid || !canWrite">
-        <mat-icon>add</mat-icon>
-    </button>
+    <input #originInput cnslInput [placeholder]="placeholder" [formControl]="redirectControl" />
+  </cnsl-form-field>
+  <button
+    matTooltip="{{ 'ACTIONS.ADD' | translate }}"
+    type="submit"
+    mat-icon-button
+    [disabled]="redirectControl.invalid || !canWrite"
+  >
+    <mat-icon>add</mat-icon>
+  </button>
 </form>
 
 <div class="uri-list">
-    <div *ngFor="let uri of urisList" class="uri-line">
-        <span class="uri"
-            [ngClass]="{'green': uri?.startsWith('https://'), 'red': !uri?.startsWith('https://')}">{{uri}}</span>
-        <span class="fill-space"></span>
-        <!-- TODO add regex later -->
-        <!-- <i *ngIf="!(uri | origin)" class="las la-exclamation red" [matTooltip]="'APP.NOTANORIGIN' | translate"></i> -->
+  <div *ngFor="let uri of urisList" class="uri-line">
+    <span class="uri" [ngClass]="{ green: uri?.startsWith('https://'), red: !uri?.startsWith('https://') }">{{ uri }}</span>
+    <span class="fill-space"></span>
+    <!-- TODO add regex later -->
+    <!-- <i *ngIf="!(uri | origin)" class="las la-exclamation red" [matTooltip]="'APP.NOTANORIGIN' | translate"></i> -->
 
-        <button matTooltip="{{'ACTIONS.DELETE' | translate}}" mat-icon-button (click)="remove(uri)" class="icon-button">
-            <mat-icon class="icon">cancel</mat-icon>
-        </button>
-    </div>
+    <button matTooltip="{{ 'ACTIONS.DELETE' | translate }}" mat-icon-button (click)="remove(uri)" class="icon-button">
+      <mat-icon class="icon">cancel</mat-icon>
+    </button>
+  </div>
 </div>
 
 <p *ngIf="redirectControl.value && redirectControl.invalid" class="error">
-    {{'APP.OIDC.REDIRECTNOTVALID' | translate}}</p>
+  {{ 'APP.OIDC.REDIRECTNOTVALID' | translate }}
+</p>

console/src/app/pages/projects/apps/additional-origins/additional-origins.component.spec.ts

@@ -3,23 +3,22 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AdditionalOriginsComponent } from './additional-origins.component';
 
 describe('AdditionalOriginsComponent', () => {
-    let component: AdditionalOriginsComponent;
-    let fixture: ComponentFixture<AdditionalOriginsComponent>;
+  let component: AdditionalOriginsComponent;
+  let fixture: ComponentFixture<AdditionalOriginsComponent>;
 
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            declarations: [AdditionalOriginsComponent],
-        })
-            .compileComponents();
-    });
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [AdditionalOriginsComponent],
+    }).compileComponents();
+  });
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(AdditionalOriginsComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AdditionalOriginsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

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

@@ -9,8 +9,7 @@ describe('AppCreateComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [AppCreateComponent],
-    })
-      .compileComponents();
+    }).compileComponents();
   }));
 
   beforeEach(() => {

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

@@ -9,8 +9,7 @@ describe('AppDetailComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [AppDetailComponent],
-    })
-      .compileComponents();
+    }).compileComponents();
   }));
 
   beforeEach(() => {

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

@@ -3,23 +3,22 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { AppSecretDialogComponent } from './app-secret-dialog.component';
 
 describe('AppSecretDialogComponent', () => {
-    let component: AppSecretDialogComponent;
-    let fixture: ComponentFixture<AppSecretDialogComponent>;
+  let component: AppSecretDialogComponent;
+  let fixture: ComponentFixture<AppSecretDialogComponent>;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [AppSecretDialogComponent],
-        })
-            .compileComponents();
-    }));
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [AppSecretDialogComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(AppSecretDialogComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AppSecretDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

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

@@ -8,8 +8,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 })
 export class AppSecretDialogComponent {
   public copied: string = '';
-  constructor(public dialogRef: MatDialogRef<AppSecretDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any) { }
+  constructor(public dialogRef: MatDialogRef<AppSecretDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {}
 
   public closeDialog(): void {
     this.dialogRef.close(false);

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

@@ -1,32 +1,32 @@
 import { FormControl } from '@angular/forms';
 
 export function nativeValidator(c: FormControl): any {
-    const REGEXP = /([a-zA-Z0-9]*:\/\/)\w+/g;
+  const REGEXP = /([a-zA-Z0-9]*:\/\/)\w+/g;
 
-    if (c.value.startsWith('http://localhost')) {
-        return null;
-    } else if (c.value.startsWith('https://') || c.value.startsWith('http://')) {
-        return {
-            invalid: true,
-            nativeValidator: {
-                valid: false,
-            },
-        };
-    } else if (REGEXP.test(c.value)) {
-        return null;
-    }
+  if (c.value.startsWith('http://localhost')) {
+    return null;
+  } else if (c.value.startsWith('https://') || c.value.startsWith('http://')) {
+    return {
+      invalid: true,
+      nativeValidator: {
+        valid: false,
+      },
+    };
+  } else if (REGEXP.test(c.value)) {
+    return null;
+  }
 }
 
 export function webValidator(c: FormControl): any {
-    if (c.value.startsWith('https://')) {
-        return null;
-    } else if (c.value.startsWith('http://')) {
-        return {
-            invalid: false,
-            webValidator: {
-                valid: true,
-                error: 'LOCALHOSTALLOWEDFORTESTING',
-            },
-        };
-    }
+  if (c.value.startsWith('https://')) {
+    return null;
+  } else if (c.value.startsWith('http://')) {
+    return {
+      invalid: false,
+      webValidator: {
+        valid: true,
+        error: 'LOCALHOSTALLOWEDFORTESTING',
+      },
+    };
+  }
 }

console/src/app/pages/projects/apps/redirect-uris/redirect-uris.component.spec.ts

@@ -8,9 +8,8 @@ describe('RedirectUrisComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ RedirectUrisComponent ],
-    })
-    .compileComponents();
+      declarations: [RedirectUrisComponent],
+    }).compileComponents();
   });
 
   beforeEach(() => {

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

@@ -3,23 +3,22 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { GrantedProjectDetailComponent } from './granted-project-detail.component';
 
 describe('GrantedProjectDetailComponent', () => {
-    let component: GrantedProjectDetailComponent;
-    let fixture: ComponentFixture<GrantedProjectDetailComponent>;
+  let component: GrantedProjectDetailComponent;
+  let fixture: ComponentFixture<GrantedProjectDetailComponent>;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [GrantedProjectDetailComponent],
-        })
-            .compileComponents();
-    }));
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [GrantedProjectDetailComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(GrantedProjectDetailComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GrantedProjectDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

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

@@ -3,23 +3,22 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ApplicationGridComponent } from './application-grid.component';
 
 describe('AppGridComponent', () => {
-    let component: ApplicationGridComponent;
-    let fixture: ComponentFixture<ApplicationGridComponent>;
+  let component: ApplicationGridComponent;
+  let fixture: ComponentFixture<ApplicationGridComponent>;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [ApplicationGridComponent],
-        })
-            .compileComponents();
-    }));
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ApplicationGridComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(ApplicationGridComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ApplicationGridComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

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

@@ -11,55 +11,56 @@ import { ManagementService } from 'src/app/services/mgmt.service';
  * (including sorting, pagination, and filtering).
  */
 export class ProjectApplicationsDataSource extends DataSource<App.AsObject> {
-    public totalResult: number = 0;
-    public viewTimestamp!: Timestamp.AsObject;
+  public totalResult: number = 0;
+  public viewTimestamp!: Timestamp.AsObject;
 
-    public appsSubject: BehaviorSubject<App.AsObject[]> = new BehaviorSubject<App.AsObject[]>([]);
-    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
-    public loading$: Observable<boolean> = this.loadingSubject.asObservable();
+  public appsSubject: BehaviorSubject<App.AsObject[]> = new BehaviorSubject<App.AsObject[]>([]);
+  private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  public loading$: Observable<boolean> = this.loadingSubject.asObservable();
 
-    constructor(private mgmtService: ManagementService) {
-        super();
-    }
+  constructor(private mgmtService: ManagementService) {
+    super();
+  }
 
-    public loadApps(projectId: string, pageIndex: number, pageSize: number): void {
-        const offset = pageIndex * pageSize;
+  public loadApps(projectId: string, pageIndex: number, pageSize: number): void {
+    const offset = pageIndex * pageSize;
 
-        this.loadingSubject.next(true);
-        from(this.mgmtService.listApps(projectId, pageSize, offset)).pipe(
-            map(resp => {
-                const response = resp;
-                if (response.details?.totalResult) {
-                    this.totalResult = response.details.totalResult;
-                }
-                if (response.details?.viewTimestamp) {
-                    this.viewTimestamp = response.details.viewTimestamp;
-                }
-                return response.resultList;
-            }),
-            catchError(() => of([])),
-            finalize(() => this.loadingSubject.next(false)),
-        ).subscribe(apps => {
-            this.appsSubject.next(apps);
-        });
-    }
+    this.loadingSubject.next(true);
+    from(this.mgmtService.listApps(projectId, pageSize, offset))
+      .pipe(
+        map((resp) => {
+          const response = resp;
+          if (response.details?.totalResult) {
+            this.totalResult = response.details.totalResult;
+          }
+          if (response.details?.viewTimestamp) {
+            this.viewTimestamp = response.details.viewTimestamp;
+          }
+          return response.resultList;
+        }),
+        catchError(() => of([])),
+        finalize(() => this.loadingSubject.next(false)),
+      )
+      .subscribe((apps) => {
+        this.appsSubject.next(apps);
+      });
+  }
 
+  /**
+   * 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<App.AsObject[]> {
+    return this.appsSubject.asObservable();
+  }
 
-    /**
-     * 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<App.AsObject[]> {
-        return this.appsSubject.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.appsSubject.complete();
-        this.loadingSubject.complete();
-    }
+  /**
+   *  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.appsSubject.complete();
+    this.loadingSubject.complete();
+  }
 }

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

@@ -9,14 +9,12 @@ describe('ProjectApplicationsComponent', () => {
   let component: ApplicationsComponent;
   let fixture: ComponentFixture<ApplicationsComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        declarations: [ApplicationsComponent],
-        imports: [NoopAnimationsModule, MatSortModule, MatTableModule],
-      }).compileComponents();
-    }),
-  );
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ApplicationsComponent],
+      imports: [NoopAnimationsModule, MatSortModule, MatTableModule],
+    }).compileComponents();
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ApplicationsComponent);

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

@@ -5,19 +5,19 @@ import { RoleGuard } from 'src/app/guards/role.guard';
 import { OwnedProjectDetailComponent } from './owned-project-detail.component';
 
 const routes: Routes = [
-    {
-        path: '',
-        component: OwnedProjectDetailComponent,
-        data: {
-            animation: 'HomePage',
-            roles: ['project.read'],
-        },
-        canActivate: [RoleGuard],
+  {
+    path: '',
+    component: OwnedProjectDetailComponent,
+    data: {
+      animation: 'HomePage',
+      roles: ['project.read'],
     },
+    canActivate: [RoleGuard],
+  },
 ];
 
 @NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule],
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
 })
-export class OwnedProjectDetailRoutingModule { }
+export class OwnedProjectDetailRoutingModule {}

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

@@ -2,25 +2,23 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { OwnedProjectDetailComponent } from './owned-project-detail.component';
 
-
 describe('ProjectDetailComponent', () => {
-    let component: OwnedProjectDetailComponent;
-    let fixture: ComponentFixture<OwnedProjectDetailComponent>;
+  let component: OwnedProjectDetailComponent;
+  let fixture: ComponentFixture<OwnedProjectDetailComponent>;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [OwnedProjectDetailComponent],
-        })
-            .compileComponents();
-    }));
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [OwnedProjectDetailComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(OwnedProjectDetailComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OwnedProjectDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

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

@@ -26,9 +26,7 @@ import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/local
 import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
 
 import { NameDialogModule } from '../../../modules/name-dialog/name-dialog.module';
-import {
-  ProjectPrivateLabelingDialogModule,
-} from '../../../modules/project-private-labeling-dialog/project-private-labeling-dialog.module';
+import { ProjectPrivateLabelingDialogModule } from '../../../modules/project-private-labeling-dialog/project-private-labeling-dialog.module';
 import { OwnedProjectsRoutingModule } from './owned-projects-routing.module';
 
 @NgModule({

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

@@ -4,15 +4,15 @@ import { RouterModule, Routes } from '@angular/router';
 import { ProjectGrantCreateComponent } from './project-grant-create.component';
 
 const routes: Routes = [
-    {
-        path: '',
-        component: ProjectGrantCreateComponent,
-        data: { animation: 'AddPage' },
-    },
+  {
+    path: '',
+    component: ProjectGrantCreateComponent,
+    data: { animation: 'AddPage' },
+  },
 ];
 
 @NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule],
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
 })
-export class ProjectGrantCreateRoutingModule { }
+export class ProjectGrantCreateRoutingModule {}

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

@@ -3,23 +3,22 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ProjectGrantCreateComponent } from './project-grant-create.component';
 
 describe('GrantCreateComponent', () => {
-    let component: ProjectGrantCreateComponent;
-    let fixture: ComponentFixture<ProjectGrantCreateComponent>;
+  let component: ProjectGrantCreateComponent;
+  let fixture: ComponentFixture<ProjectGrantCreateComponent>;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [ProjectGrantCreateComponent],
-        })
-            .compileComponents();
-    }));
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ProjectGrantCreateComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(ProjectGrantCreateComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProjectGrantCreateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

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

@@ -4,15 +4,15 @@ import { RouterModule, Routes } from '@angular/router';
 import { ProjectGrantDetailComponent } from './project-grant-detail.component';
 
 const routes: Routes = [
-    {
-        path: '',
-        component: ProjectGrantDetailComponent,
-        data: { animation: 'AddPage' },
-    },
+  {
+    path: '',
+    component: ProjectGrantDetailComponent,
+    data: { animation: 'AddPage' },
+  },
 ];
 
 @NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule],
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
 })
-export class ProjectGrantDetailRoutingModule { }
+export class ProjectGrantDetailRoutingModule {}

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

@@ -3,23 +3,22 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ProjectGrantDetailComponent } from './project-grant-detail.component';
 
 describe('GrantComponent', () => {
-    let component: ProjectGrantDetailComponent;
-    let fixture: ComponentFixture<ProjectGrantDetailComponent>;
+  let component: ProjectGrantDetailComponent;
+  let fixture: ComponentFixture<ProjectGrantDetailComponent>;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [ProjectGrantDetailComponent],
-        })
-            .compileComponents();
-    }));
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ProjectGrantDetailComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(ProjectGrantDetailComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProjectGrantDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

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

@@ -1,11 +1,12 @@
 <div class="pgi" *ngIf="grantedProject">
   <div class="pgi-org-wrapper first-org">
-    <span class="pgi-label">{{grantedProject.projectOwnerName}}</span>
+    <span class="pgi-label">{{ grantedProject.projectOwnerName }}</span>
     <div class="pgi-project-wrapper fill-space">
-      <span class="pgi-label">{{grantedProject.projectName}}</span>
+      <span class="pgi-label">{{ grantedProject.projectName }}</span>
       <div class="pgi-role-wrapper fill-space">
         <div class="pgi-role-row">
-          <cnsl-project-role-chip [roleName]="role.key" *ngFor="let role of projectRoleOptions">{{role.key}}
+          <cnsl-project-role-chip [roleName]="role.key" *ngFor="let role of projectRoleOptions"
+            >{{ role.key }}
           </cnsl-project-role-chip>
         </div>
         <span class="fill-space"></span>
@@ -19,22 +20,31 @@
   <i class="pgi-arrow las la-long-arrow-alt-right"></i>
 
   <div class="pgi-org-wrapper">
-    <span class="pgi-label italic">{{grantedProject.grantedOrgName}}</span>
+    <span class="pgi-label italic">{{ grantedProject.grantedOrgName }}</span>
     <div class="pgi-project-wrapper fill-space">
       <div class="pgi-label-wrapper">
-        <span class="pgi-label">{{grantedProject.projectName}}</span>
-        <div class="pgi-state-dot" *ngIf="grantedProject && grantedProject.state !== undefined"
-          matTooltip="{{'PROJECT.STATE.'+grantedProject.state | translate}}"
-          [ngClass]="{'active': grantedProject.state === ProjectGrantState.PROJECT_GRANT_STATE_ACTIVE, 'inactive': grantedProject.state === ProjectGrantState.PROJECT_GRANT_STATE_INACTIVE }">
-        </div>
+        <span class="pgi-label">{{ grantedProject.projectName }}</span>
+        <div
+          class="pgi-state-dot"
+          *ngIf="grantedProject && grantedProject.state !== undefined"
+          matTooltip="{{ 'PROJECT.STATE.' + grantedProject.state | translate }}"
+          [ngClass]="{
+            active: grantedProject.state === ProjectGrantState.PROJECT_GRANT_STATE_ACTIVE,
+            inactive: grantedProject.state === ProjectGrantState.PROJECT_GRANT_STATE_INACTIVE
+          }"
+        ></div>
       </div>
       <div class="pgi-role-wrapper fill-space">
         <div class="pgi-role-row">
-          <cnsl-project-role-chip [showRemove]="true" (removed)="removeRole(role)" [roleName]="role"
-            *ngFor="let role of grantedProject.grantedRoleKeysList">{{role}}
+          <cnsl-project-role-chip
+            [showRemove]="true"
+            (removed)="removeRole(role)"
+            [roleName]="role"
+            *ngFor="let role of grantedProject.grantedRoleKeysList"
+            >{{ role }}
           </cnsl-project-role-chip>
         </div>
-        <button matTooltip="{{'ACTIONS.EDIT' | translate}}" mat-icon-button (click)="editRoleClicked.emit()">
+        <button matTooltip="{{ 'ACTIONS.EDIT' | translate }}" mat-icon-button (click)="editRoleClicked.emit()">
           <i class="las la-pen"></i>
         </button>
         <span class="fill-space"></span>
@@ -44,4 +54,4 @@
     </div>
     <span class="pgi-label-sec cnsl-secondary-text">granted org</span>
   </div>
-</div>
+</div>

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

@@ -8,9 +8,8 @@ describe('ProjectGrantIllustrationComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ProjectGrantIllustrationComponent ]
-    })
-    .compileComponents();
+      declarations: [ProjectGrantIllustrationComponent],
+    }).compileComponents();
   });
 
   beforeEach(() => {

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

@@ -27,9 +27,9 @@ export class ProjectGrantMembersDataSource extends DataSource<Member.AsObject> {
 
     this.loadingSubject.next(true);
 
-    from(this.service.listProjectGrantMembers(projectId,
-      grantId, pageSize, offset)).pipe(
-        map(resp => {
+    from(this.service.listProjectGrantMembers(projectId, grantId, pageSize, offset))
+      .pipe(
+        map((resp) => {
           this.totalResult = resp.details?.totalResult || 0;
           if (resp.details?.viewTimestamp) {
             this.viewTimestamp = resp.details?.viewTimestamp;
@@ -38,7 +38,8 @@ export class ProjectGrantMembersDataSource extends DataSource<Member.AsObject> {
         }),
         catchError(() => of([])),
         finalize(() => this.loadingSubject.next(false)),
-      ).subscribe(members => {
+      )
+      .subscribe((members) => {
         this.membersSubject.next(members);
       });
   }

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

@@ -3,23 +3,22 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ProjectGrantsComponent } from './project-grants.component';
 
 describe('ProjectGrantsComponent', () => {
-    let component: ProjectGrantsComponent;
-    let fixture: ComponentFixture<ProjectGrantsComponent>;
+  let component: ProjectGrantsComponent;
+  let fixture: ComponentFixture<ProjectGrantsComponent>;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [ProjectGrantsComponent],
-        })
-            .compileComponents();
-    }));
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ProjectGrantsComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(ProjectGrantsComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProjectGrantsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

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

@@ -9,8 +9,7 @@ describe('ProjectRoleCreateComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ProjectRoleCreateComponent],
-    })
-      .compileComponents();
+    }).compileComponents();
   }));
 
   beforeEach(() => {

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

@@ -8,9 +8,8 @@ describe('ProjectRolesComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ProjectRolesComponent ]
-    })
-    .compileComponents();
+      declarations: [ProjectRolesComponent],
+    }).compileComponents();
   });
 
   beforeEach(() => {

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

@@ -4,15 +4,15 @@ import { RouterModule, Routes } from '@angular/router';
 import { ProjectCreateComponent } from './project-create.component';
 
 const routes: Routes = [
-    {
-        path: '',
-        component: ProjectCreateComponent,
-        data: { animation: 'AddPage' },
-    },
+  {
+    path: '',
+    component: ProjectCreateComponent,
+    data: { animation: 'AddPage' },
+  },
 ];
 
 @NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule],
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
 })
-export class ProjectCreateRoutingModule { }
+export class ProjectCreateRoutingModule {}

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

@@ -9,8 +9,7 @@ describe('ProjectCreateComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ProjectCreateComponent],
-    })
-      .compileComponents();
+    }).compileComponents();
   }));
 
   beforeEach(() => {

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

@@ -6,13 +6,11 @@ describe('GridComponent', () => {
   let component: ProjectGridComponent;
   let fixture: ComponentFixture<ProjectGridComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        declarations: [ProjectGridComponent],
-      }).compileComponents();
-    }),
-  );
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ProjectGridComponent],
+    }).compileComponents();
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ProjectGridComponent);

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

@@ -6,13 +6,11 @@ describe('ProjectListComponent', () => {
   let component: ProjectListComponent;
   let fixture: ComponentFixture<ProjectListComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        declarations: [ProjectListComponent],
-      }).compileComponents();
-    }),
-  );
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ProjectListComponent],
+    }).compileComponents();
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ProjectListComponent);

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

@@ -8,9 +8,8 @@ describe('ProjectsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ProjectsComponent ]
-    })
-    .compileComponents();
+      declarations: [ProjectsComponent],
+    }).compileComponents();
   });
 
   beforeEach(() => {

console/src/app/pages/signedout/signedout.component.spec.ts

@@ -3,23 +3,22 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { SignedoutComponent } from './signedout.component';
 
 describe('SignedoutComponent', () => {
-    let component: SignedoutComponent;
-    let fixture: ComponentFixture<SignedoutComponent>;
+  let component: SignedoutComponent;
+  let fixture: ComponentFixture<SignedoutComponent>;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [SignedoutComponent],
-        })
-            .compileComponents();
-    }));
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [SignedoutComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(SignedoutComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SignedoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

console/src/app/pages/user-grant-create/user-grant-create-routing.module.ts

@@ -4,15 +4,15 @@ import { RouterModule, Routes } from '@angular/router';
 import { UserGrantCreateComponent } from './user-grant-create.component';
 
 const routes: Routes = [
-    {
-        path: '',
-        component: UserGrantCreateComponent,
-        data: { animation: 'AddPage' },
-    },
+  {
+    path: '',
+    component: UserGrantCreateComponent,
+    data: { animation: 'AddPage' },
+  },
 ];
 
 @NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule],
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
 })
-export class UserGrantCreateRoutingModule { }
+export class UserGrantCreateRoutingModule {}

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

@@ -3,23 +3,22 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { UserGrantCreateComponent } from './user-grant-create.component';
 
 describe('UserGrantCreateComponent', () => {
-    let component: UserGrantCreateComponent;
-    let fixture: ComponentFixture<UserGrantCreateComponent>;
+  let component: UserGrantCreateComponent;
+  let fixture: ComponentFixture<UserGrantCreateComponent>;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [UserGrantCreateComponent],
-        })
-            .compileComponents();
-    }));
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [UserGrantCreateComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(UserGrantCreateComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserGrantCreateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

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

@@ -8,9 +8,7 @@ import { CardModule } from 'src/app/modules/card/card.module';
 import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
 import { InputModule } from 'src/app/modules/input/input.module';
 import { ProjectRolesTableModule } from 'src/app/modules/project-roles-table/project-roles-table.module';
-import {
-    SearchProjectAutocompleteModule,
-} from 'src/app/modules/search-project-autocomplete/search-project-autocomplete.module';
+import { SearchProjectAutocompleteModule } from 'src/app/modules/search-project-autocomplete/search-project-autocomplete.module';
 import { SearchUserAutocompleteModule } from 'src/app/modules/search-user-autocomplete/search-user-autocomplete.module';
 import { SharedModule } from 'src/app/modules/shared/shared.module';
 

console/src/app/pages/users/user-create-machine/user-create-machine-routing.module.ts

@@ -4,15 +4,15 @@ import { RouterModule, Routes } from '@angular/router';
 import { UserCreateMachineComponent } from './user-create-machine.component';
 
 const routes: Routes = [
-    {
-        path: '',
-        component: UserCreateMachineComponent,
-        data: { animation: 'DetailPage' },
-    },
+  {
+    path: '',
+    component: UserCreateMachineComponent,
+    data: { animation: 'DetailPage' },
+  },
 ];
 
 @NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule],
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
 })
-export class UserCreateMachineRoutingModule { }
+export class UserCreateMachineRoutingModule {}

console/src/app/pages/users/user-create-machine/user-create-machine.component.spec.ts

@@ -3,23 +3,22 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { UserCreateMachineComponent } from './user-create-machine.component';
 
 describe('UserCreateMachineComponent', () => {
-    let component: UserCreateMachineComponent;
-    let fixture: ComponentFixture<UserCreateMachineComponent>;
+  let component: UserCreateMachineComponent;
+  let fixture: ComponentFixture<UserCreateMachineComponent>;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [UserCreateMachineComponent],
-        })
-            .compileComponents();
-    }));
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [UserCreateMachineComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(UserCreateMachineComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserCreateMachineComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

console/src/app/pages/users/user-create/user-create-routing.module.ts

@@ -4,15 +4,15 @@ import { RouterModule, Routes } from '@angular/router';
 import { UserCreateComponent } from './user-create.component';
 
 const routes: Routes = [
-    {
-        path: '',
-        component: UserCreateComponent,
-        data: { animation: 'DetailPage' },
-    },
+  {
+    path: '',
+    component: UserCreateComponent,
+    data: { animation: 'DetailPage' },
+  },
 ];
 
 @NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule],
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
 })
-export class UserCreateRoutingModule { }
+export class UserCreateRoutingModule {}

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

@@ -9,8 +9,7 @@ describe('UserCreateComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [UserCreateComponent],
-    })
-      .compileComponents();
+    }).compileComponents();
   }));
 
   beforeEach(() => {

console/src/app/pages/users/user-detail/auth-user-detail/auth-factor-dialog/auth-factor-dialog.component.spec.ts

@@ -3,23 +3,22 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { AuthFactorDialogComponent } from './auth-factor-dialog.component';
 
 describe('CodeDialogComponent', () => {
-    let component: AuthFactorDialogComponent;
-    let fixture: ComponentFixture<AuthFactorDialogComponent>;
+  let component: AuthFactorDialogComponent;
+  let fixture: ComponentFixture<AuthFactorDialogComponent>;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [AuthFactorDialogComponent],
-        })
-            .compileComponents();
-    }));
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [AuthFactorDialogComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(AuthFactorDialogComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AuthFactorDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

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

@@ -3,23 +3,22 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { AuthPasswordlessComponent } from './auth-passwordless.component';
 
 describe('AuthPasswordlessComponent', () => {
-    let component: AuthPasswordlessComponent;
-    let fixture: ComponentFixture<AuthPasswordlessComponent>;
+  let component: AuthPasswordlessComponent;
+  let fixture: ComponentFixture<AuthPasswordlessComponent>;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [AuthPasswordlessComponent],
-        })
-            .compileComponents();
-    }));
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [AuthPasswordlessComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(AuthPasswordlessComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AuthPasswordlessComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

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

@@ -1,67 +1,63 @@
-<h1 mat-dialog-title>{{'USER.PASSWORDLESS.DIALOG.ADD_TITLE' | translate}}</h1>
+<h1 mat-dialog-title>{{ 'USER.PASSWORDLESS.DIALOG.ADD_TITLE' | translate }}</h1>
 <div mat-dialog-content>
   <div *ngIf="!showSent && !showQR">
-    <p>{{'USER.PASSWORDLESS.DIALOG.ADD_DESCRIPTION' | translate}}</p>
+    <p>{{ 'USER.PASSWORDLESS.DIALOG.ADD_DESCRIPTION' | translate }}</p>
 
     <div class="desc">
       <i class="icon las la-plus-circle"></i>
-      <p class="cnsl-secondary-text">{{'USER.PASSWORDLESS.DIALOG.NEW_DESCRIPTION' | translate}}</p>
+      <p class="cnsl-secondary-text">{{ 'USER.PASSWORDLESS.DIALOG.NEW_DESCRIPTION' | translate }}</p>
     </div>
 
     <cnsl-form-field class="form-field" label="Name" required="true">
-      <cnsl-label>{{'USER.MFA.U2F_NAME' | translate}}</cnsl-label>
+      <cnsl-label>{{ 'USER.MFA.U2F_NAME' | translate }}</cnsl-label>
       <input cnslInput [(ngModel)]="name" required (keydown.enter)="name ? closeDialogWithCode() : null" />
     </cnsl-form-field>
 
-    <button [disabled]="!name" mat-raised-button class="ok-button" color="primary"
-      (click)="closeDialogWithCode()">{{'USER.PASSWORDLESS.DIALOG.NEW' | translate}}
+    <button [disabled]="!name" mat-raised-button class="ok-button" color="primary" (click)="closeDialogWithCode()">
+      {{ 'USER.PASSWORDLESS.DIALOG.NEW' | translate }}
     </button>
 
-    <p class="error">{{error}}</p>
-
+    <p class="error">{{ error }}</p>
 
     <div class="desc">
       <i class="icon las la-paper-plane"></i>
-      <p class="cnsl-secondary-text">{{'USER.PASSWORDLESS.DIALOG.SEND_DESCRIPTION' | translate}}</p>
+      <p class="cnsl-secondary-text">{{ 'USER.PASSWORDLESS.DIALOG.SEND_DESCRIPTION' | translate }}</p>
     </div>
 
-    <button mat-raised-button class="send-button" color="primary"
-      (click)="sendMyPasswordlessLink()">{{'USER.PASSWORDLESS.DIALOG.SEND' | translate}}
+    <button mat-raised-button class="send-button" color="primary" (click)="sendMyPasswordlessLink()">
+      {{ 'USER.PASSWORDLESS.DIALOG.SEND' | translate }}
     </button>
 
-
     <div class="desc">
       <i class="icon las la-qrcode"></i>
-      <p class="cnsl-secondary-text">{{'USER.PASSWORDLESS.DIALOG.QRCODE_DESCRIPTION' | translate}}</p>
+      <p class="cnsl-secondary-text">{{ 'USER.PASSWORDLESS.DIALOG.QRCODE_DESCRIPTION' | translate }}</p>
     </div>
 
-    <button mat-raised-button class="qr-button" color="primary"
-      (click)="addMyPasswordlessLink()">{{'USER.PASSWORDLESS.DIALOG.QRCODE' | translate}}
+    <button mat-raised-button class="qr-button" color="primary" (click)="addMyPasswordlessLink()">
+      {{ 'USER.PASSWORDLESS.DIALOG.QRCODE' | translate }}
     </button>
-
   </div>
 
   <div *ngIf="showSent">
     <button mat-icon-button (click)="showSent = false">
       <i class="las la-arrow-left"></i>
     </button>
-    <p>{{'USER.PASSWORDLESS.DIALOG.SENT' | translate}}</p>
+    <p>{{ 'USER.PASSWORDLESS.DIALOG.SENT' | translate }}</p>
   </div>
 
   <div *ngIf="showQR">
     <button mat-icon-button (click)="showQR = false">
       <i class="las la-arrow-left"></i>
     </button>
-    <p>{{'USER.PASSWORDLESS.DIALOG.QRCODE_SCAN' | translate}}</p>
+    <p>{{ 'USER.PASSWORDLESS.DIALOG.QRCODE_SCAN' | translate }}</p>
 
     <div class="qrcode-wrapper">
-      <qr-code *ngIf="qrcodeLink" class="qrcode" [value]="qrcodeLink" [size]="150" [errorCorrectionLevel]="'M'">
-      </qr-code>
+      <qr-code *ngIf="qrcodeLink" class="qrcode" [value]="qrcodeLink" [size]="150" [errorCorrectionLevel]="'M'"> </qr-code>
     </div>
   </div>
 
   <mat-spinner diameter="30" *ngIf="loading"></mat-spinner>
 </div>
 <div mat-dialog-actions class="action">
-  <button mat-stroked-button (click)="closeDialog()">{{'ACTIONS.CLOSE' | translate}}</button>
-</div>
+  <button mat-stroked-button (click)="closeDialog()">{{ 'ACTIONS.CLOSE' | translate }}</button>
+</div>

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

@@ -9,8 +9,7 @@ describe('AuthUserDetailComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [AuthUserDetailComponent],
-    })
-      .compileComponents();
+    }).compileComponents();
   }));
 
   beforeEach(() => {

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

@@ -3,23 +3,22 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { AuthUserMfaComponent } from './auth-user-mfa.component';
 
 describe('AuthUserMfaComponent', () => {
-    let component: AuthUserMfaComponent;
-    let fixture: ComponentFixture<AuthUserMfaComponent>;
+  let component: AuthUserMfaComponent;
+  let fixture: ComponentFixture<AuthUserMfaComponent>;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [AuthUserMfaComponent],
-        })
-            .compileComponents();
-    }));
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [AuthUserMfaComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(AuthUserMfaComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AuthUserMfaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

console/src/app/pages/users/user-detail/auth-user-detail/code-dialog/code-dialog.component.spec.ts

@@ -3,23 +3,22 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { CodeDialogComponent } from './code-dialog.component';
 
 describe('CodeDialogComponent', () => {
-    let component: CodeDialogComponent;
-    let fixture: ComponentFixture<CodeDialogComponent>;
+  let component: CodeDialogComponent;
+  let fixture: ComponentFixture<CodeDialogComponent>;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [CodeDialogComponent],
-        })
-            .compileComponents();
-    }));
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [CodeDialogComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(CodeDialogComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CodeDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

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

@@ -8,11 +8,9 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 })
 export class CodeDialogComponent {
   public code: string = '';
-  constructor(public dialogRef: MatDialogRef<CodeDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any) { }
+  constructor(public dialogRef: MatDialogRef<CodeDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {}
 
   closeDialog(code: string = ''): void {
     this.dialogRef.close(code);
   }
-
 }

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

@@ -1,19 +1,26 @@
-<h1 mat-dialog-title>{{'USER.MFA.U2F_DIALOG_TITLE' | translate}}</h1>
+<h1 mat-dialog-title>{{ 'USER.MFA.U2F_DIALOG_TITLE' | translate }}</h1>
 <div mat-dialog-content>
-  <p>{{'USER.MFA.U2F_DIALOG_DESCRIPTION' | translate}}</p>
+  <p>{{ 'USER.MFA.U2F_DIALOG_DESCRIPTION' | translate }}</p>
 
   <cnsl-form-field class="form-field" label="Name" required="true">
-    <cnsl-label>{{'USER.MFA.U2F_NAME' | translate}}</cnsl-label>
+    <cnsl-label>{{ 'USER.MFA.U2F_NAME' | translate }}</cnsl-label>
     <input cnslInput [(ngModel)]="name" required (keydown.enter)="name ? closeDialogWithCode() : null" />
   </cnsl-form-field>
 
   <mat-spinner diameter="30" *ngIf="loading"></mat-spinner>
 
-  <p class="error">{{error}}</p>
+  <p class="error">{{ error }}</p>
 </div>
 <div mat-dialog-actions class="action">
-  <button mat-stroked-button (click)="closeDialog()">{{'ACTIONS.CLOSE' | translate}}</button>
-  <button cdkFocusInitial [disabled]="!name" mat-raised-button class="ok-button" color="primary"
-    (click)="closeDialogWithCode()">{{'ACTIONS.VERIFY' | translate}}
+  <button mat-stroked-button (click)="closeDialog()">{{ 'ACTIONS.CLOSE' | translate }}</button>
+  <button
+    cdkFocusInitial
+    [disabled]="!name"
+    mat-raised-button
+    class="ok-button"
+    color="primary"
+    (click)="closeDialogWithCode()"
+  >
+    {{ 'ACTIONS.VERIFY' | translate }}
   </button>
-</div>
+</div>

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

@@ -21,7 +21,7 @@
   justify-content: flex-end;
 
   button {
-    margin-left: .5rem;
-    border-radius: .5rem;
+    margin-left: 0.5rem;
+    border-radius: 0.5rem;
   }
 }

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

@@ -23,9 +23,13 @@ export class DialogU2FComponent {
   public error: string = '';
   public loading: boolean = false;
 
-  constructor(public dialogRef: MatDialogRef<DialogU2FComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: { credOptions: any; type: U2FComponentDestination; },
-    private service: GrpcAuthService, private translate: TranslateService, private toast: ToastService) {
+  constructor(
+    public dialogRef: MatDialogRef<DialogU2FComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: { credOptions: any; type: U2FComponentDestination },
+    private service: GrpcAuthService,
+    private translate: TranslateService,
+    private toast: ToastService,
+  ) {
     this.type = data.type;
   }
 
@@ -38,63 +42,81 @@ export class DialogU2FComponent {
     this.loading = true;
     if (this.name && this.data.credOptions.publicKey) {
       // this.data.credOptions.publicKey.rp.id = 'localhost';
-      navigator.credentials.create(this.data.credOptions).then((resp) => {
-        if (resp &&
-          (resp as any).response.attestationObject &&
-          (resp as any).response.clientDataJSON &&
-          (resp as any).rawId) {
+      navigator.credentials
+        .create(this.data.credOptions)
+        .then((resp) => {
+          if (
+            resp &&
+            (resp as any).response.attestationObject &&
+            (resp as any).response.clientDataJSON &&
+            (resp as any).rawId
+          ) {
+            const attestationObject = (resp as any).response.attestationObject;
+            const clientDataJSON = (resp as any).response.clientDataJSON;
+            const rawId = (resp as any).rawId;
 
-          const attestationObject = (resp as any).response.attestationObject;
-          const clientDataJSON = (resp as any).response.clientDataJSON;
-          const rawId = (resp as any).rawId;
+            const data = JSON.stringify({
+              id: resp.id,
+              rawId: _arrayBufferToBase64(rawId),
+              type: resp.type,
+              response: {
+                attestationObject: _arrayBufferToBase64(attestationObject),
+                clientDataJSON: _arrayBufferToBase64(clientDataJSON),
+              },
+            });
 
-          const data = JSON.stringify({
-            id: resp.id,
-            rawId: _arrayBufferToBase64(rawId),
-            type: resp.type,
-            response: {
-              attestationObject: _arrayBufferToBase64(attestationObject),
-              clientDataJSON: _arrayBufferToBase64(clientDataJSON),
-            },
-          });
-
-          const base64 = btoa(data);
-          if (this.type === U2FComponentDestination.MFA) {
-            this.service.verifyMyMultiFactorU2F(base64, this.name).then(() => {
-              this.translate.get('USER.MFA.U2F_SUCCESS').pipe(take(1)).subscribe(msg => {
+            const base64 = btoa(data);
+            if (this.type === U2FComponentDestination.MFA) {
+              this.service
+                .verifyMyMultiFactorU2F(base64, this.name)
+                .then(() => {
+                  this.translate
+                    .get('USER.MFA.U2F_SUCCESS')
+                    .pipe(take(1))
+                    .subscribe((msg) => {
+                      this.toast.showInfo(msg);
+                    });
+                  this.dialogRef.close(true);
+                  this.loading = false;
+                })
+                .catch((error) => {
+                  this.loading = false;
+                  this.toast.showError(error);
+                });
+            } else if (this.type === U2FComponentDestination.PASSWORDLESS) {
+              this.service
+                .verifyMyPasswordless(base64, this.name)
+                .then(() => {
+                  this.translate
+                    .get('USER.PASSWORDLESS.U2F_SUCCESS')
+                    .pipe(take(1))
+                    .subscribe((msg) => {
+                      this.toast.showInfo(msg);
+                    });
+                  this.dialogRef.close(true);
+                  this.loading = false;
+                })
+                .catch((error) => {
+                  this.loading = false;
+                  this.toast.showError(error);
+                });
+            }
+          } else {
+            this.loading = false;
+            this.translate
+              .get('USER.MFA.U2F_ERROR')
+              .pipe(take(1))
+              .subscribe((msg) => {
                 this.toast.showInfo(msg);
               });
-              this.dialogRef.close(true);
-              this.loading = false;
-            }).catch(error => {
-              this.loading = false;
-              this.toast.showError(error);
-            });
-          } else if (this.type === U2FComponentDestination.PASSWORDLESS) {
-            this.service.verifyMyPasswordless(base64, this.name).then(() => {
-              this.translate.get('USER.PASSWORDLESS.U2F_SUCCESS').pipe(take(1)).subscribe(msg => {
-                this.toast.showInfo(msg);
-              });
-              this.dialogRef.close(true);
-              this.loading = false;
-            }).catch(error => {
-              this.loading = false;
-              this.toast.showError(error);
-            });
+            this.dialogRef.close(true);
           }
-        } else {
+        })
+        .catch((error) => {
           this.loading = false;
-          this.translate.get('USER.MFA.U2F_ERROR').pipe(take(1)).subscribe(msg => {
-            this.toast.showInfo(msg);
-          });
-          this.dialogRef.close(true);
-        }
-      }).catch(error => {
-        this.loading = false;
-        this.error = error;
-        this.toast.showInfo(error.message);
-      });
+          this.error = error;
+          this.toast.showInfo(error.message);
+        });
     }
-
   }
 }

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

@@ -1,32 +1,37 @@
 <h1 mat-dialog-title>
-  <span class="title">{{data.titleKey | translate}}</span>
+  <span class="title">{{ data.titleKey | translate }}</span>
 </h1>
-<p class="desc cnsl-secondary-text">{{data.descriptionKey | translate}}</p>
+<p class="desc cnsl-secondary-text">{{ data.descriptionKey | translate }}</p>
 <div mat-dialog-content>
   <cnsl-form-field class="formfield">
-    <cnsl-label>{{data.labelKey | translate }} <span *ngIf="isPhone && phoneCountry">({{ phoneCountry }})</span>
+    <cnsl-label
+      >{{ data.labelKey | translate }} <span *ngIf="isPhone && phoneCountry">({{ phoneCountry }})</span>
     </cnsl-label>
-    <input [formControl]="valueControl" cnslInput
-      (keydown.enter)="valueControl.valid ? closeDialogWithValue() : null" />
+    <input [formControl]="valueControl" cnslInput (keydown.enter)="valueControl.valid ? closeDialogWithValue() : null" />
   </cnsl-form-field>
 
   <ng-container *ngIf="data.type === EditDialogType.EMAIL && data.isVerifiedTextKey">
     <mat-checkbox class="verified-checkbox" [(ngModel)]="isVerified">
-      {{data.isVerifiedTextKey |
-      translate}}
+      {{ data.isVerifiedTextKey | translate }}
     </mat-checkbox>
     <cnsl-info-section class="full-width desc">
-      <span>{{data.isVerifiedTextDescKey | translate}}</span>
+      <span>{{ data.isVerifiedTextDescKey | translate }}</span>
     </cnsl-info-section>
   </ng-container>
 </div>
 <div mat-dialog-actions class="action">
   <button mat-stroked-button class="ok-button" (click)="closeDialog()">
-    {{data.cancelKey | translate}}
+    {{ data.cancelKey | translate }}
   </button>
 
-  <button [disabled]="valueControl.invalid" cdkFocusInitial color="primary" mat-raised-button class="ok-button"
-    (click)="closeDialogWithValue()">
-    {{data.confirmKey | translate}}
+  <button
+    [disabled]="valueControl.invalid"
+    cdkFocusInitial
+    color="primary"
+    mat-raised-button
+    class="ok-button"
+    (click)="closeDialogWithValue()"
+  >
+    {{ data.confirmKey | translate }}
   </button>
-</div>
+</div>

console/src/app/pages/users/user-detail/auth-user-detail/edit-dialog/edit-dialog.component.spec.ts

@@ -3,23 +3,22 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { EditDialogComponent } from './edit-dialog.component';
 
 describe('CodeDialogComponent', () => {
-    let component: EditDialogComponent;
-    let fixture: ComponentFixture<EditDialogComponent>;
+  let component: EditDialogComponent;
+  let fixture: ComponentFixture<EditDialogComponent>;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [EditDialogComponent],
-        })
-            .compileComponents();
-    }));
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [EditDialogComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(EditDialogComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

console/src/app/pages/users/user-detail/auth-user-detail/resend-email-dialog/resend-email-dialog.component.html

@@ -1,7 +1,7 @@
 <h1 mat-dialog-title>
-  <span class="title">{{'USER.SENDEMAILDIALOG.TITLE' | translate}} {{data?.number}}</span>
+  <span class="title">{{ 'USER.SENDEMAILDIALOG.TITLE' | translate }} {{ data?.number }}</span>
 </h1>
-<p class="desc cnsl-secondary-text">{{'USER.SENDEMAILDIALOG.DESCRIPTION' | translate}}</p>
+<p class="desc cnsl-secondary-text">{{ 'USER.SENDEMAILDIALOG.DESCRIPTION' | translate }}</p>
 <div mat-dialog-content>
   <cnsl-form-field class="formfield">
     <cnsl-label>{{ 'USER.SENDEMAILDIALOG.NEWEMAIL' | translate }}</cnsl-label>
@@ -10,10 +10,10 @@
 </div>
 <div mat-dialog-actions class="action">
   <button mat-stroked-button class="ok-button" (click)="closeDialog()">
-    {{'ACTIONS.CLOSE' | translate}}
+    {{ 'ACTIONS.CLOSE' | translate }}
   </button>
 
   <button cdkFocusInitial color="primary" mat-raised-button class="ok-button" (click)="closeDialogWithSend(email)">
-    {{'ACTIONS.SEND' | translate}}
+    {{ 'ACTIONS.SEND' | translate }}
   </button>
-</div>
+</div>

console/src/app/pages/users/user-detail/auth-user-detail/resend-email-dialog/resend-email-dialog.component.spec.ts

@@ -3,23 +3,22 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ResendEmailDialogComponent } from './resend-email-dialog.component';
 
 describe('ResendEmailDialogComponent', () => {
-    let component: ResendEmailDialogComponent;
-    let fixture: ComponentFixture<ResendEmailDialogComponent>;
+  let component: ResendEmailDialogComponent;
+  let fixture: ComponentFixture<ResendEmailDialogComponent>;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [ResendEmailDialogComponent],
-        })
-            .compileComponents();
-    }));
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ResendEmailDialogComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(ResendEmailDialogComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ResendEmailDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

console/src/app/pages/users/user-detail/auth-user-detail/resend-email-dialog/resend-email-dialog.component.ts

@@ -8,8 +8,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 })
 export class ResendEmailDialogComponent {
   public email: string = '';
-  constructor(public dialogRef: MatDialogRef<ResendEmailDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any) { }
+  constructor(public dialogRef: MatDialogRef<ResendEmailDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {}
 
   closeDialog(email: string = ''): void {
     this.dialogRef.close(email);

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

@@ -1,12 +1,9 @@
-
 export function _arrayBufferToBase64(buffer: any): string {
-    let binary = '';
-    const bytes = new Uint8Array(buffer);
-    const len = bytes.byteLength;
-    for (let i = 0; i < len; i++) {
-        binary += String.fromCharCode(bytes[i]);
-    }
-    return btoa(binary).replace(/\+/g, '-')
-        .replace(/\//g, '_')
-        .replace(/=/g, '');
+  let binary = '';
+  const bytes = new Uint8Array(buffer);
+  const len = bytes.byteLength;
+  for (let i = 0; i < len; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
 }

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

@@ -3,23 +3,22 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ContactComponent } from './contact.component';
 
 describe('ContactComponent', () => {
-    let component: ContactComponent;
-    let fixture: ComponentFixture<ContactComponent>;
+  let component: ContactComponent;
+  let fixture: ComponentFixture<ContactComponent>;
 
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            declarations: [ContactComponent],
-        })
-            .compileComponents();
-    });
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ContactComponent],
+    }).compileComponents();
+  });
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(ContactComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContactComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

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

@@ -25,4 +25,4 @@
   <div class="btn-container">
     <button type="submit" color="primary" mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
   </div>
-</form>
+</form>

console/src/app/pages/users/user-detail/detail-form-machine/detail-form-machine.component.scss

@@ -1,13 +1,12 @@
-
 .content {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  margin: 0 -.5rem;
+  margin: 0 -0.5rem;
 
   .formfield {
     flex: 1 1 33%;
-    margin: 0 .5rem;
+    margin: 0 0.5rem;
   }
 }
 

console/src/app/pages/users/user-detail/detail-form-machine/detail-form-machine.component.spec.ts

@@ -9,8 +9,7 @@ describe('DetailFormComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [DetailFormComponent],
-    })
-      .compileComponents();
+    }).compileComponents();
   }));
 
   beforeEach(() => {

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

@@ -20,9 +20,7 @@ export class DetailFormMachineComponent implements OnInit, OnDestroy {
 
   constructor(private fb: UntypedFormBuilder) {
     this.machineForm = this.fb.group({
-      userName: [{ value: '', disabled: true }, [
-        Validators.required,
-      ]],
+      userName: [{ value: '', disabled: true }, [Validators.required]],
       name: [{ value: '', disabled: this.disabled }, Validators.required],
       description: [{ value: '', disabled: this.disabled }],
     });

console/src/app/pages/users/user-detail/detail-form-machine/detail-form-machine.module.ts

@@ -9,24 +9,19 @@ import { InputModule } from 'src/app/modules/input/input.module';
 
 import { DetailFormMachineComponent } from './detail-form-machine.component';
 
-
 @NgModule({
-    declarations: [
-        DetailFormMachineComponent,
-    ],
-    imports: [
-        CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        TranslateModule,
-        InputModule,
-        MatSelectModule,
-        MatButtonModule,
-        MatIconModule,
-        TranslateModule,
-    ],
-    exports: [
-        DetailFormMachineComponent,
-    ],
+  declarations: [DetailFormMachineComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    TranslateModule,
+    InputModule,
+    MatSelectModule,
+    MatButtonModule,
+    MatIconModule,
+    TranslateModule,
+  ],
+  exports: [DetailFormMachineComponent],
 })
-export class DetailFormMachineModule { }
+export class DetailFormMachineModule {}

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

@@ -9,8 +9,7 @@ describe('DetailFormComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [DetailFormComponent],
-    })
-      .compileComponents();
+    }).compileComponents();
   }));
 
   beforeEach(() => {

console/src/app/pages/users/user-detail/detail-form/detail-form.module.ts

@@ -14,10 +14,7 @@ import { DetailFormComponent } from './detail-form.component';
 import { ProfilePictureComponent } from './profile-picture/profile-picture.component';
 
 @NgModule({
-  declarations: [
-    DetailFormComponent,
-    ProfilePictureComponent,
-  ],
+  declarations: [DetailFormComponent, ProfilePictureComponent],
   imports: [
     DropzoneModule,
     AvatarModule,
@@ -32,8 +29,6 @@ import { ProfilePictureComponent } from './profile-picture/profile-picture.compo
     TranslateModule,
     InputModule,
   ],
-  exports: [
-    DetailFormComponent,
-  ],
+  exports: [DetailFormComponent],
 })
-export class DetailFormModule { }
+export class DetailFormModule {}

console/src/app/pages/users/user-detail/detail-form/profile-picture/profile-picture.component.spec.ts

@@ -9,8 +9,7 @@ describe('ProfilePictureComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [ProfilePictureComponent],
-    })
-      .compileComponents();
+    }).compileComponents();
   });
 
   beforeEach(() => {

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

@@ -1,53 +1,74 @@
 <cnsl-card title="{{ 'USER.EXTERNALIDP.TITLE' | translate }}" description="{{ 'USER.EXTERNALIDP.DESC' | translate }}">
-  <button card-actions mat-icon-button (click)="refreshPage()" class="icon-button"
-    matTooltip="{{'ACTIONS.REFRESH' | translate}}">
+  <button
+    card-actions
+    mat-icon-button
+    (click)="refreshPage()"
+    class="icon-button"
+    matTooltip="{{ 'ACTIONS.REFRESH' | translate }}"
+  >
     <mat-icon class="icon">refresh</mat-icon>
   </button>
-  <cnsl-refresh-table [hideRefresh]="true" [loading]="loading$ | async" [dataSize]="dataSource.data.length"
-    [timestamp]="viewTimestamp" [selection]="selection">
-
+  <cnsl-refresh-table
+    [hideRefresh]="true"
+    [loading]="loading$ | async"
+    [dataSize]="dataSource.data.length"
+    [timestamp]="viewTimestamp"
+    [selection]="selection"
+  >
     <div class="table-wrapper">
       <table class="table" mat-table [dataSource]="dataSource">
         <ng-container matColumnDef="select">
           <th mat-header-cell *matHeaderCellDef>
-            <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
+            <mat-checkbox
+              color="primary"
+              (change)="$event ? masterToggle() : null"
               [checked]="selection.hasValue() && isAllSelected()"
-              [indeterminate]="selection.hasValue() && !isAllSelected()">
+              [indeterminate]="selection.hasValue() && !isAllSelected()"
+            >
             </mat-checkbox>
           </th>
           <td mat-cell *matCellDef="let idp">
-            <mat-checkbox color="primary" (click)="$event.stopPropagation()"
-              (change)="$event ? selection.toggle(idp) : null" [checked]="selection.isSelected(idp)">
+            <mat-checkbox
+              color="primary"
+              (click)="$event.stopPropagation()"
+              (change)="$event ? selection.toggle(idp) : null"
+              [checked]="selection.isSelected(idp)"
+            >
             </mat-checkbox>
           </td>
         </ng-container>
 
         <ng-container matColumnDef="idpConfigId">
-          <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPCONFIGID' | translate }} </th>
-          <td mat-cell *matCellDef="let idp"> {{idp?.idpId}} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'USER.EXTERNALIDP.IDPCONFIGID' | translate }}</th>
+          <td mat-cell *matCellDef="let idp">{{ idp?.idpId }}</td>
         </ng-container>
 
         <ng-container matColumnDef="idpName">
-          <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPNAME' | translate }} </th>
-          <td mat-cell *matCellDef="let idp"> {{idp?.idpName}} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'USER.EXTERNALIDP.IDPNAME' | translate }}</th>
+          <td mat-cell *matCellDef="let idp">{{ idp?.idpName }}</td>
         </ng-container>
 
         <ng-container matColumnDef="externalUserDisplayName">
-          <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.USERDISPLAYNAME' | translate }} </th>
-          <td mat-cell *matCellDef="let idp"> {{idp?.providedUserName}} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'USER.EXTERNALIDP.USERDISPLAYNAME' | translate }}</th>
+          <td mat-cell *matCellDef="let idp">{{ idp?.providedUserName }}</td>
         </ng-container>
 
         <ng-container matColumnDef="externalUserId">
-          <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.EXTERNALUSERID' | translate }} </th>
-          <td mat-cell *matCellDef="let idp"> {{idp?.providedUserId}} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'USER.EXTERNALIDP.EXTERNALUSERID' | translate }}</th>
+          <td mat-cell *matCellDef="let idp">{{ idp?.providedUserId }}</td>
         </ng-container>
 
         <ng-container matColumnDef="actions" stickyEnd>
           <th mat-header-cell *matHeaderCellDef></th>
           <td mat-cell *matCellDef="let idp">
             <cnsl-table-actions>
-              <button actions color="warn" mat-icon-button matTooltip="{{'ACTIONS.REMOVE' | translate}}"
-                (click)="removeExternalIdp(idp)">
+              <button
+                actions
+                color="warn"
+                mat-icon-button
+                matTooltip="{{ 'ACTIONS.REMOVE' | translate }}"
+                (click)="removeExternalIdp(idp)"
+              >
                 <i class="las la-trash"></i>
               </button>
             </cnsl-table-actions>
@@ -55,17 +76,23 @@
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
-        </tr>
+        <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns"></tr>
       </table>
     </div>
 
     <div *ngIf="(loading$ | async) === false && !dataSource?.data?.length" class="no-content-row">
       <i class="las la-exclamation"></i>
-      <span>{{'USER.EXTERNALIDP.EMPTY' | translate}}</span>
+      <span>{{ 'USER.EXTERNALIDP.EMPTY' | translate }}</span>
     </div>
 
-    <cnsl-paginator #paginator class="paginator" [timestamp]="viewTimestamp" [length]="totalResult || 0" [pageSize]="20"
-      [pageSizeOptions]="[10, 20, 50, 100]" (page)="changePage($event)"></cnsl-paginator>
+    <cnsl-paginator
+      #paginator
+      class="paginator"
+      [timestamp]="viewTimestamp"
+      [length]="totalResult || 0"
+      [pageSize]="20"
+      [pageSizeOptions]="[10, 20, 50, 100]"
+      (page)="changePage($event)"
+    ></cnsl-paginator>
   </cnsl-refresh-table>
-</cnsl-card>
+</cnsl-card>

console/src/app/pages/users/user-detail/external-idps/external-idps.component.spec.ts

@@ -8,9 +8,8 @@ describe('ExternalIdpsComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ ExternalIdpsComponent ],
-    })
-    .compileComponents();
+      declarations: [ExternalIdpsComponent],
+    }).compileComponents();
   }));
 
   beforeEach(() => {

console/src/app/pages/users/user-detail/metadata-dialog/metadata-dialog.component.spec.ts

@@ -9,8 +9,7 @@ describe('MetadataDialogComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [MetadataDialogComponent],
-    })
-      .compileComponents();
+    }).compileComponents();
   }));
 
   beforeEach(() => {

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

@@ -9,8 +9,7 @@ describe('MetadataComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [MetadataComponent],
-    })
-      .compileComponents();
+    }).compileComponents();
   });
 
   beforeEach(() => {

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

@@ -3,22 +3,22 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { PasswordComponent } from './password.component';
 
 describe('PasswordComponent', () => {
-    let component: PasswordComponent;
-    let fixture: ComponentFixture<PasswordComponent>;
+  let component: PasswordComponent;
+  let fixture: ComponentFixture<PasswordComponent>;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [PasswordComponent],
-        }).compileComponents();
-    }));
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [PasswordComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(PasswordComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PasswordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

console/src/app/pages/users/user-detail/u2f-util.ts

@@ -1,10 +1,9 @@
-
 export function _base64ToArrayBuffer(base64: string): any {
-    const binaryString = atob(base64);
-    const len = binaryString.length;
-    const bytes = new Uint8Array(len);
-    for (let i = 0; i < len; i++) {
-        bytes[i] = binaryString.charCodeAt(i);
-    }
-    return bytes.buffer;
+  const binaryString = atob(base64);
+  const len = binaryString.length;
+  const bytes = new Uint8Array(len);
+  for (let i = 0; i < len; i++) {
+    bytes[i] = binaryString.charCodeAt(i);
+  }
+  return bytes.buffer;
 }

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

@@ -41,9 +41,7 @@ import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/
 import { InfoRowModule } from '../../../modules/info-row/info-row.module';
 import { AuthFactorDialogComponent } from './auth-user-detail/auth-factor-dialog/auth-factor-dialog.component';
 import { AuthPasswordlessComponent } from './auth-user-detail/auth-passwordless/auth-passwordless.component';
-import {
-    DialogPasswordlessComponent,
-} from './auth-user-detail/auth-passwordless/dialog-passwordless/dialog-passwordless.component';
+import { DialogPasswordlessComponent } from './auth-user-detail/auth-passwordless/dialog-passwordless/dialog-passwordless.component';
 import { AuthUserDetailComponent } from './auth-user-detail/auth-user-detail.component';
 import { AuthUserMfaComponent } from './auth-user-detail/auth-user-mfa/auth-user-mfa.component';
 import { CodeDialogComponent } from './auth-user-detail/code-dialog/code-dialog.component';

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

@@ -3,23 +3,22 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { AuthPasswordlessComponent } from './auth-passwordless.component';
 
 describe('AuthPasswordlessComponent', () => {
-    let component: AuthPasswordlessComponent;
-    let fixture: ComponentFixture<AuthPasswordlessComponent>;
+  let component: AuthPasswordlessComponent;
+  let fixture: ComponentFixture<AuthPasswordlessComponent>;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [AuthPasswordlessComponent],
-        })
-            .compileComponents();
-    }));
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [AuthPasswordlessComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(AuthPasswordlessComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AuthPasswordlessComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

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

@@ -3,22 +3,22 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { UserDetailComponent } from './user-detail.component';
 
 describe('UserDetailComponent', () => {
-    let component: UserDetailComponent;
-    let fixture: ComponentFixture<UserDetailComponent>;
+  let component: UserDetailComponent;
+  let fixture: ComponentFixture<UserDetailComponent>;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [UserDetailComponent],
-        }).compileComponents();
-    }));
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [UserDetailComponent],
+    }).compileComponents();
+  }));
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(UserDetailComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });