feat(console): allow setting development mode when creating an OIDC app (#6593)

* fix: don't show verify domain if policy disabled

* feat: set dev mode on/off when oidc app is created

* fix: linting json files

* fix: add @peintnermax suggestions

---------

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

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

@@ -2,7 +2,7 @@
   title="{{ 'APP.PAGES.CREATE' | translate }}"
   class="app-create-wrapper"
   [createSteps]="
-    !devmode
+    !pro
       ? appType?.value?.createType === AppCreateType.OIDC
         ? appType?.value.oidcAppType !== OIDCAppType.OIDC_APP_TYPE_NATIVE
           ? 4
@@ -20,13 +20,13 @@
   <h1>{{ 'APP.PAGES.CREATE_DESC_TITLE' | translate }}</h1>
   <mat-progress-bar class="progress-bar" color="primary" *ngIf="loading" mode="indeterminate"></mat-progress-bar>
 
-  <mat-checkbox class="proswitch" color="primary" [(ngModel)]="devmode">
+  <mat-checkbox class="proswitch" color="primary" [(ngModel)]="pro">
     {{ 'APP.PROSWITCH' | translate }}
   </mat-checkbox>
 
   <mat-horizontal-stepper
     class="stepper {{ 'last-edited-step-' + stepper.selectedIndex }}"
-    *ngIf="!devmode"
+    *ngIf="!pro"
     linear
     #stepper
     labelPosition="bottom"
@@ -109,6 +109,15 @@
         {{ 'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate }}
       </p>
 
+      <mat-slide-toggle
+        color="primary"
+        [(ngModel)]="devMode"
+        [ngModelOptions]="{ standalone: true }"
+        matTooltip="{{ 'APP.OIDC.DEVMODEDESC' | translate }}"
+      >
+        {{ 'APP.OIDC.DEVMODE' | translate }}
+      </mat-slide-toggle>
+
       <cnsl-redirect-uris
         class="redirect-section"
         [disabled]="false"
@@ -116,6 +125,7 @@
         [(ngModel)]="redirectUris"
         [getValues]="requestRedirectValuesSubject$"
         title="{{ 'APP.OIDC.REDIRECT' | translate }}"
+        [devMode]="devMode"
         data-e2e="redirect-uris"
       >
       </cnsl-redirect-uris>
@@ -144,6 +154,7 @@
         [getValues]="requestRedirectValuesSubject$"
         title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}"
         [isNative]="appType?.value.oidcAppType === OIDCAppType.OIDC_APP_TYPE_NATIVE"
+        [devMode]="devMode"
         data-e2e="postlogout-uris"
       >
       </cnsl-redirect-uris>
@@ -299,6 +310,19 @@
         </div>
       </ng-container>
 
+      <ng-container *ngIf="appType?.value?.createType === AppCreateType.OIDC">
+        <div class="row">
+          <span class="left cnsl-secondary-text">
+            {{ 'APP.OIDC.DEVMODE' | translate }}
+          </span>
+          <span class="right">
+            <span>
+              {{ devMode ? ('APP.OIDC.DEVMODE_ENABLED' | translate) : ('APP.OIDC.DEVMODE_DISABLED' | translate) }}
+            </span>
+          </span>
+        </div>
+      </ng-container>
+
       <ng-container *ngIf="appType?.value?.createType === AppCreateType.API">
         <div class="row">
           <span class="left cnsl-secondary-text">
@@ -342,7 +366,7 @@
     </ng-template>
   </mat-horizontal-stepper>
 
-  <div *ngIf="devmode" class="dev">
+  <div *ngIf="pro" class="dev">
     <form [formGroup]="form" (ngSubmit)="createApp()" data-e2e="create-app-wizzard-3">
       <div class="content">
         <cnsl-form-field class="formfield">
@@ -439,6 +463,14 @@
         "
       >
         <div class="formfield full-width">
+          <mat-slide-toggle
+            color="primary"
+            [(ngModel)]="devMode"
+            [ngModelOptions]="{ standalone: true }"
+            matTooltip="{{ 'APP.OIDC.DEVMODEDESC' | translate }}"
+          >
+            {{ 'APP.OIDC.DEVMODE' | translate }}
+          </mat-slide-toggle>
           <cnsl-redirect-uris
             class="redirect-section"
             [disabled]="false"

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

@@ -28,6 +28,7 @@ import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
 
+import { MatLegacySlideToggleChange } from '@angular/material/legacy-slide-toggle';
 import { AppSecretDialogComponent } from '../app-secret-dialog/app-secret-dialog.component';
 import {
   BASIC_AUTH_METHOD,
@@ -51,7 +52,7 @@ const MAX_ALLOWED_SIZE = 1 * 1024 * 1024;
 export class AppCreateComponent implements OnInit, OnDestroy {
   private subscription: Subscription = new Subscription();
   private destroyed$: Subject<void> = new Subject();
-  public devmode: boolean = false;
+  public pro: boolean = false;
   public projectId: string = '';
   public loading: boolean = false;
 
@@ -239,7 +240,16 @@ export class AppCreateComponent implements OnInit, OnDestroy {
     this.oidcAppRequest.setPostLogoutRedirectUrisList(value);
   }
 
+  public get devMode() {
+    return this.oidcAppRequest.toObject().devMode;
+  }
+
+  public set devMode(value: boolean) {
+    this.oidcAppRequest.setDevMode(value);
+  }
+
   public ngOnInit(): void {
+    this.devMode = false;
     this.subscription = this.route.params.subscribe((params) => this.getData(params));
 
     const projectId = this.route.snapshot.paramMap.get('projectid');
@@ -362,9 +372,9 @@ export class AppCreateComponent implements OnInit, OnDestroy {
   }
 
   public createApp(): void {
-    const appOIDCCheck = this.devmode ? this.isDevOIDC : this.isStepperOIDC;
-    const appAPICheck = this.devmode ? this.isDevAPI : this.isStepperAPI;
-    const appSAMLCheck = this.devmode ? this.isDevSAML : this.isStepperSAML;
+    const appOIDCCheck = this.pro ? this.isDevOIDC : this.isStepperOIDC;
+    const appAPICheck = this.pro ? this.isDevAPI : this.isStepperAPI;
+    const appSAMLCheck = this.pro ? this.isDevSAML : this.isStepperSAML;
 
     if (appOIDCCheck) {
       this.requestRedirectValuesSubject$.next();