feat(console): app compliance messages, dev mode (#575)

* app compliance messages, show devmode

* clnup

* Update console/src/assets/i18n/de.json

Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>

* Update console/src/assets/i18n/en.json

Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>

* Update console/src/assets/i18n/de.json

Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>

Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>

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

@@ -43,6 +43,12 @@
             <button mat-stroked-button
                 (click)="regenerateOIDCClientSecret()">{{'APP.OIDC.REGENERATESECRET' | translate}}</button>
         </div>
+
+        <div class="compliance">
+            <p class="problem" *ngFor="let problem of app.oidcConfig.complianceProblemsList">
+                {{problem.localizedMessage}}
+            </p>
+        </div>
         <form *ngIf="appForm" [formGroup]="appForm" (ngSubmit)="saveOIDCApp()">
             <div class="content">
                 <mat-form-field class="formfield" appearance="outline">
@@ -85,6 +91,12 @@
                         </mat-option>
                     </mat-select>
                 </mat-form-field>
+
+                <mat-slide-toggle color="primary" class="devmode" formControlName="devMode" name="devMode">
+                    {{ 'APP.OIDC.DEVMODE' | translate }}
+                </mat-slide-toggle>
+
+                <p class="step-description">{{'APP.OIDC.DEVMODEDESC' | translate}}</p>
                 <p class="step-description"
                     *ngIf="applicationType?.value == OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE">
                     {{'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate}}</p>

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

@@ -39,6 +39,10 @@
   }
 }
 
+.compliance .problem {
+  font-size: 14px;
+}
+
 .content {
   display: flex;
   flex-direction: row;
@@ -62,6 +66,11 @@
     }
   }
 
+  .devmode {
+    flex: 1 1 100%;
+    margin: 1rem .5rem;
+  }
+
   .step-description {
     font-size: .9rem;
     color: #8795a1;

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

@@ -98,6 +98,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
             name: ['', [Validators.required]],
         });
         this.appForm = this.fb.group({
+            devMode: [false, []],
             clientId: [{ value: '', disabled: true }],
             responseTypesList: [],
             grantTypesList: [],
@@ -195,11 +196,9 @@ export class AppDetailComponent implements OnInit, OnDestroy {
                 input.value = '';
             }
         }
-
     }
 
     public remove(redirect: any, target: RedirectType): void {
-
         if (target === RedirectType.POSTREDIRECT) {
             const index = this.postLogoutRedirectUrisList.indexOf(redirect);
 
@@ -228,6 +227,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
                 this.app.oidcConfig.authMethodType = this.authMethodType?.value;
                 this.app.oidcConfig.redirectUrisList = this.redirectUrisList;
                 this.app.oidcConfig.postLogoutRedirectUrisList = this.postLogoutRedirectUrisList;
+                this.app.oidcConfig.devMode = this.devMode?.value;
 
                 this.projectService
                     .UpdateOIDCAppConfig(this.projectId, this.app.id, this.app.oidcConfig)
@@ -284,4 +284,8 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     public get authMethodType(): AbstractControl | null {
         return this.appForm.get('authMethodType');
     }
+
+    public get devMode(): AbstractControl | null {
+        return this.appForm.get('devMode');
+    }
 }

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

@@ -14,6 +14,7 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatStepperModule } from '@angular/material/stepper';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
@@ -57,6 +58,7 @@ import { AppsRoutingModule } from './apps-routing.module';
         MatStepperModule,
         MatRadioModule,
         CopyToClipboardModule,
+        MatSlideToggleModule,
     ],
     exports: [TranslateModule],
 })

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

@@ -50,12 +50,7 @@ import {
     ProjectSearchRequest,
     ProjectSearchResponse,
     ProjectUpdateRequest,
-    ProjectUserGrantSearchRequest,
     ProjectView,
-    UserGrant,
-    UserGrantCreate,
-    UserGrantSearchQuery,
-    UserGrantSearchResponse,
     ZitadelDocs,
 } from '../proto/generated/management_pb';
 import { GrpcBackendService } from './grpc-backend.service';
@@ -588,6 +583,7 @@ export class ProjectService {
         req.setPostLogoutRedirectUrisList(oidcConfig.postLogoutRedirectUrisList);
         req.setGrantTypesList(oidcConfig.grantTypesList);
         req.setApplicationType(oidcConfig.applicationType);
+        req.setDevMode(oidcConfig.devMode);
         return await this.request(
             c => c.updateApplicationOIDCConfig,
             req,

console/src/assets/i18n/de.json

@@ -562,7 +562,7 @@
             "TITLEFIRST":"Geben Sie zuerst einen Namen ein!",
             "TYPETITLE":"Welche Art von Applikation möchtest du erstellen?",
             "REDIRECTTITLE":"Wohin soll nach dem Login weitergeleitet werden?",
-            "REDIRECTDESCRIPTIONWEB":"Der redirect muss mit https:// beginnen. http:// ist nur für Testzwecke zulässig!",
+            "REDIRECTDESCRIPTIONWEB":"Der redirect muss mit https:// beginnen. http:// ist nur im Dev Mode zulässig!",
             "REDIRECTDESCRIPTIONNATIVE":"Die Weiterleitung muss mit einem eigenen Protokoll oder http://localhost beginnen!",
             "REDIRECTNOTVALID":"Diese Weiterleitung ist nicht zulässig!",
             "POSTREDIRECTTITLE":"Das ist die Weiterleitung nach einem logout.",
@@ -572,6 +572,8 @@
             "CLIENTSECRET": "Client Secret",
             "CLIENTSECRET_DESCRIPTION": "Speichere das Client Secret, da es verschwindet, sobald der Dialog geschlossen wird!",
             "REGENERATESECRET": "Client Secret neu generieren",
+            "DEVMODE":"Dev Mode",
+            "DEVMODEDESC":"Bei eingeschaltetem Dev Mode werden die Redirect Uris im OIDC Flow nicht validiert.",
             "REDIRECT": "Redirect URIs",
             "REDIRECTSECTION": "Redirect URIs",
             "POSTLOGOUTREDIRECT":"Post logout URIs",

console/src/assets/i18n/en.json

@@ -563,8 +563,8 @@
             "TYPETITLE":"What type of application do you want to create?",
             "REDIRECTTITLE":"Specify the urls where the login will redirect to.",
             "POSTREDIRECTTITLE":"This is the redirect after logout.",
-            "REDIRECTDESCRIPTIONWEB":"The redirect has to begin with https://. http:// is only valid for testing purposes!",
+            "REDIRECTDESCRIPTIONWEB":"Redirects must begin with https://. http:// is only valid with enabled dev mode.",
-            "REDIRECTDESCRIPTIONNATIVE":"The redirect has to begin with your own protocol or http://localhost!",
+            "REDIRECTDESCRIPTIONNATIVE":"Redirects must begin with your own protocol or http://localhost!",
             "REDIRECTNOTVALID":"This redirect is not valid!",
             "TYPEREQUIRED":"The type is required!",
             "TITLE": "OIDC Configuration",
@@ -572,6 +572,8 @@
             "CLIENTSECRET": "Client Secret",
             "CLIENTSECRET_DESCRIPTION": "Save your Client Secret as it will disappear once the dialog is closed!",
             "REGENERATESECRET": "Regenerate Client Secret",
+            "DEVMODE":"Dev Mode",
+            "DEVMODEDESC":"With enabled dev mode, redirect uris will not be validated!",
             "REDIRECT": "Redirect URIs",
             "REDIRECTSECTION": "Redirect URIs",
             "POSTLOGOUTREDIRECT":"Post logout URIs",