From 3fc0904425978403bf81a52191484ebbe985abc1 Mon Sep 17 00:00:00 2001
From: "Jens L." <jens@goauthentik.io>
Date: Thu, 24 Oct 2024 17:56:20 +0200
Subject: [PATCH] web/admin: fix missing div in wizard forms (#11794)

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---
 ...lication-wizard-authentication-by-oauth.ts |  62 +++----
 .../proxy/AuthenticationByProxyPage.ts        |  65 ++++----
 ...rd-authentication-by-saml-configuration.ts | 155 +++++++++---------
 3 files changed, 137 insertions(+), 145 deletions(-)

diff --git a/web/src/admin/applications/wizard/methods/oauth/ak-application-wizard-authentication-by-oauth.ts b/web/src/admin/applications/wizard/methods/oauth/ak-application-wizard-authentication-by-oauth.ts
index 8880d3006126..db1d6517f828 100644
--- a/web/src/admin/applications/wizard/methods/oauth/ak-application-wizard-authentication-by-oauth.ts
+++ b/web/src/admin/applications/wizard/methods/oauth/ak-application-wizard-authentication-by-oauth.ts
@@ -113,9 +113,8 @@ export class ApplicationWizardAuthenticationByOauth extends BaseProviderPanel {
                         <ak-text-input
                             name="clientSecret"
                             label=${msg("Client Secret")}
-                            value=${
-                                provider?.clientSecret ?? randomString(128, ascii_letters + digits)
-                            }
+                            value=${provider?.clientSecret ??
+                            randomString(128, ascii_letters + digits)}
                             .errorMessages=${errors?.clientSecret ?? []}
                             ?hidden=${!this.showClientSecret}
                         >
@@ -150,35 +149,36 @@ export class ApplicationWizardAuthenticationByOauth extends BaseProviderPanel {
 
                 <ak-form-group>
                     <span slot="header"> ${msg("Advanced flow settings")} </span>
-                    <ak-form-element-horizontal
-                        name="authenticationFlow"
-                        label=${msg("Authentication flow")}
-                    >
-                        <ak-flow-search
-                            flowType=${FlowsInstancesListDesignationEnum.Authentication}
-                            .currentFlow=${provider?.authenticationFlow}
-                        ></ak-flow-search>
-                        <p class="pf-c-form__helper-text">
-                            ${msg(
-                                "Flow used when a user access this provider and is not authenticated.",
-                            )}
-                        </p>
-                    </ak-form-element-horizontal>
-                    <ak-form-element-horizontal
-                        label=${msg("Invalidation flow")}
-                        name="invalidationFlow"
-                        required
-                    >
-                        <ak-flow-search
-                            flowType=${FlowsInstancesListDesignationEnum.Invalidation}
-                            .currentFlow=${provider?.invalidationFlow}
-                            defaultFlowSlug="default-provider-invalidation-flow"
+                    <div slot="body" class="pf-c-form">
+                        <ak-form-element-horizontal
+                            name="authenticationFlow"
+                            label=${msg("Authentication flow")}
+                        >
+                            <ak-flow-search
+                                flowType=${FlowsInstancesListDesignationEnum.Authentication}
+                                .currentFlow=${provider?.authenticationFlow}
+                            ></ak-flow-search>
+                            <p class="pf-c-form__helper-text">
+                                ${msg(
+                                    "Flow used when a user access this provider and is not authenticated.",
+                                )}
+                            </p>
+                        </ak-form-element-horizontal>
+                        <ak-form-element-horizontal
+                            label=${msg("Invalidation flow")}
+                            name="invalidationFlow"
                             required
-                        ></ak-flow-search>
-                        <p class="pf-c-form__helper-text">
-                            ${msg("Flow used when logging out of this provider.")}
-                        </p>
-                    </ak-form-element-horizontal>
+                        >
+                            <ak-flow-search
+                                flowType=${FlowsInstancesListDesignationEnum.Invalidation}
+                                .currentFlow=${provider?.invalidationFlow}
+                                defaultFlowSlug="default-provider-invalidation-flow"
+                                required
+                            ></ak-flow-search>
+                            <p class="pf-c-form__helper-text">
+                                ${msg("Flow used when logging out of this provider.")}
+                            </p>
+                        </ak-form-element-horizontal>
                     </div>
                 </ak-form-group>
                 <ak-form-group>
diff --git a/web/src/admin/applications/wizard/methods/proxy/AuthenticationByProxyPage.ts b/web/src/admin/applications/wizard/methods/proxy/AuthenticationByProxyPage.ts
index e6d66aea6f0a..867efbd0b383 100644
--- a/web/src/admin/applications/wizard/methods/proxy/AuthenticationByProxyPage.ts
+++ b/web/src/admin/applications/wizard/methods/proxy/AuthenticationByProxyPage.ts
@@ -161,11 +161,9 @@ export class AkTypeProxyApplicationWizardPage extends BaseProviderPanel {
 
                         <ak-textarea-input
                             name="skipPathRegex"
-                            label=${
-                                this.mode === ProxyMode.ForwardDomain
-                                    ? msg("Unauthenticated URLs")
-                                    : msg("Unauthenticated Paths")
-                            }
+                            label=${this.mode === ProxyMode.ForwardDomain
+                                ? msg("Unauthenticated URLs")
+                                : msg("Unauthenticated Paths")}
                             value=${ifDefined(this.instance?.skipPathRegex)}
                             .errorMessages=${errors?.skipPathRegex ?? []}
                             .bighelp=${html` <p class="pf-c-form__helper-text">
@@ -184,35 +182,36 @@ export class AkTypeProxyApplicationWizardPage extends BaseProviderPanel {
                 </ak-form-group>
                 <ak-form-group>
                     <span slot="header"> ${msg("Advanced flow settings")} </span>
-                    <ak-form-element-horizontal
-                        name="authenticationFlow"
-                        label=${msg("Authentication flow")}
-                    >
-                        <ak-flow-search
-                            flowType=${FlowsInstancesListDesignationEnum.Authentication}
-                            .currentFlow=${this.instance?.authenticationFlow}
-                        ></ak-flow-search>
-                        <p class="pf-c-form__helper-text">
-                            ${msg(
-                                "Flow used when a user access this provider and is not authenticated.",
-                            )}
-                        </p>
-                    </ak-form-element-horizontal>
-                    <ak-form-element-horizontal
-                        label=${msg("Invalidation flow")}
-                        name="invalidationFlow"
-                        required
-                    >
-                        <ak-flow-search
-                            flowType=${FlowsInstancesListDesignationEnum.Invalidation}
-                            .currentFlow=${this.instance?.invalidationFlow}
-                            defaultFlowSlug="default-provider-invalidation-flow"
+                    <div slot="body" class="pf-c-form">
+                        <ak-form-element-horizontal
+                            name="authenticationFlow"
+                            label=${msg("Authentication flow")}
+                        >
+                            <ak-flow-search
+                                flowType=${FlowsInstancesListDesignationEnum.Authentication}
+                                .currentFlow=${this.instance?.authenticationFlow}
+                            ></ak-flow-search>
+                            <p class="pf-c-form__helper-text">
+                                ${msg(
+                                    "Flow used when a user access this provider and is not authenticated.",
+                                )}
+                            </p>
+                        </ak-form-element-horizontal>
+                        <ak-form-element-horizontal
+                            label=${msg("Invalidation flow")}
+                            name="invalidationFlow"
                             required
-                        ></ak-flow-search>
-                        <p class="pf-c-form__helper-text">
-                            ${msg("Flow used when logging out of this provider.")}
-                        </p>
-                    </ak-form-element-horizontal>
+                        >
+                            <ak-flow-search
+                                flowType=${FlowsInstancesListDesignationEnum.Invalidation}
+                                .currentFlow=${this.instance?.invalidationFlow}
+                                defaultFlowSlug="default-provider-invalidation-flow"
+                                required
+                            ></ak-flow-search>
+                            <p class="pf-c-form__helper-text">
+                                ${msg("Flow used when logging out of this provider.")}
+                            </p>
+                        </ak-form-element-horizontal>
                     </div>
                 </ak-form-group>
                 <ak-form-group>
diff --git a/web/src/admin/applications/wizard/methods/saml/ak-application-wizard-authentication-by-saml-configuration.ts b/web/src/admin/applications/wizard/methods/saml/ak-application-wizard-authentication-by-saml-configuration.ts
index 61c1f6403df3..54cbe258ca39 100644
--- a/web/src/admin/applications/wizard/methods/saml/ak-application-wizard-authentication-by-saml-configuration.ts
+++ b/web/src/admin/applications/wizard/methods/saml/ak-application-wizard-authentication-by-saml-configuration.ts
@@ -146,36 +146,37 @@ export class ApplicationWizardProviderSamlConfiguration extends BaseProviderPane
                 </ak-form-group>
 
                 <ak-form-group>
-                    <span slot="header"> ${msg("Advanced flow settings")} </span>
-                    <ak-form-element-horizontal
-                        name="authenticationFlow"
-                        label=${msg("Authentication flow")}
-                    >
-                        <ak-flow-search
-                            flowType=${FlowsInstancesListDesignationEnum.Authentication}
-                            .currentFlow=${provider?.authenticationFlow}
-                        ></ak-flow-search>
-                        <p class="pf-c-form__helper-text">
-                            ${msg(
-                                "Flow used when a user access this provider and is not authenticated.",
-                            )}
-                        </p>
-                    </ak-form-element-horizontal>
-                    <ak-form-element-horizontal
-                        label=${msg("Invalidation flow")}
-                        name="invalidationFlow"
-                        required
-                    >
-                        <ak-flow-search
-                            flowType=${FlowsInstancesListDesignationEnum.Invalidation}
-                            .currentFlow=${provider?.invalidationFlow}
-                            defaultFlowSlug="default-provider-invalidation-flow"
+                    <span slot="header"> ${msg("Advanced flow settings")}</span>
+                    <div slot="body" class="pf-c-form">
+                        <ak-form-element-horizontal
+                            name="authenticationFlow"
+                            label=${msg("Authentication flow")}
+                        >
+                            <ak-flow-search
+                                flowType=${FlowsInstancesListDesignationEnum.Authentication}
+                                .currentFlow=${provider?.authenticationFlow}
+                            ></ak-flow-search>
+                            <p class="pf-c-form__helper-text">
+                                ${msg(
+                                    "Flow used when a user access this provider and is not authenticated.",
+                                )}
+                            </p>
+                        </ak-form-element-horizontal>
+                        <ak-form-element-horizontal
+                            label=${msg("Invalidation flow")}
+                            name="invalidationFlow"
                             required
-                        ></ak-flow-search>
-                        <p class="pf-c-form__helper-text">
-                            ${msg("Flow used when logging out of this provider.")}
-                        </p>
-                    </ak-form-element-horizontal>
+                        >
+                            <ak-flow-search
+                                flowType=${FlowsInstancesListDesignationEnum.Invalidation}
+                                .currentFlow=${provider?.invalidationFlow}
+                                defaultFlowSlug="default-provider-invalidation-flow"
+                                required
+                            ></ak-flow-search>
+                            <p class="pf-c-form__helper-text">
+                                ${msg("Flow used when logging out of this provider.")}
+                            </p>
+                        </ak-form-element-horizontal>
                     </div>
                 </ak-form-group>
                 <ak-form-group>
@@ -199,60 +200,52 @@ export class ApplicationWizardProviderSamlConfiguration extends BaseProviderPane
                                 )}
                             </p>
                         </ak-form-element-horizontal>
-                        ${
-                            this.hasSigningKp
-                                ? html` <ak-form-element-horizontal name="signAssertion">
-                                          <label class="pf-c-switch">
-                                              <input
-                                                  class="pf-c-switch__input"
-                                                  type="checkbox"
-                                                  ?checked=${first(provider?.signAssertion, true)}
-                                              />
-                                              <span class="pf-c-switch__toggle">
-                                                  <span class="pf-c-switch__toggle-icon">
-                                                      <i
-                                                          class="fas fa-check"
-                                                          aria-hidden="true"
-                                                      ></i>
-                                                  </span>
+                        ${this.hasSigningKp
+                            ? html` <ak-form-element-horizontal name="signAssertion">
+                                      <label class="pf-c-switch">
+                                          <input
+                                              class="pf-c-switch__input"
+                                              type="checkbox"
+                                              ?checked=${first(provider?.signAssertion, true)}
+                                          />
+                                          <span class="pf-c-switch__toggle">
+                                              <span class="pf-c-switch__toggle-icon">
+                                                  <i class="fas fa-check" aria-hidden="true"></i>
                                               </span>
-                                              <span class="pf-c-switch__label"
-                                                  >${msg("Sign assertions")}</span
-                                              >
-                                          </label>
-                                          <p class="pf-c-form__helper-text">
-                                              ${msg(
-                                                  "When enabled, the assertion element of the SAML response will be signed.",
-                                              )}
-                                          </p>
-                                      </ak-form-element-horizontal>
-                                      <ak-form-element-horizontal name="signResponse">
-                                          <label class="pf-c-switch">
-                                              <input
-                                                  class="pf-c-switch__input"
-                                                  type="checkbox"
-                                                  ?checked=${first(provider?.signResponse, false)}
-                                              />
-                                              <span class="pf-c-switch__toggle">
-                                                  <span class="pf-c-switch__toggle-icon">
-                                                      <i
-                                                          class="fas fa-check"
-                                                          aria-hidden="true"
-                                                      ></i>
-                                                  </span>
+                                          </span>
+                                          <span class="pf-c-switch__label"
+                                              >${msg("Sign assertions")}</span
+                                          >
+                                      </label>
+                                      <p class="pf-c-form__helper-text">
+                                          ${msg(
+                                              "When enabled, the assertion element of the SAML response will be signed.",
+                                          )}
+                                      </p>
+                                  </ak-form-element-horizontal>
+                                  <ak-form-element-horizontal name="signResponse">
+                                      <label class="pf-c-switch">
+                                          <input
+                                              class="pf-c-switch__input"
+                                              type="checkbox"
+                                              ?checked=${first(provider?.signResponse, false)}
+                                          />
+                                          <span class="pf-c-switch__toggle">
+                                              <span class="pf-c-switch__toggle-icon">
+                                                  <i class="fas fa-check" aria-hidden="true"></i>
                                               </span>
-                                              <span class="pf-c-switch__label"
-                                                  >${msg("Sign responses")}</span
-                                              >
-                                          </label>
-                                          <p class="pf-c-form__helper-text">
-                                              ${msg(
-                                                  "When enabled, the assertion element of the SAML response will be signed.",
-                                              )}
-                                          </p>
-                                      </ak-form-element-horizontal>`
-                                : nothing
-                        }
+                                          </span>
+                                          <span class="pf-c-switch__label"
+                                              >${msg("Sign responses")}</span
+                                          >
+                                      </label>
+                                      <p class="pf-c-form__helper-text">
+                                          ${msg(
+                                              "When enabled, the assertion element of the SAML response will be signed.",
+                                          )}
+                                      </p>
+                                  </ak-form-element-horizontal>`
+                            : nothing}
 
                         <ak-form-element-horizontal
                             label=${msg("Verification Certificate")}