fix(console-v2): app detail layout, create layout stepper (#3680)

* app detail

* app-detail layout

* app layout, create layout component, cleanup

* lint

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

@@ -1,39 +1,51 @@
-<div class="auth-method-radio-button-wrapper">
+<div class="auth-method-radio-button-wrapper" [ngClass]="{ compact: compact }">
   <ng-container *ngFor="let method of authMethods; index as i">
-    <input type="radio" [disabled]="method.disabled" (change)="emitChange()" [value]="method.key" [id]="method.key"
-      [(ngModel)]="selected" />
-    <label class="cnsl-radio-button" [ngClass]="{'first': i === 0, 'last': i === authMethods.length - 1}"
-      [for]="method.key">
-      <div class="recommended" [ngClass]="{'not': method.notRecommended}"
-        *ngIf="method.recommended || method.notRecommended">
-        {{(method.recommended ?
-        'APP.OIDC.RECOMMENDED' : 'APP.OIDC.NOTRECOMMENDED') | translate }}</div>
-
-      <div class="cnsl-radio-header" [ngStyle]="{'background': method.background}">
-        <span>{{method.prefix}}</span>
-        <div class="current" *ngIf="current === method.key">{{'APP.OIDC.CURRENT' | translate}}</div>
+    <input
+      type="radio"
+      [disabled]="method.disabled"
+      (change)="emitChange()"
+      [value]="method.key"
+      [id]="method.key"
+      [(ngModel)]="selected"
+    />
+    <label
+      class="cnsl-radio-button"
+      [ngClass]="{ compact: compact, first: i === 0, last: i === authMethods.length - 1 }"
+      [for]="method.key"
+    >
+      <div
+        class="recommended"
+        [ngClass]="{ not: method.notRecommended }"
+        *ngIf="method.recommended || method.notRecommended"
+      >
+        {{ (method.recommended ? 'APP.OIDC.RECOMMENDED' : 'APP.OIDC.NOTRECOMMENDED') | translate }}
       </div>
-      <p>{{method.titleI18nKey | translate}}</p>
-      <p class="type-desc cnsl-secondary-text">{{method.descI18nKey | translate}}</p>
+
+      <div class="cnsl-radio-header" [ngStyle]="{ background: method.background }">
+        <span>{{ method.prefix }}</span>
+        <div class="current" *ngIf="current === method.key">{{ 'APP.OIDC.CURRENT' | translate }}</div>
+      </div>
+      <p>{{ method.titleI18nKey | translate }}</p>
+      <p class="type-desc cnsl-secondary-text">{{ method.descI18nKey | translate }}</p>
       <span class="fill-space"></span>
       <div class="app-specs cnsl-secondary-text">
         <div class="row" *ngIf="isOIDC && method && method.responseType !== undefined">
-          <span>{{'APP.OIDC.RESPONSETYPE' | translate}}</span>
-          <span>{{('APP.OIDC.RESPONSE.'+method.responseType.toString()) | translate}}</span>
+          <span>{{ 'APP.OIDC.RESPONSETYPE' | translate }}</span>
+          <span>{{ 'APP.OIDC.RESPONSE.' + method.responseType.toString() | translate }}</span>
         </div>
         <div class="row" *ngIf="isOIDC && method.grantType !== undefined">
-          <span>{{'APP.GRANT' | translate}}</span>
-          <span>{{('APP.OIDC.GRANT.'+method.grantType.toString()) | translate}}</span>
+          <span>{{ 'APP.GRANT' | translate }}</span>
+          <span>{{ 'APP.OIDC.GRANT.' + method.grantType.toString() | translate }}</span>
         </div>
         <div class="row" *ngIf="isOIDC && method.authMethod !== undefined">
-          <span>{{'APP.AUTHMETHOD' | translate}}</span>
-          <span>{{('APP.OIDC.AUTHMETHOD.'+method.authMethod.toString()) | translate}}</span>
+          <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>
+          <span>{{ 'APP.AUTHMETHOD' | translate }}</span>
+          <span>{{ 'APP.API.AUTHMETHOD.' + method.apiAuthMethod.toString() | translate }}</span>
         </div>
       </div>
     </label>
   </ng-container>
-</div>
+</div>

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

@@ -9,6 +9,13 @@
   margin: 0;
   padding-bottom: 0.5rem;
   padding-top: 1rem;
+
+  &.compact {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: 1rem;
+    row-gap: 1rem;
+  }
 }
 
 @mixin app-auth-method-radio-theme($theme) {
@@ -108,6 +115,17 @@
       }
     }
 
+    &.compact {
+      margin: 0;
+      width: 230px;
+
+      .cnsl-radio-header {
+        span {
+          margin: 1rem 0 1.5rem 0;
+        }
+      }
+    }
+
     p {
       text-align: center;
       padding: 0 1rem;

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

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

console/src/app/modules/create-layout/create-layout.component.html

@@ -0,0 +1,17 @@
+<div class="max-width-container">
+  <div class="enlarged-container">
+    <div class="create-layout-container">
+      <button (click)="close()" mat-icon-button matTooltip="{{ 'ACTIONS.CLOSE' | translate }}">
+        <mat-icon>close</mat-icon>
+      </button>
+      <span class="abort">{{ title }}</span
+      ><span class="abort-2" *ngIf="createSteps > 1"
+        >{{ 'ACTIONS.STEP' | translate }} {{ currentCreateStep }} {{ 'ACTIONS.OF' | translate }} {{ createSteps }}</span
+      >
+    </div>
+
+    <div class="create-layout-content">
+      <ng-content></ng-content>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,23 @@
+.create-layout-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 2rem;
+
+  .abort {
+    font-size: 1.2rem;
+    margin-left: 2rem;
+  }
+
+  .abort-2 {
+    margin-left: 2rem;
+    white-space: nowrap;
+    font-size: 12px;
+    padding: 0.25rem 1rem;
+    border: 1px solid rgba(#8795a1, 0.2);
+    border-radius: 50vw;
+  }
+}
+
+.create-layout-content {
+  padding-left: 4.5rem;
+}

console/src/app/modules/create-layout/create-layout.component.spec.ts

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

console/src/app/modules/create-layout/create-layout.component.ts

@@ -0,0 +1,18 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'cnsl-create-layout',
+  templateUrl: './create-layout.component.html',
+  styleUrls: ['./create-layout.component.scss'],
+})
+export class CreateLayoutComponent {
+  @Input() currentCreateStep: number = 1;
+  @Input() createSteps: number = 1;
+  @Input() title: string = '';
+  @Output() closed: EventEmitter<void> = new EventEmitter();
+  constructor() {}
+
+  close() {
+    this.closed.emit();
+  }
+}

console/src/app/modules/create-layout/create-layout.module.ts

@@ -0,0 +1,15 @@
+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 { TranslateModule } from '@ngx-translate/core';
+
+import { CreateLayoutComponent } from './create-layout.component';
+
+@NgModule({
+  declarations: [CreateLayoutComponent],
+  imports: [CommonModule, MatIconModule, MatButtonModule, TranslateModule, MatTooltipModule],
+  exports: [CreateLayoutComponent],
+})
+export class CreateLayoutModule {}

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

@@ -1,179 +1,161 @@
-<div class="max-width-container">
-  <div class="enlarged-container">
-    <div class="abort-container">
-      <button (click)="close()" mat-icon-button>
-        <mat-icon>close</mat-icon>
-      </button>
-      <span class="abort">{{ 'IDP.CREATE.TITLE' | translate }}</span
-      ><span class="abort-2">Step {{ currentCreateStep }} of {{ createSteps }}</span>
-    </div>
+<cnsl-create-layout
+  title="{{ 'IDP.CREATE.TITLE' | translate }}"
+  [createSteps]="createSteps"
+  [currentCreateStep]="currentCreateStep"
+  (closed)="close()"
+>
+  <div class="idp-create-content">
+    <h1>{{ 'IDP.CREATE.TITLE' | translate }}</h1>
 
-    <div class="idp-create-content">
-      <h1>{{ 'IDP.CREATE.TITLE' | translate }}</h1>
+    <mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
 
-      <mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
+    <ng-container *ngIf="currentCreateStep === 1">
+      <p class="desc cnsl-secondary-text">{{ 'IDP.CREATE.DESCRIPTION' | translate }}</p>
 
-      <ng-container *ngIf="currentCreateStep === 1">
-        <p class="desc cnsl-secondary-text">{{ 'IDP.CREATE.DESCRIPTION' | translate }}</p>
+      <cnsl-idp-type-radio [types]="idpTypes" (selectedType)="idpType = $event" [selected]="idpType"> </cnsl-idp-type-radio>
 
-        <cnsl-idp-type-radio [types]="idpTypes" (selectedType)="idpType = $event" [selected]="idpType">
-        </cnsl-idp-type-radio>
+      <div class="first-step-actions">
+        <button mat-raised-button [disabled]="!idpType" color="primary" (click)="currentCreateStep = 2">
+          {{ 'ACTIONS.CONTINUE' | translate }}
+        </button>
+      </div>
+    </ng-container>
 
-        <div class="first-step-actions">
-          <button mat-raised-button [disabled]="!idpType" color="primary" (click)="currentCreateStep = 2">
-            {{ 'ACTIONS.CONTINUE' | translate }}
+    <ng-container *ngIf="currentCreateStep === 2 && idpType === OIDC">
+      <p class="desc cnsl-secondary-text">{{ 'IDP.OIDC.DESCRIPTION' | translate }}</p>
+
+      <form [formGroup]="oidcFormGroup" (ngSubmit)="addOIDCIdp()">
+        <div class="idp-content">
+          <cnsl-form-field appearance="outline" class="formfield">
+            <cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
+            <input cnslInput formControlName="name" />
+          </cnsl-form-field>
+          <cnsl-form-field appearance="outline" class="formfield">
+            <cnsl-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
+            <input cnslInput formControlName="issuer" />
+          </cnsl-form-field>
+        </div>
+
+        <cnsl-info-section class="auto-reg-info">
+          <div>
+            <p class="auto-reg-desc">{{ 'IDP.AUTOREGISTER_DESC' | translate }}</p>
+            <mat-checkbox formControlName="autoRegister">
+              {{ 'IDP.AUTOREGISTER' | translate }}
+            </mat-checkbox>
+          </div>
+        </cnsl-info-section>
+
+        <div class="idp-content">
+          <cnsl-form-field appearance="outline" class="formfield">
+            <cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
+            <input cnslInput formControlName="clientId" />
+          </cnsl-form-field>
+          <cnsl-form-field appearance="outline" class="formfield">
+            <cnsl-label>{{ 'IDP.CLIENTSECRET' | translate }}</cnsl-label>
+            <input cnslInput formControlName="clientSecret" />
+          </cnsl-form-field>
+        </div>
+        <div class="idp-content">
+          <cnsl-form-field appearance="outline" class="formfield">
+            <cnsl-label>{{ 'IDP.SCOPESLIST' | translate }}</cnsl-label>
+            <mat-chip-list #chipScopesList aria-label="scope selection" *ngIf="scopesList">
+              <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>
+        </div>
+        <div class="idp-content">
+          <cnsl-form-field class="formfield" appearance="outline">
+            <cnsl-label>{{ 'IDP.IDPDISPLAYNAMMAPPING' | translate }}</cnsl-label>
+            <mat-select formControlName="idpDisplayNameMapping">
+              <mat-option *ngFor="let field of mappingFields" [value]="field">
+                {{ 'IDP.MAPPINGFIELD.' + field | translate }}
+              </mat-option>
+            </mat-select>
+          </cnsl-form-field>
+          <cnsl-form-field class="formfield" appearance="outline">
+            <cnsl-label>{{ 'IDP.USERNAMEMAPPING' | translate }}</cnsl-label>
+            <mat-select formControlName="usernameMapping">
+              <mat-option *ngFor="let field of mappingFields" [value]="field">
+                {{ 'IDP.MAPPINGFIELD.' + field | translate }}
+              </mat-option>
+            </mat-select>
+          </cnsl-form-field>
+        </div>
+
+        <div class="idp-create-actions">
+          <button color="primary" (click)="currentCreateStep = 1" mat-stroked-button class="back-button" type="button">
+            {{ 'ACTIONS.BACK' | translate }}
+          </button>
+          <button color="primary" mat-raised-button class="continue-button" [disabled]="oidcFormGroup.invalid" type="submit">
+            {{ 'ACTIONS.SAVE' | translate }}
           </button>
         </div>
-      </ng-container>
+      </form>
+    </ng-container>
 
-      <ng-container *ngIf="currentCreateStep === 2 && idpType === OIDC">
-        <p class="desc cnsl-secondary-text">{{ 'IDP.OIDC.DESCRIPTION' | translate }}</p>
+    <ng-container *ngIf="currentCreateStep === 2 && idpType === JWT">
+      <p class="desc cnsl-secondary-text">{{ 'IDP.JWT.DESCRIPTION' | translate }}</p>
 
-        <form [formGroup]="oidcFormGroup" (ngSubmit)="addOIDCIdp()">
-          <div class="idp-content">
-            <cnsl-form-field appearance="outline" class="formfield">
-              <cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
-              <input cnslInput formControlName="name" />
-            </cnsl-form-field>
-            <cnsl-form-field appearance="outline" class="formfield">
-              <cnsl-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
-              <input cnslInput formControlName="issuer" />
-            </cnsl-form-field>
+      <form [formGroup]="jwtFormGroup" (ngSubmit)="addJWTIdp()">
+        <div class="idp-content">
+          <cnsl-form-field appearance="outline" class="formfield">
+            <cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
+            <input cnslInput formControlName="jwtName" />
+          </cnsl-form-field>
+          <cnsl-form-field appearance="outline" class="formfield">
+            <cnsl-label>{{ 'IDP.JWT.HEADERNAME' | translate }}</cnsl-label>
+            <input cnslInput formControlName="jwtHeaderName" />
+          </cnsl-form-field>
+          <cnsl-form-field appearance="outline" class="formfield">
+            <cnsl-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
+            <input cnslInput formControlName="jwtIssuer" />
+          </cnsl-form-field>
+        </div>
+
+        <cnsl-info-section class="auto-reg-info">
+          <div>
+            <p class="auto-reg-desc">{{ 'IDP.AUTOREGISTER_DESC' | translate }}</p>
+            <mat-checkbox formControlName="jwtAutoRegister">
+              {{ 'IDP.AUTOREGISTER' | translate }}
+            </mat-checkbox>
           </div>
+        </cnsl-info-section>
 
-          <cnsl-info-section class="auto-reg-info">
-            <div>
-              <p class="auto-reg-desc">{{ 'IDP.AUTOREGISTER_DESC' | translate }}</p>
-              <mat-checkbox formControlName="autoRegister">
-                {{ 'IDP.AUTOREGISTER' | translate }}
-              </mat-checkbox>
-            </div>
-          </cnsl-info-section>
+        <div class="idp-content">
+          <cnsl-form-field appearance="outline" class="formfield">
+            <cnsl-label>{{ 'IDP.JWT.JWTENDPOINT' | translate }}</cnsl-label>
+            <input cnslInput formControlName="jwtEndpoint" />
+          </cnsl-form-field>
+          <cnsl-form-field appearance="outline" class="formfield">
+            <cnsl-label>{{ 'IDP.JWT.JWTKEYSENDPOINT' | translate }}</cnsl-label>
+            <input cnslInput formControlName="jwtKeysEndpoint" />
+          </cnsl-form-field>
+        </div>
 
-          <div class="idp-content">
-            <cnsl-form-field appearance="outline" class="formfield">
-              <cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
-              <input cnslInput formControlName="clientId" />
-            </cnsl-form-field>
-            <cnsl-form-field appearance="outline" class="formfield">
-              <cnsl-label>{{ 'IDP.CLIENTSECRET' | translate }}</cnsl-label>
-              <input cnslInput formControlName="clientSecret" />
-            </cnsl-form-field>
-          </div>
-          <div class="idp-content">
-            <cnsl-form-field appearance="outline" class="formfield">
-              <cnsl-label>{{ 'IDP.SCOPESLIST' | translate }}</cnsl-label>
-              <mat-chip-list #chipScopesList aria-label="scope selection" *ngIf="scopesList">
-                <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>
-          </div>
-          <div class="idp-content">
-            <cnsl-form-field class="formfield" appearance="outline">
-              <cnsl-label>{{ 'IDP.IDPDISPLAYNAMMAPPING' | translate }}</cnsl-label>
-              <mat-select formControlName="idpDisplayNameMapping">
-                <mat-option *ngFor="let field of mappingFields" [value]="field">
-                  {{ 'IDP.MAPPINGFIELD.' + field | translate }}
-                </mat-option>
-              </mat-select>
-            </cnsl-form-field>
-            <cnsl-form-field class="formfield" appearance="outline">
-              <cnsl-label>{{ 'IDP.USERNAMEMAPPING' | translate }}</cnsl-label>
-              <mat-select formControlName="usernameMapping">
-                <mat-option *ngFor="let field of mappingFields" [value]="field">
-                  {{ 'IDP.MAPPINGFIELD.' + field | translate }}
-                </mat-option>
-              </mat-select>
-            </cnsl-form-field>
-          </div>
-
-          <div class="idp-create-actions">
-            <button color="primary" (click)="currentCreateStep = 1" mat-stroked-button class="back-button" type="button">
-              {{ 'ACTIONS.BACK' | translate }}
-            </button>
-            <button
-              color="primary"
-              mat-raised-button
-              class="continue-button"
-              [disabled]="oidcFormGroup.invalid"
-              type="submit"
-            >
-              {{ 'ACTIONS.SAVE' | translate }}
-            </button>
-          </div>
-        </form>
-      </ng-container>
-
-      <ng-container *ngIf="currentCreateStep === 2 && idpType === JWT">
-        <p class="desc cnsl-secondary-text">{{ 'IDP.JWT.DESCRIPTION' | translate }}</p>
-
-        <form [formGroup]="jwtFormGroup" (ngSubmit)="addJWTIdp()">
-          <div class="idp-content">
-            <cnsl-form-field appearance="outline" class="formfield">
-              <cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
-              <input cnslInput formControlName="jwtName" />
-            </cnsl-form-field>
-            <cnsl-form-field appearance="outline" class="formfield">
-              <cnsl-label>{{ 'IDP.JWT.HEADERNAME' | translate }}</cnsl-label>
-              <input cnslInput formControlName="jwtHeaderName" />
-            </cnsl-form-field>
-            <cnsl-form-field appearance="outline" class="formfield">
-              <cnsl-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
-              <input cnslInput formControlName="jwtIssuer" />
-            </cnsl-form-field>
-          </div>
-
-          <cnsl-info-section class="auto-reg-info">
-            <div>
-              <p class="auto-reg-desc">{{ 'IDP.AUTOREGISTER_DESC' | translate }}</p>
-              <mat-checkbox formControlName="jwtAutoRegister">
-                {{ 'IDP.AUTOREGISTER' | translate }}
-              </mat-checkbox>
-            </div>
-          </cnsl-info-section>
-
-          <div class="idp-content">
-            <cnsl-form-field appearance="outline" class="formfield">
-              <cnsl-label>{{ 'IDP.JWT.JWTENDPOINT' | translate }}</cnsl-label>
-              <input cnslInput formControlName="jwtEndpoint" />
-            </cnsl-form-field>
-            <cnsl-form-field appearance="outline" class="formfield">
-              <cnsl-label>{{ 'IDP.JWT.JWTKEYSENDPOINT' | translate }}</cnsl-label>
-              <input cnslInput formControlName="jwtKeysEndpoint" />
-            </cnsl-form-field>
-          </div>
-
-          <div class="idp-create-actions">
-            <button color="primary" (click)="currentCreateStep = 1" mat-stroked-button class="back-button" type="button">
-              {{ 'ACTIONS.BACK' | translate }}
-            </button>
-            <button
-              color="primary"
-              mat-raised-button
-              class="continue-button"
-              [disabled]="jwtFormGroup.invalid"
-              type="submit"
-            >
-              {{ 'ACTIONS.SAVE' | translate }}
-            </button>
-          </div>
-        </form>
-      </ng-container>
-    </div>
+        <div class="idp-create-actions">
+          <button color="primary" (click)="currentCreateStep = 1" mat-stroked-button class="back-button" type="button">
+            {{ 'ACTIONS.BACK' | translate }}
+          </button>
+          <button color="primary" mat-raised-button class="continue-button" [disabled]="jwtFormGroup.invalid" type="submit">
+            {{ 'ACTIONS.SAVE' | translate }}
+          </button>
+        </div>
+      </form>
+    </ng-container>
   </div>
-</div>
+</cnsl-create-layout>

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

@@ -2,75 +2,54 @@
   font-size: 14px;
 }
 
-.abort-container {
-  display: flex;
-  align-items: center;
-  margin-bottom: 2rem;
-
-  .abort {
-    font-size: 1.2rem;
-    margin-left: 2rem;
-  }
-
-  .abort-2 {
-    font-size: 1.2rem;
-    margin-left: 2rem;
-    white-space: nowrap;
-  }
-}
-
 .add-line-btn {
   margin-bottom: 1rem;
 }
 
-.idp-create-content {
-  padding: 0 0 0 72px;
+.first-step-actions {
+  margin-top: 1rem;
+}
 
-  .first-step-actions {
-    margin-top: 1rem;
+.auto-reg-info {
+  display: block;
+  width: 100%;
+
+  .auto-reg-desc {
+    margin: 0 0 1rem 0;
+  }
+}
+
+.idp-content {
+  display: flex;
+  margin: 0 -0.5rem;
+  flex-wrap: wrap;
+
+  .desc {
+    flex-basis: 100%;
+    margin: 0 0.5rem;
+    margin-bottom: 1rem;
   }
 
-  .auto-reg-info {
-    display: block;
-    width: 100%;
+  .formfield {
+    flex: 1;
+    margin: 0 0.5rem;
 
-    .auto-reg-desc {
-      margin: 0 0 1rem 0;
-    }
-  }
-
-  .idp-content {
-    display: flex;
-    margin: 0 -0.5rem;
-    flex-wrap: wrap;
-
-    .desc {
+    @media only screen and (max-width: 450px) {
       flex-basis: 100%;
-      margin: 0 0.5rem;
-      margin-bottom: 1rem;
-    }
-
-    .formfield {
-      flex: 1;
-      margin: 0 0.5rem;
-
-      @media only screen and (max-width: 450px) {
-        flex-basis: 100%;
-      }
-    }
-  }
-
-  .idp-create-actions {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 1rem;
-
-    button[mat-stroked-button] {
-      border-radius: 0.5rem;
-    }
-
-    button[mat-raised-button] {
-      border-radius: 0.5rem;
     }
   }
 }
+
+.idp-create-actions {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 1rem;
+
+  button[mat-stroked-button] {
+    border-radius: 0.5rem;
+  }
+
+  button[mat-raised-button] {
+    border-radius: 0.5rem;
+  }
+}

console/src/app/modules/idp-create/idp-create.module.ts

@@ -11,6 +11,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { InputModule } from 'src/app/modules/input/input.module';
 
+import { CreateLayoutModule } from '../create-layout/create-layout.module';
 import { InfoSectionModule } from '../info-section/info-section.module';
 import { IdpCreateRoutingModule } from './idp-create-routing.module';
 import { IdpCreateComponent } from './idp-create.component';
@@ -23,6 +24,7 @@ import { IdpTypeRadioComponent } from './idp-type-radio/idp-type-radio.component
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
+    CreateLayoutModule,
     InfoSectionModule,
     InputModule,
     MatButtonModule,
@@ -35,4 +37,4 @@ import { IdpTypeRadioComponent } from './idp-type-radio/idp-type-radio.component
     MatProgressBarModule,
   ],
 })
-export class IdpCreateModule { }
+export class IdpCreateModule {}

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

@@ -1,36 +0,0 @@
-<div class="next-steps">
-  <div class="title-row">
-    <h5>{{'NEXTSTEPS.TITLE' | translate}}</h5>
-    <i class="las la-shoe-prints"></i>
-  </div>
-  <div class="row">
-    <ng-container *ngFor="let link of links">
-      <ng-template *ngIf="link.withRole" cnslHasRole [hasRole]="link.withRole">
-        <div class="step card">
-          <ng-content select="[icon]"></ng-content>
-          <h6>{{ link.i18nTitle | translate }}</h6>
-          <p class="cnsl-secondary-text">{{link.i18nDesc | translate}}</p>
-          <span class="fill-space"></span>
-          <a *ngIf="link.routerLink" [routerLink]="link.routerLink" color="primary" mat-stroked-button>
-            {{'ACTIONS.CONTINUE' | translate}}
-          </a>
-          <a *ngIf="link.href" [href]="link.href" target="_blank" color="primary" mat-stroked-button>
-            {{'ACTIONS.CONTINUE' | translate}}
-          </a>
-        </div>
-      </ng-template>
-      <div class="step card" *ngIf="!link.withRole">
-        <i *ngIf="link.iconClasses" class="{{link.iconClasses}}"></i>
-        <h6>{{ link.i18nTitle | translate }}</h6>
-        <p class="cnsl-secondary-text">{{link.i18nDesc | translate}}</p>
-        <span class="fill-space"></span>
-        <a *ngIf="link.routerLink" [routerLink]="link.routerLink" mat-stroked-button>
-          {{'ACTIONS.CONTINUE' | translate}}
-        </a>
-        <a *ngIf="link.href" [href]="link.href" target="_blank" mat-stroked-button>
-          {{'ACTIONS.CONTINUE' | translate}}
-        </a>
-      </div>
-    </ng-container>
-  </div>
-</div>

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

@@ -1,67 +0,0 @@
-.next-steps {
-  margin-top: 4rem;
-
-  .title-row {
-    display: flex;
-    align-items: center;
-
-    h5 {
-      text-transform: uppercase;
-      font-size: 14px;
-      letter-spacing: 0.05em;
-      font-weight: 400;
-      margin-right: 1rem;
-    }
-  }
-
-  .row {
-    display: grid;
-    row-gap: 1rem;
-    column-gap: 1rem;
-    grid-template-columns: 1fr 1fr 1fr;
-    padding-bottom: 0.5rem;
-
-    @media only screen and (max-width: 1300px) {
-      grid-template-columns: 1fr 1fr;
-    }
-
-    @media only screen and (max-width: 500px) {
-      grid-template-columns: 1fr;
-    }
-
-    .step {
-      padding: 1rem;
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      box-sizing: border-box;
-      align-items: flex-start;
-
-      i {
-        font-size: 2.5rem;
-        margin-bottom: 1rem;
-      }
-
-      h6 {
-        font-size: 1.1rem;
-        text-align: center;
-        font-weight: 400;
-        margin: 0;
-      }
-
-      p {
-        font-size: 14px;
-        margin: 1rem 0;
-      }
-
-      .fill-space {
-        flex: 1;
-      }
-
-      button {
-        display: block;
-        margin: auto;
-      }
-    }
-  }
-}

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

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

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

@@ -1,24 +0,0 @@
-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/policies/privacy-policy/privacy-policy.component.ts

@@ -19,7 +19,6 @@ import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
 
 import { InfoSectionType } from '../../info-section/info-section.component';
-import { CnslLinks } from '../../links/links.component';
 import { WarnDialogComponent } from '../../warn-dialog/warn-dialog.component';
 import { PolicyComponentServiceType } from '../policy-component-types.enum';
 
@@ -33,7 +32,6 @@ export class PrivacyPolicyComponent implements OnInit, OnDestroy {
   public PolicyComponentServiceType: any = PolicyComponentServiceType;
   @Input() public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
 
-  public nextLinks: CnslLinks[] = [];
   private sub: Subscription = new Subscription();
 
   public privacyPolicy: PrivacyPolicy.AsObject | undefined = undefined;

console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts

@@ -118,7 +118,7 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
             case PolicyComponentServiceType.MGMT:
               return this.handleUploadPromise(this.assetService.upload(AssetEndpoint.MGMTDARKLOGO, formData, this.org.id));
             case PolicyComponentServiceType.ADMIN:
-              return this.handleUploadPromise(this.assetService.upload(AssetEndpoint.IAMDARKLOGO, formData, this.org.id));
+              return this.handleUploadPromise(this.assetService.upload(AssetEndpoint.IAMDARKLOGO, formData));
           }
         }
         if (theme === Theme.LIGHT) {
@@ -126,7 +126,7 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
             case PolicyComponentServiceType.MGMT:
               return this.handleUploadPromise(this.assetService.upload(AssetEndpoint.MGMTLOGO, formData, this.org.id));
             case PolicyComponentServiceType.ADMIN:
-              return this.handleUploadPromise(this.assetService.upload(AssetEndpoint.IAMLOGO, formData, this.org.id));
+              return this.handleUploadPromise(this.assetService.upload(AssetEndpoint.IAMLOGO, formData));
           }
         }
       }
@@ -273,7 +273,7 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
               this.handleUploadPromise(this.assetService.upload(AssetEndpoint.MGMTDARKICON, formData, this.org.id));
               break;
             case PolicyComponentServiceType.ADMIN:
-              this.handleUploadPromise(this.assetService.upload(AssetEndpoint.IAMDARKICON, formData, this.org.id));
+              this.handleUploadPromise(this.assetService.upload(AssetEndpoint.IAMDARKICON, formData));
               break;
           }
         }
@@ -283,7 +283,7 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
               this.handleUploadPromise(this.assetService.upload(AssetEndpoint.MGMTICON, formData, this.org.id));
               break;
             case PolicyComponentServiceType.ADMIN:
-              this.handleUploadPromise(this.assetService.upload(AssetEndpoint.IAMICON, formData, this.org.id));
+              this.handleUploadPromise(this.assetService.upload(AssetEndpoint.IAMICON, formData));
               break;
           }
         }