fix: Merge master (#1373)

* feat(console): app infos, api apps, fix redirects on create, fix role update, redesign idps, policy, prettier history  (#1310)

* idp fixes

* idp cleanup and rehaul, complexity policy preview

* policy fixes, orthodox redirect

* link component, add links to policies

* redirect pipe, state labels

* Cnsl map changes (#1315)

* map changes to different format

* fix changes layout, cursor

* set asc values

* fix user appearance in changes, index

* changes

* app create with api

* api app create

* auth method for api config

* authmethods, app card for api, authmethod in dev create

* move machine keys to own module

* jwt method for oidc

* fix app edit

* save toast

* fix changes, change det in app detail

* regenerate secret

* chore(deps-dev): bump @angular-devkit/build-angular in /console (#1324)

Bumps [@angular-devkit/build-angular](https://github.com/angular/angular-cli) from 0.1102.0 to 0.1102.1.
- [Release notes](https://github.com/angular/angular-cli/releases)
- [Commits](https://github.com/angular/angular-cli/commits)

Signed-off-by: dependabot[bot] <[email protected]>

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

* fix policy backlink

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
(cherry picked from commit 40a7e958d712f83585e25f18f4fff620de5e3269)

* fix: i18n refs, unnecessary logs (#1343)

(cherry picked from commit 2e04c977eba295cab6aa533379f6075d2e27ab42)

* fix: tos link (#1345)

(cherry picked from commit 5333ef10c169e3656e3ca8dfb8edf7f738fa0a26)

* fix: reactivate/deactivate idp, remove idp provider (#1348)

* fix: reactivate/deactivate idp, remove idp provider

* fix build

* fix(console): add jwt to selection, idp deactivate reactivate (#1347)

* fix: log error on idp change

* add jwt to method selection

Co-authored-by: Max Peintner <[email protected]>

(cherry picked from commit c8b9888427f4ea6b513d370f9fed555208594edf)

* fix: reactivate/deactivate idp (#1351)

(cherry picked from commit 54f395e2e05d4adb29321e9597d049800c033b61)

Co-authored-by: Max Peintner <[email protected]>

console/src/app/modules/add-key-dialog/add-key-dialog.component.html

@@ -0,0 +1,34 @@
+<span class="title" mat-dialog-title>{{'USER.MACHINE.ADD.TITLE' | translate}}</span>
+<div mat-dialog-content>
+    <p class="desc"> {{'USER.MACHINE.ADD.DESCRIPTION' | translate}}</p>
+
+    <cnsl-form-field class="form-field" appearance="outline">
+        <cnsl-label>{{'USER.MACHINE.TYPE' | translate}}</cnsl-label>
+        <mat-select [(ngModel)]="type">
+            <mat-option *ngFor="let t of types" [value]="t">
+                {{'USER.MACHINE.KEYTYPES.'+t | translate}}
+            </mat-option>
+        </mat-select>
+    </cnsl-form-field>
+
+    <cnsl-form-field class="form-field" appearance="outline">
+        <cnsl-label>{{'USER.MACHINE.CHOOSEEXPIRY' | translate}} (optional)</cnsl-label>
+        <input cnslInput [matDatepicker]="picker" [min]="startDate" [formControl]="dateControl">
+        <mat-datepicker-toggle style="top: 0;" cnslSuffix [for]="picker"></mat-datepicker-toggle>
+        <mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
+        <span cnsl-error *ngIf="dateControl?.errors?.matDatepickerMin?.min">
+            {{'USER.MACHINE.CHOOSEDATEAFTER' | translate}}:
+            {{dateControl?.errors?.matDatepickerMin.min.toDate() | localizedDate: 'EEE dd. MMM'}}
+        </span>
+    </cnsl-form-field>
+</div>
+<div mat-dialog-actions class=" action">
+    <button mat-button (click)="closeDialog()">
+        {{'ACTIONS.CANCEL' | translate}}
+    </button>
+
+    <button color="primary" mat-raised-button class="ok-button" [disabled]="type == undefined || dateControl.invalid"
+        (click)="closeDialogWithSuccess()">
+        {{'ACTIONS.ADD' | translate}}
+    </button>
+</div>

console/src/app/modules/add-key-dialog/add-key-dialog.component.scss

@@ -0,0 +1,22 @@
+.title {
+  font-size: 1.2rem;
+  margin-top: 0;
+}
+
+.desc {
+  color: var(--grey);
+  font-size: .9rem;
+}
+
+.form-field {
+  width: 100%;
+}
+
+.action {
+  display: flex;
+  justify-content: flex-end;
+
+  .ok-button {
+    margin-left: .5rem;
+  }
+}

console/src/app/modules/add-key-dialog/add-key-dialog.component.spec.ts

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

console/src/app/modules/add-key-dialog/add-key-dialog.component.ts

@@ -0,0 +1,44 @@
+import { Component, Inject } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { AuthNKeyType, MachineKeyType } from 'src/app/proto/generated/management_pb';
+
+export enum AddKeyDialogType {
+    MACHINE = "MACHINE",
+    AUTHNKEY = "AUTHNKEY",
+}
+
+@Component({
+    selector: 'app-add-key-dialog',
+    templateUrl: './add-key-dialog.component.html',
+    styleUrls: ['./add-key-dialog.component.scss'],
+})
+export class AddKeyDialogComponent {
+    public startDate: Date = new Date();
+    types: MachineKeyType[] | AuthNKeyType[] = [];
+    public type!: MachineKeyType | AuthNKeyType;
+    public dateControl: FormControl = new FormControl('', []);
+
+    constructor(
+        public dialogRef: MatDialogRef<AddKeyDialogComponent>,
+        @Inject(MAT_DIALOG_DATA) public data: any,
+    ) {
+        if (data.type = AddKeyDialogType.MACHINE) {
+            this.types = [MachineKeyType.MACHINEKEY_JSON];
+            this.type = MachineKeyType.MACHINEKEY_JSON;
+        } else if (data.type = AddKeyDialogType.AUTHNKEY) {
+            this.types = [AuthNKeyType.AUTHNKEY_JSON];
+            this.type = AuthNKeyType.AUTHNKEY_JSON;
+        }
+        const today = new Date();
+        this.startDate.setDate(today.getDate() + 1);
+    }
+
+    public closeDialog(): void {
+        this.dialogRef.close(false);
+    }
+
+    public closeDialogWithSuccess(): void {
+        this.dialogRef.close({ type: this.type, date: this.dateControl.value });
+    }
+}

console/src/app/modules/add-key-dialog/add-key-dialog.module.ts

@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSelectModule } from '@angular/material/select';
+import { TranslateModule } from '@ngx-translate/core';
+import { InputModule } from 'src/app/modules/input/input.module';
+import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
+
+import { AddKeyDialogComponent } from './add-key-dialog.component';
+
+@NgModule({
+    declarations: [AddKeyDialogComponent],
+    imports: [
+        CommonModule,
+        TranslateModule,
+        MatButtonModule,
+        InputModule,
+        MatSelectModule,
+        MatIconModule,
+        FormsModule,
+        MatDatepickerModule,
+        MatMomentDateModule,
+        ReactiveFormsModule,
+        LocalizedDatePipeModule,
+    ],
+})
+export class AddKeyDialogModule { }

console/src/app/modules/app-card/app-card.component.html

@@ -1,5 +1,5 @@
 <div class="cnsl-app-card" [ngClass]="{'web': type == OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB,
 'useragent': type == OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT,
- 'native': type == OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE}">
+ 'native': type == OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE, 'api': isApiApp}">
     <ng-content></ng-content>
 </div>

console/src/app/modules/app-card/app-card.component.scss

@@ -45,5 +45,11 @@
             color: white;
             border: none;
         }
+
+        &.api {
+            background-color: #333;
+            color: white;
+            border: none;
+        }
     }
 }

console/src/app/modules/app-card/app-card.component.ts

@@ -9,6 +9,6 @@ import { OIDCApplicationType } from 'src/app/proto/generated/management_pb';
 export class AppCardComponent {
     @Input() public outline: boolean = false;
     @Input() public type!: OIDCApplicationType;
-
+    @Input() public isApiApp: boolean = false;
     public OIDCApplicationType: any = OIDCApplicationType;
 }

console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.html

@@ -17,17 +17,21 @@
             <p class="type-desc">{{method.descI18nKey | translate}}</p>
             <span class="fill-space"></span>
             <div class="app-specs">
-                <div class="row" *ngIf="method && method.responseType != undefined">
-                    <span>{{'APP.OIDC.RESPONSE' | translate}}</span>
-                    <span>{{('APP.OIDC.RESPONSE'+method.responseType.toString()) | translate}}</span>
+                <div class="row" *ngIf="isOIDC && method && method.responseType != undefined">
+                    <span>{{'APP.OIDC.RESPONSETYPE' | translate}}</span>
+                    <span>{{('APP.OIDC.RESPONSE.'+method.responseType.toString()) | translate}}</span>
                 </div>
-                <div class="row" *ngIf="method.grantType != undefined">
+                <div class="row" *ngIf="isOIDC && method.grantType != undefined">
                     <span>{{'APP.GRANT' | translate}}</span>
-                    <span>{{('APP.OIDC.GRANT'+method.grantType.toString()) | translate}}</span>
+                    <span>{{('APP.OIDC.GRANT.'+method.grantType.toString()) | translate}}</span>
                 </div>
-                <div class="row" *ngIf="method.authMethod != undefined">
-                    <span>{{'APP.OIDC.AUTHMETHOD' | translate}}</span>
-                    <span>{{('APP.OIDC.AUTHMETHOD'+method.authMethod.toString()) | translate}}</span>
+                <div class="row" *ngIf="isOIDC && method.authMethod != undefined">
+                    <span>{{'APP.AUTHMETHOD' | translate}}</span>
+                    <span>{{('APP.OIDC.AUTHMETHOD.'+method.authMethod.toString()) | translate}}</span>
+                </div>
+                <div class="row" *ngIf="!isOIDC && method.apiAuthMethod != undefined">
+                    <span>{{'APP.AUTHMETHOD' | translate}}</span>
+                    <span>{{('APP.API.AUTHMETHOD.'+method.apiAuthMethod.toString()) | translate}}</span>
                 </div>
             </div>
         </label>

console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { OIDCAuthMethodType, OIDCGrantType, OIDCResponseType } from 'src/app/proto/generated/management_pb';
+import { APIAuthMethodType, OIDCAuthMethodType, OIDCGrantType, OIDCResponseType } from 'src/app/proto/generated/management_pb';
 
 export interface RadioItemAuthType {
     key: string;
@@ -11,6 +11,7 @@ export interface RadioItemAuthType {
     responseType?: OIDCResponseType;
     grantType?: OIDCGrantType;
     authMethod?: OIDCAuthMethodType;
+    apiAuthMethod?: | APIAuthMethodType;
     recommended?: boolean;
     notRecommended?: boolean;
 }
@@ -24,6 +25,7 @@ export class AppAuthMethodRadioComponent {
     @Input() current: string = '';
     @Input() selected: string = '';
     @Input() authMethods!: RadioItemAuthType[];
+    @Input() isOIDC: boolean = false;
     @Output() selectedMethod: EventEmitter<string> = new EventEmitter();
 
     public emitChange(): void {

console/src/app/modules/app-radio/app-type-radio/app-type-radio.component.html

@@ -1,8 +1,7 @@
 <div class="radio-button-wrapper">
     <ng-container *ngFor="let type of types">
-        <input type="radio" [disabled]="type.disabled" (change)="emitChange()" [value]="type.type"
-            [(ngModel)]="selected" [id]="type.type" />
-        <label class="cnsl-type-radio-button" [for]="type.type">
+        <input type="radio" (change)="emitChange()" [value]="type" [(ngModel)]="selected" [id]="type.prefix" />
+        <label class="cnsl-type-radio-button" [for]="type.prefix">
             <div class="cnsl-type-radio-header" [ngStyle]="{'background': type.background}">
                 <span>{{type.prefix}}</span>
             </div>

console/src/app/modules/app-radio/app-type-radio/app-type-radio.component.ts

@@ -1,15 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { OIDCApplicationType } from 'src/app/proto/generated/management_pb';
-
-export interface RadioItemAppType {
-    type: OIDCApplicationType;
-    titleI18nKey: string;
-    descI18nKey: string;
-    checked: boolean,
-    disabled: boolean,
-    prefix: string;
-    background: string;
-}
+import { RadioItemAppType, WEB_TYPE } from 'src/app/pages/projects/apps/authtypes';
 
 @Component({
     selector: 'app-type-radio',
@@ -17,9 +7,9 @@ export interface RadioItemAppType {
     styleUrls: ['./app-type-radio.component.scss'],
 })
 export class AppTypeRadioComponent {
-    @Input() selected: OIDCApplicationType = OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB;
+    @Input() selected: RadioItemAppType = WEB_TYPE;
     @Input() types!: RadioItemAppType[];
-    @Output() selectedType: EventEmitter<OIDCApplicationType> = new EventEmitter();
+    @Output() selectedType: EventEmitter<RadioItemAppType> = new EventEmitter();
 
     public emitChange(): void {
         this.selectedType.emit(this.selected);

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

@@ -52,6 +52,6 @@
 
   @media only screen and (max-width: 500px) {
     margin: .5rem 0;
-    padding: .5rem;
+    padding: 1rem;
   }
 }

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

@@ -6,12 +6,45 @@
 </div>
 
 <div class="scroll-container" appScrollable (scrollPosition)="scrollHandler($event)">
-    <li class="item change-item-back" *ngFor="let event of data | async">
-        <span class="seq">
-            {{event.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}
-        </span>
-        <span class="editor">{{event.editor}}</span>
-        <span class="desc">{{event?.eventType?.localizedMessage }}</span>
+    <li class="item change-item-back" *ngFor="let hist of data | async; index as histindex">
+        <span *ngIf="hist.values[0].dates[0]" class="date">{{
+            hist.values[0]?.dates[0]| timestampToDate | localizedDate: 'dd. MMMM YYYY' }}</span>
+        <div class="item" *ngFor="let dayelement of hist.values; index as i">
+            <div class="row">
+                <app-avatar matTooltip="{{ dayelement.editorName }}" *ngIf="dayelement.editorName; else spacer"
+                    class="avatar" [name]="dayelement.editorName" [size]="32">
+                </app-avatar>
+                <ng-template #spacer>
+                    <div class="spacer"></div>
+                </ng-template>
+                <div class="actions">
+                    <div class="action" *ngFor="let action of dayelement.eventTypes; index as j">
+                        <button disabled mat-icon-button aria-label="Restore history"
+                            matTooltip="{{ dayelement.dates[j] | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}">
+                            <mat-icon class="icon">schedule</mat-icon>
+                        </button>
+
+                        <span>
+                            <span class="msg">{{ action.localizedMessage }}</span>
+                            <span class="block">{{
+                                dayelement.dates[j] | timestampToDate | localizedDate: 'HH:mm'
+                                }}</span>
+                        </span>
+                        <!-- <span *ngIf="histindex === 0 && i === 0 && j === 0">
+                            <span>current file</span>
+                            <span class="block">{{
+                                dayelement.dates[j] | timestampToDate | localizedDate: 'HH:mm'
+                                }}</span>
+                        </span> -->
+
+                        <!-- <button mat-icon-button disabled>
+                            <mat-icon class="icon red" color="warn">error_outline
+                            </mat-icon>
+                        </button> -->
+                    </div>
+                </div>
+            </div>
+        </div>
     </li>
     <div class="sp-wrapper">
         <mat-spinner *ngIf="loading | async" diameter="25"></mat-spinner>

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

@@ -21,54 +21,119 @@
 }
 
 @mixin changes-theme($theme) {
-  .scroll-container {
-    max-height: 50vh;
-    overflow-y: scroll;
+    .scroll-container {
+        max-height: 50vh;
+        overflow-y: scroll;
+        border-bottom: 1px solid #ffffff20;
+        margin-bottom: 0.5rem;
 
-    .item {
-      box-sizing: border-box;
-      padding: .5rem;
-      margin: .25rem 0;
-      border-radius: .5rem;
-      display: flex;
-      flex-direction: column;
+        .date {
+            font-weight: 500;
+            font-size: 0.8rem;
+            display: block;
+            margin-bottom: .5rem;
+        }
 
-      .editor {
-        color: var(--grey);
-        font-size: 12px;
-        align-self: flex-end;
-      }
+        .item {
+            display: block;
+            padding: 10px 0;
+            font-size: 0.8rem;
 
-      .seq {
-        color: var(--grey);
-        font-size: 12px;
-        align-self: flex-end;
-      }
+            .row {
+                display: flex;
+                flex-direction: row;
 
-      .desc {
-        overflow-x: auto;
-        font-size: 14px;
-      }
-      /* stylelint-disable */
-      $primary: map-get($theme, primary);
-      $primary-dark: mat-color($primary, A800);
-      /* stylelint-enable */
+                .spacer {
+                    width: 32px;
+                }
+            
+                .actions {
+                    flex: 1;
+                    display: flex;
+                    flex-direction: column;
+                    margin-top: -0.5rem;
 
-      &.change-item-back {
-        background-color: rgba($primary-dark, .93);
-        transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
-      }
+                    .action {
+                        display: flex;
+                        flex-direction: row;
+                        align-items: center;
+                        flex: 1;
+
+                        .icon {
+                            width: 32px;
+                            display: inline-block;
+                            height: 1.2rem;
+                            line-height: 1.2rem;
+                            font-size: 1.2rem;
+                            color: var(--grey);
+                        }
+
+                        span {
+                            flex: 1;
+                            font-weight: 500;
+                            font-size: 0.8rem;
+                            overflow-x: hidden;
+                        }
+                        
+                        .msg {
+                            text-overflow: ellipsis;
+                        }
+
+                        .block {
+                            display: block;
+                        }
+
+                        .restore {
+                            visibility: hidden;
+                            display: none;
+                            opacity: 0;
+                            margin-left: 1rem;
+                            transform: opacity 0.2s ease-in-out;
+                        }
+
+                        &:hover {
+                            .restore {
+                                visibility: visible;
+                                display: inline-block;
+                                opacity: 1;
+                                color: #81868a;
+
+                                &[disabled] {
+                                    visibility: hidden;
+                                }
+
+                                &:hover {
+                                    color: white;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                /* stylelint-disable */
+                $primary: map-get($theme, primary);
+                $primary-dark: mat-color($primary, A800);
+                /* stylelint-enable */
+
+                &.change-item-back {
+                    background-color: rgba($primary-dark, .93);
+                    transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
+                }
+            }
+
+            .sp-wrapper {
+                padding: .5rem;
+                display: flex;
+                justify-content: center;
+            }
+
+            .end-container {
+                font-size: 12px;
+                color: var(--grey);
+                font-size: 14px;
+                margin: 1rem 0;
+                color: var(--grey);
+            }
+        }
     }
-
-    .sp-wrapper {
-      padding: .5rem;
-      display: flex;
-      justify-content: center;
-    }
-
-    .end-container {
-      font-size: 12px;
-      color: var(--grey);
-    }
-  }
-}
+}

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

@@ -4,6 +4,8 @@ import { catchError, debounceTime, scan, take, takeUntil, tap } from 'rxjs/opera
 import { Change, Changes } from 'src/app/proto/generated/management_pb';
 import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
+import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
+import { KeyValue } from '@angular/common';
 
 export enum ChangeType {
     MYUSER = 'myuser',
@@ -13,6 +15,18 @@ export enum ChangeType {
     APP = 'app',
 }
 
+export interface MappedChange {
+    key: string,
+    values: Array<{
+        data: any[];
+        dates: Timestamp.AsObject[];
+        editorId: string;
+        editorName: string;
+        eventTypes: Array<{ key: string; localizedMessage: string; }>;
+        sequences: number[];
+    }>;
+}
+
 @Component({
     selector: 'app-changes',
     templateUrl: './changes.component.html',
@@ -31,7 +45,7 @@ export class ChangesComponent implements OnInit, OnDestroy {
     private _data: BehaviorSubject<any> = new BehaviorSubject([]);
 
     loading: Observable<boolean> = this._loading.asObservable();
-    public data!: Observable<Change.AsObject[]>;
+    public data!: Observable<MappedChange[]>;
     public changes!: Changes.AsObject;
     private destroyed$: Subject<void> = new Subject();
     constructor(private mgmtUserService: ManagementService, private authUserService: GrpcAuthService) {
@@ -52,6 +66,7 @@ export class ChangesComponent implements OnInit, OnDestroy {
     }
 
     public scrollHandler(e: any): void {
+        console.log('bottom');
         if (e === 'bottom') {
             this.more();
         }
@@ -83,6 +98,7 @@ export class ChangesComponent implements OnInit, OnDestroy {
 
     private more(): void {
         const cursor = this.getCursor();
+        console.log('cursor' + cursor);
 
         let more: Promise<Changes>;
 
@@ -105,9 +121,11 @@ export class ChangesComponent implements OnInit, OnDestroy {
     // Determines the snapshot to paginate query
     private getCursor(): number {
         const current = this._data.value;
+
         if (current.length) {
-            return !this.sortDirectionAsc ? current[0].sequence :
-                current[current.length - 1].sequence;
+            const lastElementValues = current[current.length - 1].values;
+            const seq = lastElementValues[lastElementValues.length - 1].sequences;
+            return seq[seq.length - 1];
         }
         return 0;
     }
@@ -125,8 +143,10 @@ export class ChangesComponent implements OnInit, OnDestroy {
                 take(1),
                 tap((res: Changes) => {
                     const values = res.toObject().changesList;
+                    const mapped = this.mapChanges(values);
                     // update source with new values, done loading
-                    this._data.next(values);
+                    // this._data.next(values);
+                    this._data.next(mapped);
 
                     this._loading.next(false);
 
@@ -143,4 +163,85 @@ export class ChangesComponent implements OnInit, OnDestroy {
             ).subscribe();
         }
     }
+
+    mapChanges(changes: Change.AsObject[]) {
+        const splitted: { [editorId: string]: any[]; } = {};
+        changes.forEach((change) => {
+            if (change.changeDate) {
+                const index = `${this.getDateString(change.changeDate)}`;//`${this.getDateString(change.changeDate)}:${change.editorId}`;
+
+                if (index) {
+                    if (splitted[index]) {
+                        const userData: any = {
+                            editor: change.editor,
+                            editorId: change.editorId,
+                            editorName: change.editor,
+
+                            dates: [change.changeDate],
+                            data: [change.data],
+                            eventTypes: [change.eventType],
+                            sequences: [change.sequence],
+                        };
+                        const lastIndex = splitted[index].length - 1;
+                        if (lastIndex > -1 && splitted[index][lastIndex].editor === change.editor) {
+                            splitted[index][lastIndex].dates.push(change.changeDate);
+                            splitted[index][lastIndex].data.push(change.data);
+                            splitted[index][lastIndex].eventTypes.push(change.eventType);
+                            splitted[index][lastIndex].sequences.push(change.sequence);
+                        } else {
+                            splitted[index].push(userData);
+                        }
+                    } else {
+                        splitted[index] = [
+                            {
+                                editor: change.editor,
+                                editorId: change.editorId,
+                                editorName: change.editor,
+
+                                dates: [change.changeDate],
+                                data: [change.data],
+                                eventTypes: [change.eventType],
+                                sequences: [change.sequence],
+                            }
+                        ];
+                    }
+                }
+            }
+        });
+        const arr = Object.keys(splitted).map(key => {
+            return { key: key, values: splitted[key] };
+        });
+
+        arr.sort((a, b) => {
+            return parseFloat(b.key) - parseFloat(a.key);
+        });
+
+        // console.log(arr);
+        return arr;
+    }
+
+    getDateString(ts: Timestamp.AsObject) {
+        const date = new Date(ts.seconds * 1000 + ts.nanos / 1000 / 1000);
+        return date.getUTCFullYear() + this.pad(date.getUTCMonth() + 1) + this.pad(date.getUTCDate());
+    }
+
+    getTimestampIndex(date: any): number {
+        const ts: Date = new Date(date.seconds * 1000 + date.nanos / 1000 / 1000);
+        console.log(ts);
+        return ts.getTime();
+    }
+
+    pad(n: number): string {
+        return n < 10 ? '0' + n : n.toString();
+    }
+
+    // Order by ascending property value
+    valueAscOrder = (a: KeyValue<number, string>, b: KeyValue<number, string>): number => {
+        return a.value.localeCompare(b.value);
+    };
+
+    // Order by descending property key
+    keyDescOrder = (a: KeyValue<number, string>, b: KeyValue<number, string>): number => {
+        return a.key > b.key ? -1 : (b.key > a.key ? 1 : 0);
+    };
 }

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

@@ -10,6 +10,7 @@ import { ScrollableModule } from 'src/app/directives/scrollable/scrollable.modul
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
 import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
 import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
+import { AvatarModule } from '../avatar/avatar.module';
 
 import { ChangesComponent } from './changes.component';
 
@@ -30,6 +31,7 @@ import { ChangesComponent } from './changes.component';
         LocalizedDatePipeModule,
         TimestampToDatePipeModule,
         MatTooltipModule,
+        AvatarModule
     ],
     exports: [
         ChangesComponent,

console/src/app/modules/client-keys/client-keys.component.html

@@ -0,0 +1,66 @@
+<app-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length"
+    [timestamp]="keyResult?.viewTimestamp" [selection]="selection">
+    <div actions>
+        <button color="warn"
+            [disabled]="([('project.app.write:' + projectId), 'project.app.write'] | hasRole | async) == false"
+            (click)="deleteSelectedKeys()" matTooltip="{{'ACTIONS.DELETE' | translate}}" class="icon-button"
+            mat-icon-button *ngIf="selection.hasValue()">
+            <i class="las la-trash"></i>
+        </button>
+        <a [disabled]="([('project.app.write:' + projectId), 'project.app.write'] | hasRole | async) == false"
+            color="primary" mat-raised-button (click)="openAddKey()">
+            <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
+        </a>
+    </div>
+
+    <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"
+                        [checked]="selection.hasValue() && isAllSelected()"
+                        [indeterminate]="selection.hasValue() && !isAllSelected()">
+                    </mat-checkbox>
+                </th>
+                <td mat-cell *matCellDef="let key">
+                    <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+                        (change)="$event ? selection.toggle(key) : null" [checked]="selection.isSelected(key)">
+                    </mat-checkbox>
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="id">
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.ID' | translate }} </th>
+                <td mat-cell *matCellDef="let key"> {{key?.id}} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="type">
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.TYPE' | translate }} </th>
+                <td mat-cell *matCellDef="let key"> {{'USER.MACHINE.KEYTYPES.'+key?.type | translate}} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="creationDate">
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.CREATIONDATE' | translate }} </th>
+                <td mat-cell *matCellDef="let key">
+                    {{key.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="expirationDate">
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.EXPIRATIONDATE' | translate }} </th>
+                <td mat-cell *matCellDef="let key">
+                    {{key.expirationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}
+                </td>
+            </ng-container>
+
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr class="highlight" mat-row *matRowDef="let key; columns: displayedColumns;"
+                (click)="selection.toggle(key);">
+            </tr>
+
+        </table>
+        <mat-paginator #paginator class="paginator" [length]="keyResult?.totalResult || 0" [pageSize]="10"
+            [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
+    </div>
+</app-refresh-table>

console/src/app/modules/client-keys/client-keys.component.scss

@@ -0,0 +1,27 @@
+
+.table-wrapper {
+  overflow: auto;
+
+  .table,
+  .paginator {
+    width: 100%;
+
+    td,
+    th {
+      padding: 0 1rem;
+
+      &:first-child {
+        padding-left: 0;
+        padding-right: 1rem;
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+  }
+}
+
+tr {
+  outline: none;
+}

console/src/app/modules/client-keys/client-keys.component.spec.ts

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

console/src/app/modules/client-keys/client-keys.component.ts

@@ -0,0 +1,141 @@
+import { SelectionModel } from '@angular/cdk/collections';
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+import { TranslateService } from '@ngx-translate/core';
+import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
+import { Moment } from 'moment';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { AuthNKeyType, ClientKeySearchResponse, ClientKeyView, MachineKeySearchResponse, MachineKeyType, MachineKeyView } from 'src/app/proto/generated/management_pb';
+import { ManagementService } from 'src/app/services/mgmt.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+import { AddKeyDialogComponent, AddKeyDialogType } from 'src/app/modules/add-key-dialog/add-key-dialog.component';
+import { ShowKeyDialogComponent } from 'src/app/modules/show-key-dialog/show-key-dialog.component';
+
+@Component({
+    selector: 'app-client-keys',
+    templateUrl: './client-keys.component.html',
+    styleUrls: ['./client-keys.component.scss'],
+})
+export class ClientKeysComponent implements OnInit {
+    @Input() projectId!: string;
+    @Input() appId!: string;
+
+    @ViewChild(MatPaginator) public paginator!: MatPaginator;
+    public dataSource: MatTableDataSource<ClientKeyView.AsObject> = new MatTableDataSource<ClientKeyView.AsObject>();
+    public selection: SelectionModel<ClientKeyView.AsObject> = new SelectionModel<ClientKeyView.AsObject>(true, []);
+    public keyResult!: MachineKeySearchResponse.AsObject | ClientKeySearchResponse.AsObject;
+    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+    public loading$: Observable<boolean> = this.loadingSubject.asObservable();
+    @Input() public displayedColumns: string[] = ['select', 'id', 'type', 'creationDate', 'expirationDate'];
+
+    @Output() public changedSelection: EventEmitter<Array<ClientKeyView.AsObject>> = new EventEmitter();
+
+    constructor(public translate: TranslateService, private mgmtService: ManagementService, private dialog: MatDialog,
+        private toast: ToastService) {
+        this.selection.changed.subscribe(() => {
+            this.changedSelection.emit(this.selection.selected);
+        });
+    }
+
+    public ngOnInit(): void {
+        this.getData(10, 0);
+    }
+
+
+    public isAllSelected(): boolean {
+        const numSelected = this.selection.selected.length;
+        const numRows = this.dataSource.data.length;
+        return numSelected === numRows;
+    }
+
+    public masterToggle(): void {
+        this.isAllSelected() ?
+            this.selection.clear() :
+            this.dataSource.data.forEach(row => this.selection.select(row));
+    }
+
+
+    public changePage(event: PageEvent): void {
+        this.getData(event.pageSize, event.pageIndex * event.pageSize);
+    }
+
+    public deleteSelectedKeys(): void {
+        const mappedDeletions = this.selection.selected.map(value => {
+            return this.mgmtService.DeleteClientKey(value.id, this.projectId, this.appId);
+        });
+        Promise.all(mappedDeletions).then(() => {
+            this.selection.clear();
+            this.toast.showInfo('USER.TOAST.SELECTEDKEYSDELETED', true);
+            this.getData(10, 0);
+        }).catch(error => {
+            this.toast.showError(error);
+        });
+    }
+
+    public openAddKey(): void {
+        const dialogRef = this.dialog.open(AddKeyDialogComponent, {
+            data: {},
+            width: '400px',
+        });
+
+        dialogRef.afterClosed().subscribe(resp => {
+            if (resp) {
+                const type: AuthNKeyType = resp.type;
+
+                let date: Timestamp | undefined;
+
+                if (resp.date as Moment) {
+                    const ts = new Timestamp();
+                    console.log(resp.date.toDate());
+                    const milliseconds = resp.date.toDate().getTime();
+                    const seconds = Math.abs(milliseconds / 1000);
+                    const nanos = (milliseconds - seconds * 1000) * 1000 * 1000;
+                    ts.setSeconds(seconds);
+                    ts.setNanos(nanos);
+                    date = ts;
+                }
+
+                if (type) {
+                    return this.mgmtService.addClientKey(this.projectId, this.appId, type, date).then((response) => {
+                        if (response) {
+                            setTimeout(() => {
+                                this.refreshPage();
+                            }, 1000);
+
+                            this.dialog.open(ShowKeyDialogComponent, {
+                                data: {
+                                    key: response.toObject(),
+                                    type: AddKeyDialogType.AUTHNKEY
+                                },
+                                width: '400px',
+                            });
+                        }
+                    }).catch((error: any) => {
+                        this.toast.showError(error);
+                    });
+                }
+            }
+        });
+    }
+
+    private async getData(limit: number, offset: number): Promise<void> {
+        this.loadingSubject.next(true);
+        if (this.projectId && this.appId) {
+            this.mgmtService.SearchClientKeys(this.projectId, this.appId, limit, offset).then(resp => {
+                this.keyResult = resp.toObject();
+                this.dataSource.data = this.keyResult.resultList;
+                this.loadingSubject.next(false);
+            }).catch((error: any) => {
+                this.toast.showError(error);
+                this.loadingSubject.next(false);
+            });
+        }
+    }
+
+    public refreshPage(): void {
+        this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
+    }
+}

console/src/app/modules/client-keys/client-keys.module.ts

@@ -0,0 +1,58 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
+import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
+import { CardModule } from '../card/card.module';
+import { InputModule } from '../input/input.module';
+import { RefreshTableModule } from '../refresh-table/refresh-table.module';
+
+import { ClientKeysComponent } from './client-keys.component';
+import { ShowKeyDialogModule } from '../show-key-dialog/show-key-dialog.module';
+import { AddKeyDialogModule } from 'src/app/modules/add-key-dialog/add-key-dialog.module';
+import { RouterModule } from '@angular/router';
+import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
+import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
+
+
+@NgModule({
+    declarations: [
+        ClientKeysComponent,
+    ],
+    imports: [
+        CommonModule,
+        RouterModule,
+        FormsModule,
+        MatButtonModule,
+        MatDialogModule,
+        HasRoleModule,
+        CardModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatIconModule,
+        MatProgressSpinnerModule,
+        MatCheckboxModule,
+        MatTooltipModule,
+        HasRolePipeModule,
+        TimestampToDatePipeModule,
+        LocalizedDatePipeModule,
+        TranslateModule,
+        RefreshTableModule,
+        InputModule,
+        ShowKeyDialogModule,
+        AddKeyDialogModule,
+    ],
+    exports: [
+        ClientKeysComponent,
+    ],
+})
+export class ClientKeysModule { }

console/src/app/modules/idp-table/idp-table.component.html

@@ -29,21 +29,19 @@
                     </mat-checkbox>
                 </th>
                 <td mat-cell *matCellDef="let idp">
-                    <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+                    <mat-checkbox color="primary" (click)="$event.stopPropagation()" class="chbox"
                         [disabled]="serviceType==PolicyComponentServiceType.MGMT && idp?.providerType == IdpProviderType.IDPPROVIDERTYPE_SYSTEM"
                         (change)="$event ? selection.toggle(idp) : null" [checked]="selection.isSelected(idp)">
-                        <ng-template #genAvatar>
-                            <div class="avatar">
-                                <span>{{idp.name.charAt(0)}}</span>
-                            </div>
-                        </ng-template>
+                        <img src="../../../assets/images/google.png"
+                            *ngIf="idp.stylingType == IdpStylingType.IDPSTYLINGTYPE_GOOGLE" alt="google" />
                     </mat-checkbox>
                 </td>
             </ng-container>
 
             <ng-container matColumnDef="name">
                 <th mat-header-cell *matHeaderCellDef> {{ 'IDP.NAME' | translate }} </th>
-                <td [routerLink]="routerLinkForRow(idp)" mat-cell *matCellDef="let idp"> {{idp?.name}} </td>
+                <td [routerLink]="routerLinkForRow(idp)" mat-cell *matCellDef="let idp"><strong>{{idp?.name}}</strong>
+                </td>
             </ng-container>
 
             <ng-container matColumnDef="config">
@@ -59,19 +57,24 @@
             <ng-container matColumnDef="state">
                 <th mat-header-cell *matHeaderCellDef> {{ 'IDP.STATE' | translate }} </th>
                 <td [routerLink]="routerLinkForRow(idp)" mat-cell *matCellDef="let idp">
-                    {{ 'IDP.STATES.'+idp.state | translate }} </td>
+                    <span class="state"
+                        [ngClass]="{'active': idp.state === IdpState.IDPCONFIGSTATE_ACTIVE, 'inactive': idp.state === IdpState.IDPCONFIGSTATE_INACTIVE}">{{
+                        'IDP.STATES.'+idp.state | translate }}</span>
+                </td>
             </ng-container>
 
-            <ng-container matColumnDef="creationDate">
+            <ng-container matColumnDef="dates">
                 <th mat-header-cell *matHeaderCellDef> {{ 'IDP.CREATIONDATE' | translate }} </th>
                 <td [routerLink]="routerLinkForRow(idp)" class="pointer" mat-cell *matCellDef="let idp">
-                    {{idp.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="changeDate">
-                <th mat-header-cell *matHeaderCellDef> {{ 'IDP.CHANGEDATE' | translate }} </th>
-                <td [routerLink]="routerLinkForRow(idp)" class="pointer" mat-cell *matCellDef="let idp">
-                    {{idp.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }} </td>
+                    <div class="date-block">
+                        <span class="date-sub">{{ 'IDP.CREATIONDATE' | translate }}:</span>
+                        <span>{{idp.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
+                    </div>
+                    <div class="date-block">
+                        <span class="date-sub">{{ 'IDP.CHANGEDATE' | translate }}</span>
+                        <span>{{idp.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
+                    </div>
+                </td>
             </ng-container>
 
             <ng-container matColumnDef="type">

console/src/app/modules/idp-table/idp-table.component.scss

@@ -23,6 +23,15 @@
 
 td {
   outline: none;
+
+  img {
+      height: 30px;
+      width: 30px;
+      margin-left: 1rem;
+      border-radius: .5rem;
+      object-fit: contain;
+      margin-top: .5rem;
+  }
 }
 
 tr {
@@ -88,3 +97,16 @@ tr {
     padding-bottom: .5rem;
   }
 }
+
+
+.date-block {
+    margin: .5rem 0;
+    display: block;
+    min-width: 120px;
+  
+    .date-sub {
+      font-size: 13px;
+      display: block;
+    }
+}
+  

console/src/app/modules/idp-table/idp-table.component.ts

@@ -5,8 +5,9 @@ import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
 import { RouterLink } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
+import { Empty } from 'google-protobuf/google/protobuf/empty_pb';
 import { BehaviorSubject, Observable } from 'rxjs';
-import { IdpSearchResponse as AdminIdpSearchResponse, IdpView as AdminIdpView } from 'src/app/proto/generated/admin_pb';
+import { IdpSearchResponse as AdminIdpSearchResponse, IdpState, IdpStylingType, IdpView as AdminIdpView } from 'src/app/proto/generated/admin_pb';
 import { IdpProviderType, IdpView as MgmtIdpView } from 'src/app/proto/generated/management_pb';
 import { AdminService } from 'src/app/services/admin.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
@@ -34,7 +35,9 @@ export class IdpTableComponent implements OnInit {
     public loading$: Observable<boolean> = this.loadingSubject.asObservable();
     public PolicyComponentServiceType: any = PolicyComponentServiceType;
     public IdpProviderType: any = IdpProviderType;
-    @Input() public displayedColumns: string[] = ['select', 'name', 'config', 'creationDate', 'changeDate', 'state'];
+    public IdpState: any = IdpState;
+    public IdpStylingType: any = IdpStylingType;
+    @Input() public displayedColumns: string[] = ['select', 'name', 'config', 'dates', 'state'];
 
     @Output() public changedSelection: EventEmitter<Array<AdminIdpView.AsObject | MgmtIdpView.AsObject>>
         = new EventEmitter();
@@ -48,7 +51,7 @@ export class IdpTableComponent implements OnInit {
     ngOnInit(): void {
         this.getData(10, 0);
         if (this.serviceType === PolicyComponentServiceType.MGMT) {
-            this.displayedColumns = ['select', 'name', 'config', 'creationDate', 'changeDate', 'state', 'type'];
+            this.displayedColumns = ['select', 'name', 'config', 'dates', 'state', 'type'];
         }
 
         if (!this.disabled) {
@@ -74,22 +77,28 @@ export class IdpTableComponent implements OnInit {
     }
 
     public deactivateSelectedIdps(): void {
-        this.selection.clear();
-        Promise.all(this.selection.selected.map(value => {
+        const map: Promise<Empty>[] = this.selection.selected.map(value => {
             return this.service.DeactivateIdpConfig(value.id);
-        })).then(() => {
+        });
+        Promise.all(map).then(() => {
+            this.selection.clear();
             this.toast.showInfo('IDP.TOAST.SELECTEDDEACTIVATED', true);
             this.refreshPage();
+        }).catch(error => {
+            this.toast.showError(error);
         });
     }
 
     public reactivateSelectedIdps(): void {
-        this.selection.clear();
-        Promise.all(this.selection.selected.map(value => {
+        const map: Promise<Empty>[] = this.selection.selected.map(value => {
             return this.service.ReactivateIdpConfig(value.id);
-        })).then(() => {
+        });
+        Promise.all(map).then(() => {
+            this.selection.clear();
             this.toast.showInfo('IDP.TOAST.SELECTEDREACTIVATED', true);
             this.refreshPage();
+        }).catch(error => {
+            this.toast.showError(error);
         });
     }
 

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

@@ -54,16 +54,24 @@
                             <cnsl-label>{{ 'IDP.CLIENTSECRET' | translate }}</cnsl-label>
                             <input cnslInput formControlName="clientSecret" />
                         </cnsl-form-field>
+                        <div class="line">
+                            <cnsl-form-field appearance="outline" class="formfield">
+                                <cnsl-label>{{ 'IDP.SCOPESLIST' | translate }}</cnsl-label>
+
+                                <input cnslInput [matChipInputFor]="chipScopesList"
+                                    [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="true"
+                                    (matChipInputTokenEnd)="addScope($event)">
+                            </cnsl-form-field>
+                            <button (click)="addScope($event)" mat-icon-button>
+                                <mat-icon>add</mat-icon>
+                            </button>
+                        </div>
                         <cnsl-form-field appearance="outline" class="formfield fullwidth">
-                            <cnsl-label>{{ 'IDP.SCOPESLIST' | translate }}</cnsl-label>
-                            <mat-chip-list #chipScopesList aria-label="scope selection">
+                            <mat-chip-list class="chip-list" #chipScopesList aria-label="scope selection">
                                 <mat-chip class="chip" *ngFor="let scope of scopesList?.value" selectable="false"
                                     removable (removed)="removeScope(scope)">
                                     {{scope}} <mat-icon matChipRemove>cancel</mat-icon>
                                 </mat-chip>
-                                <input cnslInput [matChipInputFor]="chipScopesList"
-                                    [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="true"
-                                    (matChipInputTokenEnd)="addScope($event)">
                             </mat-chip-list>
                         </cnsl-form-field>
 

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

@@ -23,6 +23,12 @@
   .formfield {
     flex: 1 1 auto;
     margin: 0 .5rem;
+    min-width: 150px;
+
+    .chip {
+        border-radius: .5rem;
+        height: 40px;
+    }
 
     &.fullwidth {
       flex-basis: 100%;
@@ -32,6 +38,24 @@
       flex-basis: 100%;
     }
   }
+
+  .line {
+      display: flex;
+      align-items: flex-end;
+      width: 100%;
+
+      .formfield {
+          flex: 1;
+
+          input {
+              margin: 0;
+          }
+      }
+
+      button {
+          margin-bottom: 12px;
+      }
+  }
 }
 
 .btn-wrapper {
@@ -41,7 +65,6 @@
   .continue-button {
     margin-bottom: 4rem;
     display: block;
-    padding: .5rem 4rem;
 
     @media only screen and (max-width: 450px) {
       margin-top: 1rem;

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

@@ -0,0 +1,27 @@
+<div class="next-steps">
+    <h5>{{'NEXTSTEPS.TITLE' | translate}}</h5>
+    <div class="row">
+        <ng-container *ngFor="let link of links">
+            <ng-template *ngIf="link.withRole" appHasRole [appHasRole]="link.withRole">
+                <div class="step">
+                    <h6>{{ link.i18nTitle | translate }}</h6>
+                    <p>{{link.i18nDesc | translate}}</p>
+                    <span class="fill-space"></span>
+                    <a *ngIf="link.routerLink" [routerLink]="link.routerLink" color="primary" mat-mini-fab><i
+                            class="las la-angle-right"></i></a>
+                    <a *ngIf="link.href" [href]="link.href" target="_blank" color="primary" mat-mini-fab><i
+                            class="las la-angle-right"></i></a>
+                </div>
+            </ng-template>
+            <div class="step" *ngIf="!link.withRole">
+                <h6>{{ link.i18nTitle | translate }}</h6>
+                <p>{{link.i18nDesc | translate}}</p>
+                <span class="fill-space"></span>
+                <a *ngIf="link.routerLink" [routerLink]="link.routerLink" color="primary" mat-mini-fab><i
+                        class="las la-angle-right"></i></a>
+                <a *ngIf="link.href" [href]="link.href" target="_blank" color="primary" mat-mini-fab><i
+                        class="las la-angle-right"></i></a>
+            </div>
+        </ng-container>
+    </div>
+</div>

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

@@ -0,0 +1,59 @@
+.next-steps {    
+    margin-top: 1rem;
+    h5 {
+        text-transform: uppercase;
+        font-size: 14px;
+        color: var(--grey);
+    }
+
+    .row {
+        width: 100%;
+        display: flex;
+        overflow-x: auto;
+        padding-bottom: .5rem;
+
+        .step {
+            min-width: 220px;
+            max-width: 280px;
+            padding: 1rem;
+            margin: 0 .5rem;
+            border: 1px solid var(--grey);
+            border-radius: .5rem;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            box-sizing: border-box;
+            flex: 1;
+
+            h6 {
+                font-size: 1rem;
+                text-align: center;
+                margin: 0 0 1rem 0;
+            }
+
+            p {
+                font-size: 14px;
+                text-align: center;
+                color: var(--grey);
+            }
+
+            .fill-space {
+                flex: 1;
+            }
+
+            button {
+                display: block;
+                margin: auto;
+            }
+
+            &:first-child {
+                margin-left: 0;
+            }
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+        
+    }
+}

console/src/app/modules/links/links.component.spec.ts

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

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

@@ -0,0 +1,24 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+
+export interface CnslLinks {
+    i18nTitle: string;
+    i18nDesc: string;
+    routerLink?: any;
+    href?: string;
+    withRole?: Array<string | RegExp>;
+}
+
+@Component({
+    selector: 'cnsl-links',
+    templateUrl: './links.component.html',
+    styleUrls: ['./links.component.scss']
+})
+export class LinksComponent implements OnInit {
+    @Input() links: Array<CnslLinks> = [];
+    constructor() { }
+
+    ngOnInit(): void {
+    }
+
+}

console/src/app/modules/links/links.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LinksComponent } from './links.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { RouterModule } from '@angular/router';
+import { MatButton, MatButtonModule } from '@angular/material/button';
+import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
+
+
+
+@NgModule({
+    declarations: [LinksComponent],
+    imports: [
+        CommonModule,
+        TranslateModule,
+        RouterModule,
+        MatButtonModule,
+        HasRoleModule,
+    ],
+    exports: [
+        LinksComponent,
+    ]
+})
+export class LinksModule { }

console/src/app/modules/machine-keys/machine-keys.component.html

@@ -0,0 +1,64 @@
+<app-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length"
+    [timestamp]="keyResult?.viewTimestamp" [selection]="selection">
+    <div actions>
+        <button color="warn" [disabled]="([('user.write:' + userId), 'user.write'] | hasRole | async) == false"
+            (click)="deleteSelectedKeys()" matTooltip="{{'ACTIONS.DELETE' | translate}}" class="icon-button"
+            mat-icon-button *ngIf="selection.hasValue()">
+            <i class="las la-trash"></i>
+        </button>
+        <a [disabled]="([('user.write:' + userId), 'user.write'] | hasRole | async) == false" color="primary"
+            mat-raised-button (click)="openAddKey()">
+            <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
+        </a>
+    </div>
+
+    <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"
+                        [checked]="selection.hasValue() && isAllSelected()"
+                        [indeterminate]="selection.hasValue() && !isAllSelected()">
+                    </mat-checkbox>
+                </th>
+                <td mat-cell *matCellDef="let key">
+                    <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+                        (change)="$event ? selection.toggle(key) : null" [checked]="selection.isSelected(key)">
+                    </mat-checkbox>
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="id">
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.ID' | translate }} </th>
+                <td mat-cell *matCellDef="let key"> {{key?.id}} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="type">
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.TYPE' | translate }} </th>
+                <td mat-cell *matCellDef="let key"> {{'USER.MACHINE.KEYTYPES.'+key?.type | translate}} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="creationDate">
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.CREATIONDATE' | translate }} </th>
+                <td mat-cell *matCellDef="let key">
+                    {{key.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="expirationDate">
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.EXPIRATIONDATE' | translate }} </th>
+                <td mat-cell *matCellDef="let key">
+                    {{key.expirationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}
+                </td>
+            </ng-container>
+
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
+            </tr>
+
+        </table>
+        <mat-paginator #paginator class="paginator" [length]="keyResult?.totalResult || 0" [pageSize]="10"
+            [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
+    </div>
+</app-refresh-table>

console/src/app/modules/machine-keys/machine-keys.component.scss

@@ -0,0 +1,27 @@
+
+.table-wrapper {
+  overflow: auto;
+
+  .table,
+  .paginator {
+    width: 100%;
+
+    td,
+    th {
+      padding: 0 1rem;
+
+      &:first-child {
+        padding-left: 0;
+        padding-right: 1rem;
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+  }
+}
+
+tr {
+  outline: none;
+}

console/src/app/modules/machine-keys/machine-keys.component.spec.ts

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

console/src/app/modules/machine-keys/machine-keys.component.ts

@@ -0,0 +1,141 @@
+import { SelectionModel } from '@angular/cdk/collections';
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+import { TranslateService } from '@ngx-translate/core';
+import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
+import { Moment } from 'moment';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { ClientKeySearchResponse, MachineKeySearchResponse, MachineKeyType, MachineKeyView } from 'src/app/proto/generated/management_pb';
+import { ManagementService } from 'src/app/services/mgmt.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+import { AddKeyDialogComponent, AddKeyDialogType } from 'src/app/modules/add-key-dialog/add-key-dialog.component';
+import { ShowKeyDialogComponent } from 'src/app/modules/show-key-dialog/show-key-dialog.component';
+
+@Component({
+    selector: 'app-machine-keys',
+    templateUrl: './machine-keys.component.html',
+    styleUrls: ['./machine-keys.component.scss'],
+})
+export class MachineKeysComponent implements OnInit {
+    @Input() userId!: string;
+
+    @ViewChild(MatPaginator) public paginator!: MatPaginator;
+    public dataSource: MatTableDataSource<MachineKeyView.AsObject> = new MatTableDataSource<MachineKeyView.AsObject>();
+    public selection: SelectionModel<MachineKeyView.AsObject> = new SelectionModel<MachineKeyView.AsObject>(true, []);
+    public keyResult!: MachineKeySearchResponse.AsObject | ClientKeySearchResponse.AsObject;
+    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+    public loading$: Observable<boolean> = this.loadingSubject.asObservable();
+    @Input() public displayedColumns: string[] = ['select', 'id', 'type', 'creationDate', 'expirationDate'];
+
+    @Output() public changedSelection: EventEmitter<Array<MachineKeyView.AsObject>> = new EventEmitter();
+
+    constructor(public translate: TranslateService, private mgmtService: ManagementService, private dialog: MatDialog,
+        private toast: ToastService) {
+        this.selection.changed.subscribe(() => {
+            this.changedSelection.emit(this.selection.selected);
+        });
+    }
+
+    public ngOnInit(): void {
+        this.getData(10, 0);
+    }
+
+
+    public isAllSelected(): boolean {
+        const numSelected = this.selection.selected.length;
+        const numRows = this.dataSource.data.length;
+        return numSelected === numRows;
+    }
+
+    public masterToggle(): void {
+        this.isAllSelected() ?
+            this.selection.clear() :
+            this.dataSource.data.forEach(row => this.selection.select(row));
+    }
+
+
+    public changePage(event: PageEvent): void {
+        this.getData(event.pageSize, event.pageIndex * event.pageSize);
+    }
+
+    public deleteSelectedKeys(): void {
+        const mappedDeletions = this.selection.selected.map(value => {
+            return this.mgmtService.DeleteMachineKey(value.id, this.userId);
+        });
+        Promise.all(mappedDeletions).then(() => {
+            this.selection.clear();
+            this.toast.showInfo('USER.TOAST.SELECTEDKEYSDELETED', true);
+            this.getData(10, 0);
+        }).catch(error => {
+            this.toast.showError(error);
+        });
+    }
+
+    public openAddKey(): void {
+        const dialogRef = this.dialog.open(AddKeyDialogComponent, {
+            data: {},
+            width: '400px',
+        });
+
+        dialogRef.afterClosed().subscribe(resp => {
+            if (resp) {
+                const type: MachineKeyType = resp.type;
+
+                let date: Timestamp | undefined;
+
+                if (resp.date as Moment) {
+                    const ts = new Timestamp();
+                    console.log(resp.date.toDate());
+                    const milliseconds = resp.date.toDate().getTime();
+                    const seconds = Math.abs(milliseconds / 1000);
+                    const nanos = (milliseconds - seconds * 1000) * 1000 * 1000;
+                    ts.setSeconds(seconds);
+                    ts.setNanos(nanos);
+                    date = ts;
+                }
+
+                if (type) {
+                    return this.mgmtService.AddMachineKey(this.userId, type, date).then((response) => {
+                        if (response) {
+                            setTimeout(() => {
+                                this.refreshPage();
+                            }, 1000);
+
+                            this.dialog.open(ShowKeyDialogComponent, {
+                                data: {
+                                    key: response.toObject(),
+                                    type: AddKeyDialogType.MACHINE
+                                },
+                                width: '400px',
+                            });
+                        }
+                    }).catch((error: any) => {
+                        this.toast.showError(error);
+                    });
+                }
+            }
+        });
+    }
+
+    private async getData(limit: number, offset: number): Promise<void> {
+        this.loadingSubject.next(true);
+
+        if (this.userId) {
+            this.mgmtService.SearchMachineKeys(this.userId, limit, offset).then(resp => {
+                this.keyResult = resp.toObject();
+                this.dataSource.data = this.keyResult.resultList;
+                this.loadingSubject.next(false);
+            }).catch((error: any) => {
+                this.toast.showError(error);
+                this.loadingSubject.next(false);
+            });
+        }
+    }
+
+    public refreshPage(): void {
+        this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
+    }
+}

console/src/app/modules/machine-keys/machine-keys.module.ts

@@ -0,0 +1,58 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
+import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
+import { CardModule } from '../card/card.module';
+import { InputModule } from '../input/input.module';
+import { RefreshTableModule } from '../refresh-table/refresh-table.module';
+
+import { MachineKeysComponent } from './machine-keys.component';
+import { ShowKeyDialogModule } from '../show-key-dialog/show-key-dialog.module';
+import { AddKeyDialogModule } from 'src/app/modules/add-key-dialog/add-key-dialog.module';
+import { RouterModule } from '@angular/router';
+import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
+import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
+
+
+@NgModule({
+    declarations: [
+        MachineKeysComponent,
+    ],
+    imports: [
+        CommonModule,
+        RouterModule,
+        FormsModule,
+        MatButtonModule,
+        MatDialogModule,
+        HasRoleModule,
+        CardModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatIconModule,
+        MatProgressSpinnerModule,
+        MatCheckboxModule,
+        MatTooltipModule,
+        HasRolePipeModule,
+        TimestampToDatePipeModule,
+        LocalizedDatePipeModule,
+        TranslateModule,
+        RefreshTableModule,
+        InputModule,
+        ShowKeyDialogModule,
+        AddKeyDialogModule,
+    ],
+    exports: [
+        MachineKeysComponent,
+    ],
+})
+export class MachineKeysModule { }

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

@@ -19,9 +19,11 @@
     position: relative;
     flex: 1 0 300px;
     padding: 1rem;
+    max-width: 300px;
 
     @media only screen and (min-width: 1500px) {
       flex-basis: 400px;
+      max-width: 400px;
     }
 
     .meta-content {

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

@@ -2,6 +2,8 @@
 @import '~@angular/material/theming';
 
 @mixin meta-theme($theme) {
+    $is-dark-theme: map-get($theme, is-dark);
+
   .meta-details {
     margin-bottom: 1rem;
     border-bottom: 1px solid #81868a40;
@@ -25,24 +27,6 @@
       .second {
         font-size: 13px;
       }
-
-      .state {
-        border-radius: 50vw;
-        padding: 2px .5rem;
-        letter-spacing: .05em;
-        font-size: 13px;
-        background-color: #8795a120;
-
-        &.active {
-          background-color: #85d996;
-          color: black;
-        }
-
-        &.inactive {
-          background-color: #ff8981;
-          color: black;
-        }
-      }
     }
   }
 

console/src/app/modules/mfa-table/mfa-table.component.html

@@ -7,9 +7,10 @@
             <mat-icon matTooltip="{{'ACTIONS.REMOVE' | translate}}">
                 remove_circle</mat-icon>
         </button>
-        {{(componentType == LoginMethodComponentType.SecondFactor ? 'MFA.SECONDFACTORTYPES.': LoginMethodComponentType.MultiFactor ? 'MFA.MULTIFACTORTYPES.': '')+mfa | translate}}
+        {{(componentType == LoginMethodComponentType.SecondFactor ? 'MFA.SECONDFACTORTYPES.':
+        LoginMethodComponentType.MultiFactor ? 'MFA.MULTIFACTORTYPES.': '')+mfa | translate}}
     </div>
-    <div class="mfa" (click)="addMfa()">
+    <div class="new-mfa" (click)="addMfa()" matRipple>
         <mat-icon>add</mat-icon>
     </div>
 </div>

console/src/app/modules/mfa-table/mfa-table.component.scss

@@ -9,6 +9,12 @@
   margin: 0 -.5rem;
 
   .mfa {
+    background-color: #6a506e;
+    color: white;
+  }
+
+  .mfa,
+  .new-mfa {
     border: 1px solid var(--grey);
     border-radius: .5rem;
     display: grid;
@@ -23,10 +29,13 @@
 
     .rm {
       position: absolute;
-      top: 0;
-      left: 0;
+      display: none;
+      top: -2px;
+      left: -2px;
       transform: translateX(-50%) translateY(-50%);
       cursor: pointer;
+      color: #f44336;
+      transition: all .2s ease;
 
       &[disabled] {
         display: none;
@@ -35,7 +44,9 @@
 
     &:not(.disabled) {
       &:hover {
-        background-color: #ffffff10;
+        .rm {
+            display: block;
+        }
       }
     }
   }

console/src/app/modules/mfa-table/mfa-table.module.ts

@@ -20,6 +20,7 @@ import { MfaTableComponent } from './mfa-table.component';
 import { DialogAddTypeComponent } from './dialog-add-type/dialog-add-type.component';
 import { InputModule } from '../input/input.module';
 import { MatSelectModule } from '@angular/material/select';
+import { MatRippleModule } from '@angular/material/core';
 
 @NgModule({
     declarations: [MfaTableComponent, DialogAddTypeComponent],
@@ -36,6 +37,7 @@ import { MatSelectModule } from '@angular/material/select';
         TimestampToDatePipeModule,
         HasRoleModule,
         MatProgressSpinnerModule,
+        MatRippleModule,
     ],
     exports: [
         MfaTableComponent,

console/src/app/modules/policies/label-policy/label-policy.component.html

@@ -1,4 +1,4 @@
-<app-detail-layout [backRouterLink]="['/iam']" [title]="'POLICY.LABEL.TITLE' | translate"
+<app-detail-layout [backRouterLink]="['/iam/policies']" [title]="'POLICY.LABEL.TITLE' | translate"
     [description]="'POLICY.LABEL.DESCRIPTION' | translate">
 
     <div class="content" *ngIf="labelData">
@@ -14,7 +14,9 @@
     </div>
 
     <div class="btn-container">
-        <button (click)="savePolicy()" color="primary" type="submit"
-            mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
+        <button (click)="savePolicy()" color="primary" type="submit" mat-raised-button>{{ 'ACTIONS.SAVE' | translate
+            }}</button>
     </div>
+
+    <cnsl-links *ngIf="nextLinks" [links]="nextLinks"></cnsl-links>
 </app-detail-layout>

console/src/app/modules/policies/label-policy/label-policy.component.ts

@@ -4,6 +4,8 @@ import { Subscription } from 'rxjs';
 import { DefaultLabelPolicyUpdate, DefaultLabelPolicyView } from 'src/app/proto/generated/admin_pb';
 import { AdminService } from 'src/app/services/admin.service';
 import { ToastService } from 'src/app/services/toast.service';
+import { CnslLinks } from '../../links/links.component';
+import { IAM_COMPLEXITY_LINK, IAM_LABEL_LINK, IAM_LOGIN_POLICY_LINK, IAM_POLICY_LINK } from '../../policy-grid/policy-links';
 
 import { PolicyComponentServiceType } from '../policy-component-types.enum';
 
@@ -19,6 +21,11 @@ export class LabelPolicyComponent implements OnDestroy {
     private sub: Subscription = new Subscription();
 
     public PolicyComponentServiceType: any = PolicyComponentServiceType;
+    public nextLinks: CnslLinks[] = [
+        IAM_COMPLEXITY_LINK,
+        IAM_POLICY_LINK,
+        IAM_LOGIN_POLICY_LINK,
+    ];
     constructor(
         private route: ActivatedRoute,
         private toast: ToastService,

console/src/app/modules/policies/label-policy/label-policy.module.ts

@@ -9,6 +9,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
 import { InputModule } from 'src/app/modules/input/input.module';
+import { LinksModule } from '../../links/links.module';
 
 import { LabelPolicyRoutingModule } from './label-policy-routing.module';
 import { LabelPolicyComponent } from './label-policy.component';
@@ -27,6 +28,7 @@ import { LabelPolicyComponent } from './label-policy.component';
         MatTooltipModule,
         TranslateModule,
         DetailLayoutModule,
+        LinksModule,
     ],
 })
 export class LabelPolicyModule { }

console/src/app/modules/policies/login-policy/login-policy.component.html

@@ -28,28 +28,36 @@
                 [(ngModel)]="loginData.allowUsernamePassword">
                 {{'POLICY.DATA.ALLOWUSERNAMEPASSWORD' | translate}}
             </mat-slide-toggle>
-            <p>{{'POLICY.DATA.ALLOWUSERNAMEPASSWORD_DESC' | translate}}</p>
+            <cnsl-info-section class="info">
+                {{'POLICY.DATA.ALLOWUSERNAMEPASSWORD_DESC' | translate}}
+            </cnsl-info-section>
         </div>
         <div class="row">
             <mat-slide-toggle class="toggle" color="primary" [disabled]="disabled" ngDefaultControl
                 [(ngModel)]="loginData.allowRegister">
                 {{'POLICY.DATA.ALLOWREGISTER' | translate}}
             </mat-slide-toggle>
-            <p> {{'POLICY.DATA.ALLOWREGISTER_DESC' | translate}} </p>
+            <cnsl-info-section class="info">
+                {{'POLICY.DATA.ALLOWREGISTER_DESC' | translate}}
+            </cnsl-info-section>
         </div>
         <div class="row">
             <mat-slide-toggle class="toggle" color="primary" [disabled]="disabled" ngDefaultControl
                 [(ngModel)]="loginData.allowExternalIdp">
                 {{'POLICY.DATA.ALLOWEXTERNALIDP' | translate}}
             </mat-slide-toggle>
-            <p> {{'POLICY.DATA.ALLOWEXTERNALIDP_DESC' | translate}} </p>
+            <cnsl-info-section class="info">
+                {{'POLICY.DATA.ALLOWEXTERNALIDP_DESC' | translate}}
+            </cnsl-info-section>
         </div>
         <div class="row">
             <mat-slide-toggle class="toggle" color="primary" [disabled]="disabled" ngDefaultControl
                 [(ngModel)]="loginData.forceMfa">
                 {{'POLICY.DATA.FORCEMFA' | translate}}
             </mat-slide-toggle>
-            <p> {{'POLICY.DATA.FORCEMFA_DESC' | translate}} </p>
+            <cnsl-info-section class="info">
+                {{'POLICY.DATA.FORCEMFA_DESC' | translate}}
+            </cnsl-info-section>
         </div>
         <div class="row">
             <cnsl-form-field class="form-field" label="Access Code" required="true">
@@ -92,20 +100,37 @@
                 <mat-icon matTooltip="{{'ACTIONS.REMOVE' | translate}}">
                     remove_circle</mat-icon>
             </button>
-            <span class="name">{{idp.name}}</span>
-            <span class="meta">{{ 'IDP.TYPE' | translate }}: {{ 'IDP.TYPES.'+idp.type | translate }}</span>
-            <span class="meta">{{ 'IDP.ID' | translate }}: {{idp.idpConfigId}}</span>
+            <div class="line">
+                <img src="../../../assets/images/google.png"
+                    *ngIf="idp.stylingType == IdpStylingType.IDPSTYLINGTYPE_GOOGLE" alt="google" />
+                <div>
+                    <span class="name">{{idp.name}}</span>
+                    <span class="meta-info">{{ 'IDP.TYPE' | translate }}: {{ 'IDP.TYPES.'+idp.type | translate }}</span>
+                    <span class="meta-info">{{ 'IDP.ID' | translate }}: {{idp.idpConfigId}}</span>
+                </div>
+            </div>
         </div>
-        <div *ngIf="!disabled" class="new-idp" (click)="openDialog()">
+        <div *ngIf="!disabled" class="new-idp" (click)="openDialog()" matRipple>
             <mat-icon>add</mat-icon>
         </div>
     </div>
 
     <ng-template appHasRole [appHasRole]="['org.idp.read']">
-        <h2>{{ 'IDP.LIST.TITLE' | translate }}</h2>
-        <p>{{ 'IDP.LIST.DESCRIPTION' | translate }}</p>
-        <app-idp-table [service]="service" [serviceType]="serviceType"
-            [disabled]="([serviceType == PolicyComponentServiceType.ADMIN ? 'iam.idp.write' : serviceType == PolicyComponentServiceType.MGMT ? 'org.idp.write' : ''] | hasRole | async) == false">
-        </app-idp-table>
+        <app-card title="{{ 'IDP.LIST.TITLE' | translate }}" description="{{ 'IDP.LIST.DESCRIPTION' | translate }}"
+            [expanded]="false">
+            <div card-actions>
+                <i class="lab la-google"></i>
+                <i class="lab la-facebook"></i>
+                <i class="lab la-apple"></i>
+                <i class="lab la-github"></i>
+                <i class="lab la-gitlab"></i>
+            </div>
+            <app-idp-table [service]="service" [serviceType]="serviceType"
+                [disabled]="([serviceType == PolicyComponentServiceType.ADMIN ? 'iam.idp.write' : serviceType == PolicyComponentServiceType.MGMT ? 'org.idp.write' : ''] | hasRole | async) == false">
+            </app-idp-table>
+        </app-card>
     </ng-template>
+
+    <cnsl-links *ngIf="nextLinks" [links]="nextLinks"></cnsl-links>
+
 </app-detail-layout>

console/src/app/modules/policies/login-policy/login-policy.component.scss

@@ -15,18 +15,17 @@
       margin: .3rem 0;
     }
 
-    p {
-      margin-top: .5rem;
-      font-size: 14px;
-      color: var(--grey);
+    .info {
+        margin-bottom: 1rem;
+        display: block;
     }
   }
 }
 
 .save-button {
-  margin-top: 3rem;
+  margin-bottom: 3rem;
+  float: right;
   display: block;
-  padding: .5rem 4rem;
 }
 
 .idp-table-card {
@@ -46,6 +45,33 @@
   display: flex;
   margin: 0 -.5rem;
 
+  .idp {
+    background-color: #506e6e;
+    color: white;
+
+    .line {
+        display: flex;
+        align-items: center;
+
+        img {
+            height: 30px;
+            width: 30px;
+            margin-right: 1rem;
+            border-radius: .5rem;
+            object-fit: contain;
+        }
+
+        div {
+            flex: 1;
+            display: block;
+
+            * {
+                display: block;
+            }
+        }
+    }
+  }
+
   .idp,
   .new-idp {
     display: grid;
@@ -68,15 +94,18 @@
       padding: 2px;
     }
 
-    .meta {
+    .meta-info {
       font-size: 12px;
-      color: var(--grey);
+      color: #fafafa;
     }
 
     .rm {
+      color: #f44336;
       position: absolute;
-      top: 0;
-      left: 0;
+      display: none;
+      top: -2px;
+      transition: all .2s ease;
+      left: -2px;
       transform: translateX(-50%) translateY(-50%);
       cursor: pointer;
 
@@ -86,11 +115,13 @@
     }
 
     &:not(.disabled) {
-      &:hover {
-        background-color: #ffffff10;
-      }
+        &:hover {
+            .rm {
+                display: block;
+            }
+        }
     }
-
+    
     img {
       height: 100%;
       width: 100%;
@@ -102,6 +133,6 @@
 .divider {
   width: 100%;
   height: 1px;
-  background-color: var(--grey);
+  background-color: rgba(var(--grey), .5);
   margin: 1rem 0;
 }

console/src/app/modules/policies/login-policy/login-policy.component.ts

@@ -9,6 +9,7 @@ import {
     DefaultLoginPolicyRequest,
     DefaultLoginPolicyView,
     IdpProviderView as AdminIdpProviderView,
+    IdpStylingType,
     IdpView as AdminIdpView,
     PasswordlessType as AdminPasswordlessType,
 } from 'src/app/proto/generated/admin_pb';
@@ -24,6 +25,8 @@ import {
 import { AdminService } from 'src/app/services/admin.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
+import { CnslLinks } from '../../links/links.component';
+import { IAM_COMPLEXITY_LINK, IAM_LABEL_LINK, IAM_LOGIN_POLICY_LINK, IAM_POLICY_LINK, ORG_COMPLEXITY_LINK, ORG_IAM_POLICY_LINK } from '../../policy-grid/policy-links';
 
 import { PolicyComponentServiceType } from '../policy-component-types.enum';
 import { AddIdpDialogComponent } from './add-idp-dialog/add-idp-dialog.component';
@@ -46,6 +49,9 @@ export class LoginPolicyComponent implements OnDestroy {
 
     public loading: boolean = false;
     public disabled: boolean = true;
+
+    public IdpStylingType: any = IdpStylingType;
+    public nextLinks: CnslLinks[] = [];
     constructor(
         private route: ActivatedRoute,
         private toast: ToastService,
@@ -59,11 +65,20 @@ export class LoginPolicyComponent implements OnDestroy {
                     this.service = this.injector.get(ManagementService as Type<ManagementService>);
                     this.passwordlessTypes = [MgmtPasswordlessType.PASSWORDLESSTYPE_ALLOWED,
                     MgmtPasswordlessType.PASSWORDLESSTYPE_NOT_ALLOWED];
+                    this.nextLinks = [
+                        ORG_COMPLEXITY_LINK,
+                        ORG_IAM_POLICY_LINK,
+                    ];
                     break;
                 case PolicyComponentServiceType.ADMIN:
                     this.service = this.injector.get(AdminService as Type<AdminService>);
                     this.passwordlessTypes = [AdminPasswordlessType.PASSWORDLESSTYPE_ALLOWED,
                     AdminPasswordlessType.PASSWORDLESSTYPE_NOT_ALLOWED];
+                    this.nextLinks = [
+                        IAM_COMPLEXITY_LINK,
+                        IAM_POLICY_LINK,
+                        IAM_LABEL_LINK,
+                    ];
                     break;
             }
 
@@ -207,7 +222,7 @@ export class LoginPolicyComponent implements OnDestroy {
         switch (this.serviceType) {
             case PolicyComponentServiceType.MGMT:
                 (this.service as ManagementService).RemoveIdpProviderFromLoginPolicy(idp.idpConfigId).then(() => {
-                    const index = this.idps.findIndex(temp => temp === idp);
+                    const index = (this.idps as MgmtIdpProviderView.AsObject[]).findIndex(temp => temp === idp);
                     if (index > -1) {
                         this.idps.splice(index, 1);
                     }
@@ -215,7 +230,7 @@ export class LoginPolicyComponent implements OnDestroy {
                 break;
             case PolicyComponentServiceType.ADMIN:
                 (this.service as AdminService).RemoveIdpProviderFromDefaultLoginPolicy(idp.idpConfigId).then(() => {
-                    const index = this.idps.findIndex(temp => temp === idp);
+                    const index = (this.idps as AdminIdpProviderView.AsObject[]).findIndex(temp => temp === idp);
                     if (index > -1) {
                         this.idps.splice(index, 1);
                     }

console/src/app/modules/policies/login-policy/login-policy.module.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
+import { MatRippleModule } from '@angular/material/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
@@ -15,6 +16,8 @@ import { IdpTableModule } from 'src/app/modules/idp-table/idp-table.module';
 import { InputModule } from 'src/app/modules/input/input.module';
 import { MfaTableModule } from 'src/app/modules/mfa-table/mfa-table.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
+import { InfoSectionModule } from '../../info-section/info-section.module';
+import { LinksModule } from '../../links/links.module';
 
 import { AddIdpDialogModule } from './add-idp-dialog/add-idp-dialog.module';
 import { LoginPolicyRoutingModule } from './login-policy-routing.module';
@@ -25,6 +28,7 @@ import { LoginPolicyComponent } from './login-policy.component';
     imports: [
         LoginPolicyRoutingModule,
         CommonModule,
+        InfoSectionModule,
         FormsModule,
         CardModule,
         InputModule,
@@ -41,6 +45,8 @@ import { LoginPolicyComponent } from './login-policy.component';
         MfaTableModule,
         MatProgressSpinnerModule,
         MatSelectModule,
+        MatRippleModule,
+        LinksModule,
     ],
 })
 export class LoginPolicyModule { }

console/src/app/modules/policies/org-iam-policy/org-iam-policy.component.html

@@ -20,7 +20,9 @@
     </div>
 
     <div class="btn-container">
-        <button (click)="savePolicy()" color="primary" type="submit"
-            mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
+        <button (click)="savePolicy()" color="primary" type="submit" mat-raised-button>{{ 'ACTIONS.SAVE' | translate
+            }}</button>
     </div>
+
+    <cnsl-links *ngIf="nextLinks" [links]="nextLinks"></cnsl-links>
 </app-detail-layout>

console/src/app/modules/policies/org-iam-policy/org-iam-policy.component.scss

@@ -37,6 +37,5 @@
   button {
     margin-top: 3rem;
     display: block;
-    padding: .5rem 4rem;
   }
 }

console/src/app/modules/policies/org-iam-policy/org-iam-policy.component.ts

@@ -9,6 +9,8 @@ import { AdminService } from 'src/app/services/admin.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { StorageService } from 'src/app/services/storage.service';
 import { ToastService } from 'src/app/services/toast.service';
+import { CnslLinks } from '../../links/links.component';
+import { IAM_COMPLEXITY_LINK, IAM_LABEL_LINK, IAM_LOGIN_POLICY_LINK, ORG_LOGIN_POLICY_LINK, ORG_COMPLEXITY_LINK } from '../../policy-grid/policy-links';
 
 import { PolicyComponentServiceType } from '../policy-component-types.enum';
 
@@ -28,7 +30,7 @@ export class OrgIamPolicyComponent implements OnDestroy {
     private org!: Org.AsObject;
 
     public PolicyComponentServiceType: any = PolicyComponentServiceType;
-
+    public nextLinks: Array<CnslLinks> = [];
     constructor(
         private route: ActivatedRoute,
         private toast: ToastService,
@@ -44,6 +46,16 @@ export class OrgIamPolicyComponent implements OnDestroy {
             this.serviceType = data.serviceType;
             if (this.serviceType === PolicyComponentServiceType.MGMT) {
                 this.managementService = this.injector.get(ManagementService as Type<ManagementService>);
+                this.nextLinks = [
+                    ORG_COMPLEXITY_LINK,
+                    ORG_LOGIN_POLICY_LINK,
+                ];
+            } else {
+                this.nextLinks = [
+                    IAM_COMPLEXITY_LINK,
+                    IAM_LOGIN_POLICY_LINK,
+                    IAM_LABEL_LINK,
+                ];
             }
             return this.route.params;
         })).subscribe(_ => {

console/src/app/modules/policies/org-iam-policy/org-iam-policy.module.ts

@@ -9,6 +9,8 @@ import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
 import { InputModule } from 'src/app/modules/input/input.module';
+import { InfoSectionModule } from '../../info-section/info-section.module';
+import { LinksModule } from '../../links/links.module';
 
 import { OrgIamPolicyRoutingModule } from './org-iam-policy-routing.module';
 import { OrgIamPolicyComponent } from './org-iam-policy.component';
@@ -25,8 +27,10 @@ import { OrgIamPolicyComponent } from './org-iam-policy.component';
         MatIconModule,
         HasRoleModule,
         MatTooltipModule,
+        InfoSectionModule,
         TranslateModule,
         DetailLayoutModule,
+        LinksModule
     ],
 })
 export class OrgIamPolicyModule { }

console/src/app/modules/policies/password-age-policy/password-age-policy.component.scss

@@ -34,6 +34,5 @@
   button {
     margin-top: 3rem;
     display: block;
-    padding: .5rem 4rem;
   }
 }

console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.component.html

@@ -16,6 +16,7 @@
 
     <div *ngIf="complexityData" class="content">
         <div class="row">
+            <mat-icon class="icon" svgIcon="mdi_counter"></mat-icon>
             <span class="left-desc">{{'POLICY.DATA.MINLENGTH' | translate}}</span>
             <span class="fill-space"></span>
             <div class="length-wrapper">
@@ -29,18 +30,21 @@
             </div>
         </div>
         <div class="row">
+            <mat-icon class="icon" svgIcon="mdi_numeric"></mat-icon>
             <span class="left-desc">{{'POLICY.DATA.HASNUMBER' | translate}}</span>
             <span class="fill-space"></span>
             <mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="complexityData.hasNumber">
             </mat-slide-toggle>
         </div>
         <div class="row">
+            <mat-icon class="icon" svgIcon="mdi_symbol"></mat-icon>
             <span class="left-desc">{{'POLICY.DATA.HASSYMBOL' | translate}}</span>
             <span class="fill-space"></span>
             <mat-slide-toggle color="primary" name="hasSymbol" ngDefaultControl [(ngModel)]="complexityData.hasSymbol">
             </mat-slide-toggle>
         </div>
         <div class="row">
+            <mat-icon class="icon" svgIcon="mdi_format-letter-case-lower"></mat-icon>
             <span class="left-desc">{{'POLICY.DATA.HASLOWERCASE' | translate}}</span>
             <span class="fill-space"></span>
             <mat-slide-toggle color="primary" name="hasLowercase" ngDefaultControl
@@ -48,6 +52,7 @@
             </mat-slide-toggle>
         </div>
         <div class="row">
+            <mat-icon class="icon" svgIcon="mdi_format-letter-case-upper"></mat-icon>
             <span class="left-desc">{{'POLICY.DATA.HASUPPERCASE' | translate}}</span>
             <span class="fill-space"></span>
             <mat-slide-toggle color="primary" name="hasUppercase" ngDefaultControl
@@ -57,7 +62,9 @@
     </div>
 
     <div class="btn-container">
-        <button (click)="savePolicy()" color="primary" type="submit"
-            mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
+        <button (click)="savePolicy()" color="primary" type="submit" mat-raised-button>{{ 'ACTIONS.SAVE' | translate
+            }}</button>
     </div>
+
+    <cnsl-links *ngIf="nextLinks" [links]="nextLinks"></cnsl-links>
 </app-detail-layout>

console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.component.scss

@@ -18,6 +18,10 @@
     align-items: center;
     padding: .3rem 0;
 
+    .icon {
+        margin-right: 1rem;
+    }
+
     .left-desc {
       font-size: .9rem;
     }
@@ -42,6 +46,5 @@
   button {
     margin-top: 3rem;
     display: block;
-    padding: .5rem 4rem;
   }
 }

console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.component.ts

@@ -7,6 +7,8 @@ import { PasswordComplexityPolicyView } from 'src/app/proto/generated/management
 import { AdminService } from 'src/app/services/admin.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
+import { CnslLinks } from '../../links/links.component';
+import { IAM_LABEL_LINK, IAM_LOGIN_POLICY_LINK, IAM_POLICY_LINK, ORG_IAM_POLICY_LINK, ORG_LOGIN_POLICY_LINK } from '../../policy-grid/policy-links';
 
 import { PolicyComponentServiceType } from '../policy-component-types.enum';
 
@@ -25,6 +27,7 @@ export class PasswordComplexityPolicyComponent implements OnDestroy {
     public PolicyComponentServiceType: any = PolicyComponentServiceType;
 
     public loading: boolean = false;
+    public nextLinks: CnslLinks[] = [];
     constructor(
         private route: ActivatedRoute,
         private toast: ToastService,
@@ -36,9 +39,18 @@ export class PasswordComplexityPolicyComponent implements OnDestroy {
             switch (this.serviceType) {
                 case PolicyComponentServiceType.MGMT:
                     this.service = this.injector.get(ManagementService as Type<ManagementService>);
+                    this.nextLinks = [
+                        ORG_IAM_POLICY_LINK,
+                        ORG_LOGIN_POLICY_LINK,
+                    ];
                     break;
                 case PolicyComponentServiceType.ADMIN:
                     this.service = this.injector.get(AdminService as Type<AdminService>);
+                    this.nextLinks = [
+                        IAM_POLICY_LINK,
+                        IAM_LOGIN_POLICY_LINK,
+                        IAM_LABEL_LINK,
+                    ];
                     break;
             }
 

console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.module.ts

@@ -10,6 +10,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
 import { InputModule } from 'src/app/modules/input/input.module';
+import { LinksModule } from '../../links/links.module';
 
 import { PasswordComplexityPolicyRoutingModule } from './password-complexity-policy-routing.module';
 import { PasswordComplexityPolicyComponent } from './password-complexity-policy.component';
@@ -29,6 +30,7 @@ import { PasswordComplexityPolicyComponent } from './password-complexity-policy.
         TranslateModule,
         DetailLayoutModule,
         MatProgressSpinnerModule,
+        LinksModule,
     ],
 })
 export class PasswordComplexityPolicyModule { }

console/src/app/modules/policies/password-lockout-policy/password-lockout-policy.component.html

@@ -33,7 +33,7 @@
     </div>
 
     <div class="btn-container">
-        <button (click)="savePolicy()" color="primary" type="submit"
-            mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
+        <button (click)="savePolicy()" color="primary" type="submit" mat-raised-button>{{ 'ACTIONS.SAVE' | translate
+            }}</button>
     </div>
 </app-detail-layout>

console/src/app/modules/policies/password-lockout-policy/password-lockout-policy.module.ts

@@ -9,6 +9,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
 import { InputModule } from 'src/app/modules/input/input.module';
+import { LinksModule } from '../../links/links.module';
 
 import { PasswordLockoutPolicyRoutingModule } from './password-lockout-policy-routing.module';
 import { PasswordLockoutPolicyComponent } from './password-lockout-policy.component';

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

@@ -19,6 +19,20 @@
             <p class="desc">
                 {{'POLICY.PWD_COMPLEXITY.DESCRIPTION' | translate}}</p>
 
+            <div class="icons">
+                <mat-icon matTooltip="{{'POLICY.DATA.HASUPPERCASE' | translate}}" *ngIf="complexityPolicy?.hasUppercase"
+                    class="icon" svgIcon="mdi_format-letter-case-upper">
+                </mat-icon>
+                <mat-icon matTooltip="{{'POLICY.DATA.HASLOWERCASE' | translate}}" *ngIf="complexityPolicy?.hasLowercase"
+                    class="icon" svgIcon="mdi_format-letter-case-lower">
+                </mat-icon>
+                <mat-icon matTooltip="{{'POLICY.DATA.HASNUMBER' | translate}}" *ngIf="complexityPolicy?.hasNumber"
+                    class="icon" svgIcon="mdi_numeric"></mat-icon>
+                <mat-icon matTooltip="{{'POLICY.DATA.HASSYMBOL' | translate}}" *ngIf="complexityPolicy?.hasSymbol"
+                    class="icon" svgIcon="mdi_symbol"></mat-icon>
+                <!-- <mat-icon *ngIf="complexityPolicy?." class="icon" svgIcon="mdi_counter"></mat-icon> -->
+            </div>
+
             <span class="fill-space"></span>
             <div class="btn-wrapper">
                 <button
@@ -67,10 +81,8 @@
                 </button>
             </div>
 
-            <ng-template #showDescIAM>
-                <p class="desc">
-                    {{'POLICY.LOGIN_POLICY.DESCRIPTION' | translate}}</p>
-            </ng-template>
+            <p class="desc">
+                {{'POLICY.LOGIN_POLICY.DESCRIPTION' | translate}}</p>
 
             <span class="fill-space"></span>
             <div class="btn-wrapper">

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

@@ -21,6 +21,7 @@ h2 {
     min-height: 250px;
     padding: 1rem;
     height: 100%;
+    box-sizing: border-box;
 
     @media only screen and (max-width: 450px) {
       flex-basis: 100%;
@@ -30,7 +31,7 @@ h2 {
       height: 60px;
       width: 60px;
       border-radius: 50%;
-      background: linear-gradient(40deg, rgb(129, 85, 185) 30%, #5469d4);
+      background: linear-gradient(40deg, rgb(129, 85, 185) 30%, #7b8ada);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -64,6 +65,13 @@ h2 {
       color: var(--grey);
     }
 
+    .icons {
+        margin-bottom: 1rem;
+        .icon {
+            margin-right: .5rem;
+        }
+    }
+
     .fill-space {
       flex: 1;
     }

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

@@ -1,5 +1,9 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { PolicyComponentType } from 'src/app/modules/policies/policy-component-types.enum';
+import { PasswordComplexityPolicyView as MgmtPasswordComplexityPolicyView } from 'src/app/proto/generated/management_pb';
+import { DefaultPasswordComplexityPolicyView as AdminPasswordComplexityPolicyView } from 'src/app/proto/generated/admin_pb';
+import { ManagementService } from 'src/app/services/mgmt.service';
+import { AdminService } from 'src/app/services/admin.service';
 
 export enum PolicyGridType {
     ORG,
@@ -11,9 +15,24 @@ export enum PolicyGridType {
     templateUrl: './policy-grid.component.html',
     styleUrls: ['./policy-grid.component.scss'],
 })
-export class PolicyGridComponent {
+export class PolicyGridComponent implements OnInit {
     @Input() public type!: PolicyGridType;
     public PolicyComponentType: any = PolicyComponentType;
     public PolicyGridType: any = PolicyGridType;
-    constructor() { }
+
+    public complexityPolicy!: MgmtPasswordComplexityPolicyView.AsObject | AdminPasswordComplexityPolicyView.AsObject | any;
+
+    constructor(private mgmtService: ManagementService, private adminService: AdminService) { }
+
+    public ngOnInit(): void {
+        if (this.type == PolicyGridType.ORG) {
+            this.mgmtService.GetDefaultPasswordComplexityPolicy().then((policy) => {
+                this.complexityPolicy = policy.toObject();
+            });
+        } else if (this.type == PolicyGridType.IAM) {
+            this.adminService.GetDefaultPasswordComplexityPolicy().then((policy) => {
+                this.complexityPolicy = policy.toObject();
+            });
+        }
+    }
 }

console/src/app/modules/policy-grid/policy-grid.module.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
@@ -19,6 +20,7 @@ import { PolicyGridComponent } from './policy-grid.component';
         RouterModule,
         MatButtonModule,
         MatIconModule,
+        MatTooltipModule,
     ],
     exports: [
         PolicyGridComponent,

console/src/app/modules/policy-grid/policy-links.ts

@@ -0,0 +1,51 @@
+import { PolicyComponentType } from '../policies/policy-component-types.enum';
+
+export const IAM_COMPLEXITY_LINK = {
+    i18nTitle: 'POLICY.PWD_COMPLEXITY.TITLE',
+    i18nDesc: 'POLICY.PWD_COMPLEXITY.DESCRIPTION',
+    routerLink: ['/iam', 'policy', PolicyComponentType.COMPLEXITY],
+    withRole: ['iam.policy.read'],
+};
+
+export const IAM_POLICY_LINK = {
+    i18nTitle: 'POLICY.IAM_POLICY.TITLE',
+    i18nDesc: 'POLICY.IAM_POLICY.DESCRIPTION',
+    routerLink: ['/iam', 'policy', PolicyComponentType.IAM],
+    withRole: ['iam.policy.read'],
+};
+
+export const IAM_LOGIN_POLICY_LINK = {
+    i18nTitle: 'POLICY.LOGIN_POLICY.TITLE',
+    i18nDesc: 'POLICY.LOGIN_POLICY.DESCRIPTION',
+    routerLink: ['/iam', 'policy', PolicyComponentType.LOGIN],
+    withRole: ['iam.policy.read'],
+};
+
+export const IAM_LABEL_LINK = {
+    i18nTitle: 'POLICY.LABEL.TITLE',
+    i18nDesc: 'POLICY.LABEL.DESCRIPTION',
+    routerLink: ['/iam', 'policy', PolicyComponentType.LABEL],
+    withRole: ['iam.policy.read'],
+};
+
+
+export const ORG_COMPLEXITY_LINK = {
+    i18nTitle: 'POLICY.PWD_COMPLEXITY.TITLE',
+    i18nDesc: 'POLICY.PWD_COMPLEXITY.DESCRIPTION',
+    routerLink: ['/org', 'policy', PolicyComponentType.COMPLEXITY],
+    withRole: ['policy.read'],
+};
+
+export const ORG_IAM_POLICY_LINK = {
+    i18nTitle: 'POLICY.IAM_POLICY.TITLE',
+    i18nDesc: 'POLICY.IAM_POLICY.DESCRIPTION',
+    routerLink: ['/org', 'policy', PolicyComponentType.IAM],
+    withRole: ['iam.policy.read'],
+};
+
+export const ORG_LOGIN_POLICY_LINK = {
+    i18nTitle: 'POLICY.LOGIN_POLICY.TITLE',
+    i18nDesc: 'POLICY.LOGIN_POLICY.DESCRIPTION',
+    routerLink: ['/org', 'policy', PolicyComponentType.LOGIN],
+    withRole: ['policy.read'],
+};

console/src/app/modules/project-roles/project-role-detail/project-role-detail.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { ManagementService } from 'src/app/services/mgmt.service';
@@ -9,7 +9,7 @@ import { ToastService } from 'src/app/services/toast.service';
     templateUrl: './project-role-detail.component.html',
     styleUrls: ['./project-role-detail.component.scss'],
 })
-export class ProjectRoleDetailComponent implements OnInit {
+export class ProjectRoleDetailComponent {
     public projectId: string = '';
 
     public formGroup!: FormGroup;
@@ -27,12 +27,9 @@ export class ProjectRoleDetailComponent implements OnInit {
         this.formGroup.patchValue(data.role);
     }
 
-    ngOnInit(): void {
-    }
-
     submitForm(): void {
         if (this.formGroup.valid && this.key?.value && this.group?.value && this.displayName?.value) {
-            this.mgmtService.ChangeProjectRole(this.projectId, this.key.value, this.key.value, this.group.value)
+            this.mgmtService.ChangeProjectRole(this.projectId, this.key.value, this.displayName.value, this.group.value)
                 .then(() => {
                     this.toast.showInfo('PROJECT.TOAST.ROLECHANGED', true);
                     this.dialogRef.close(true);

console/src/app/modules/show-key-dialog/show-key-dialog.component.html

@@ -0,0 +1,30 @@
+<span class="title" mat-dialog-title>{{'USER.MACHINE.ADDED.TITLE' | translate}}</span>
+<div mat-dialog-content>
+    <p class="desc"> {{'USER.MACHINE.ADDED.DESCRIPTION' | translate}}</p>
+    <ng-container *ngIf="addedKey">
+        <div class="row">
+            <p class="left">{{'USER.MACHINE.ID' | translate}}</p>
+            <p class="right">{{addedKey?.id}}</p>
+        </div>
+        <div class="row">
+            <p class="left">{{'USER.MACHINE.TYPE' | translate}}</p>
+            <p class="right">{{'USER.MACHINE.KEYTYPES.'+addedKey?.type | translate}}</p>
+        </div>
+        <div class="row">
+            <p class="left">{{'USER.MACHINE.CREATIONDATE' | translate}}</p>
+            <p class="right">{{addedKey?.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM YYYY, HH:mm' }}
+            </p>
+        </div>
+        <div class="row">
+            <p class="left">{{'USER.MACHINE.EXPIRATIONDATE' | translate}}</p>
+            <p class="right">{{addedKey?.expirationDate | timestampToDate | localizedDate: 'EEE dd. MMM YYYY, HH:mm'}}
+            </p>
+        </div>
+        <button class="download-button" mat-stroked-button color="primary" (click)="saveFile()">Download</button>
+    </ng-container>
+</div>
+<div mat-dialog-actions class="action">
+    <button color="primary" mat-raised-button class="ok-button" (click)="closeDialog()">
+        {{'ACTIONS.CLOSE' | translate}}
+    </button>
+</div>

console/src/app/modules/show-key-dialog/show-key-dialog.component.scss

@@ -0,0 +1,51 @@
+.title {
+  font-size: 1.2rem;
+  margin-top: 0;
+}
+
+.desc {
+  color: rgb(201, 51, 71);
+  font-size: .9rem;
+}
+
+.form-field {
+  width: 100%;
+}
+
+.action {
+  display: flex;
+  justify-content: flex-end;
+
+  .ok-button {
+    margin-left: .5rem;
+  }
+}
+
+.row {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+
+  .left,
+  .right {
+    font-size: 14px;
+    flex: 1 0 auto;
+  }
+
+  .left {
+    color: var(--grey);
+    margin-right: 1rem;
+    margin-top: 0;
+    margin-bottom: .5rem;
+  }
+
+  .right {
+    margin-top: 0;
+    margin-bottom: 1rem;
+    overflow: auto;
+  }
+}
+
+.download-button {
+  margin-bottom: 1rem;
+}

console/src/app/modules/show-key-dialog/show-key-dialog.component.spec.ts

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

console/src/app/modules/show-key-dialog/show-key-dialog.component.ts

@@ -0,0 +1,30 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { saveAs } from 'file-saver';
+import { AddMachineKeyResponse } from 'src/app/proto/generated/management_pb';
+
+@Component({
+    selector: 'app-show-key-dialog',
+    templateUrl: './show-key-dialog.component.html',
+    styleUrls: ['./show-key-dialog.component.scss'],
+})
+export class ShowKeyDialogComponent {
+    public addedKey!: AddMachineKeyResponse.AsObject;
+
+    constructor(
+        public dialogRef: MatDialogRef<ShowKeyDialogComponent>,
+        @Inject(MAT_DIALOG_DATA) public data: any,
+    ) {
+        this.addedKey = data.key;
+    }
+
+    public saveFile(): void {
+        const json = atob(this.addedKey.keyDetails.toString());
+        const blob = new Blob([json], { type: 'text/plain;charset=utf-8' });
+        saveAs(blob, `${this.addedKey.id}.json`);
+    }
+
+    public closeDialog(): void {
+        this.dialogRef.close(false);
+    }
+}

console/src/app/modules/show-key-dialog/show-key-dialog.module.ts

@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { TranslateModule } from '@ngx-translate/core';
+import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
+import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
+
+import { ShowKeyDialogComponent } from './show-key-dialog.component';
+
+@NgModule({
+    declarations: [ShowKeyDialogComponent],
+    imports: [
+        CommonModule,
+        TranslateModule,
+        MatButtonModule,
+        LocalizedDatePipeModule,
+        TimestampToDatePipeModule,
+    ],
+})
+export class ShowKeyDialogModule { }