feat(console): pinned org list, project grant detail view, state change, i18n, domain dialog, policy refactor, theme fixes, refactor user and projects (#449)

* pinned organisations * project grant detail, state update, user-list pad * rm entry components * members nav, i18n, disable actions on non active * add org domain dialog * mv password policy rm to detail view * prefix pinned orgs for userid, fix collapsed pad * fix app back navigation * rem pwd required validator * fix org item overflow * routing * move users modules to users page * reorganize projects * remove child init of translate * hide same preferred loginname
2026-11-08 07:05:12 +00:00 · 2020-07-13 13:38:49 +02:00
parent d8eef34a37
commit b628baeb1a
193 changed files with 967 additions and 500 deletions
@@ -3,14 +3,13 @@ import { Location } from '@angular/common';
 import { Component } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
+import { lowerCaseValidator, numberValidator, symbolValidator, upperCaseValidator } from 'src/app/pages/validators';
 import { CreateOrgRequest, CreateUserRequest, Gender, OrgSetUpResponse } from 'src/app/proto/generated/admin_pb';
 import { PasswordComplexityPolicy } from 'src/app/proto/generated/auth_pb';
 import { AdminService } from 'src/app/services/admin.service';
 import { AuthUserService } from 'src/app/services/auth-user.service';
 import { ToastService } from 'src/app/services/toast.service';

-import { lowerCaseValidator, numberValidator, symbolValidator, upperCaseValidator } from '../../user-detail/validators';
-
 function passwordConfirmValidator(c: AbstractControl): any {
    if (!c.parent || !c) {
        return;
@@ -64,7 +63,7 @@ export class OrgCreateComponent {
        private fb: FormBuilder,
        private authUserService: AuthUserService,
    ) {
-        const validators: Validators[] = [Validators.required];
+        const validators: Validators[] = [];

        this.orgForm = this.fb.group({
            name: ['', [Validators.required]],
@@ -1,5 +1,4 @@
 import { CommonModule } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -7,8 +6,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { HttpLoaderFactory } from 'src/app/app.module';
+import { TranslateModule } from '@ngx-translate/core';
 import { PipesModule } from 'src/app/pipes/pipes.module';

 import { OrgCreateRoutingModule } from './org-create-routing.module';
@@ -27,13 +25,7 @@ import { OrgCreateComponent } from './org-create.component';
        MatIconModule,
        MatSelectModule,
        PipesModule,
-        TranslateModule.forChild({
-            loader: {
-                provide: TranslateLoader,
-                useFactory: HttpLoaderFactory,
-                deps: [HttpClient],
-            },
-        }),
+        TranslateModule,
    ],
 })
 export class OrgCreateModule { }
@@ -0,0 +1,18 @@
+<span class="title" mat-dialog-title>{{'ORG.DOMAINS.ADD.TITLE' | translate}}</span>
+<div mat-dialog-content>
+    <p class="desc"> {{'ORG.DOMAINS.ADD.DESCRIPTION' | translate}}</p>
+
+    <mat-form-field label="Access Code" required="true">
+        <mat-label>Code</mat-label>
+        <input matInput [(ngModel)]="newdomain" />
+    </mat-form-field>
+</div>
+<div mat-dialog-actions class="action">
+    <button mat-button (click)="closeDialog()">
+        {{'ACTIONS.CANCEL' | translate}}
+    </button>
+
+    <button color="warn" mat-raised-button class="ok-button" [disabled]="!newdomain" (click)="closeDialogWithSuccess()">
+        {{'ACTIONS.ADD' | translate}}
+    </button>
+</div>
@@ -0,0 +1,26 @@
+.title {
+    font-size: 1.2rem;
+    margin-top: 0;
+}
+
+.desc {
+    color: #8795a1;
+    font-size: .9rem;
+}
+
+mat-form-field {
+    width: 100%;
+}
+
+.action {
+    display: flex;
+    justify-content: flex-end;
+
+    .ok-button {
+      margin-left: 0.5rem;
+    }
+
+    button {
+      border-radius: 0.5rem;
+    }
+}
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddDomainDialogComponent } from './add-domain-dialog.component';
+
+describe('WarnDialogComponent', () => {
+    let component: AddDomainDialogComponent;
+    let fixture: ComponentFixture<AddDomainDialogComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [AddDomainDialogComponent],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(AddDomainDialogComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
@@ -0,0 +1,26 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+    selector: 'app-add-domain-dialog',
+    templateUrl: './add-domain-dialog.component.html',
+    styleUrls: ['./add-domain-dialog.component.scss'],
+})
+export class AddDomainDialogComponent implements OnInit {
+    public newdomain: string = '';
+    constructor(
+        public dialogRef: MatDialogRef<AddDomainDialogComponent>,
+        @Inject(MAT_DIALOG_DATA) public data: any,
+    ) { }
+
+    ngOnInit(): void {
+    }
+
+    public closeDialog(): void {
+        this.dialogRef.close(false);
+    }
+
+    public closeDialogWithSuccess(): void {
+        this.dialogRef.close(this.newdomain);
+    }
+}
@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { AddDomainDialogComponent } from './add-domain-dialog.component';
+
+@NgModule({
+    declarations: [AddDomainDialogComponent],
+    imports: [
+        CommonModule,
+        TranslateModule,
+        MatButtonModule,
+        MatFormFieldModule,
+        MatInputModule,
+        FormsModule,
+    ],
+})
+export class AddDomainDialogModule { }
@@ -15,16 +15,8 @@
            </div>

            <p class="new-desc">{{'ORG.PAGES.ORGDOMAIN_VERIFICATION' | translate}}</p>
-            <div class="new-row">
-                <mat-form-field appearance="outline">
-                    <mat-label>new domain</mat-label>
-                    <input matInput [(ngModel)]="newDomain" />
-                </mat-form-field>
-
-                <button matTooltip="Add domain" mat-icon-button color="primary" (click)="saveNewOrgDomain()">
-                    <mat-icon>check</mat-icon>
-                </button>
-            </div>
+            <button matTooltip="Add domain" mat-raised-button color="primary"
+                (click)="addNewDomain()">{{'ORG.DOMAINS.NEW' | translate}} </button>
        </app-card>

        <ng-template appHasRole [appHasRole]="['policy.read']">
@@ -81,16 +81,6 @@ h1 {
    color: #818a8a;
 }

-.new-row {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-
-    mat-form-field {
-        flex: 1;
-    }
-}
-
 .side {
    .details {
        margin-bottom: 1rem;
@@ -11,6 +11,8 @@ import { Org, OrgDomainView, OrgMember, OrgMemberSearchResponse, OrgState } from
 import { OrgService } from 'src/app/services/org.service';
 import { ToastService } from 'src/app/services/toast.service';

+import { AddDomainDialogComponent } from './add-domain-dialog/add-domain-dialog.component';
+

@Component({
    selector: 'app-org-detail',
@@ -31,7 +33,6 @@ export class OrgDetailComponent implements OnInit, OnDestroy {

    public domains: OrgDomainView.AsObject[] = [];
    public primaryDomain: string = '';
-    public newDomain: string = '';

    constructor(
        private dialog: MatDialog,
@@ -64,23 +65,32 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
    public changeState(event: MatButtonToggleChange | any): void {
        if (event.value === OrgState.ORGSTATE_ACTIVE) {
            this.orgService.ReactivateMyOrg().then(() => {
-                this.toast.showInfo('Reactivated Org');
+                this.toast.showInfo('ORG.TOAST.REACTIVATED', true);
            }).catch((error) => {
                this.toast.showError(error);
            });
        } else if (event.value === OrgState.ORGSTATE_INACTIVE) {
            this.orgService.DeactivateMyOrg().then(() => {
-                this.toast.showInfo('Deactivated Org');
+                this.toast.showInfo('ORG.TOAST.DEACTIVATED', true);
            }).catch((error) => {
                this.toast.showError(error);
            });
        }
    }

-    public saveNewOrgDomain(): void {
-        this.orgService.AddMyOrgDomain(this.newDomain).then(domain => {
-            this.domains.push(domain.toObject());
-            this.newDomain = '';
+    public addNewDomain(): void {
+        const dialogRef = this.dialog.open(AddDomainDialogComponent, {
+            data: {},
+            width: '400px',
+        });
+
+        dialogRef.afterClosed().subscribe(resp => {
+            if (resp) {
+                this.orgService.AddMyOrgDomain(resp).then(domain => {
+                    this.domains.push(domain.toObject());
+                    this.toast.showInfo('ORG.TOAST.DOMAINADDED', true);
+                });
+            }
        });
    }

@@ -98,7 +108,7 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
        dialogRef.afterClosed().subscribe(resp => {
            if (resp) {
                this.orgService.RemoveMyOrgDomain(domain).then(() => {
-                    this.toast.showInfo('Removed');
+                    this.toast.showInfo('ORG.TOAST.DOMAINREMOVED', true);
                    const index = this.domains.findIndex(d => d.domain === domain);
                    if (index > -1) {
                        this.domains.splice(index, 1);
@@ -11,9 +11,11 @@
    </div>

    <div class="container">
+        <p class="n-items" *ngIf="!loading && selection.selected.length > 0">{{'PROJECT.PAGES.PINNED' | translate}}</p>
+
        <div matTooltip="{{'ORG.PAGES.SELECTORGTOOLTIP' | translate}}" class="item card"
-            *ngFor="let org of orgList; index as i" (click)="selectOrg(org, $event)"
-            [ngClass]="{ selected: selection.isSelected(org),active: activeOrg?.id === org?.id }">
+            *ngFor="let org of selection.selected; index as i" (click)="selectOrg(org, $event)"
+            [ngClass]="{ active: activeOrg?.id === org?.id }">
            <div class="text-part">
                <span class="description">{{org.id}}</span>

@@ -23,17 +25,31 @@
                <div class="icons">
                </div>
            </div>
-            <button [matMenuTriggerFor]="editMenu" class="edit-button" mat-icon-button>
-                <mat-icon>more_vert</mat-icon>
+            <button [ngClass]="{ selected: selection.isSelected(org)}" (click)="selection.toggle(org)"
+                class="edit-button" mat-icon-button>
+                <mat-icon>push_pin_outline</mat-icon>
            </button>
+        </div>
+    </div>
+    <div class="container">
+        <p class="n-items" *ngIf="!loading && notPinned.length > 0">{{'PROJECT.PAGES.ALL' | translate}}</p>

-            <mat-menu #editMenu="matMenu">
-                <ng-template matMenuContent>
-                    <button (click)="routeToOrg(org)" mat-menu-item>
-                        {{'ACTIONS.VIEW' | translate}}
-                    </button>
-                </ng-template>
-            </mat-menu>
+        <div matTooltip="{{'ORG.PAGES.SELECTORGTOOLTIP' | translate}}" class="item card"
+            *ngFor="let org of notPinned; index as i" (click)="selectOrg(org, $event)"
+            [ngClass]="{ active: activeOrg?.id === org?.id }">
+            <div class="text-part">
+                <span class="description">{{org.id}}</span>
+
+                <span class="name" *ngIf="org.name">{{ org.name }}</span>
+                <span class="name" *ngIf="!org.name">No Name</span>
+                <span class="fill-space"></span>
+                <div class="icons">
+                </div>
+            </div>
+            <button [ngClass]="{ selected: selection.isSelected(org)}" (click)="selection.toggle(org)"
+                class="edit-button" mat-icon-button>
+                <mat-icon>push_pin_outline</mat-icon>
+            </button>
        </div>

        <ng-template appHasRole [appHasRole]="['iam.write']">
@@ -35,9 +35,10 @@ h1 {
        position: relative;
        z-index: 100;
        margin: 1rem;
-        flex-basis: 250px;
+        flex-basis: 230px;
        display: flex;
        text-decoration: none;
+        overflow: hidden;
        cursor: pointer;
        padding-top: 0;
        padding-right: 0;
@@ -45,14 +46,14 @@ h1 {
        padding-left: 1rem;
        border-radius: 0.5rem;
        box-sizing: border-box;
-        min-height: 166px;
+        min-height: 130px;

        * {
            box-sizing: border-box;
        }

        &.active {
-            border: 2px solid #db4c69;
+            border: 2px solid #38649d;
        }

        .selection-icon {
@@ -151,16 +152,28 @@ h1 {
        }

        .edit-button {
+            opacity: 0;
+            user-select: none;            
            position: absolute;
            bottom: 0;
            right: 0;
            margin: 0;
            margin-bottom: 0.25rem;
+            color: #8795a1;
+
+            &:hover {
+                opacity: 1;
+                color: white;
+            }
+
+            &.selected {
+                opacity: 1;
+            }
        }


        &:hover {
-            .selection-icon {
+            .edit-button {
                opacity: 1;
            }

@@ -180,7 +193,7 @@ h1 {
                }
            }

-            .selection-icon {
+            .edit-button {
                opacity: 1;
            }
        }
@@ -188,13 +201,13 @@ h1 {

    .add-org-button {
        z-index: 100;
-        flex-basis: 250px;
+        flex-basis: 230px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
-        min-height: 166px;
+        min-height: 130px;
        border-radius: 0.5rem;
        margin: 1rem;
        box-sizing: border-box;
@@ -220,4 +233,11 @@ h1 {
            }
        }
    }
-}
+}
+
+.n-items {
+    padding: 0 1rem;
+    font-size: .8rem;
+    color: #8795a1;
+    flex-basis: 100%;
+}
@@ -1,6 +1,8 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
+import { Observable, of } from 'rxjs';
+import { switchMap, take } from 'rxjs/operators';
 import { Org } from 'src/app/proto/generated/auth_pb';
 import { AuthUserService } from 'src/app/services/auth-user.service';
 import { AuthService } from 'src/app/services/auth.service';
@@ -17,23 +19,87 @@ export class OrgGridComponent {

    public selection: SelectionModel<Org.AsObject> = new SelectionModel<Org.AsObject>(true, []);
    public selectedIndex: number = -1;
+    public loading: boolean = false;
+
+    public notPinned: Array<Org.AsObject> = [];
+
    constructor(
        public authService: AuthService,
        private userService: AuthUserService,
        private toast: ToastService,
        private router: Router,
    ) {
+        this.loading = true;
        this.getData(10, 0);

        this.authService.GetActiveOrg().then(org => this.activeOrg = org);
+
+        this.selection.changed.subscribe(selection => {
+            this.setPrefixedItem('pinned-orgs', JSON.stringify(
+                this.selection.selected.map(item => item.id),
+            )).pipe(take(1)).subscribe(() => {
+                selection.added.forEach(element => {
+                    const index = this.notPinned.findIndex(item => item.id === element.id);
+                    this.notPinned.splice(index, 1);
+                });
+
+                this.notPinned.push(...selection.removed);
+            });
+        });
+    }
+
+    public reorganizeItems(): void {
+        this.getPrefixedItem('pinned-orgs').pipe(take(1)).subscribe(storageEntry => {
+            if (storageEntry) {
+                const array: string[] = JSON.parse(storageEntry);
+                const toSelect: Org.AsObject[] = this.orgList.filter((item, index) => {
+                    if (array.includes(item.id)) {
+                        // this.notPinned.splice(index, 1);
+                        return true;
+                    }
+                });
+                this.selection.select(...toSelect);
+
+                const toNotPinned: Org.AsObject[] = this.orgList.filter((item, index) => {
+                    if (!array.includes(item.id)) {
+                        return true;
+                    }
+                });
+                this.notPinned = toNotPinned;
+            }
+        });
+    }
+
+    private getPrefixedItem(key: string): Observable<string | null> {
+        return this.authService.user.pipe(
+            take(1),
+            switchMap(user => {
+                return of(localStorage.getItem(`${user.id}:${key}`));
+            }),
+        );
+    }
+
+    private setPrefixedItem(key: string, value: any): Observable<void> {
+        return this.authService.user.pipe(
+            take(1),
+            switchMap(user => {
+                return of(localStorage.setItem(`${user.id}:${key}`, value));
+            }),
+        );
    }

    private getData(limit: number, offset: number): void {
        this.userService.SearchMyProjectOrgs(limit, offset).then(res => {
            this.orgList = res.toObject().resultList;
+            console.log(this.orgList);
+
+            this.notPinned = Object.assign([], this.orgList);
+            this.reorganizeItems();
+            this.loading = false;
        }).catch(error => {
            console.error(error);
            this.toast.showError(error);
+            this.loading = false;
        });
    }

@@ -1,5 +1,4 @@
 import { CommonModule } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -11,8 +10,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { HttpLoaderFactory } from 'src/app/app.module';
+import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { CardModule } from 'src/app/modules/card/card.module';
 import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
@@ -20,6 +18,7 @@ import { WarnDialogModule } from 'src/app/modules/warn-dialog/warn-dialog.module

 import { ChangesModule } from '../../modules/changes/changes.module';
 import { OrgContributorsModule } from './org-contributors/org-contributors.module';
+import { AddDomainDialogModule } from './org-detail/add-domain-dialog/add-domain-dialog.module';
 import { OrgDetailComponent } from './org-detail/org-detail.component';
 import { OrgGridComponent } from './org-grid/org-grid.component';
 import { OrgsRoutingModule } from './orgs-routing.module';
@@ -48,13 +47,8 @@ import { PolicyGridComponent } from './policy-grid/policy-grid.component';
        WarnDialogModule,
        MatMenuModule,
        ChangesModule,
-        TranslateModule.forChild({
-            loader: {
-                provide: TranslateLoader,
-                useFactory: HttpLoaderFactory,
-                deps: [HttpClient],
-            },
-        }),
+        AddDomainDialogModule,
+        TranslateModule,
    ],
    exports: [],
    schemas: [NO_ERRORS_SCHEMA],
@@ -10,6 +10,14 @@
                <h1 *ngIf="(titleSub | async) || '' as titletrans">{{ titletrans | translate }}</h1>

                <p class="desc" *ngIf="(descSub | async) || '' as desctrans">{{ desctrans | translate }}</p>
+
+                <span class="fill-space"></span>
+                <ng-template appHasRole [appHasRole]="['iam.policy.write']">
+                    <button matTooltip="{{'ORG.POLICY.DELETE' | translate}}" color="warn" (click)="deletePolicy()"
+                        mat-stroked-button>
+                        {{'ORG.POLICY.DELETE' | translate}}
+                    </button>
+                </ng-template>
            </div>

            <div>
@@ -29,6 +29,10 @@
            h1 {
                font-size: 1.2rem;
            }
+
+            .fill-space {
+                flex: 1;
+            }
          
            .desc {
                width: 100%;
@@ -36,6 +40,11 @@
                font-size: .9rem;
                color: #8795a1;
            }
+
+            button {
+                border-radius: .5rem;
+                margin-bottom: .5rem;
+            }
        }

        .content {
@@ -3,12 +3,6 @@ import { FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { BehaviorSubject, Subscription } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
-import {
-    OrgIamPolicy,
-    PasswordAgePolicy,
-    PasswordComplexityPolicy,
-    PasswordLockoutPolicy,
-} from 'src/app/proto/generated/management_pb';
 import { AdminService } from 'src/app/services/admin.service';
 import { OrgService } from 'src/app/services/org.service';
 import { StorageService } from 'src/app/services/storage.service';
@@ -37,11 +31,7 @@ export class PasswordPolicyComponent implements OnInit, OnDestroy {

    componentAction: PolicyComponentAction = PolicyComponentAction.CREATE;

-    policyData!: PasswordLockoutPolicy.AsObject |
-        PasswordAgePolicy.AsObject |
-        PasswordComplexityPolicy.AsObject |
-        OrgIamPolicy.AsObject;
-    policyType: PolicyComponentType = PolicyComponentType.COMPLEXITY;
+    public policyType: PolicyComponentType = PolicyComponentType.COMPLEXITY;

    public PolicyComponentType: any = PolicyComponentType;
    public PolicyComponentAction: any = PolicyComponentAction;
@@ -159,6 +149,32 @@ export class PasswordPolicyComponent implements OnInit, OnDestroy {
        }
    }

+    public deletePolicy(): void {
+        switch (this.policyType) {
+            case PolicyComponentType.LOCKOUT:
+                this.orgService.DeletePasswordLockoutPolicy(this.lockoutData.id).then(() => {
+                    this.toast.showInfo('Successfully deleted');
+                }).catch(error => {
+                    this.toast.showError(error);
+                });
+                break;
+            case PolicyComponentType.AGE:
+                this.orgService.DeletePasswordAgePolicy(this.ageData.id).then(() => {
+                    this.toast.showInfo('Successfully deleted');
+                }).catch(error => {
+                    this.toast.showError(error);
+                });
+                break;
+            case PolicyComponentType.COMPLEXITY:
+                this.orgService.DeletePasswordComplexityPolicy(this.complexityData.id).then(() => {
+                    this.toast.showInfo('Successfully deleted');
+                }).catch(error => {
+                    this.toast.showError(error);
+                });
+                break;
+        }
+    }
+
    public incrementLength(): void {
        if (this.complexityData?.minLength !== undefined) {
            this.complexityData.minLength++;
@@ -1,5 +1,4 @@
 import { CommonModule } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -7,8 +6,9 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { HttpLoaderFactory } from 'src/app/app.module';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';

 import { PasswordPolicyRoutingModule } from './password-policy-routing.module';
 import { PasswordPolicyComponent } from './password-policy.component';
@@ -24,13 +24,9 @@ import { PasswordPolicyComponent } from './password-policy.component';
        MatButtonModule,
        MatSlideToggleModule,
        MatIconModule,
-        TranslateModule.forChild({
-            loader: {
-                provide: TranslateLoader,
-                useFactory: HttpLoaderFactory,
-                deps: [HttpClient],
-            },
-        }),
+        HasRoleModule,
+        MatTooltipModule,
+        TranslateModule,
    ],
 })
 export class PasswordPolicyModule { }
@@ -48,10 +48,6 @@
            <button mat-icon-button disabled>
                <i *ngIf="complexityPolicy" class="icon las la-check-circle"></i>
            </button>
-            <button matTooltip="{{'ORG.POLICY.DELETE' | translate}}" color="warn"
-                (click)="deletePolicy(PolicyComponentType.COMPLEXITY)" mat-icon-button>
-                <i class="las la-trash"></i>
-            </button>
        </div>

        <p *ngIf="complexityPolicy?.description; else showDescComplexity" class="desc">
@@ -107,12 +103,6 @@
                <button mat-icon-button disabled>
                    <i *ngIf="iamPolicy" class="icon las la-check-circle"></i>
                </button>
-                <ng-template appHasRole [appHasRole]="['iam.policy.write']">
-                    <button matTooltip="{{'ORG.POLICY.DELETE' | translate}}" color="warn"
-                        (click)="deletePolicy(PolicyComponentType.IAM_POLICY)" mat-icon-button>
-                        <i class="las la-trash"></i>
-                    </button>
-                </ng-template>
            </div>

            <p *ngIf="iamPolicy?.description; else showDescIAM" class="desc">
@@ -47,30 +47,4 @@ export class PolicyGridComponent implements OnInit {
        this.orgService.GetMyOrgIamPolicy().then(data => this.iamPolicy = data.toObject())
            .catch(error => { });
    }
-
-    public deletePolicy(type: PolicyComponentType): void {
-        switch (type) {
-            case PolicyComponentType.LOCKOUT:
-                this.orgService.DeletePasswordLockoutPolicy(this.lockoutPolicy.id).then(() => {
-                    this.toast.showInfo('Successfully deleted');
-                }).catch(error => {
-                    this.toast.showError(error);
-                });
-                break;
-            case PolicyComponentType.AGE:
-                this.orgService.DeletePasswordAgePolicy(this.agePolicy.id).then(() => {
-                    this.toast.showInfo('Successfully deleted');
-                }).catch(error => {
-                    this.toast.showError(error);
-                });
-                break;
-            case PolicyComponentType.COMPLEXITY:
-                this.orgService.DeletePasswordLockoutPolicy(this.lockoutPolicy.id).then(() => {
-                    this.toast.showInfo('Successfully deleted');
-                }).catch(error => {
-                    this.toast.showError(error);
-                });
-                break;
-        }
-    }
 }