web/admin/providers: use form groups

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/pages/providers/oauth2/OAuth2ProviderForm.ts

@@ -7,6 +7,7 @@ import { Form } from "../../../elements/forms/Form";
 import { until } from "lit-html/directives/until";
 import { ifDefined } from "lit-html/directives/if-defined";
 import "../../../elements/forms/HorizontalFormElement";
+import "../../../elements/forms/FormGroup";
 
 @customElement("ak-provider-oauth2-form")
 export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
@@ -68,6 +69,11 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
                 <p class="pf-c-form__helper-text">${gettext("Flow used when authorizing this provider.")}</p>
             </ak-form-element-horizontal>
 
+            <ak-form-group .expanded=${true}>
+                <span slot="header">
+                    ${gettext("Protocol settings")}
+                </span>
+                <div slot="body" class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${gettext("Client type")}
                         ?required=${true}
@@ -93,6 +99,19 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
                         name="clientSecret">
                         <input type="text" value="${ifDefined(this.provider?.clientSecret /* TODO: Generate secret */)}" class="pf-c-form-control">
                     </ak-form-element-horizontal>
+                    <ak-form-element-horizontal
+                        label=${gettext("Redirect URIs")}
+                        name="redirectUris">
+                        <textarea class="pf-c-form-control">${this.provider?.redirectUris}</textarea>
+                    </ak-form-element-horizontal>
+                </div>
+            </ak-form-group>
+
+            <ak-form-group>
+                <span slot="header">
+                    ${gettext("Advanced protocol settings")}
+                </span>
+                <div slot="body" class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${gettext("Token validity")}
                         ?required=${true}
@@ -149,11 +168,6 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
                         </select>
                         <p class="pf-c-form__helper-text">${gettext("Key used to sign the tokens. Only required when JWT Algorithm is set to RS256.")}</p>
                     </ak-form-element-horizontal>
-            <ak-form-element-horizontal
-                label=${gettext("Redirect URIs")}
-                name="redirectUris">
-                <textarea class="pf-c-form-control">${this.provider?.redirectUris}</textarea>
-            </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${gettext("Subject mode")}
                         ?required=${true}
@@ -201,6 +215,8 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
                             ${gettext("Configure how the issuer field of the ID Token should be filled.")}
                         </p>
                     </ak-form-element-horizontal>
+                </div>
+            </ak-form-group>
         </form>`;
     }
 

web/src/pages/providers/proxy/ProxyProviderForm.ts

@@ -7,6 +7,8 @@ import { Form } from "../../../elements/forms/Form";
 import { until } from "lit-html/directives/until";
 import { ifDefined } from "lit-html/directives/if-defined";
 import "../../../elements/forms/HorizontalFormElement";
+import "../../../elements/forms/FormGroup";
+import { first } from "../../../utils";
 
 @customElement("ak-provider-proxy-form")
 export class ProxyProviderFormPage extends Form<ProxyProvider> {
@@ -68,6 +70,11 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
                 <p class="pf-c-form__helper-text">${gettext("Flow used when authorizing this provider.")}</p>
             </ak-form-element-horizontal>
 
+            <ak-form-group .expanded=${true}>
+                <span slot="header">
+                    ${gettext("Protocol settings")}
+                </span>
+                <div slot="body" class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${gettext("Internal host")}
                         ?required=${true}
@@ -76,7 +83,7 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal name="internalHostSslValidation">
                         <div class="pf-c-check">
-                    <input type="checkbox" class="pf-c-check__input" ?checked=${this.provider?.internalHostSslValidation || false}>
+                            <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.provider?.internalHostSslValidation, true)}>
                             <label class="pf-c-check__label">
                                 ${gettext("Internal host SSL Validation")}
                             </label>
@@ -89,7 +96,13 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
                         name="externalHost">
                         <input type="text" value="${ifDefined(this.provider?.externalHost)}" class="pf-c-form-control" required>
                     </ak-form-element-horizontal>
+                </div>
+            </ak-form-group>
 
+            <ak-form-group>
+                <span slot="header">
+                    ${gettext("Advanced protocol settings")}
+                </span>
                     <ak-form-element-horizontal
                         label=${gettext("Certificate")}
                         name="certificate">
@@ -133,6 +146,8 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
                         <input type="text" value="${ifDefined(this.provider?.basicAuthPasswordAttribute)}" class="pf-c-form-control">
                         <p class="pf-c-form__helper-text">${gettext("User/Group Attribute used for the password part of the HTTP-Basic Header.")}</p>
                     </ak-form-element-horizontal>
+                </div>
+            </ak-form-group>
         </form>`;
     }
 

web/src/pages/providers/saml/SAMLProviderForm.ts

@@ -7,6 +7,7 @@ import { Form } from "../../../elements/forms/Form";
 import { until } from "lit-html/directives/until";
 import { ifDefined } from "lit-html/directives/if-defined";
 import "../../../elements/forms/HorizontalFormElement";
+import "../../../elements/forms/FormGroup";
 
 @customElement("ak-provider-saml-form")
 export class SAMLProviderFormPage extends Form<SAMLProvider> {
@@ -68,6 +69,11 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
                 <p class="pf-c-form__helper-text">${gettext("Flow used when authorizing this provider.")}</p>
             </ak-form-element-horizontal>
 
+            <ak-form-group .expanded=${true}>
+                <span slot="header">
+                    ${gettext("Protocol settings")}
+                </span>
+                <div slot="body" class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${gettext("ACS URL")}
                         ?required=${true}
@@ -80,7 +86,6 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
                         name="issuer">
                         <input type="text" value="${this.provider?.issuer || "authentik"}" class="pf-c-form-control" required>
                     </ak-form-element-horizontal>
-
                     <ak-form-element-horizontal
                         label=${gettext("Service Provider Binding")}
                         ?required=${true}
@@ -100,7 +105,14 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
                         name="audience">
                         <input type="text" value="${ifDefined(this.provider?.audience)}" class="pf-c-form-control">
                     </ak-form-element-horizontal>
+                </div>
+            </ak-form-group>
 
+            <ak-form-group>
+                <span slot="header">
+                    ${gettext("Advanced protocol settings")}
+                </span>
+                <div slot="body" class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${gettext("Signing Keypair")}
                         name="signingKp">
@@ -119,7 +131,6 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${gettext("Verification Certificate")}
-                ?required=${true}
                         name="verificationKp">
                         <select class="pf-c-form-control">
                             <option value="" ?selected=${this.provider?.verificationKp === undefined}>---------</option>
@@ -231,6 +242,8 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
                             </option>
                         </select>
                     </ak-form-element-horizontal>
+                </div>
+            </ak-form-group>
         </form>`;
     }