From d527a1c824baf3b7f09a34aa9a1d641382fca868 Mon Sep 17 00:00:00 2001
From: Livio Spring <livio.a@gmail.com>
Date: Wed, 12 Mar 2025 13:37:43 +0100
Subject: [PATCH] feat(console): specify login UI for SAML apps (#9486)

# Which Problems Are Solved

Users were not yet able to specify (and test) the new login UI or
self-hosted login UI for SAML applications through Console.

# How the Problems Are Solved

Added the configuration for SAML apps (as already available for OIDC) in
Console.

# Additional Changes

None

# Additional Context

- closes #9354
---
 .../apps/app-detail/app-detail.component.html | 24 +++++++++++-
 .../apps/app-detail/app-detail.component.scss | 10 +++++
 .../apps/app-detail/app-detail.component.ts   | 38 ++++++++++++++++---
 3 files changed, 64 insertions(+), 8 deletions(-)

diff --git a/console/src/app/pages/projects/apps/app-detail/app-detail.component.html b/console/src/app/pages/projects/apps/app-detail/app-detail.component.html
index 4c2d2cfb82..0817e2f962 100644
--- a/console/src/app/pages/projects/apps/app-detail/app-detail.component.html
+++ b/console/src/app/pages/projects/apps/app-detail/app-detail.component.html
@@ -149,10 +149,10 @@
                   </mat-checkbox>
 
                   <mat-checkbox
-                    *ngIf="loginV2"
+                    *ngIf="oidcLoginV2"
                     color="primary"
                     class="rt"
-                    [formControl]="loginV2"
+                    [formControl]="oidcLoginV2"
                     name="loginV2"
                     matTooltip="{{ 'APP.LOGINV2DESC' | translate }}"
                   >
@@ -239,6 +239,26 @@
               ></ngx-codemirror>
             </div>
 
+            <div class="saml-login-version">
+              <form [formGroup]="samlForm">
+                <mat-checkbox
+                  *ngIf="samlLoginV2"
+                  color="primary"
+                  class="rt"
+                  [formControl]="samlLoginV2"
+                  name="loginV2"
+                  matTooltip="{{ 'APP.LOGINV2DESC' | translate }}"
+                >
+                  {{ 'APP.LOGINV2.USEV2' | translate }}
+                </mat-checkbox>
+
+                <cnsl-form-field class="app-formfield">
+                  <cnsl-label>{{ 'APP.LOGINV2.BASEURL' | translate }}</cnsl-label>
+                  <input cnslInput formControlName="loginV2BaseURL" />
+                </cnsl-form-field>
+              </form>
+            </div>
+
             <div class="btn-container">
               <button
                 class="submit-button"
diff --git a/console/src/app/pages/projects/apps/app-detail/app-detail.component.scss b/console/src/app/pages/projects/apps/app-detail/app-detail.component.scss
index 0cde533b85..0e90b712ad 100644
--- a/console/src/app/pages/projects/apps/app-detail/app-detail.component.scss
+++ b/console/src/app/pages/projects/apps/app-detail/app-detail.component.scss
@@ -201,6 +201,16 @@
         pointer-events: none;
       }
     }
+
+    .saml-login-version {
+      margin-top: 2rem;
+
+      form {
+        display: flex;
+        grid-gap: 1rem;
+        align-items: center;
+      }
+    }
   }
 }
 
diff --git a/console/src/app/pages/projects/apps/app-detail/app-detail.component.ts b/console/src/app/pages/projects/apps/app-detail/app-detail.component.ts
index df08000b53..5affc51695 100644
--- a/console/src/app/pages/projects/apps/app-detail/app-detail.component.ts
+++ b/console/src/app/pages/projects/apps/app-detail/app-detail.component.ts
@@ -228,6 +228,8 @@ export class AppDetailComponent implements OnInit, OnDestroy {
       entityId: ['', []],
       acsURL: ['', []],
       metadataXml: [{ value: '', disabled: true }],
+      loginV2: [{ value: false, disabled: true }],
+      loginV2BaseURL: [{ value: '', disabled: true }],
     });
 
     this.samlForm.valueChanges.subscribe(() => {
@@ -413,6 +415,12 @@ export class AppDetailComponent implements OnInit, OnDestroy {
                   { id: 'configuration', i18nKey: 'APP.CONFIGURATION' },
                   { id: 'urls', i18nKey: 'APP.URLS' },
                 ];
+                if (this.app.samlConfig?.loginVersion?.loginV1) {
+                  this.samlForm.controls['loginV2'].setValue(false);
+                } else if (this.app.samlConfig?.loginVersion?.loginV2) {
+                  this.samlForm.controls['loginV2'].setValue(true);
+                  this.samlForm.controls['loginV2BaseURL'].setValue(this.app.samlConfig.loginVersion.loginV2.baseUri);
+                }
               }
 
               if (allowed) {
@@ -668,9 +676,9 @@ export class AppDetailComponent implements OnInit, OnDestroy {
         req.setGrantTypesList(this.app.oidcConfig.grantTypesList);
         req.setAppType(this.app.oidcConfig.appType);
         const login = new LoginVersion();
-        if (this.loginV2?.value) {
+        if (this.oidcLoginV2?.value) {
           const loginV2 = new LoginV2();
-          loginV2.setBaseUri(this.loginV2BaseURL?.value);
+          loginV2.setBaseUri(this.oidcLoginV2BaseURL?.value);
           login.setLoginV2(loginV2);
         } else {
           login.setLoginV1(new LoginV1());
@@ -757,13 +765,23 @@ export class AppDetailComponent implements OnInit, OnDestroy {
       req.setProjectId(this.projectId);
       req.setAppId(this.app.id);
 
-      if (this.app.samlConfig?.metadataUrl.length > 0) {
+      if (this.app.samlConfig?.metadataUrl?.length > 0) {
         req.setMetadataUrl(this.app.samlConfig?.metadataUrl);
       }
-      if (this.app.samlConfig?.metadataXml.length > 0) {
+      if (this.app.samlConfig?.metadataXml?.length > 0) {
         req.setMetadataXml(this.app.samlConfig?.metadataXml);
       }
 
+      const login = new LoginVersion();
+      if (this.samlLoginV2?.value) {
+        const loginV2 = new LoginV2();
+        loginV2.setBaseUri(this.samlLoginV2BaseURL?.value);
+        login.setLoginV2(loginV2);
+      } else {
+        login.setLoginV1(new LoginV1());
+      }
+      req.setLoginVersion(login);
+
       this.mgmtService
         .updateSAMLAppConfig(req)
         .then(() => {
@@ -860,11 +878,11 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     return this.oidcForm.get('authMethodType');
   }
 
-  public get loginV2(): FormControl<boolean> | null {
+  public get oidcLoginV2(): FormControl<boolean> | null {
     return this.oidcForm.get('loginV2') as FormControl<boolean>;
   }
 
-  public get loginV2BaseURL(): AbstractControl | null {
+  public get oidcLoginV2BaseURL(): AbstractControl | null {
     return this.oidcForm.get('loginV2BaseURL');
   }
 
@@ -912,6 +930,14 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     return this.samlForm.get('acsURL');
   }
 
+  public get samlLoginV2(): FormControl<boolean> | null {
+    return this.samlForm.get('loginV2') as FormControl<boolean>;
+  }
+
+  public get samlLoginV2BaseURL(): AbstractControl | null {
+    return this.samlForm.get('loginV2BaseURL');
+  }
+
   get decodedBase64(): string {
     if (
       this.app &&