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] <support@github.com>

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>

console/package.json

@@ -45,7 +45,7 @@
   },
   "devDependencies": {
     "@angular/cli": "~11.2.0",
-    "@angular-devkit/build-angular": "~0.1102.0",
+    "@angular-devkit/build-angular": "~0.1102.1",
     "@angular/compiler-cli": "~11.0.0",
     "@types/jasmine": "~3.6.3",
     "@angular/language-service": "~11.2.0",

console/src/app/app.component.ts

@@ -143,6 +143,37 @@ export class AppComponent implements OnDestroy {
             'mdi_pin',
             this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/pin.svg'),
         );
+
+        this.matIconRegistry.addSvgIcon(
+            'mdi_format-letter-case-lower',
+            this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/format-letter-case-lower.svg'),
+        );
+
+        this.matIconRegistry.addSvgIcon(
+            'mdi_format-letter-case-upper',
+            this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/format-letter-case-upper.svg'),
+        );
+
+        this.matIconRegistry.addSvgIcon(
+            'mdi_counter',
+            this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/counter.svg'),
+        );
+
+        this.matIconRegistry.addSvgIcon(
+            'mdi_symbol',
+            this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/symbol.svg'),
+        );
+
+        this.matIconRegistry.addSvgIcon(
+            'mdi_numeric',
+            this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/numeric.svg'),
+        );
+
+        this.matIconRegistry.addSvgIcon(
+            'mdi_api',
+            this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/api.svg'),
+        );
+
         this.getProjectCount();
 
         this.orgSub = this.authService.activeOrgChanged.subscribe(org => {

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

@@ -1,7 +1,12 @@
 import { Component, Inject } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { MachineKeyType } from 'src/app/proto/generated/management_pb';
+import { AuthNKeyType, MachineKeyType } from 'src/app/proto/generated/management_pb';
+
+export enum AddKeyDialogType {
+    MACHINE = "MACHINE",
+    AUTHNKEY = "AUTHNKEY",
+}
 
 @Component({
     selector: 'app-add-key-dialog',
@@ -10,16 +15,21 @@ import { MachineKeyType } from 'src/app/proto/generated/management_pb';
 })
 export class AddKeyDialogComponent {
     public startDate: Date = new Date();
-    types: MachineKeyType[] = [
-        MachineKeyType.MACHINEKEY_JSON,
-    ];
-    public type: MachineKeyType = MachineKeyType.MACHINEKEY_JSON;
+    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);
     }

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.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

@@ -6,7 +6,7 @@ import { MatTableDataSource } from '@angular/material/table';
 import { RouterLink } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 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 +34,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 +50,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) {

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

@@ -1,6 +1,6 @@
 <app-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length"
     [timestamp]="keyResult?.viewTimestamp" [selection]="selection">
-    <ng-template appHasRole [appHasRole]="['user.write']" actions>
+    <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()">
@@ -10,7 +10,7 @@
             mat-raised-button (click)="openAddKey()">
             <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
         </a>
-    </ng-template>
+    </div>
 
     <div class="table-wrapper">
         <table class="table" mat-table [dataSource]="dataSource">
@@ -54,8 +54,7 @@
 
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"
-                [routerLink]="row.id ? ['/users', row.id ]: null">
+            <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
             </tr>
 
         </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.ts

@@ -7,12 +7,12 @@ 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 { MachineKeySearchResponse, MachineKeyType, MachineKeyView } from 'src/app/proto/generated/management_pb';
+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 } from './add-key-dialog/add-key-dialog.component';
-import { ShowKeyDialogComponent } from './show-key-dialog/show-key-dialog.component';
+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',
@@ -21,17 +21,18 @@ import { ShowKeyDialogComponent } from './show-key-dialog/show-key-dialog.compon
 })
 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;
+    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 userService: ManagementService, private dialog: MatDialog,
+    constructor(public translate: TranslateService, private mgmtService: ManagementService, private dialog: MatDialog,
         private toast: ToastService) {
         this.selection.changed.subscribe(() => {
             this.changedSelection.emit(this.selection.selected);
@@ -62,7 +63,7 @@ export class MachineKeysComponent implements OnInit {
 
     public deleteSelectedKeys(): void {
         const mappedDeletions = this.selection.selected.map(value => {
-            return this.userService.DeleteMachineKey(value.id, this.userId);
+            return this.mgmtService.DeleteMachineKey(value.id, this.userId);
         });
         Promise.all(mappedDeletions).then(() => {
             this.selection.clear();
@@ -97,7 +98,7 @@ export class MachineKeysComponent implements OnInit {
                 }
 
                 if (type) {
-                    return this.userService.AddMachineKey(this.userId, type, date).then((response) => {
+                    return this.mgmtService.AddMachineKey(this.userId, type, date).then((response) => {
                         if (response) {
                             setTimeout(() => {
                                 this.refreshPage();
@@ -106,6 +107,7 @@ export class MachineKeysComponent implements OnInit {
                             this.dialog.open(ShowKeyDialogComponent, {
                                 data: {
                                     key: response.toObject(),
+                                    type: AddKeyDialogType.MACHINE
                                 },
                                 width: '400px',
                             });
@@ -121,14 +123,16 @@ export class MachineKeysComponent implements OnInit {
     private async getData(limit: number, offset: number): Promise<void> {
         this.loadingSubject.next(true);
 
-        this.userService.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);
-        });
+        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 {

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;
             }
 

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/pages/orgs/org-detail/org-detail.component.html

@@ -40,13 +40,15 @@
                 <span *ngIf="org?.id" class="second">{{ org.id }}</span>
             </div>
             <div class="meta-row">
-                <span class="first">{{'ORG.PAGES.PRIMARYDOMAIN'  | translate}}</span>
+                <span class="first">{{'ORG.PAGES.PRIMARYDOMAIN' | translate}}</span>
                 <span class="second"><span style="display: block;">{{primaryDomain}}</span></span>
             </div>
             <div class="meta-row">
-                <span class="first">{{'ORG.PAGES.STATE'  | translate}}</span>
-                <span *ngIf="org && org.state !== undefined"
-                    class="second">{{'ORG.STATE.'+org.state | translate}}</span>
+                <span class="first">{{'ORG.PAGES.STATE' | translate}}</span>
+                <span *ngIf="org && org.state !== undefined" class="state"
+                    [ngClass]="{'active': org.state === OrgState.ORGSTATE_ACTIVE, 'inactive': org.state === OrgState.ORGSTATE_INACTIVE}">{{'ORG.STATE.'+org.state
+                    |
+                    translate}}</span>
             </div>
         </div>
 

console/src/app/pages/projects/apps/app-create/app-create.component.html

@@ -15,7 +15,8 @@
         {{'APP.OIDC.PROSWITCH' | translate}}
     </mat-checkbox>
 
-    <mat-horizontal-stepper class="stepper" *ngIf="!devmode" linear #stepper labelPosition="bottom">
+    <mat-horizontal-stepper class="stepper" *ngIf="!devmode" linear #stepper labelPosition="bottom"
+        (selectionChange)="changeStep($event)">
         <mat-step [stepControl]="firstFormGroup" [editable]="true">
             <form [formGroup]="firstFormGroup">
                 <ng-template matStepLabel>{{'APP.OIDC.NAMEANDTYPESECTION' | translate}}</ng-template>
@@ -29,8 +30,9 @@
 
                 <p class="step-title">{{'APP.OIDC.TYPETITLE' | translate}}</p>
 
-                <app-type-radio [types]="oidcAppTypes" (selectedType)="changedAppType($event)"
-                    [selected]="applicationType?.value"></app-type-radio>
+                <app-type-radio [types]="appTypes" (selectedType)="appType?.setValue($event)"
+                    [selected]="appType?.value">
+                </app-type-radio>
                 <div class="actions">
                     <button mat-raised-button [disabled]="firstFormGroup.invalid" color="primary"
                         matStepperNext>{{'ACTIONS.CONTINUE' | translate}}</button>
@@ -42,10 +44,11 @@
         <mat-step *ngIf="oidcApp.applicationType !== OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE"
             [stepControl]="secondFormGroup" [editable]="true">
             <form [formGroup]="secondFormGroup">
-                <ng-template matStepLabel>{{'APP.OIDC.AUTHMETHODSECTION' | translate}}</ng-template>
+                <ng-template matStepLabel>{{'APP.AUTHMETHODSECTION' | translate}}</ng-template>
 
                 <app-auth-method-radio [authMethods]="authMethods" [selected]="authMethod?.value"
-                    (selectedMethod)="changedAppAuthMethod($event)">
+                    [isOIDC]="appType?.value?.createType == AppCreateType.OIDC"
+                    (selectedMethod)="authMethod?.setValue($event)">
                 </app-auth-method-radio>
 
                 <div class="actions">
@@ -57,7 +60,8 @@
             </form>
         </mat-step>
 
-        <mat-step [editable]="true">
+        <!-- show redirect step only for OIDC apps -->
+        <mat-step *ngIf="appType?.value?.createType == AppCreateType.OIDC" [editable]="true">
             <ng-template matStepLabel>{{'APP.OIDC.REDIRECTSECTION' | translate}}</ng-template>
 
             <p class="step-title">{{'APP.OIDC.REDIRECTTITLE' | translate}}</p>
@@ -68,8 +72,9 @@
                 {{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</p>
 
             <cnsl-redirect-uris class="redirect-section" [canWrite]="true"
+                [isNative]="oidcApp.applicationType == OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE"
                 (changedUris)="oidcApp.redirectUrisList = $event" [urisList]="oidcApp.redirectUrisList"
-                title="{{ 'APP.OIDC.REDIRECT' | translate }}">
+                [getValues]="requestRedirectValuesSubject$" title="{{ 'APP.OIDC.REDIRECT' | translate }}">
             </cnsl-redirect-uris>
 
             <p class="step-title">{{'APP.OIDC.POSTREDIRECTTITLE' | translate}}</p>
@@ -82,7 +87,9 @@
 
             <cnsl-redirect-uris class="redirect-section" [canWrite]="true"
                 (changedUris)="oidcApp.postLogoutRedirectUrisList = $event"
-                [urisList]="oidcApp.postLogoutRedirectUrisList" title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}">
+                [urisList]="oidcApp.postLogoutRedirectUrisList" title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}"
+                [getValues]="requestRedirectValuesSubject$"
+                [isNative]="oidcApp.applicationType == OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE">
             </cnsl-redirect-uris>
 
             <div class="actions">
@@ -103,78 +110,94 @@
                     {{oidcApp.name}}
                 </span>
             </div>
-            <div class="row">
-                <span class="left">
-                    {{ 'APP.TYPE' | translate }}
-                </span>
-                <span class="right">
-                    {{'APP.OIDC.APPTYPE'+oidcApp.applicationType | translate}}
-                </span>
-            </div>
-            <div class="row">
-                <span class="left">
-                    {{ 'APP.GRANT' | translate }}
-                </span>
-                <span class="right" *ngIf="oidcApp.grantTypesList?.length > 0">
-                    [<span *ngFor="let element of oidcApp.grantTypesList; index as i">
-                        {{'APP.OIDC.GRANT'+element | translate}}
-                        {{i < oidcApp.grantTypesList.length - 1 ? ', ' : '' }} </span>]
-                    </span>
-            </div>
-            <div class="row">
-                <span class="left">
-                    {{ 'APP.OIDC.RESPONSE' | translate }}
-                </span>
-                <span class="right" *ngIf="oidcApp.responseTypesList?.length > 0">
-                    [<span *ngFor="let element of oidcApp.responseTypesList; index as i">
-                        {{('APP.OIDC.RESPONSE'+element | translate)}}
-                        {{i < oidcApp.responseTypesList.length - 1 ? ', ' : '' }} </span>]
-                    </span>
-            </div>
 
-            <div class="row">
-                <span class="left">
-                    {{ 'APP.OIDC.AUTHMETHOD' | translate }}
-                </span>
-                <span class="right">
-                    <span>
-                        {{'APP.OIDC.AUTHMETHOD'+oidcApp?.authMethodType | translate}}
+            <ng-container *ngIf="appType?.value?.createType == AppCreateType.OIDC">
+                <div class="row">
+                    <span class="left">
+                        {{ 'APP.TYPE' | translate }}
                     </span>
-                </span>
-            </div>
+                    <span class="right">
+                        {{'APP.OIDC.APPTYPE.'+oidcApp.applicationType | translate}}
+                    </span>
+                </div>
+                <div class="row">
+                    <span class="left">
+                        {{ 'APP.GRANT' | translate }}
+                    </span>
+                    <span class="right" *ngIf="oidcApp.grantTypesList?.length > 0">
+                        [<span *ngFor="let element of oidcApp.grantTypesList; index as i">
+                            {{'APP.OIDC.GRANT.'+element | translate}}
+                            {{i < oidcApp.grantTypesList.length - 1 ? ', ' : '' }} </span>]
+                        </span>
+                </div>
+                <div class="row">
+                    <span class="left">
+                        {{ 'APP.OIDC.RESPONSETYPE' | translate }}
+                    </span>
+                    <span class="right" *ngIf="oidcApp.responseTypesList?.length > 0">
+                        [<span *ngFor="let element of oidcApp.responseTypesList; index as i">
+                            {{('APP.OIDC.RESPONSE.'+element | translate)}}
+                            {{i < oidcApp.responseTypesList.length - 1 ? ', ' : '' }} </span>]
+                        </span>
+                </div>
 
-            <div class="row">
-                <span class="left">
-                    {{ 'APP.OIDC.REDIRECT' | translate }}
-                </span>
-                <span class="right" *ngIf="oidcApp.redirectUrisList?.length > 0">
-                    [<span *ngFor="let redirect of oidcApp.redirectUrisList; index as i">
-                        {{redirect}}
-                        {{i < oidcApp.redirectUrisList.length - 1 ? ', ' : '' }} </span>]
+                <div class="row">
+                    <span class="left">
+                        {{ 'APP.AUTHMETHOD' | translate }}
                     </span>
-            </div>
+                    <span class="right">
+                        <span>
+                            {{'APP.OIDC.AUTHMETHOD.'+oidcApp?.authMethodType | translate}}
+                        </span>
+                    </span>
+                </div>
 
-            <div class="row">
-                <span class="left">
-                    {{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}
-                </span>
-                <span class="right" *ngIf="oidcApp.postLogoutRedirectUrisList?.length > 0">
-                    [<span *ngFor="let redirect of oidcApp.postLogoutRedirectUrisList; index as i">
-                        {{redirect}}
-                        {{i < oidcApp.postLogoutRedirectUrisList.length - 1 ? ', ' : '' }} </span>]
+                <div class="row">
+                    <span class="left">
+                        {{ 'APP.OIDC.REDIRECT' | translate }}
                     </span>
-            </div>
+                    <span class="right" *ngIf="oidcApp.redirectUrisList?.length > 0">
+                        [<span *ngFor="let redirect of oidcApp.redirectUrisList; index as i">
+                            {{redirect}}
+                            {{i < oidcApp.redirectUrisList.length - 1 ? ', ' : '' }} </span>]
+                        </span>
+                </div>
+
+                <div class="row">
+                    <span class="left">
+                        {{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}
+                    </span>
+                    <span class="right" *ngIf="oidcApp.postLogoutRedirectUrisList?.length > 0">
+                        [<span *ngFor="let redirect of oidcApp.postLogoutRedirectUrisList; index as i">
+                            {{redirect}}
+                            {{i < oidcApp.postLogoutRedirectUrisList.length - 1 ? ', ' : '' }} </span>]
+                        </span>
+                </div>
+            </ng-container>
+
+            <ng-container *ngIf="appType?.value?.createType == AppCreateType.API">
+                <div class="row">
+                    <span class="left">
+                        {{ 'APP.AUTHMETHOD' | translate }}
+                    </span>
+                    <span class="right">
+                        <span>
+                            {{'APP.API.AUTHMETHOD.'+apiApp?.authMethodType | translate}}
+                        </span>
+                    </span>
+                </div>
+            </ng-container>
 
             <div class="actions">
                 <button mat-stroked-button color="primary" matStepperPrevious>{{'ACTIONS.BACK' | translate}}</button>
-                <button mat-raised-button color="primary" (click)="saveOIDCApp()">{{'ACTIONS.CREATE' |
+                <button mat-raised-button color="primary" (click)="createApp()">{{'ACTIONS.CREATE' |
                     translate}}</button>
             </div>
         </mat-step>
     </mat-horizontal-stepper>
 
     <div *ngIf="devmode" class="dev">
-        <form [formGroup]="form" (ngSubmit)="saveOIDCApp()">
+        <form [formGroup]="form" (ngSubmit)="createApp()">
             <div class="content">
                 <cnsl-form-field appearance="outline" class="formfield">
                     <cnsl-label>{{ 'APP.NAME' | translate }}</cnsl-label>
@@ -182,51 +205,59 @@
                 </cnsl-form-field>
 
                 <cnsl-form-field appearance="outline" class="formfield">
-                    <cnsl-label>{{ 'APP.OIDC.APPTYPE' | translate }}</cnsl-label>
-                    <mat-select formControlName="applicationType">
-                        <mat-option *ngFor="let type of oidcAppTypes" [value]="type.type">
-                            {{ 'APP.OIDC.APPTYPE'+type.type | translate }}
+                    <cnsl-label>{{ 'APP.TYPE' | translate }}</cnsl-label>
+                    <mat-select formControlName="appType">
+                        <mat-option *ngFor="let appType of appTypes" [value]="appType">
+                            {{ appType.titleI18nKey | translate }}
                         </mat-option>
                     </mat-select>
                 </cnsl-form-field>
 
-                <cnsl-form-field appearance="outline" class="formfield">
-                    <cnsl-label>{{ 'APP.OIDC.GRANT' | translate }}</cnsl-label>
-                    <mat-select formControlName="grantTypesList" multiple>
-                        <mat-option *ngFor="let grant of oidcGrantTypes" [value]="grant.type">
-                            {{ ('APP.OIDC.GRANT' + grant.type) | translate }}
-                        </mat-option>
-                    </mat-select>
-                </cnsl-form-field>
+                <ng-container *ngIf="formappType?.value?.createType == AppCreateType.OIDC">
+                    <cnsl-form-field appearance="outline" class="formfield">
+                        <cnsl-label>{{ 'APP.OIDC.GRANTTYPE' | translate }}</cnsl-label>
+                        <mat-select formControlName="grantTypesList" multiple>
+                            <mat-option *ngFor="let grant of oidcGrantTypes" [value]="grant.type">
+                                {{ ('APP.OIDC.GRANT.' + grant.type) | translate }}
+                            </mat-option>
+                        </mat-select>
+                    </cnsl-form-field>
+
+                    <cnsl-form-field appearance="outline" class="formfield">
+                        <cnsl-label>{{ 'APP.OIDC.RESPONSETYPE' | translate }}</cnsl-label>
+                        <mat-select formControlName="responseTypesList" multiple>
+                            <mat-option *ngFor="let type of oidcResponseTypes" [value]="type.type">
+                                {{ 'APP.OIDC.RESPONSE.'+type.type | translate }}
+                            </mat-option>
+                        </mat-select>
+                    </cnsl-form-field>
+                </ng-container>
 
                 <cnsl-form-field appearance="outline" class="formfield">
-                    <cnsl-label>{{ 'APP.OIDC.RESPONSE' | translate }}</cnsl-label>
-                    <mat-select formControlName="responseTypesList" multiple>
-                        <mat-option *ngFor="let type of oidcResponseTypes" [value]="type.type">
-                            {{ 'APP.OIDC.RESPONSE'+type.type | translate }}
-                        </mat-option>
-                    </mat-select>
-                </cnsl-form-field>
-
-                <cnsl-form-field appearance="outline" class="formfield">
-                    <cnsl-label>{{ 'APP.OIDC.AUTHMETHOD' | translate }}</cnsl-label>
+                    <cnsl-label>{{ 'APP.AUTHMETHOD' | translate }}</cnsl-label>
                     <mat-select formControlName="authMethodType">
-                        <mat-option *ngFor="let type of oidcAuthMethodType" [value]="type.type">
-                            {{ 'APP.OIDC.AUTHMETHOD'+type.type | translate }}
+                        <mat-option *ngFor="let type of authMethodTypes" [value]="type.type">
+                            <span *ngIf="type.oidc">{{ 'APP.OIDC.AUTHMETHOD.'+type.type | translate }}</span>
+                            <span *ngIf="type.api">{{ 'APP.API.AUTHMETHOD.'+type.type | translate }}</span>
                         </mat-option>
                     </mat-select>
                 </cnsl-form-field>
+            </div>
 
+            <div class="content" *ngIf="formappType?.value?.createType == AppCreateType.OIDC">
                 <div class="formfield full-width">
                     <cnsl-redirect-uris class="redirect-section" [canWrite]="true"
                         (changedUris)="oidcApp.redirectUrisList = $event" [urisList]="oidcApp.redirectUrisList"
-                        title="{{ 'APP.OIDC.REDIRECT' | translate }}">
+                        title="{{ 'APP.OIDC.REDIRECT' | translate }}" [getValues]="requestRedirectValuesSubject$"
+                        [isNative]="oidcApp.applicationType == OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE">
                     </cnsl-redirect-uris>
 
                     <cnsl-redirect-uris class="redirect-section" [canWrite]="true"
                         (changedUris)="oidcApp.postLogoutRedirectUrisList = $event"
                         [urisList]="oidcApp.postLogoutRedirectUrisList"
-                        title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}">
+                        title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}"
+                        [getValues]="requestRedirectValuesSubject$"
+                        [isNative]="oidcApp.applicationType == OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE">
                     </cnsl-redirect-uris>
                 </div>
             </div>

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

@@ -4,14 +4,17 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Params, Router } from '@angular/router';
-import { Subscription } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
+import { Subject, Subscription } from 'rxjs';
+import { debounceTime, takeUntil } from 'rxjs/operators';
 import { RadioItemAuthType } from 'src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component';
 import {
+    APIApplicationCreate,
+    APIAuthMethodType,
     Application,
     OIDCApplicationCreate,
     OIDCApplicationType,
     OIDCAuthMethodType,
+    OIDCConfig,
     OIDCGrantType,
     OIDCResponseType,
 } from 'src/app/proto/generated/management_pb';
@@ -21,11 +24,15 @@ import { ToastService } from 'src/app/services/toast.service';
 import {
     WEB_TYPE,
     NATIVE_TYPE,
-    USER_AGENT_TYPE
+    USER_AGENT_TYPE,
+    API_TYPE,
+    RadioItemAppType,
+    AppCreateType
 } from '../authtypes';
 
 import { AppSecretDialogComponent } from '../app-secret-dialog/app-secret-dialog.component';
-import { CODE_METHOD, getPartialConfigFromAuthMethod, IMPLICIT_METHOD, PKCE_METHOD, PK_JWT_METHOD, POST_METHOD } from '../authmethods';
+import { CODE_METHOD, getPartialConfigFromAuthMethod, IMPLICIT_METHOD, BASIC_AUTH_METHOD, PKCE_METHOD, PK_JWT_METHOD, POST_METHOD } from '../authmethods';
+import { StepperSelectionEvent } from '@angular/cdk/stepper';
 
 
 @Component({
@@ -35,10 +42,13 @@ import { CODE_METHOD, getPartialConfigFromAuthMethod, IMPLICIT_METHOD, PKCE_METH
 })
 export class AppCreateComponent implements OnInit, OnDestroy {
     private subscription?: Subscription;
+    private destroyed$: Subject<void> = new Subject();
     public devmode: boolean = false;
     public projectId: string = '';
     public loading: boolean = false;
+
     public oidcApp: OIDCApplicationCreate.AsObject = new OIDCApplicationCreate().toObject();
+    public apiApp: APIApplicationCreate.AsObject = new APIApplicationCreate().toObject();
 
     public oidcResponseTypes: { type: OIDCResponseType, checked: boolean; disabled: boolean; }[] = [
         { type: OIDCResponseType.OIDCRESPONSETYPE_CODE, checked: false, disabled: false },
@@ -46,22 +56,30 @@ export class AppCreateComponent implements OnInit, OnDestroy {
         { type: OIDCResponseType.OIDCRESPONSETYPE_ID_TOKEN_TOKEN, checked: false, disabled: false },
     ];
 
-    public oidcAppTypes: any = [
+    public oidcAppTypes: OIDCApplicationType[] = [
+        OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB,
+        OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE,
+        OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT,
+    ];
+    public appTypes: any = [
         WEB_TYPE,
         NATIVE_TYPE,
         USER_AGENT_TYPE,
+        API_TYPE,
     ];
 
     public authMethods: RadioItemAuthType[] = [
         PKCE_METHOD,
         CODE_METHOD,
+        PK_JWT_METHOD,
         POST_METHOD,
     ];
 
-    public oidcAuthMethodType: { type: OIDCAuthMethodType, checked: boolean, disabled: boolean; }[] = [
-        { type: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_BASIC, checked: false, disabled: false },
-        { type: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE, checked: false, disabled: false },
-        { type: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_POST, checked: false, disabled: false },
+    // set to oidc first
+    public authMethodTypes: { type: OIDCAuthMethodType | APIAuthMethodType, checked: boolean, disabled: boolean; api?: boolean; oidc?: boolean; }[] = [
+        { type: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_BASIC, checked: false, disabled: false, oidc: true },
+        { type: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE, checked: false, disabled: false, oidc: true },
+        { type: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_POST, checked: false, disabled: false, oidc: true },
     ];
 
     // stepper
@@ -71,6 +89,7 @@ export class AppCreateComponent implements OnInit, OnDestroy {
     // devmode
     public form!: FormGroup;
 
+    public AppCreateType: any = AppCreateType;
     public OIDCApplicationType: any = OIDCApplicationType;
     public OIDCGrantType: any = OIDCGrantType;
     public OIDCAuthMethodType: any = OIDCAuthMethodType;
@@ -87,6 +106,7 @@ export class AppCreateComponent implements OnInit, OnDestroy {
         ];
 
     public readonly separatorKeysCodes: number[] = [ENTER, COMMA, SPACE];
+    public requestRedirectValuesSubject$: Subject<void> = new Subject();
 
     constructor(
         private router: Router,
@@ -101,57 +121,68 @@ export class AppCreateComponent implements OnInit, OnDestroy {
             name: ['', [Validators.required]],
             responseTypesList: ['', [Validators.required]],
             grantTypesList: ['', [Validators.required]],
-            applicationType: ['', [Validators.required]],
+            appType: ['', [Validators.required]],
             authMethodType: ['', [Validators.required]],
         });
 
-        this.form.valueChanges.pipe(debounceTime(300)).subscribe((value) => {
-            this.oidcApp.name = this.formname?.value;
-            this.oidcApp.applicationType = this.formapplicationType?.value;
-            this.oidcApp.responseTypesList = this.formresponseTypesList?.value;
-            this.oidcApp.grantTypesList = this.formgrantTypesList?.value;
-            this.oidcApp.authMethodType = this.formauthMethodType?.value;
-        });
+        this.initForm();
 
         this.firstFormGroup = this.fb.group({
             name: ['', [Validators.required]],
-            applicationType: [OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB, [Validators.required]],
+            appType: [WEB_TYPE, [Validators.required]],
         });
 
         this.firstFormGroup.valueChanges.subscribe(value => {
             if (this.firstFormGroup.valid) {
                 this.oidcApp.name = this.name?.value;
-                this.oidcApp.applicationType = this.applicationType?.value;
+                this.apiApp.name = this.name?.value;
 
-                switch (this.applicationType?.value) {
-                    case OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE:
-                        this.authMethods = [
-                            PKCE_METHOD,
-                        ];
+                if (this.isStepperOIDC) {
+                    const oidcAppType = (this.appType?.value as RadioItemAppType).oidcApplicationType;
+                    if (oidcAppType !== undefined) {
+                        this.oidcApp.applicationType = oidcAppType;
+                    }
 
-                        // automatically set to PKCE and skip step
-                        this.oidcApp.responseTypesList = [OIDCResponseType.OIDCRESPONSETYPE_CODE];
-                        this.oidcApp.grantTypesList = [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE];
-                        this.oidcApp.authMethodType = OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE;
+                    switch (this.oidcApp.applicationType) {
+                        case OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE:
+                            this.authMethods = [
+                                PKCE_METHOD,
+                            ];
 
-                        break;
-                    case OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB:
-                        this.authMethods = [
-                            PKCE_METHOD,
-                            CODE_METHOD,
-                            POST_METHOD,
-                        ];
+                            // automatically set to PKCE and skip step
+                            this.oidcApp.responseTypesList = [OIDCResponseType.OIDCRESPONSETYPE_CODE];
+                            this.oidcApp.grantTypesList = [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE];
+                            this.oidcApp.authMethodType = OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE;
 
-                        this.authMethod?.setValue(PKCE_METHOD.key);
-                        break;
-                    case OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT:
-                        this.authMethods = [
-                            PKCE_METHOD,
-                            IMPLICIT_METHOD,
-                        ];
+                            break;
+                        case OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB:
+                            // PK_JWT_METHOD.recommended = false;
+                            this.authMethods = [
+                                PKCE_METHOD,
+                                CODE_METHOD,
+                                PK_JWT_METHOD,
+                                POST_METHOD,
+                            ];
 
-                        this.authMethod?.setValue(PKCE_METHOD.key);
-                        break;
+                            this.authMethod?.setValue(PKCE_METHOD.key);
+                            break;
+                        case OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT:
+                            this.authMethods = [
+                                PKCE_METHOD,
+                                IMPLICIT_METHOD,
+                            ];
+
+                            this.authMethod?.setValue(PKCE_METHOD.key);
+                            break;
+                    }
+                } else if (this.isStepperAPI) {
+                    // PK_JWT_METHOD.recommended = true;
+                    this.authMethods = [
+                        PK_JWT_METHOD,
+                        BASIC_AUTH_METHOD,
+                    ];
+
+                    this.authMethod?.setValue(PK_JWT_METHOD.key);
                 }
             }
         });
@@ -162,10 +193,12 @@ export class AppCreateComponent implements OnInit, OnDestroy {
         this.secondFormGroup.valueChanges.subscribe(form => {
             const partialConfig = getPartialConfigFromAuthMethod(form.authMethod);
 
-            if (partialConfig) {
-                this.oidcApp.responseTypesList = partialConfig.responseTypesList ?? [];
-                this.oidcApp.grantTypesList = partialConfig.grantTypesList ?? [];
-                this.oidcApp.authMethodType = partialConfig.authMethodType ?? OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE;
+            if (this.isStepperOIDC && partialConfig && partialConfig.oidc) {
+                this.oidcApp.responseTypesList = partialConfig.oidc?.responseTypesList ?? [];
+                this.oidcApp.grantTypesList = partialConfig.oidc?.grantTypesList ?? [];
+                this.oidcApp.authMethodType = partialConfig.oidc?.authMethodType ?? OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE;
+            } else if (this.isStepperAPI && partialConfig && partialConfig.api) {
+                this.apiApp.authMethodType = partialConfig.api?.authMethodType ?? APIAuthMethodType.APIAUTHMETHODTYPE_BASIC;
             }
         });
     }
@@ -176,52 +209,135 @@ export class AppCreateComponent implements OnInit, OnDestroy {
 
     public ngOnDestroy(): void {
         this.subscription?.unsubscribe();
+        this.destroyed$.next();
     }
 
-    public changedAppType(type: OIDCApplicationType) {
-        this.firstFormGroup.controls['applicationType'].setValue(type);
+    public initForm(): void {
+        this.form.valueChanges.pipe(
+            takeUntil(this.destroyed$),
+            debounceTime(150)).subscribe(() => {
+                this.oidcApp.name = this.formname?.value;
+                this.apiApp.name = this.formname?.value;
+
+                this.oidcApp.responseTypesList = this.formresponseTypesList?.value;
+                this.oidcApp.grantTypesList = this.formgrantTypesList?.value;
+
+                this.oidcApp.authMethodType = this.formauthMethodType?.value;
+                this.apiApp.authMethodType = this.formauthMethodType?.value;
+
+                const oidcAppType = (this.formappType?.value as RadioItemAppType).oidcApplicationType;
+                if (oidcAppType !== undefined) {
+                    this.oidcApp.applicationType = oidcAppType;
+                }
+            });
+
+        this.formappType?.valueChanges.pipe(takeUntil(this.destroyed$)).subscribe(() => {
+            this.setDevFormValidators();
+        });
     }
 
-    public changedAppAuthMethod(methodKey: string) {
-        console.log(methodKey);
-        this.secondFormGroup.controls['authMethod'].setValue(methodKey);
+    public setDevFormValidators(): void {
+        if (this.isDevOIDC) {
+            const grantTypesControl = new FormControl('', [Validators.required]);
+            const responseTypesControl = new FormControl('', [Validators.required]);
+
+            this.form.addControl('grantTypesList', grantTypesControl);
+            this.form.addControl('responseTypesList', responseTypesControl);
+
+            this.authMethodTypes = [
+                { type: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_BASIC, checked: false, disabled: false, oidc: true },
+                { type: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE, checked: false, disabled: false, oidc: true },
+                { type: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_POST, checked: false, disabled: false, oidc: true },
+            ];
+            this.authMethod?.setValue(OIDCAuthMethodType.OIDCAUTHMETHODTYPE_BASIC);
+        } else if (this.isDevAPI) {
+            this.form.removeControl('grantTypesList');
+            this.form.removeControl('responseTypesList');
+
+            this.authMethodTypes = [
+                { type: APIAuthMethodType.APIAUTHMETHODTYPE_PRIVATE_KEY_JWT, checked: false, disabled: false, api: true },
+                { type: APIAuthMethodType.APIAUTHMETHODTYPE_BASIC, checked: false, disabled: false, api: true },
+            ];
+            this.authMethod?.setValue(APIAuthMethodType.APIAUTHMETHODTYPE_PRIVATE_KEY_JWT);
+        }
+        this.form.updateValueAndValidity();
+    }
+
+    public changeStep(event: StepperSelectionEvent) {
+        if (event.selectedIndex >= 2) {
+            this.requestRedirectValuesSubject$.next();
+        };
     }
 
     private async getData({ projectid }: Params): Promise<void> {
         this.projectId = projectid;
         this.oidcApp.projectId = projectid;
+        this.apiApp.projectId = projectid;
     }
 
     public close(): void {
         this._location.back();
     }
 
-    public saveOIDCApp(): void {
-        this.loading = true;
-        this.mgmtService
-            .CreateOIDCApp(this.oidcApp)
-            .then((data: Application) => {
-                this.loading = false;
-                const response = data.toObject();
-                if (response.oidcConfig?.authMethodType !== OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE) {
-                    this.showSavedDialog(response);
-                } else {
-                    this.router.navigate(['projects', this.projectId, 'apps', response.id]);
-                }
-            })
-            .catch(error => {
-                this.loading = false;
-                this.toast.showError(error);
-            });
+    public createApp(): void {
+        const appOIDCCheck = this.devmode ? this.isDevOIDC : this.isStepperOIDC;
+        const appAPICheck = this.devmode ? this.isDevAPI : this.isStepperAPI;
+
+        if (appOIDCCheck) {
+            this.requestRedirectValuesSubject$.next();
+
+            this.loading = true;
+            this.mgmtService
+                .CreateOIDCApp(this.oidcApp)
+                .then((data: Application) => {
+                    this.loading = false;
+                    const response = data.toObject();
+                    if (response.oidcConfig?.authMethodType !== OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE) {
+                        this.showSavedDialog(response);
+                    } else {
+                        this.router.navigate(['projects', this.projectId, 'apps', response.id]);
+                    }
+                })
+                .catch(error => {
+                    this.loading = false;
+                    this.toast.showError(error);
+                });
+        } else if (appAPICheck) {
+            this.loading = true;
+            this.mgmtService
+                .CreateAPIApplication(this.apiApp)
+                .then((data: Application) => {
+                    this.loading = false;
+                    const response = data.toObject();
+                    if (response.apiConfig?.authMethodType == APIAuthMethodType.APIAUTHMETHODTYPE_BASIC) {
+                        this.showSavedDialog(response);
+                    } else {
+                        this.router.navigate(['projects', this.projectId, 'apps', response.id]);
+                    }
+                })
+                .catch(error => {
+                    this.loading = false;
+                    this.toast.showError(error);
+                });
+        }
     }
 
     public showSavedDialog(app: Application.AsObject): void {
-        if (app.oidcConfig !== undefined) {
+        if (app.oidcConfig?.clientSecret !== undefined) {
             const dialogRef = this.dialog.open(AppSecretDialogComponent, {
                 data: app.oidcConfig,
             });
 
-            dialogRef.afterClosed().subscribe(result => {
+            dialogRef.afterClosed().subscribe(() => {
+                this.router.navigate(['projects', this.projectId, 'apps', app.id]);
+            });
+        }
+        else if (app.apiConfig?.clientSecret !== undefined) {
+            const dialogRef = this.dialog.open(AppSecretDialogComponent, {
+                data: app.apiConfig,
+            });
+
+            dialogRef.afterClosed().subscribe(() => {
                 this.router.navigate(['projects', this.projectId, 'apps', app.id]);
             });
         } else {
@@ -232,8 +348,8 @@ export class AppCreateComponent implements OnInit, OnDestroy {
     get name(): AbstractControl | null {
         return this.firstFormGroup.get('name');
     }
-    get applicationType(): AbstractControl | null {
-        return this.firstFormGroup.get('applicationType');
+    get appType(): AbstractControl | null {
+        return this.firstFormGroup.get('appType');
     }
     public grantTypeChecked(type: OIDCGrantType): boolean {
         return this.oidcGrantTypes.filter(gt => gt.checked).map(gt => gt.type).findIndex(t => t === type) > -1;
@@ -256,11 +372,30 @@ export class AppCreateComponent implements OnInit, OnDestroy {
     get formgrantTypesList(): AbstractControl | null {
         return this.form.get('grantTypesList');
     }
-    get formapplicationType(): AbstractControl | null {
-        return this.form.get('applicationType');
+    get formappType(): AbstractControl | null {
+        return this.form.get('appType');
     }
+    // get formapplicationType(): AbstractControl | null {
+    //     return this.form.get('applicationType');
+    // }
     get formauthMethodType(): AbstractControl | null {
         return this.form.get('authMethodType');
     }
+
+    get isDevOIDC(): boolean {
+        return (this.formappType?.value as RadioItemAppType).createType == AppCreateType.OIDC;
+    }
+
+    get isStepperOIDC(): boolean {
+        return (this.appType?.value as RadioItemAppType).createType == AppCreateType.OIDC;
+    }
+
+    get isDevAPI(): boolean {
+        return (this.formappType?.value as RadioItemAppType).createType == AppCreateType.API;
+    }
+
+    get isStepperAPI(): boolean {
+        return (this.appType?.value as RadioItemAppType).createType == AppCreateType.API;
+    }
 };
 

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

@@ -6,7 +6,9 @@
             </a>
             <div class="title-col">
                 <h1>{{app?.name}}</h1>
-                <span>{{'APP.OIDC.APPTYPE'+app?.oidcConfig?.applicationType | translate}}</span>
+                <span *ngIf="app?.oidcConfig">{{'APP.OIDC.APPTYPE.'+app?.oidcConfig?.applicationType |
+                    translate}}</span>
+                <span *ngIf="app?.apiConfig">API</span>
             </div>
             <ng-container *ngIf="isZitadel === false">
                 <ng-template appHasRole [appHasRole]="['project.app.write:'+projectId, 'project.app.write']">
@@ -54,10 +56,34 @@
             </div>
         </form>
 
-        <!-- <cnsl-info-section class="docs-line" *ngIf="docs?.discoveryEndpoint">
-            <p><strong>Discovery Endpoint:</strong> {{docs.discoveryEndpoint}}</p>
-            <p><strong>Issuer:</strong> {{docs.issuer}}</p>
-        </cnsl-info-section> -->
+        <div class="environment-wrapper">
+            <div class="environment" *ngIf="app?.oidcConfig?.clientId">
+                <span class="key">{{'APP.OIDC.INFO.CLIENTID' | translate}}</span>
+                <div class="environment-row">
+                    <span>{{this.app.oidcConfig?.clientId}}</span>
+                    <button color="primary" [disabled]="copiedKey == this.app.oidcConfig?.clientId"
+                        [matTooltip]="(copiedKey != this.app.oidcConfig?.clientId ? 'USER.PAGES.COPY' : 'USER.PAGES.COPIED' ) | translate"
+                        appCopyToClipboard [valueToCopy]="this.app.oidcConfig?.clientId"
+                        (copiedValue)="copiedKey = 'clientId'" mat-icon-button>
+                        <i *ngIf="copiedKey != 'clientId'" class="las la-clipboard"></i>
+                        <i *ngIf="copiedKey == 'clientId'" class="las la-clipboard-check"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="environment" *ngFor="let environmentV of (environmentMap | keyvalue)">
+                <span class="key">{{environmentV.key}}</span>
+                <div class="environment-row">
+                    <span>{{environmentV.value}}</span>
+                    <button color="primary" [disabled]="copiedKey == environmentV.value"
+                        [matTooltip]="(copiedKey != environmentV.value ? 'USER.PAGES.COPY' : 'USER.PAGES.COPIED' ) | translate"
+                        appCopyToClipboard [valueToCopy]="environmentV.value"
+                        (copiedValue)="copiedKey = environmentV.key" mat-icon-button>
+                        <i *ngIf="copiedKey != environmentV.key" class="las la-clipboard"></i>
+                        <i *ngIf="copiedKey == environmentV.key" class="las la-clipboard-check"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
 
         <div class="compliance"
             *ngIf="app?.oidcConfig?.complianceProblemsList && app.oidcConfig?.complianceProblemsList?.length">
@@ -70,7 +96,7 @@
             </cnsl-info-section>
         </div>
 
-        <div class="content">
+        <div class="content" *ngIf="app?.oidcConfig">
             <h3 class="full-width section-title">{{'APP.OIDC.REDIRECTSECTIONTITLE' | translate}}</h3>
 
             <mat-slide-toggle color="primary" class="devmode" [formControl]="devMode" name="devMode"
@@ -83,33 +109,47 @@
                 <span>{{'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate}}</span>
             </cnsl-info-section>
 
-            <p class="step-description"
+            <cnsl-info-section class="step-description"
                 *ngIf="applicationType?.value == OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB || applicationType?.value == OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT">
-                {{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</p>
+                {{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}
+            </cnsl-info-section>
 
             <div style="margin: .5rem" class="divider"></div>
-
-            <cnsl-redirect-uris class="redirect-section" [canWrite]="canWrite" [devMode]="devMode?.value"
+            <cnsl-redirect-uris *ngIf="applicationType?.value !== undefined" class="redirect-section"
+                [canWrite]="canWrite" [devMode]="devMode?.value" [getValues]="requestRedirectValuesSubject$"
                 (changedUris)="redirectUrisList = $event" [urisList]="redirectUrisList"
-                title="{{ 'APP.OIDC.REDIRECT' | translate }}">
+                title="{{ 'APP.OIDC.REDIRECT' | translate }}"
+                [isNative]="applicationType?.value == OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE">
             </cnsl-redirect-uris>
 
-            <cnsl-redirect-uris class="redirect-section" [canWrite]="canWrite" [devMode]="devMode?.value"
-                (changedUris)="postLogoutRedirectUrisList = $event" [urisList]="postLogoutRedirectUrisList"
-                title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}">
+            <cnsl-redirect-uris *ngIf="applicationType?.value !== undefined" class="redirect-section"
+                [canWrite]="canWrite" [devMode]="devMode?.value" (changedUris)="postLogoutRedirectUrisList = $event"
+                [urisList]="postLogoutRedirectUrisList" [getValues]="requestRedirectValuesSubject$"
+                title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}"
+                [isNative]="applicationType?.value == OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE">
             </cnsl-redirect-uris>
         </div>
 
-        <app-auth-method-radio *ngIf="authMethods && initialAuthMethod && app?.oidcConfig" [authMethods]="authMethods"
-            [selected]="initialAuthMethod" [current]="currentAuthMethod"
-            (selectedMethod)="setPartialConfigFromAuthMethod($event)">
+        <app-auth-method-radio *ngIf="authMethods && initialAuthMethod && (app?.oidcConfig || app?.apiConfig)"
+            [authMethods]="authMethods" [selected]="initialAuthMethod" [current]="currentAuthMethod"
+            [isOIDC]="app?.oidcConfig !== undefined" (selectedMethod)="setPartialConfigFromAuthMethod($event)">
         </app-auth-method-radio>
 
-        <form *ngIf="appForm" [formGroup]="appForm" (ngSubmit)="saveOIDCApp()">
+        <app-card *ngIf="currentAuthMethod == 'PK_JWT' && projectId && app?.id" [expanded]="false"
+            title="{{ 'USER.MACHINE.KEYSTITLE' | translate }}" description="{{ 'USER.MACHINE.KEYSDESC' | translate }}">
+            <app-client-keys [projectId]="projectId" [appId]="app.id"></app-client-keys>
+        </app-card>
+
+        <div *ngIf="currentAuthMethod == 'BASIC'">
+            <button [disabled]="!canWrite" mat-stroked-button
+                (click)="regenerateAPIClientSecret()">{{'APP.API.REGENERATESECRET' | translate}}</button>
+        </div>
+
+
+        <form *ngIf="oidcForm && app?.oidcConfig" [formGroup]="oidcForm" (ngSubmit)="saveOIDCApp()">
             <app-card title=" {{ 'APP.OIDC.TITLE' | translate }}" *ngIf="app && app.oidcConfig" [expanded]="false">
-                <div card-actions
-                    *ngIf="app?.oidcConfig?.authMethodType !== OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE">
-                    <button [disabled]="!canWrite" mat-stroked-button
+                <div card-actions *ngIf="currentAuthMethod == 'CODE' || currentAuthMethod == 'POST'">
+                    <button type="button" [disabled]="!canWrite" mat-stroked-button
                         (click)="regenerateOIDCClientSecret()">{{'APP.OIDC.REGENERATESECRET' | translate}}</button>
                 </div>
 
@@ -120,37 +160,37 @@
                     </cnsl-form-field>
 
                     <cnsl-form-field class="formfield" appearance="outline">
-                        <cnsl-label>{{ 'APP.OIDC.RESPONSE' | translate }}</cnsl-label>
+                        <cnsl-label>{{ 'APP.OIDC.RESPONSETYPE' | translate }}</cnsl-label>
                         <mat-select formControlName="responseTypesList" multiple>
                             <mat-option *ngFor="let type of oidcResponseTypes" [value]="type">
-                                {{ 'APP.OIDC.RESPONSE'+type | translate }}
+                                {{ 'APP.OIDC.RESPONSE.'+type | translate }}
                             </mat-option>
                         </mat-select>
                     </cnsl-form-field>
 
                     <cnsl-form-field class="formfield" appearance="outline">
-                        <cnsl-label>{{ 'APP.OIDC.GRANT' | translate }}</cnsl-label>
+                        <cnsl-label>{{ 'APP.OIDC.GRANTTYPE' | translate }}</cnsl-label>
                         <mat-select formControlName="grantTypesList" multiple>
                             <mat-option *ngFor="let grant of oidcGrantTypes" [value]="grant">
-                                {{ 'APP.OIDC.GRANT'+grant | translate }}
+                                {{ 'APP.OIDC.GRANT.'+grant | translate }}
                             </mat-option>
                         </mat-select>
                     </cnsl-form-field>
 
                     <cnsl-form-field appearance="outline" class="formfield">
-                        <cnsl-label>{{ 'APP.OIDC.APPTYPE' | translate }}</cnsl-label>
+                        <cnsl-label>{{ 'APP.APPTYPE' | translate }}</cnsl-label>
                         <mat-select formControlName="applicationType">
                             <mat-option *ngFor="let type of oidcAppTypes" [value]="type">
-                                {{ 'APP.OIDC.APPTYPE'+type | translate }}
+                                {{ 'APP.OIDC.APPTYPE.'+type | translate }}
                             </mat-option>
                         </mat-select>
                     </cnsl-form-field>
 
                     <cnsl-form-field appearance="outline" class="formfield">
-                        <cnsl-label>{{ 'APP.OIDC.AUTHMETHOD' | translate }}</cnsl-label>
+                        <cnsl-label>{{ 'APP.AUTHMETHOD' | translate }}</cnsl-label>
                         <mat-select formControlName="authMethodType">
                             <mat-option *ngFor="let type of oidcAuthMethodType" [value]="type">
-                                {{ 'APP.OIDC.AUTHMETHOD'+type | translate }}
+                                {{ 'APP.OIDC.AUTHMETHOD.'+type | translate }}
                             </mat-option>
                         </mat-select>
                     </cnsl-form-field>
@@ -200,39 +240,14 @@
             </app-card>
 
             <div class="btn-container">
-                <button class="submit-button" type="submit" color="primary" [disabled]="appForm.invalid || !canWrite"
+                <button class="submit-button" type="submit" color="primary" [disabled]="oidcForm.invalid || !canWrite"
                     mat-raised-button>
                     {{ 'ACTIONS.SAVE' | translate }}
                 </button>
             </div>
         </form>
 
-        <div class="next-steps">
-            <h5>{{'APP.PAGES.NEXTSTEPS.TITLE' | translate}}</h5>
-            <div class="row">
-                <div class="step">
-                    <h6>{{ 'APP.PAGES.NEXTSTEPS.0.TITLE' | translate }}</h6>
-                    <p>{{'APP.PAGES.NEXTSTEPS.0.DESC' | translate}}</p>
-                    <span class="fill-space"></span>
-                    <a [routerLink]="['/projects', this.projectId]" color="primary" mat-mini-fab><i
-                            class="las la-angle-right"></i></a>
-                </div>
-                <div class="step">
-                    <h6>{{ 'APP.PAGES.NEXTSTEPS.1.TITLE' | translate }}</h6>
-                    <p>{{'APP.PAGES.NEXTSTEPS.1.DESC' | translate}}</p>
-                    <span class="fill-space"></span>
-                    <a [routerLink]="['/users', 'create']" color="primary" mat-mini-fab><i
-                            class="las la-angle-right"></i></a>
-                </div>
-                <div class="step">
-                    <h6>{{ 'APP.PAGES.NEXTSTEPS.2.TITLE' | translate }}</h6>
-                    <p>{{'APP.PAGES.NEXTSTEPS.2.DESC' | translate}}</p>
-                    <span class="fill-space"></span>
-                    <a href="https://docs.zitadel.ch" color="primary" mat-mini-fab><i
-                            class="las la-angle-right"></i></a>
-                </div>
-            </div>
-        </div>
+        <cnsl-links [links]="nextLinks"></cnsl-links>
     </div>
 
 

console/src/app/pages/projects/apps/app-detail/app-detail.component.scss

@@ -44,6 +44,46 @@
   font-size: 14px;
 }
 
+.environment-wrapper {
+    padding: 1rem 0;
+    display: flex;
+    flex-wrap: wrap;
+
+    .environment {
+        min-width: 300px;
+        
+        .key {
+            font-size: 12px;
+            color: var(--grey);
+        }
+        .environment-row {
+            display: flex;
+            align-items: center;
+            overflow: hidden;
+            height: 30px;
+        
+            button {
+                transition: opacity .15s ease-in-out;
+                visibility: hidden;
+                opacity: 0;
+            
+                &[disabled] {
+                    visibility: visible;
+                    color: white;
+                    opacity: 1;
+                }
+            }
+        
+            &:hover {
+            button {
+                visibility: visible;
+                opacity: 1;
+            }
+            }
+        }
+    }
+}
+
 .compliance .problem {
   font-size: 14px;
 }
@@ -174,61 +214,3 @@
   height: 1px;
   background-color: rgba(#8795a1, .2);
 }
-
-.next-steps {
-    h5 {
-        text-transform: uppercase;
-        font-size: 14px;
-        color: var(--grey);
-    }
-
-    .row {
-        width: 100%;
-        display: flex;
-        overflow-x: auto;
-
-        .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/pages/projects/apps/app-detail/app-detail.component.ts

@@ -1,20 +1,27 @@
 import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
 import { Location } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { MatButtonToggleChange } from '@angular/material/button-toggle';
 import { MatDialog } from '@angular/material/dialog';
-import { ActivatedRoute, Params, Router } from '@angular/router';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ActivatedRoute, Params, Router, RouterLink } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { Duration } from 'google-protobuf/google/protobuf/duration_pb';
-import { Subscription } from 'rxjs';
+import { Subject, Subscription } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { RadioItemAuthType } from 'src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component';
 import { ChangeType } from 'src/app/modules/changes/changes.component';
+import { CnslLinks } from 'src/app/modules/links/links.component';
 import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
 import {
+    APIAuthMethodType,
+    APIConfig,
+    APIConfigUpdate,
     Application,
     AppState,
+    ClientSecret,
     OIDCApplicationType,
     OIDCAuthMethodType,
     OIDCConfig,
@@ -29,7 +36,7 @@ import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
 
 import { AppSecretDialogComponent } from '../app-secret-dialog/app-secret-dialog.component';
-import { CODE_METHOD, getAuthMethodFromPartialConfig, getPartialConfigFromAuthMethod, IMPLICIT_METHOD, PKCE_METHOD, PK_JWT_METHOD, POST_METHOD, CUSTOM_METHOD } from '../authmethods';
+import { CODE_METHOD, getAuthMethodFromPartialConfig, getPartialConfigFromAuthMethod, IMPLICIT_METHOD, PKCE_METHOD, PK_JWT_METHOD, POST_METHOD, CUSTOM_METHOD, BASIC_AUTH_METHOD } from '../authmethods';
 
 @Component({
     selector: 'app-app-detail',
@@ -46,11 +53,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     public addOnBlur: boolean = true;
     public readonly separatorKeysCodes: number[] = [ENTER, COMMA, SPACE];
 
-    public authMethods: RadioItemAuthType[] = [
-        PKCE_METHOD,
-        CODE_METHOD,
-        POST_METHOD,
-    ];
+    public authMethods: RadioItemAuthType[] = [];
     private subscription?: Subscription;
     public projectId: string = '';
     public app!: Application.AsObject;
@@ -83,7 +86,8 @@ export class AppDetailComponent implements OnInit, OnDestroy {
 
     public AppState: any = AppState;
     public appNameForm!: FormGroup;
-    public appForm!: FormGroup;
+    public oidcForm!: FormGroup;
+    public apiForm!: FormGroup;
 
     public redirectUrisList: string[] = [];
     public postLogoutRedirectUrisList: string[] = [];
@@ -93,9 +97,16 @@ export class AppDetailComponent implements OnInit, OnDestroy {
 
     public OIDCApplicationType: any = OIDCApplicationType;
     public OIDCAuthMethodType: any = OIDCAuthMethodType;
+    public APIAuthMethodType: any = APIAuthMethodType;
     public OIDCTokenType: any = OIDCTokenType;
 
     public ChangeType: any = ChangeType;
+
+    public requestRedirectValuesSubject$: Subject<void> = new Subject();
+    public copiedKey: any = '';
+    public environmentMap: { [key: string]: string; } = {};
+    public nextLinks: Array<CnslLinks> = [];
+
     constructor(
         public translate: TranslateService,
         private route: ActivatedRoute,
@@ -106,12 +117,26 @@ export class AppDetailComponent implements OnInit, OnDestroy {
         private mgmtService: ManagementService,
         private authService: GrpcAuthService,
         private router: Router,
+        private http: HttpClient,
+        private snackbar: MatSnackBar,
     ) {
+        this.http.get('./assets/environment.json')
+            .toPromise().then((env: any) => {
+
+                this.environmentMap = {
+                    issuer: env.issuer,
+                    adminServiceUrl: env.adminServiceUrl,
+                    mgmtServiceUrl: env.mgmtServiceUrl,
+                    authServiceUrl: env.adminServiceUrl,
+                };
+            });
+
         this.appNameForm = this.fb.group({
             state: [{ value: '', disabled: true }, []],
             name: [{ value: '', disabled: true }, [Validators.required]],
         });
-        this.appForm = this.fb.group({
+
+        this.oidcForm = this.fb.group({
             devMode: [{ value: false, disabled: true }, []],
             clientId: [{ value: '', disabled: true }],
             responseTypesList: [{ value: [], disabled: true }],
@@ -124,6 +149,10 @@ export class AppDetailComponent implements OnInit, OnDestroy {
             idTokenUserinfoAssertion: [{ value: false, disabled: true }],
             clockSkewSeconds: [{ value: 0, disabled: true }],
         });
+
+        this.apiForm = this.fb.group({
+            authMethodType: [{ value: '', disabled: true }],
+        });
     }
 
     public formatClockSkewLabel(seconds: number): string {
@@ -138,8 +167,30 @@ export class AppDetailComponent implements OnInit, OnDestroy {
         this.subscription?.unsubscribe();
     }
 
+    private initLinks(): void {
+        this.nextLinks = [
+            {
+                i18nTitle: 'APP.PAGES.NEXTSTEPS.0.TITLE',
+                i18nDesc: 'APP.PAGES.NEXTSTEPS.0.DESC',
+                routerLink: ['/projects', this.projectId],
+            },
+            {
+                i18nTitle: 'APP.PAGES.NEXTSTEPS.1.TITLE',
+                i18nDesc: 'APP.PAGES.NEXTSTEPS.1.DESC',
+                routerLink: ['/users', 'create'],
+            }, {
+                i18nTitle: 'APP.PAGES.NEXTSTEPS.2.TITLE',
+                i18nDesc: 'APP.PAGES.NEXTSTEPS.2.DESC',
+                href: 'https://docs.zitadel.ch'
+            },
+        ];
+    }
+
     private async getData({ projectid, id }: Params): Promise<void> {
         this.projectId = projectid;
+
+        this.initLinks();
+
         this.mgmtService.GetIam().then(iam => {
             this.isZitadel = iam.toObject().iamProjectId === this.projectId;
         });
@@ -149,9 +200,22 @@ export class AppDetailComponent implements OnInit, OnDestroy {
                 this.app = app.toObject();
                 this.appNameForm.patchValue(this.app);
 
-                this.getAuthMethodOptions();
                 if (this.app.oidcConfig) {
-                    this.initialAuthMethod = this.authMethodFromPartialConfig(this.app.oidcConfig);
+                    this.getAuthMethodOptions('OIDC');
+
+                    this.initialAuthMethod = this.authMethodFromPartialConfig({ oidc: this.app.oidcConfig });
+                    this.currentAuthMethod = this.initialAuthMethod;
+                    if (this.initialAuthMethod === CUSTOM_METHOD.key) {
+                        if (!this.authMethods.includes(CUSTOM_METHOD)) {
+                            this.authMethods.push(CUSTOM_METHOD);
+                        }
+                    } else {
+                        this.authMethods = this.authMethods.filter(element => element != CUSTOM_METHOD);
+                    }
+                } else if (this.app.apiConfig) {
+                    this.getAuthMethodOptions('API');
+
+                    this.initialAuthMethod = this.authMethodFromPartialConfig({ api: this.app.apiConfig });
                     this.currentAuthMethod = this.initialAuthMethod;
                     if (this.initialAuthMethod === CUSTOM_METHOD.key) {
                         if (!this.authMethods.includes(CUSTOM_METHOD)) {
@@ -164,7 +228,8 @@ export class AppDetailComponent implements OnInit, OnDestroy {
 
                 if (allowed) {
                     this.appNameForm.enable();
-                    this.appForm.enable();
+                    this.oidcForm.enable();
+                    this.apiForm.enable();
                 }
 
                 if (this.app.oidcConfig?.redirectUrisList) {
@@ -175,14 +240,14 @@ export class AppDetailComponent implements OnInit, OnDestroy {
                 }
                 if (this.app.oidcConfig?.clockSkew) {
                     const inSecs = this.app.oidcConfig?.clockSkew.seconds + this.app.oidcConfig?.clockSkew.nanos / 100000;
-                    this.appForm.controls['clockSkewSeconds'].setValue(inSecs);
+                    this.oidcForm.controls['clockSkewSeconds'].setValue(inSecs);
                 }
                 if (this.app.oidcConfig) {
-                    this.appForm.patchValue(this.app.oidcConfig);
+                    this.oidcForm.patchValue(this.app.oidcConfig);
                 }
 
-                this.appForm.valueChanges.subscribe(oidcConfig => {
-                    this.initialAuthMethod = this.authMethodFromPartialConfig(oidcConfig);
+                this.oidcForm.valueChanges.subscribe((oidcConfig) => {
+                    this.initialAuthMethod = this.authMethodFromPartialConfig({ oidc: oidcConfig });
                     if (this.initialAuthMethod === CUSTOM_METHOD.key) {
                         if (!this.authMethods.includes(CUSTOM_METHOD)) {
                             this.authMethods.push(CUSTOM_METHOD);
@@ -190,6 +255,21 @@ export class AppDetailComponent implements OnInit, OnDestroy {
                     } else {
                         this.authMethods = this.authMethods.filter(element => element != CUSTOM_METHOD);
                     }
+
+                    this.showSaveSnack();
+                });
+
+                this.apiForm.valueChanges.subscribe((apiConfig) => {
+                    this.initialAuthMethod = this.authMethodFromPartialConfig({ api: apiConfig });
+                    if (this.initialAuthMethod === CUSTOM_METHOD.key) {
+                        if (!this.authMethods.includes(CUSTOM_METHOD)) {
+                            this.authMethods.push(CUSTOM_METHOD);
+                        }
+                    } else {
+                        this.authMethods = this.authMethods.filter(element => element != CUSTOM_METHOD);
+                    }
+
+                    this.showSaveSnack();
                 });
             }).catch(error => {
                 console.error(error);
@@ -200,43 +280,68 @@ export class AppDetailComponent implements OnInit, OnDestroy {
         this.docs = (await this.mgmtService.GetZitadelDocs()).toObject();
     }
 
-    private getAuthMethodOptions(): void {
-        switch (this.app.oidcConfig?.applicationType) {
-            case OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE:
-                this.authMethods = [
-                    PKCE_METHOD,
-                    CUSTOM_METHOD,
-                ];
-                break;
-            case OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB:
-                this.authMethods = [
-                    PKCE_METHOD,
-                    CODE_METHOD,
-                    POST_METHOD,
-                ];
-                break;
-            case OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT:
-                this.authMethods = [
-                    PKCE_METHOD,
-                    IMPLICIT_METHOD,
-                ];
-                break;
+    private async showSaveSnack(): Promise<void> {
+        const message = await this.translate.get('APP.TOAST.CONFIGCHANGED').toPromise();
+        const action = await this.translate.get('ACTIONS.SAVENOW').toPromise();
+
+        const snackRef = this.snackbar.open(message, action, { duration: 5000, verticalPosition: 'top' });
+        snackRef.onAction().subscribe(() => {
+            if (this.app.oidcConfig) {
+                this.saveOIDCApp();
+            } else if (this.app.apiConfig) {
+                this.saveAPIApp();
+            }
+        });
+    }
+
+    private getAuthMethodOptions(type: string): void {
+        if (type == 'OIDC') {
+            switch (this.app.oidcConfig?.applicationType) {
+                case OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE:
+                    this.authMethods = [
+                        PKCE_METHOD,
+                        CUSTOM_METHOD,
+                    ];
+                    break;
+                case OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB:
+                    this.authMethods = [
+                        PKCE_METHOD,
+                        CODE_METHOD,
+                        PK_JWT_METHOD,
+                        POST_METHOD,
+                    ];
+                    break;
+                case OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT:
+                    this.authMethods = [
+                        PKCE_METHOD,
+                        IMPLICIT_METHOD,
+                    ];
+                    break;
+            }
+        }
+        if (type == 'API') {
+            this.authMethods = [
+                PK_JWT_METHOD,
+                BASIC_AUTH_METHOD,
+            ];
         }
     }
 
-    public authMethodFromPartialConfig(config: OIDCConfig.AsObject): string {
+    public authMethodFromPartialConfig(config: { oidc?: OIDCConfig.AsObject, api?: APIConfig.AsObject; }): string {
         const key = getAuthMethodFromPartialConfig(config);
         return key;
     }
 
     public setPartialConfigFromAuthMethod(authMethod: string): void {
         const partialConfig = getPartialConfigFromAuthMethod(authMethod);
-
-        if (partialConfig && this.app.oidcConfig) {
-            this.app.oidcConfig.responseTypesList = partialConfig.responseTypesList ?? [];
-            this.app.oidcConfig.grantTypesList = partialConfig.grantTypesList ?? [];
-            this.app.oidcConfig.authMethodType = partialConfig.authMethodType ?? OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE;
-            this.appForm.patchValue(this.app.oidcConfig);
+        if (partialConfig && partialConfig.oidc && this.app.oidcConfig) {
+            this.app.oidcConfig.responseTypesList = (partialConfig.oidc as Partial<OIDCConfig.AsObject>).responseTypesList ?? [];
+            this.app.oidcConfig.grantTypesList = (partialConfig.oidc as Partial<OIDCConfig.AsObject>).grantTypesList ?? [];
+            this.app.oidcConfig.authMethodType = (partialConfig.oidc as Partial<OIDCConfig.AsObject>).authMethodType ?? OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE;
+            this.oidcForm.patchValue(this.app.oidcConfig);
+        } else if (partialConfig && partialConfig.api && this.app.apiConfig) {
+            this.app.apiConfig.authMethodType = (partialConfig.api as Partial<APIConfig.AsObject>).authMethodType ?? APIAuthMethodType.APIAUTHMETHODTYPE_BASIC;
+            this.apiAuthMethodType?.setValue(this.app.apiConfig.authMethodType);
         }
     }
 
@@ -286,7 +391,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
             this.mgmtService
                 .UpdateApplication(this.projectId, this.app.id, this.name?.value)
                 .then(() => {
-                    this.toast.showInfo('APP.TOAST.OIDCUPDATED', true);
+                    this.toast.showInfo('APP.TOAST.UPDATED', true);
                     this.editState = false;
                 })
                 .catch(error => {
@@ -297,11 +402,12 @@ export class AppDetailComponent implements OnInit, OnDestroy {
 
 
     public saveOIDCApp(): void {
+        this.requestRedirectValuesSubject$.next();
         if (this.appNameForm.valid) {
             this.app.name = this.name?.value;
         }
 
-        if (this.appForm.valid) {
+        if (this.oidcForm.valid) {
             if (this.app.oidcConfig) {
                 this.app.oidcConfig.responseTypesList = this.responseTypesList?.value;
                 this.app.oidcConfig.grantTypesList = this.grantTypesList?.value;
@@ -340,7 +446,8 @@ export class AppDetailComponent implements OnInit, OnDestroy {
                     .UpdateOIDCAppConfig(req)
                     .then(() => {
                         if (this.app.oidcConfig) {
-                            this.currentAuthMethod = this.authMethodFromPartialConfig(this.app.oidcConfig);
+                            const config = { oidc: this.app.oidcConfig };
+                            this.currentAuthMethod = this.authMethodFromPartialConfig(config);
                         }
                         this.toast.showInfo('APP.TOAST.OIDCUPDATED', true);
                     })
@@ -351,12 +458,52 @@ export class AppDetailComponent implements OnInit, OnDestroy {
         }
     }
 
+    public saveAPIApp(): void {
+        if (this.apiForm.valid && this.app.apiConfig) {
+            this.app.apiConfig.authMethodType = this.apiAuthMethodType?.value;
+
+            const req = new APIConfigUpdate();
+            req.setProjectId(this.projectId);
+            req.setApplicationId(this.app.id);
+            req.setAuthMethodType(this.app.apiConfig.authMethodType);
+
+            this.mgmtService
+                .UpdateAPIAppConfig(req)
+                .then(() => {
+                    if (this.app.apiConfig) {
+                        const config = { api: this.app.apiConfig };
+                        this.currentAuthMethod = this.authMethodFromPartialConfig(config);
+                    }
+                    this.toast.showInfo('APP.TOAST.OIDCUPDATED', true);
+                })
+                .catch(error => {
+                    this.toast.showError(error);
+                });
+        }
+    }
+
     public regenerateOIDCClientSecret(): void {
-        this.mgmtService.RegenerateOIDCClientSecret(this.app.id, this.projectId).then((data: OIDCConfig) => {
-            this.toast.showInfo('APP.TOAST.OIDCCLIENTSECRETREGENERATED', true);
+        this.mgmtService.RegenerateOIDCClientSecret(this.app.id, this.projectId).then((data: ClientSecret) => {
+            this.toast.showInfo('APP.TOAST.CLIENTSECRETREGENERATED', true);
             this.dialog.open(AppSecretDialogComponent, {
                 data: {
-                    clientId: data.toObject().clientId,
+                    // clientId: data.toObject() as ClientSecret.AsObject.clientId,
+                    clientSecret: data.toObject().clientSecret,
+                },
+                width: '400px',
+            });
+
+        }).catch(error => {
+            this.toast.showError(error);
+        });
+    }
+
+    public regenerateAPIClientSecret(): void {
+        this.mgmtService.RegenerateAPIClientSecret(this.app.id, this.projectId).then((data: ClientSecret) => {
+            this.toast.showInfo('APP.TOAST.CLIENTSECRETREGENERATED', true);
+            this.dialog.open(AppSecretDialogComponent, {
+                data: {
+                    // clientId: data.toObject().clientId ?? '',
                     clientSecret: data.toObject().clientSecret,
                 },
                 width: '400px',
@@ -376,46 +523,50 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     }
 
     public get clientId(): AbstractControl | null {
-        return this.appForm.get('clientId');
+        return this.oidcForm.get('clientId');
     }
 
     public get responseTypesList(): AbstractControl | null {
-        return this.appForm.get('responseTypesList');
+        return this.oidcForm.get('responseTypesList');
     }
 
     public get grantTypesList(): AbstractControl | null {
-        return this.appForm.get('grantTypesList');
+        return this.oidcForm.get('grantTypesList');
     }
 
     public get applicationType(): AbstractControl | null {
-        return this.appForm.get('applicationType');
+        return this.oidcForm.get('applicationType');
     }
 
     public get authMethodType(): AbstractControl | null {
-        return this.appForm.get('authMethodType');
+        return this.oidcForm.get('authMethodType');
+    }
+
+    public get apiAuthMethodType(): AbstractControl | null {
+        return this.apiForm.get('authMethodType');
     }
 
     public get devMode(): AbstractControl | null {
-        return this.appForm.get('devMode');
+        return this.oidcForm.get('devMode');
     }
 
     public get accessTokenType(): AbstractControl | null {
-        return this.appForm.get('accessTokenType');
+        return this.oidcForm.get('accessTokenType');
     }
 
     public get idTokenRoleAssertion(): AbstractControl | null {
-        return this.appForm.get('idTokenRoleAssertion');
+        return this.oidcForm.get('idTokenRoleAssertion');
     }
 
     public get accessTokenRoleAssertion(): AbstractControl | null {
-        return this.appForm.get('accessTokenRoleAssertion');
+        return this.oidcForm.get('accessTokenRoleAssertion');
     }
 
     public get idTokenUserinfoAssertion(): AbstractControl | null {
-        return this.appForm.get('idTokenUserinfoAssertion');
+        return this.oidcForm.get('idTokenUserinfoAssertion');
     }
 
     public get clockSkewSeconds(): AbstractControl | null {
-        return this.appForm.get('clockSkewSeconds');
+        return this.oidcForm.get('clockSkewSeconds');
     }
 }

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

@@ -32,7 +32,9 @@ import { AppSecretDialogComponent } from './app-secret-dialog/app-secret-dialog.
 import { AppsRoutingModule } from './apps-routing.module';
 import { A11yModule } from '@angular/cdk/a11y';
 import { RedirectUrisComponent } from './redirect-uris/redirect-uris.component';
-
+import { LinksModule } from 'src/app/modules/links/links.module';
+import { RedirectPipeModule } from 'src/app/pipes/redirect-pipe/redirect-pipe.module';
+import { ClientKeysModule } from 'src/app/modules/client-keys/client-keys.module';
 @NgModule({
     declarations: [
         AppCreateComponent,
@@ -43,6 +45,8 @@ import { RedirectUrisComponent } from './redirect-uris/redirect-uris.component';
     imports: [
         CommonModule,
         A11yModule,
+        RedirectPipeModule,
+        LinksModule,
         AppRadioModule,
         AppsRoutingModule,
         FormsModule,
@@ -51,6 +55,7 @@ import { RedirectUrisComponent } from './redirect-uris/redirect-uris.component';
         HasRoleModule,
         MatMenuModule,
         MatChipsModule,
+        ClientKeysModule,
         MatIconModule,
         MatSelectModule,
         MatButtonToggleModule,

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

@@ -1,10 +1,10 @@
 import { RadioItemAuthType } from 'src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component';
-import { OIDCAuthMethodType, OIDCConfig, OIDCGrantType, OIDCResponseType } from 'src/app/proto/generated/management_pb';
+import { APIAuthMethodType, APIConfig, OIDCAuthMethodType, OIDCConfig, OIDCGrantType, OIDCResponseType } from 'src/app/proto/generated/management_pb';
 
 export const CODE_METHOD: RadioItemAuthType = {
     key: 'CODE',
-    titleI18nKey: 'APP.OIDC.SELECTION.AUTHMETHOD.CODE.TITLE',
-    descI18nKey: 'APP.OIDC.SELECTION.AUTHMETHOD.CODE.DESCRIPTION',
+    titleI18nKey: 'APP.AUTHMETHODS.CODE.TITLE',
+    descI18nKey: 'APP.AUTHMETHODS.CODE.DESCRIPTION',
     disabled: false,
     prefix: 'CODE',
     background: 'rgb(89 115 128)',
@@ -15,8 +15,8 @@ export const CODE_METHOD: RadioItemAuthType = {
 };
 export const PKCE_METHOD: RadioItemAuthType = {
     key: 'PKCE',
-    titleI18nKey: 'APP.OIDC.SELECTION.AUTHMETHOD.PKCE.TITLE',
-    descI18nKey: 'APP.OIDC.SELECTION.AUTHMETHOD.PKCE.DESCRIPTION',
+    titleI18nKey: 'APP.AUTHMETHODS.PKCE.TITLE',
+    descI18nKey: 'APP.AUTHMETHODS.PKCE.DESCRIPTION',
     disabled: false,
     prefix: 'PKCE',
     background: 'rgb(80 110 92)',
@@ -27,11 +27,11 @@ export const PKCE_METHOD: RadioItemAuthType = {
 };
 export const POST_METHOD: RadioItemAuthType = {
     key: 'POST',
-    titleI18nKey: 'APP.OIDC.SELECTION.AUTHMETHOD.POST.TITLE',
-    descI18nKey: 'APP.OIDC.SELECTION.AUTHMETHOD.POST.DESCRIPTION',
+    titleI18nKey: 'APP.AUTHMETHODS.POST.TITLE',
+    descI18nKey: 'APP.AUTHMETHODS.POST.DESCRIPTION',
     disabled: false,
     prefix: 'POST',
-    background: '#595d80',
+    background: 'rgb(144 75 75)',
     responseType: OIDCResponseType.OIDCRESPONSETYPE_CODE,
     grantType: OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE,
     authMethod: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_POST,
@@ -39,19 +39,34 @@ export const POST_METHOD: RadioItemAuthType = {
 };
 export const PK_JWT_METHOD: RadioItemAuthType = {
     key: 'PK_JWT',
-    titleI18nKey: 'APP.OIDC.SELECTION.AUTHMETHOD.ALTERNATIVE.TITLE',
-    descI18nKey: 'APP.OIDC.SELECTION.AUTHMETHOD.ALTERNATIVE.DESCRIPTION',
+    titleI18nKey: 'APP.AUTHMETHODS.PK_JWT.TITLE',
+    descI18nKey: 'APP.AUTHMETHODS.PK_JWT.DESCRIPTION',
     disabled: false,
-    prefix: 'PK_JWT',
-    background: '#6a506e',
+    prefix: 'JWT',
+    background: 'rgb(89, 93, 128)',
+    responseType: OIDCResponseType.OIDCRESPONSETYPE_CODE,
+    grantType: OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE,
+    authMethod: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_PRIVATE_KEY_JWT,
+    apiAuthMethod: APIAuthMethodType.APIAUTHMETHODTYPE_PRIVATE_KEY_JWT,
+    // recommended: true,
+};
+export const BASIC_AUTH_METHOD: RadioItemAuthType = {
+    key: 'BASIC',
+    titleI18nKey: 'APP.AUTHMETHODS.BASIC.TITLE',
+    descI18nKey: 'APP.AUTHMETHODS.BASIC.DESCRIPTION',
+    disabled: false,
+    prefix: 'BASIC',
+    background: 'rgb(144 75 75)',
     responseType: OIDCResponseType.OIDCRESPONSETYPE_CODE,
     grantType: OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE,
     authMethod: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_POST,
+    apiAuthMethod: APIAuthMethodType.APIAUTHMETHODTYPE_BASIC,
 };
+
 export const IMPLICIT_METHOD: RadioItemAuthType = {
     key: 'IMPLICIT',
-    titleI18nKey: 'APP.OIDC.SELECTION.AUTHMETHOD.IMPLICIT.TITLE',
-    descI18nKey: 'APP.OIDC.SELECTION.AUTHMETHOD.IMPLICIT.DESCRIPTION',
+    titleI18nKey: 'APP.AUTHMETHODS.IMPLICIT.TITLE',
+    descI18nKey: 'APP.AUTHMETHODS.IMPLICIT.DESCRIPTION',
     disabled: false,
     prefix: 'IMP',
     background: 'rgb(144 75 75)',
@@ -60,51 +75,84 @@ export const IMPLICIT_METHOD: RadioItemAuthType = {
     authMethod: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE,
     notRecommended: true,
 };
+
 export const CUSTOM_METHOD: RadioItemAuthType = {
     key: 'CUSTOM',
-    titleI18nKey: 'APP.OIDC.SELECTION.AUTHMETHOD.CUSTOM.TITLE',
-    descI18nKey: 'APP.OIDC.SELECTION.AUTHMETHOD.CUSTOM.DESCRIPTION',
+    titleI18nKey: 'APP.AUTHMETHODS.CUSTOM.TITLE',
+    descI18nKey: 'APP.AUTHMETHODS.CUSTOM.DESCRIPTION',
     disabled: false,
     prefix: 'CUSTOM',
     background: '#333',
 };
 
-export function getPartialConfigFromAuthMethod(authMethod: string): Partial<OIDCConfig.AsObject> | undefined {
-    let config: Partial<OIDCConfig.AsObject>;
+export function getPartialConfigFromAuthMethod(authMethod: string): {
+    oidc?: Partial<OIDCConfig.AsObject>;
+    api?: Partial<APIConfig.AsObject>;
+} | undefined {
+    let config: {
+        oidc?: Partial<OIDCConfig.AsObject>,
+        api?: Partial<APIConfig.AsObject>,
+    };
     switch (authMethod) {
         case CODE_METHOD.key:
             config = {
-                responseTypesList: [OIDCResponseType.OIDCRESPONSETYPE_CODE],
-                grantTypesList: [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
-                authMethodType: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_BASIC,
+                oidc: {
+                    responseTypesList: [OIDCResponseType.OIDCRESPONSETYPE_CODE],
+                    grantTypesList: [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
+                    authMethodType: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_BASIC,
+                },
             };
             return config;
         case PKCE_METHOD.key:
             config = {
-                responseTypesList: [OIDCResponseType.OIDCRESPONSETYPE_CODE],
-                grantTypesList: [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
-                authMethodType: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE,
+                oidc: {
+                    responseTypesList: [OIDCResponseType.OIDCRESPONSETYPE_CODE],
+                    grantTypesList: [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
+                    authMethodType: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE,
+                }
             };
             return config;
         case POST_METHOD.key:
             config = {
-                responseTypesList: [OIDCResponseType.OIDCRESPONSETYPE_CODE],
-                grantTypesList: [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
-                authMethodType: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_POST,
+                oidc: {
+                    responseTypesList: [OIDCResponseType.OIDCRESPONSETYPE_CODE],
+                    grantTypesList: [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
+                    authMethodType: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_POST,
+                }
+            };
+            return config;
+        case PK_JWT_METHOD.key:
+            config = {
+                oidc: {
+                    responseTypesList: [OIDCResponseType.OIDCRESPONSETYPE_CODE],
+                    grantTypesList: [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
+                    authMethodType: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_PRIVATE_KEY_JWT,
+                },
+                api: {
+                    authMethodType: APIAuthMethodType.APIAUTHMETHODTYPE_PRIVATE_KEY_JWT,
+                }
+            };
+            return config;
+        case BASIC_AUTH_METHOD.key:
+            config = {
+                oidc: {
+                    authMethodType: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_BASIC,
+                },
+                api: {
+                    authMethodType: APIAuthMethodType.APIAUTHMETHODTYPE_BASIC,
+                }
             };
             return config;
-        // case PK_JWT_METHOD.key:
-        //     config = {
-        //         responseTypesList: [OIDCResponseType.OIDCRESPONSETYPE_CODE],
-        //         grantTypesList: [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
-        //         authMethodType: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE,
-        //     };
-        //     return config;
         case IMPLICIT_METHOD.key:
             config = {
-                responseTypesList: [OIDCResponseType.OIDCRESPONSETYPE_ID_TOKEN_TOKEN],
-                grantTypesList: [OIDCGrantType.OIDCGRANTTYPE_IMPLICIT],
-                authMethodType: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE,
+                oidc: {
+                    responseTypesList: [OIDCResponseType.OIDCRESPONSETYPE_ID_TOKEN_TOKEN],
+                    grantTypesList: [OIDCGrantType.OIDCGRANTTYPE_IMPLICIT],
+                    authMethodType: OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE,
+                },
+                api: {
+                    authMethodType: APIAuthMethodType.APIAUTHMETHODTYPE_PRIVATE_KEY_JWT,
+                }
             };
             return config;
         default:
@@ -112,55 +160,66 @@ export function getPartialConfigFromAuthMethod(authMethod: string): Partial<OIDC
     }
 }
 
-export function getAuthMethodFromPartialConfig(config: Partial<OIDCConfig.AsObject> | OIDCConfig.AsObject): string {
-    const toCheck = [config.responseTypesList, config.grantTypesList, config.authMethodType];
-    const code = JSON.stringify(
-        [
-            [OIDCResponseType.OIDCRESPONSETYPE_CODE],
-            [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
-            OIDCAuthMethodType.OIDCAUTHMETHODTYPE_BASIC,
-        ]
-    );
+export function getAuthMethodFromPartialConfig(config: { oidc?: Partial<OIDCConfig.AsObject>, api?: Partial<APIConfig.AsObject>; }): string {
+    if (config?.oidc) {
+        const toCheck = [config.oidc.responseTypesList, config.oidc.grantTypesList, config.oidc.authMethodType];
+        const code = JSON.stringify(
+            [
+                [OIDCResponseType.OIDCRESPONSETYPE_CODE],
+                [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
+                OIDCAuthMethodType.OIDCAUTHMETHODTYPE_BASIC,
+            ]
+        );
 
-    const pkce = JSON.stringify(
-        [
-            [OIDCResponseType.OIDCRESPONSETYPE_CODE],
-            [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
-            OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE,
-        ]
-    );
+        const pkce = JSON.stringify(
+            [
+                [OIDCResponseType.OIDCRESPONSETYPE_CODE],
+                [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
+                OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE,
+            ]
+        );
 
-    const post = JSON.stringify(
-        [
-            [OIDCResponseType.OIDCRESPONSETYPE_CODE],
-            [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
-            OIDCAuthMethodType.OIDCAUTHMETHODTYPE_POST,
-        ]
-    );
+        const post = JSON.stringify(
+            [
+                [OIDCResponseType.OIDCRESPONSETYPE_CODE],
+                [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
+                OIDCAuthMethodType.OIDCAUTHMETHODTYPE_POST,
+            ]
+        );
 
-    // const pk_jwt = JSON.stringify(
-    //     [
-    //         [OIDCResponseType.OIDCRESPONSETYPE_CODE],
-    //         [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
-    //         OIDCAuthMethodType.OIDCAUTHMETHODTYPE_BASIC,
-    //     ]
-    // );
+        const pk_jwt = JSON.stringify(
+            [
+                [OIDCResponseType.OIDCRESPONSETYPE_CODE],
+                [OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE],
+                OIDCAuthMethodType.OIDCAUTHMETHODTYPE_PRIVATE_KEY_JWT,
+            ]
+        );
 
-    const implicit = JSON.stringify(
-        [
-            [OIDCResponseType.OIDCRESPONSETYPE_ID_TOKEN_TOKEN],
-            [OIDCGrantType.OIDCGRANTTYPE_IMPLICIT],
-            OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE,
-        ]
-    );
+        const implicit = JSON.stringify(
+            [
+                [OIDCResponseType.OIDCRESPONSETYPE_ID_TOKEN_TOKEN],
+                [OIDCGrantType.OIDCGRANTTYPE_IMPLICIT],
+                OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE,
+            ]
+        );
 
-    switch (JSON.stringify(toCheck)) {
-        case code: return CODE_METHOD.key;
-        case pkce: return PKCE_METHOD.key;
-        case post: return POST_METHOD.key;
-        // case pk_jwt: return PK_JWT_METHOD.key;
-        case implicit: return IMPLICIT_METHOD.key;
-        default:
-            return CUSTOM_METHOD.key;
+        switch (JSON.stringify(toCheck)) {
+            case code: return CODE_METHOD.key;
+            case pkce: return PKCE_METHOD.key;
+            case post: return POST_METHOD.key;
+            case pk_jwt: return PK_JWT_METHOD.key;
+            case implicit: return IMPLICIT_METHOD.key;
+            default:
+                return CUSTOM_METHOD.key;
+        }
+    } else if (config.api && config.api.authMethodType !== undefined) {
+        switch (config.api.authMethodType.toString()) {
+            case APIAuthMethodType.APIAUTHMETHODTYPE_PRIVATE_KEY_JWT.toString(): return PK_JWT_METHOD.key;
+            case APIAuthMethodType.APIAUTHMETHODTYPE_BASIC.toString(): return BASIC_AUTH_METHOD.key;
+            default:
+                return CUSTOM_METHOD.key;
+        }
+    } else {
+        return CUSTOM_METHOD.key;
     }
 }

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

@@ -1,25 +1,62 @@
 import { OIDCApplicationType } from 'src/app/proto/generated/management_pb';
 
+// export enum AppType {
+//     "WEB",
+//     "USER_AGENT",
+//     "NATIVE",
+//     "API"
+// }
+
+export enum AppCreateType {
+    API = "API",
+    OIDC = "OIDC"
+}
+
+export interface RadioItemAppType {
+    // key: string;
+    createType: AppCreateType;
+    oidcApplicationType?: OIDCApplicationType;
+    titleI18nKey: string;
+    descI18nKey: string;
+    prefix: string;
+    background: string;
+}
+
 export const WEB_TYPE = {
+    // key: AppType.WEB,
     titleI18nKey: 'APP.OIDC.SELECTION.APPTYPE.WEB.TITLE',
     descI18nKey: 'APP.OIDC.SELECTION.APPTYPE.WEB.DESCRIPTION',
-    type: OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB,
+    createType: AppCreateType.OIDC,
+    oidcApplicationType: OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB,
     prefix: 'WEB',
     background: 'rgb(80, 110, 110)',
 };
 
 export const USER_AGENT_TYPE = {
+    // key: AppType.USER_AGENT,
     titleI18nKey: 'APP.OIDC.SELECTION.APPTYPE.USERAGENT.TITLE',
     descI18nKey: 'APP.OIDC.SELECTION.APPTYPE.USERAGENT.DESCRIPTION',
-    type: OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT,
+    createType: AppCreateType.OIDC,
+    oidcApplicationType: OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT,
     prefix: 'UA',
     background: '#6a506e',
 };
 
 export const NATIVE_TYPE = {
+    // key: AppType.NATIVE,
     titleI18nKey: 'APP.OIDC.SELECTION.APPTYPE.NATIVE.TITLE',
     descI18nKey: 'APP.OIDC.SELECTION.APPTYPE.NATIVE.DESCRIPTION',
-    type: OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE,
+    createType: AppCreateType.OIDC,
+    oidcApplicationType: OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE,
     prefix: 'N',
     background: '#595d80',
 };
+
+export const API_TYPE = {
+    // key: AppType.API,
+    titleI18nKey: 'APP.API.SELECTION.TITLE',
+    descI18nKey: 'APP.API.SELECTION.DESCRIPTION',
+    createType: AppCreateType.API,
+    prefix: 'API',
+    background: 'rgb(73,73,73)',
+};

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

@@ -15,8 +15,7 @@
         <span class="uri"
             [ngClass]="{'green': !devMode && uri?.startsWith('https://'), 'red': !devMode && !uri?.startsWith('https://')}">{{uri}}</span>
         <span class="fill-space"></span>
-        <i *ngIf="!devMode && !uri?.startsWith('https://')" class="las la-exclamation red"></i>
-        <!-- <i *ngIf="!devMode && uri?.startsWith('https://')" class="las la-check green"></i> -->
+        <i *ngIf="!devMode && !(uri | redirect : isNative)" class="las la-exclamation red"></i>
 
         <button matTooltip="{{'ACTIONS.DELETE' | translate}}" mat-icon-button (click)="remove(uri)" class="icon-button">
             <mat-icon>cancel</mat-icon>

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

@@ -1,24 +1,38 @@
-import { Component, EventEmitter, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { FormControl } from '@angular/forms';
+import { Observable, Subscription } from 'rxjs';
 
 @Component({
     selector: 'cnsl-redirect-uris',
     templateUrl: './redirect-uris.component.html',
     styleUrls: ['./redirect-uris.component.scss']
 })
-export class RedirectUrisComponent implements OnInit {
+export class RedirectUrisComponent implements OnInit, OnDestroy {
     @Input() title: string = '';
     @Input() devMode: boolean = false;
     @Input() canWrite: boolean = false;
+    @Input() isNative!: boolean;
     @Input() public urisList: string[] = [];
     @Input() public redirectControl: FormControl = new FormControl({ value: '', disabled: true });
     @Input() public changedUris: EventEmitter<string[]> = new EventEmitter();
+    @Input() public getValues: Observable<void> = new Observable();
+
+    @ViewChild('redInput') input!: any;
+    private sub: Subscription = new Subscription();
     constructor() { }
 
     ngOnInit(): void {
         if (this.canWrite) {
             this.redirectControl.enable();
         }
+
+        this.sub = this.getValues.subscribe(() => {
+            this.add(this.input.nativeElement);
+        });
+    }
+
+    ngOnDestroy(): void {
+        this.sub.unsubscribe();
     }
 
     public add(input: any): void {
@@ -33,7 +47,6 @@ export class RedirectUrisComponent implements OnInit {
     }
 
     public remove(redirect: any): void {
-        console.log(redirect);
         const index = this.urisList.indexOf(redirect);
 
         if (index >= 0) {

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

@@ -12,18 +12,23 @@
 
     <div [routerLink]="['/projects', projectId, 'apps', app.id ]" class="app-wrap"
         *ngFor="let app of appsSubject | async"
-        matTooltip="{{'APP.OIDC.APPTYPE'+app.oidcConfig.applicationType | translate}}">
-        <cnsl-app-card class="grid-card" matRipple [type]="app.oidcConfig?.applicationType">
+        matTooltip="{{'APP.APPTYPE.'+app?.oidcConfig?.applicationType | translate}}">
+        <cnsl-app-card class="grid-card" matRipple [type]="app.oidcConfig?.applicationType"
+            [isApiApp]="app.apiConfig !== undefined">
             {{ app.name.charAt(0)}}
-            <i *ngIf="app.oidcConfig.applicationType == OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE"
+            <i *ngIf="app.oidcConfig?.applicationType == OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE"
                 class="las la-mobile"></i>
-            <i *ngIf="app.oidcConfig.applicationType == OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB"
+            <i *ngIf="app.oidcConfig?.applicationType == OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB"
                 class="las la-code"></i>
-            <i *ngIf="app.oidcConfig.applicationType == OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT"
+            <i *ngIf="app.oidcConfig?.applicationType == OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT"
                 class="las la-code"></i>
+            <i *ngIf="app.apiConfig" class="las la-code"></i>
         </cnsl-app-card>
         <span class="name">{{app.name}}</span>
-        <span class="type">{{'APP.OIDC.APPTYPE'+app.oidcConfig.applicationType | translate}}</span>
+        <span *ngIf="app.oidcConfig?.applicationType !== undefined && app.oidcConfig?.applicationType !== null"
+            class="type">
+            {{'APP.OIDC.APPTYPE.'+app.oidcConfig?.applicationType | translate}}</span>
+        <span *ngIf="app.apiConfig !== undefined" class="type"> API</span>
 
     </div>
 

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

@@ -38,6 +38,7 @@ export class ApplicationGridComponent implements OnInit {
             finalize(() => this.loadingSubject.next(false)),
         ).subscribe((apps) => {
             this.appsSubject.next(apps as Application.AsObject[]);
+            console.log(apps);
         });
     }
 

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

@@ -30,6 +30,7 @@ export class ProjectApplicationsDataSource extends DataSource<Application.AsObje
             map(resp => {
                 const response = resp.toObject();
                 this.totalResult = response.totalResult;
+                console.log(response.resultList);
                 if (response.viewTimestamp) {
                     this.viewTimestamp = response.viewTimestamp;
                 }

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

@@ -31,10 +31,10 @@
             </ng-container>
 
             <ng-container matColumnDef="type">
-                <th mat-header-cell *matHeaderCellDef> {{ 'APP.OIDC.APPTYPE' | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef> {{ 'APP.TYPE' | translate }} </th>
                 <td class="pointer" [routerLink]="['/projects', projectId, 'apps', app.id ]" mat-cell
                     *matCellDef="let app">
-                    {{'APP.OIDC.APPTYPE'+app?.oidcConfig?.applicationType | translate}} </td>
+                    {{'APP.APPTYPE.'+app?.oidcConfig?.applicationType | translate}} </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

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

@@ -19,9 +19,10 @@
         <div class="left">
             <span class="label">{{ 'USER.EMAIL' | translate }}</span>
             <span class="name">{{human?.email}}</span>
-            <span *ngIf="human?.isEmailVerified" class="state verified">{{'USER.EMAILVERIFIED' | translate}}</span>
+            <span *ngIf="human?.isEmailVerified" class="contact-state verified">{{'USER.EMAILVERIFIED' |
+                translate}}</span>
             <div *ngIf="!human?.isEmailVerified" class="block">
-                <span class="state notverified">{{'USER.NOTVERIFIED' | translate}}</span>
+                <span class="contact-state notverified">{{'USER.NOTVERIFIED' | translate}}</span>
 
                 <ng-container *ngIf="human?.email">
                     <a *ngIf="canWrite && state != userStateEnum?.USERSTATE_INITIAL" class="verify"
@@ -45,9 +46,10 @@
         <div class="left">
             <span class="label">{{ 'USER.PHONE' | translate }}</span>
             <span class="name">{{human?.phone ? human.phone : ('USER.PHONEEMPTY' | translate)}}</span>
-            <span *ngIf="human?.isPhoneVerified" class="state verified">{{'USER.PHONEVERIFIED' | translate}}</span>
+            <span *ngIf="human?.isPhoneVerified" class="contact-state verified">{{'USER.PHONEVERIFIED' |
+                translate}}</span>
             <div *ngIf="!human?.isPhoneVerified" class="block">
-                <span class="state notverified">{{'USER.NOTVERIFIED' | translate}}</span>
+                <span class="contact-state notverified">{{'USER.NOTVERIFIED' | translate}}</span>
 
                 <ng-container *ngIf="human?.phone">
                     <a *ngIf="!disablePhoneCode && canWrite" class="verify"

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

@@ -26,7 +26,7 @@
         margin-bottom: .5rem;
       }
 
-      .state {
+      .contact-state {
         font-size: 14px;
         margin-bottom: .5rem;
 

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

@@ -42,15 +42,13 @@ import { ContactComponent } from './contact/contact.component';
 import { DetailFormMachineModule } from './detail-form-machine/detail-form-machine.module';
 import { DetailFormModule } from './detail-form/detail-form.module';
 import { ExternalIdpsComponent } from './external-idps/external-idps.component';
-import { AddKeyDialogModule } from './machine-keys/add-key-dialog/add-key-dialog.module';
-import { MachineKeysComponent } from './machine-keys/machine-keys.component';
-import { ShowKeyDialogModule } from './machine-keys/show-key-dialog/show-key-dialog.module';
 import { MembershipsComponent } from './memberships/memberships.component';
 import { PasswordComponent } from './password/password.component';
 import { UserDetailRoutingModule } from './user-detail-routing.module';
 import { PasswordlessComponent } from './user-detail/passwordless/passwordless.component';
 import { UserDetailComponent } from './user-detail/user-detail.component';
 import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
+import { MachineKeysModule } from 'src/app/modules/machine-keys/machine-keys.module';
 
 @NgModule({
     declarations: [
@@ -66,7 +64,6 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
         PasswordComponent,
         CodeDialogComponent,
         MembershipsComponent,
-        MachineKeysComponent,
         ExternalIdpsComponent,
         ContactComponent,
         ResendEmailDialogComponent,
@@ -84,8 +81,6 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
         MatDialogModule,
         QRCodeModule,
         MetaLayoutModule,
-        AddKeyDialogModule,
-        ShowKeyDialogModule,
         MatCheckboxModule,
         HasRolePipeModule,
         UserGrantsModule,
@@ -108,6 +103,7 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
         TimestampToDatePipeModule,
         LocalizedDatePipeModule,
         InputModule,
+        MachineKeysModule,
     ],
 })
 export class UserDetailModule { }

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

@@ -51,7 +51,6 @@ export class PasswordlessComponent implements OnInit, OnDestroy {
 
     public getPasswordless(): void {
         this.service.GetPasswordless(this.user.id).then(passwordless => {
-            console.log(passwordless.toObject().tokensList);
             this.dataSource = new MatTableDataSource(passwordless.toObject().tokensList);
             this.dataSource.sort = this.sort;
         }).catch(error => {

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

@@ -47,7 +47,6 @@ export class UserMfaComponent implements OnInit, OnDestroy {
 
     public getMFAs(): void {
         this.mgmtUserService.getUserMfas(this.user.id).then(mfas => {
-            console.log(mfas.toObject().mfasList);
             this.dataSource = new MatTableDataSource(mfas.toObject().mfasList);
             this.dataSource.sort = this.sort;
         }).catch(error => {
@@ -56,7 +55,6 @@ export class UserMfaComponent implements OnInit, OnDestroy {
     }
 
     public deleteMFA(type: MfaType, id?: string): void {
-        console.log(type, id);
         const dialogRef = this.dialog.open(WarnDialogComponent, {
             data: {
                 confirmKey: 'ACTIONS.DELETE',
@@ -82,7 +80,6 @@ export class UserMfaComponent implements OnInit, OnDestroy {
                         this.toast.showError(error);
                     });
                 } else if (type === MfaType.MFATYPE_U2F && id) {
-                    console.log(this.user.id, id);
                     this.mgmtUserService.RemoveMfaU2F(this.user.id, id).then(() => {
                         this.toast.showInfo('USER.TOAST.U2FREMOVED', true);
 

console/src/app/pages/users/user-list/user-table/user-table.component.scss

@@ -69,21 +69,3 @@
 td {
   outline: none;
 }
-
-.state {
-  border-radius: 50vw;
-  padding: 2px .5rem;
-  letter-spacing: .05em;
-  font-size: 11px;
-  background-color: #8795a120;
-
-  &.active {
-    background-color: #85d996;
-    color: black;
-  }
-
-  &.inactive {
-    background-color: #ff8981;
-    color: black;
-  }
-}

console/src/app/pipes/redirect-pipe/redirect-pipe.module.ts

@@ -0,0 +1,18 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { RedirectPipe } from './redirect.pipe';
+
+
+@NgModule({
+    declarations: [
+        RedirectPipe,
+    ],
+    imports: [
+        CommonModule,
+    ],
+    exports: [
+        RedirectPipe,
+    ],
+})
+export class RedirectPipeModule { }

console/src/app/pipes/redirect-pipe/redirect.pipe.ts

@@ -0,0 +1,25 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'redirect',
+})
+export class RedirectPipe implements PipeTransform {
+    public transform(uri: string, isNative: boolean): boolean {
+        if (isNative) {
+            if (uri.startsWith('http://localhost')) {
+                return true;
+            }
+            if (!uri.startsWith('https://') && !uri.startsWith('http://')) {
+                return true;
+            } else {
+                return false;
+            }
+        } else {
+            if (uri.startsWith('https://')) {
+                return true;
+            } else {
+                return false;
+            }
+        }
+    }
+}

console/src/app/services/mgmt.service.ts

@@ -5,10 +5,16 @@ import { BehaviorSubject } from 'rxjs';
 
 import { MultiFactorsResult } from '../proto/generated/admin_pb';
 import {
+    AddClientKeyRequest,
+    AddClientKeyResponse,
     AddMachineKeyRequest,
     AddMachineKeyResponse,
     AddOrgDomainRequest,
     AddOrgMemberRequest,
+    APIApplicationCreate,
+    APIAuthMethodType,
+    APIConfig,
+    APIConfigUpdate,
     Application,
     ApplicationID,
     ApplicationSearchQuery,
@@ -16,9 +22,14 @@ import {
     ApplicationSearchResponse,
     ApplicationUpdate,
     ApplicationView,
+    AuthNKeyType,
     ChangeOrgMemberRequest,
     ChangeRequest,
     Changes,
+    ClientKeyIDRequest,
+    ClientKeySearchRequest,
+    ClientKeySearchResponse,
+    ClientSecret,
     CreateHumanRequest,
     CreateMachineRequest,
     CreateUserRequest,
@@ -365,6 +376,23 @@ export class ManagementService {
         return this.grpcService.mgmt.addMachineKey(req);
     }
 
+    public addClientKey(
+        projectId: string,
+        appId: string,
+        type: AuthNKeyType,
+        date?: Timestamp,
+    ): Promise<AddClientKeyResponse> {
+        const req = new AddClientKeyRequest();
+        req.setType(type);
+        req.setProjectId(projectId);
+        req.setApplicationId(appId);
+        if (date) {
+            req.setExpirationDate(date);
+        }
+        return this.grpcService.mgmt.addClientKey(req);
+    }
+
+
     public DeleteMachineKey(
         keyId: string,
         userId: string,
@@ -376,6 +404,20 @@ export class ManagementService {
         return this.grpcService.mgmt.deleteMachineKey(req);
     }
 
+    public DeleteClientKey(
+        keyId: string,
+        projectId: string,
+        appId: string,
+    ): Promise<Empty> {
+        const req = new ClientKeyIDRequest();
+        req.setKeyId(keyId);
+        req.setProjectId(projectId);
+        req.setApplicationId(appId);
+        console.log(keyId, projectId, appId);
+
+        return this.grpcService.mgmt.deleteClientKey(req);
+    }
+
     public SearchMachineKeys(
         userId: string,
         limit: number,
@@ -392,6 +434,24 @@ export class ManagementService {
         return this.grpcService.mgmt.searchMachineKeys(req);
     }
 
+    public SearchClientKeys(
+        projectId: string,
+        appId: string,
+        limit: number,
+        offset: number,
+        asc?: boolean,
+    ): Promise<ClientKeySearchResponse> {
+        const req = new ClientKeySearchRequest();
+        req.setProjectId(projectId);
+        req.setApplicationId(appId);
+        req.setLimit(limit);
+        req.setOffset(offset);
+        if (asc) {
+            req.setAsc(asc);
+        }
+        return this.grpcService.mgmt.searchClientKeys(req);
+    }
+
     public RemoveExternalIDP(
         externalUserId: string,
         idpConfigId: string,
@@ -974,6 +1034,7 @@ export class ManagementService {
         req.setId(id);
         req.setSecId(secId);
         req.setLimit(limit);
+        req.setAsc(false);
         req.setSequenceOffset(offset);
         return this.grpcService.mgmt.applicationChanges(req);
     }
@@ -982,6 +1043,7 @@ export class ManagementService {
         const req = new ChangeRequest();
         req.setId(id);
         req.setLimit(limit);
+        req.setAsc(false);
         req.setSequenceOffset(offset);
         return this.grpcService.mgmt.orgChanges(req);
     }
@@ -990,6 +1052,7 @@ export class ManagementService {
         const req = new ChangeRequest();
         req.setId(id);
         req.setLimit(limit);
+        req.setAsc(false);
         req.setSequenceOffset(offset);
         return this.grpcService.mgmt.projectChanges(req);
     }
@@ -998,6 +1061,7 @@ export class ManagementService {
         const req = new ChangeRequest();
         req.setId(id);
         req.setLimit(limit);
+        req.setAsc(false);
         req.setSequenceOffset(sequenceoffset);
         return this.grpcService.mgmt.userChanges(req);
     }
@@ -1208,13 +1272,20 @@ export class ManagementService {
         return this.grpcService.mgmt.deactivateApplication(req);
     }
 
-    public RegenerateOIDCClientSecret(id: string, projectId: string): Promise<any> {
+    public RegenerateOIDCClientSecret(id: string, projectId: string): Promise<ClientSecret> {
         const req = new ApplicationID();
         req.setId(id);
         req.setProjectId(projectId);
         return this.grpcService.mgmt.regenerateOIDCClientSecret(req);
     }
 
+    public RegenerateAPIClientSecret(id: string, projectId: string): Promise<ClientSecret> {
+        const req = new ApplicationID();
+        req.setId(id);
+        req.setProjectId(projectId);
+        return this.grpcService.mgmt.regenerateAPIClientSecret(req);
+    }
+
     public SearchProjectRoles(
         projectId: string,
         limit: number,
@@ -1351,6 +1422,15 @@ export class ManagementService {
         return this.grpcService.mgmt.createOIDCApplication(req);
     }
 
+    public CreateAPIApplication(app: APIApplicationCreate.AsObject): Promise<Application> {
+        const req = new APIApplicationCreate();
+        req.setProjectId(app.projectId);
+        req.setName(app.name);
+        req.setAuthMethodType(app.authMethodType);
+
+        return this.grpcService.mgmt.createAPIApplication(req);
+    }
+
     public UpdateApplication(projectId: string, appId: string, name: string): Promise<Application> {
         const req = new ApplicationUpdate();
         req.setId(appId);
@@ -1363,6 +1443,10 @@ export class ManagementService {
         return this.grpcService.mgmt.updateApplicationOIDCConfig(req);
     }
 
+    public UpdateAPIAppConfig(req: APIConfigUpdate): Promise<APIConfig> {
+        return this.grpcService.mgmt.updateApplicationAPIConfig(req);
+    }
+
     public RemoveApplication(projectId: string, appId: string): Promise<Empty> {
         const req = new ApplicationID();
         req.setId(appId);

console/src/assets/i18n/de.json

@@ -99,6 +99,7 @@
     },
     "ACTIONS": {
         "SAVE": "Speichern",
+        "SAVENOW":"Speichern",
         "NEW": "Neu",
         "ADD":"Hinzufügen",
         "CREATE": "Erstellen",
@@ -833,6 +834,9 @@
             "DELETED":"Projekt gelöscht."
         }
     },
+    "NEXTSTEPS": {
+        "TITLE":"Nächste Schritte"
+    },
     "IDP":{
         "LIST": {
             "TITLE":"Identitäts Provider",
@@ -969,7 +973,6 @@
                 }
             },
             "NEXTSTEPS": {
-                "TITLE":"Nächste Schritte",
                 "0": {
                     "TITLE":"Rollen festlegen",
                     "DESC":"Erfassen Sie Rollen für ihr Projekt"
@@ -986,8 +989,14 @@
         },
         "NAME": "Name",
         "TYPE":"Anwendungstyp",
+        "AUTHMETHOD":"Authentifizierungsmethode",
+        "AUTHMETHODSECTION":"Authentifizierungsmethode",
         "GRANT":"Berechtigungstypen",
         "OIDC": {
+            "INFO": {
+                "ISSUER":"Issuer",
+                "CLIENTID":"Client Id"
+            },
             "CURRENT":"Aktuelle Konfiguration",
             "TOKENSECTIONTITLE":"AuthToken Optionen",
             "REDIRECTSECTIONTITLE":"Weiterleitungseinstellungen",
@@ -1012,26 +1021,32 @@
             "REDIRECT": "Weiterleitungs-URIs",
             "REDIRECTSECTION": "Weiterleitungs-URIs",
             "POSTLOGOUTREDIRECT":"URIs für Post-Log-out",
-            "RESPONSE": "Antworttypen",
             "RESPONSESECTION": "Antworttypen",
-            "GRANT": "Berechtigungstypen",
             "GRANTSECTION":"Berechtigungstypen",
             "GRANTTITLE":"Wähle Deine Berechtigungstypen aus. Hinweis: \"Implizit\" ist nur für browser-basierte Anwendungen verfügbar.",
-            "APPTYPE": "Anwendungstypen",
-            "RESPONSE0": "Code",
-            "RESPONSE1": "ID-Token",
-            "RESPONSE2": "Token-ID-Token",
-            "GRANT0": "Authorisation Code",
-            "GRANT1": "Implicit",
-            "GRANT2": "Refresh Token",
-            "APPTYPE0": "Web",
-            "APPTYPE1": "User Agent",
-            "APPTYPE2": "Native",
-            "AUTHMETHOD":"Authentifizierungsmethode",
-            "AUTHMETHODSECTION":"Authentifizierungsmethode",
-            "AUTHMETHOD0":"Basic",
-            "AUTHMETHOD1":"Post",
-            "AUTHMETHOD2":"None",
+            "APPTYPE": {
+                "0": "Web",
+                "1": "User Agent",
+                "2": "Native"
+            },
+            "RESPONSETYPE": "Antworttypen",
+            "RESPONSE": {
+                "0": "Code",
+                "1": "ID-Token",
+                "2": "Token-ID-Token"
+            },
+            "GRANTTYPE": "Berechtigungstypen",
+            "GRANT": {
+                "0": "Authorisation Code",
+                "1": "Implicit",
+                "2": "Refresh Token"
+            },
+            "AUTHMETHOD": {
+                "0":"Basic",
+                "1":"Post",
+                "2":"None",
+                "3":"Private Key JWT"
+            },
             "TOKENTYPE":"Auth Token Typ",
             "TOKENTYPE0": "Bearer Token",
             "TOKENTYPE1": "JWT",
@@ -1054,48 +1069,65 @@
                         "DESCRIPTION":"Standard Web applications wie .net, PHP, Node.js, Java, etc."
                     },
                     "NATIVE": {
-                        "TITLE":"NATIVE",
+                        "TITLE":"Native",
                         "DESCRIPTION":"Mobile Apps, Desktop, Smart Devices, etc."
                     },
                     "USERAGENT": {
                         "TITLE":"User Agent",
                         "DESCRIPTION":"Single Page Applications (SPA) und grundsätzlich alle im Browser aufgeführten JS Frameworks"
                     }
-                },
-                "AUTHMETHOD": {
-                    "CODE": {
-                        "TITLE":"Code",
-                        "DESCRIPTION":"Tausche den Authorization Code gegen Tokens ein"
-                    },
-                    "PKCE": {
-                        "TITLE":"PKCE",
-                        "DESCRIPTION":"Nutze einen Zufalls Hash Wert anstelle des Client Secret für mehr Sicherheit"
-                    },
-                    "POST": {
-                        "TITLE":"POST",
-                        "DESCRIPTION":"Sende client_id und client_secret im (HTML) Formular"
-                    },
-                    "PK_JWT": {
-                        "TITLE":"Private Key JWT",
-                        "DESCRIPTION":"Nutze einen Private Key um deine Application zu authentifizieren"
-                    },
-                    "IMPLICIT": {
-                        "TITLE":"Implicit",
-                        "DESCRIPTION":"Erhalte die Token direkt vom authorize Endpoint"
-                    },
-                    "CUSTOM": {
-                        "TITLE":"Custom",
-                        "DESCRIPTION":"Deine Konfiguration entspricht keiner anderen Option."
-                    }
                 }
             }
         },
+        "API": {
+            "REGENERATESECRET": "Client Secret neu generieren",
+            "SELECTION":{
+                "TITLE":"API",
+                "DESCRIPTION":"APIs im Allgemeinen"
+            },
+            "AUTHMETHOD": {
+                "0":"Basic",
+                "1":"Private Key JWT"
+            }
+        },
+        "AUTHMETHODS": {
+            "CODE": {
+                "TITLE":"Code",
+                "DESCRIPTION":"Tausche den Authorization Code gegen Tokens ein"
+            },
+            "PKCE": {
+                "TITLE":"PKCE",
+                "DESCRIPTION":"Nutze einen Zufalls Hash Wert anstelle des Client Secret für mehr Sicherheit"
+            },
+            "POST": {
+                "TITLE":"POST",
+                "DESCRIPTION":"Sende client_id und client_secret im (HTML) Formular"
+            },
+            "PK_JWT": {
+                "TITLE":"Private Key JWT",
+                "DESCRIPTION":"Nutze einen Private Key um deine Application zu authentifizieren"
+            },
+            "BASIC": {
+                "TITLE":"Basic",
+                "DESCRIPTION":"Authentifizierung mittels Nutzername und Passwort"
+            },
+            "IMPLICIT": {
+                "TITLE":"Implicit",
+                "DESCRIPTION":"Erhalte die Token direkt vom authorize Endpoint"
+            },
+            "CUSTOM": {
+                "TITLE":"Custom",
+                "DESCRIPTION":"Deine Konfiguration entspricht keiner anderen Option."
+            }
+        },
         "TOAST": {
             "REACTIVATED":"Anwendung reaktiviert.",
             "DEACTIVATED":"Anwendung deaktiviert.",
             "OIDCUPDATED":"OIDC-Konfiguration geändert.",
-            "OIDCCLIENTSECRETREGENERATED":"OIDC-Client Secret generiert.",
-            "DELETED":"App gelöscht."
+            "UPDATED":"App geändert.",
+            "CLIENTSECRETREGENERATED":"Client Secret generiert.",
+            "DELETED":"App gelöscht.",
+            "CONFIGCHANGED":"Konfigurationsänderung entdeckt."
         }
     },
     "GENDERS": {

console/src/assets/i18n/en.json

@@ -99,6 +99,7 @@
     },
     "ACTIONS": {
         "SAVE": "Save",
+        "SAVENOW":"Save now",
         "NEW": "New",
         "ADD":"Add",
         "CREATE": "Create",
@@ -589,7 +590,7 @@
         },
         "LOGIN_POLICY": {
             "TITLE":"Login Policy",
-            "DESCRIPTION":"Define how Users can be authenticated",
+            "DESCRIPTION":"Define how Users can be authenticated and configure Identity Providers",
             "DESCRIPTIONCREATEADMIN":"Users can choose from the available identity providers below.",
             "DESCRIPTIONCREATEMGMT":"Users can choose from the available identity providers below. Note: You can use System-set providers as well as providers set for your organisation only.",
             "SAVED":"Saved successfully!"
@@ -833,6 +834,9 @@
             "DELETED":"Deleted Project."
         }
     },
+    "NEXTSTEPS": {
+        "TITLE":"Next Steps"
+    },
     "IDP":{
         "LIST": {
             "TITLE":"Identity Providers",
@@ -859,7 +863,7 @@
             "1":"active",
             "2":"inactive"
         },
-        "MAPPINTFIELD": {
+        "MAPPINGFIELD": {
           "1": "Preferred Username",
           "2": "Email"
         },
@@ -986,8 +990,14 @@
         },
         "NAME": "Name",
         "TYPE":"Application Type",
+        "AUTHMETHOD":"Authentication Method",
+        "AUTHMETHODSECTION":"Authentication Method",
         "GRANT":"Grant Types",
         "OIDC": {
+            "INFO": {
+                "ISSUER":"Issuer",
+                "CLIENTID":"Client Id"
+            },
             "CURRENT":"Current Config",
             "TOKENSECTIONTITLE":"AuthToken Options",
             "REDIRECTSECTIONTITLE":"Redirect Settings",
@@ -1012,26 +1022,32 @@
             "REDIRECT": "Redirect URIs",
             "REDIRECTSECTION": "Redirect URIs",
             "POSTLOGOUTREDIRECT":"Post Logout URIs",
-            "RESPONSE": "Response Types",
             "RESPONSESECTION": "Response Types",
-            "GRANT": "Grant Types",
             "GRANTSECTION":"Grant Types",
             "GRANTTITLE":"Select your grant types. Note: Implicit is only available for browser-based applications.",
-            "APPTYPE": "Application Types",
-            "RESPONSE0": "Code",
-            "RESPONSE1": "ID Token",
-            "RESPONSE2": "Token-ID Token",
-            "GRANT0": "Authorization Code",
-            "GRANT1": "Implicit",
-            "GRANT2": "Refresh Token",
-            "APPTYPE0": "Web",
-            "APPTYPE1": "User Agent",
-            "APPTYPE2": "Native",
-            "AUTHMETHOD":"Authentication Method",
-            "AUTHMETHODSECTION":"Authentication Method",
-            "AUTHMETHOD0":"Basic",
-            "AUTHMETHOD1":"Post",
-            "AUTHMETHOD2":"None",
+            "APPTYPE": {
+                "0": "Web",
+                "1": "User Agent",
+                "2": "Native"
+            },
+            "RESPONSETYPE": "Response Types",
+            "RESPONSE": {
+                "0": "Code",
+                "1": "ID Token",
+                "2": "Token-ID Token"
+            },
+            "GRANTTYPE": "Grant Types",
+            "GRANT": {
+                "0": "Authorization Code",
+                "1": "Implicit",
+                "2": "Refresh Token"
+            },
+            "AUTHMETHOD": {
+                "0":"Basic",
+                "1":"Post",
+                "2":"None",
+                "3":"Private Key JWT"
+            },
             "TOKENTYPE":"Auth Token Type",
             "TOKENTYPE0": "Bearer Token",
             "TOKENTYPE1": "JWT",
@@ -1054,48 +1070,65 @@
                         "DESCRIPTION":"Regular Web applications like .net, PHP, Node.js, Java, etc."
                     },
                     "NATIVE": {
-                        "TITLE":"NATIVE",
+                        "TITLE":"Native",
                         "DESCRIPTION":"Mobile Apps, Desktop, Smart Devices, etc."
                     },
                     "USERAGENT": {
                         "TITLE":"User Agent",
                         "DESCRIPTION":"Single Page Applications (SPA) and in general all JS frameworks executed in browsers"
                     }
-                },
-                "AUTHMETHOD": {
-                    "CODE": {
-                        "TITLE":"Code",
-                        "DESCRIPTION":"Exchange the authorization code for the tokens"
-                    },
-                    "PKCE": {
-                        "TITLE":"PKCE",
-                        "DESCRIPTION":"Use a random hash instead of a static client secret for more security"
-                    },
-                    "POST": {
-                        "TITLE":"POST",
-                        "DESCRIPTION":"Send client_id and client_secret as part of the form"
-                    },
-                    "PK_JWT": {
-                        "TITLE":"Private Key JWT",
-                        "DESCRIPTION":"Use a private key to authorize your application"
-                    },
-                    "IMPLICIT": {
-                        "TITLE":"Implicit",
-                        "DESCRIPTION":"Get the tokens directly from the authorization endpoint"
-                    },
-                    "CUSTOM": {
-                        "TITLE":"Custom",
-                        "DESCRIPTION":"Your setting doesn't correspond to any other option."
-                    }
                 }
             }
         },
+        "API": {
+            "REGENERATESECRET": "Regenerate Client Secret",
+            "SELECTION":{
+                "TITLE":"API",
+                "DESCRIPTION":"APIs in general"
+            },
+            "AUTHMETHOD": {
+                "0":"Basic",
+                "1":"Private Key JWT"
+            }
+        },
+        "AUTHMETHODS": {
+            "CODE": {
+                "TITLE":"Code",
+                "DESCRIPTION":"Exchange the authorization code for the tokens"
+            },
+            "PKCE": {
+                "TITLE":"PKCE",
+                "DESCRIPTION":"Use a random hash instead of a static client secret for more security"
+            },
+            "POST": {
+                "TITLE":"POST",
+                "DESCRIPTION":"Send client_id and client_secret as part of the form"
+            },
+            "PK_JWT": {
+                "TITLE":"Private Key JWT",
+                "DESCRIPTION":"Use a private key to authorize your application"
+            },
+            "BASIC": {
+                "TITLE":"Basic",
+                "DESCRIPTION":"Authentication with Username and Passwort"
+            },
+            "IMPLICIT": {
+                "TITLE":"Implicit",
+                "DESCRIPTION":"Get the tokens directly from the authorization endpoint"
+            },
+            "CUSTOM": {
+                "TITLE":"Custom",
+                "DESCRIPTION":"Your setting doesn't correspond to any other option."
+            }
+        },
         "TOAST": {
             "REACTIVATED":"Application reactivated.",
             "DEACTIVATED":"Application deactivated.",
             "OIDCUPDATED":"OIDC configuration updated.",
-            "OIDCCLIENTSECRETREGENERATED":"OIDC client secret generated.",
-            "DELETED":"App deleted."
+            "UPDATED":"App updated.",
+            "CLIENTSECRETREGENERATED":"client secret generated.",
+            "DELETED":"App deleted.",
+            "CONFIGCHANGED":"Changes detected!"
         }
     },
     "GENDERS": {