web: fix form default submit handler (#7122)

* web/elements: rename renderInlineForm to renderForm set submit handler to empty function

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix all kinds of forms not using the form inheritance correctly

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

web/src/admin/applications/ApplicationCheckAccessForm.ts

@@ -114,7 +114,7 @@ export class ApplicationCheckAccessForm extends Form<{ forUser: number }> {
         `;
     }
 
-    renderInlineForm(): TemplateResult {
+    renderForm(): TemplateResult {
         return html`<ak-form-element-horizontal
                 label=${msg("User")}
                 ?required=${true}

web/src/admin/applications/ApplicationForm.ts

@@ -90,8 +90,7 @@ export class ApplicationForm extends ModelForm<Application, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
-            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -321,7 +320,6 @@ ${ifDefined(this.instance?.metaDescription)}</textarea
                         >
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/blueprints/BlueprintForm.ts

@@ -68,8 +68,7 @@ export class BlueprintForm extends ModelForm<BlueprintInstance, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
-            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -193,7 +192,6 @@ export class BlueprintForm extends ModelForm<BlueprintInstance, string> {
                         </p>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/crypto/CertificateGenerateForm.ts

@@ -20,7 +20,7 @@ export class CertificateKeyPairForm extends Form<CertificateGenerationRequest> {
         });
     }
 
-    renderInlineForm(): TemplateResult {
+    renderForm(): TemplateResult {
         return html`<ak-form-element-horizontal
                 label=${msg("Common Name")}
                 name="commonName"

web/src/admin/crypto/CertificateKeyPairForm.ts

@@ -40,8 +40,7 @@ export class CertificateKeyPairForm extends ModelForm<CertificateKeyPair, string
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal label=${msg("Name")} name="name" ?required=${true}>
-            <ak-form-element-horizontal label=${msg("Name")} name="name" ?required=${true}>
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -69,7 +68,6 @@ export class CertificateKeyPairForm extends ModelForm<CertificateKeyPair, string
                         "Optional Private Key. If this is set, you can use this keypair for encryption.",
                     )}
                 </p>
-            </ak-form-element-horizontal>
+            </ak-form-element-horizontal>`;
-        </form>`;
     }
 }

web/src/admin/enterprise/EnterpriseLicenseForm.ts

@@ -46,13 +46,12 @@ export class EnterpriseLicenseForm extends ModelForm<License, string> {
 
     renderForm(): TemplateResult {
         // prettier-ignore
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`
             <ak-form-element-horizontal label=${msg("Install ID")}>
                 <input class="pf-c-form-control" readonly type="text" value="${ifDefined(this.installID)}" />
             </ak-form-element-horizontal>
             <ak-form-element-horizontal name="key" ?writeOnly=${this.instance !== undefined} label=${msg("License key")}>
                 <textarea class="pf-c-form-control"></textarea>
-            </ak-form-element-horizontal>
+            </ak-form-element-horizontal>`;
-        </form>`;
     }
 }

web/src/admin/events/RuleForm.ts

@@ -58,8 +58,7 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
-            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -141,7 +140,6 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
                     .value=${this.instance?.severity}
                 >
                 </ak-radio>
-            </ak-form-element-horizontal>
+            </ak-form-element-horizontal>`;
-        </form>`;
     }
 }

web/src/admin/events/TransportForm.ts

@@ -68,8 +68,7 @@ export class TransportForm extends ModelForm<NotificationTransport, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
-            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -169,7 +168,6 @@ export class TransportForm extends ModelForm<NotificationTransport, string> {
                         "Only send notification once, for example when sending a webhook into a chat channel.",
                     )}
                 </p>
-            </ak-form-element-horizontal>
+            </ak-form-element-horizontal>`;
-        </form>`;
     }
 }

web/src/admin/flows/FlowForm.ts

@@ -78,8 +78,7 @@ export class FlowForm extends ModelForm<Flow, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
-            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -400,7 +399,6 @@ export class FlowForm extends ModelForm<Flow, string> {
                               </p>
                           </ak-form-element-horizontal>`}
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/flows/FlowImportForm.ts

@@ -86,7 +86,7 @@ export class FlowImportForm extends Form<Flow> {
         `;
     }
 
-    renderInlineForm(): TemplateResult {
+    renderForm(): TemplateResult {
         return html`<ak-form-element-horizontal label=${msg("Flow")} name="flow">
                 <input type="file" value="" class="pf-c-form-control" />
                 <p class="pf-c-form__helper-text">

web/src/admin/flows/StageBindingForm.ts

@@ -92,8 +92,7 @@ export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` ${this.renderTarget()}
-            ${this.renderTarget()}
             <ak-form-element-horizontal label=${msg("Stage")} ?required=${true} name="stage">
                 <ak-search-select
                     .fetchObjects=${async (query?: string): Promise<Stage[]> => {
@@ -224,7 +223,6 @@ export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
                     .value=${this.instance?.policyEngineMode}
                 >
                 </ak-radio>
-            </ak-form-element-horizontal>
+            </ak-form-element-horizontal>`;
-        </form>`;
     }
 }

web/src/admin/groups/GroupForm.ts

@@ -58,8 +58,7 @@ export class GroupForm extends ModelForm<Group, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
-            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -126,7 +125,6 @@ export class GroupForm extends ModelForm<Group, string> {
                 <p class="pf-c-form__helper-text">
                     ${msg("Set custom attributes using YAML or JSON.")}
                 </p>
-            </ak-form-element-horizontal>
+            </ak-form-element-horizontal>`;
-        </form>`;
     }
 }

web/src/admin/groups/RelatedGroupList.ts

@@ -46,7 +46,7 @@ export class RelatedGroupAdd extends Form<{ groups: string[] }> {
         return data;
     }
 
-    renderInlineForm(): TemplateResult {
+    renderForm(): TemplateResult {
         return html`<ak-form-element-horizontal label=${msg("Groups to add")} name="groups">
             <div class="pf-c-input-group">
                 <ak-user-group-select-table

web/src/admin/outposts/OutpostForm.ts

@@ -99,8 +99,7 @@ export class OutpostForm extends ModelForm<Outpost, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
-            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -226,7 +225,6 @@ export class OutpostForm extends ModelForm<Outpost, string> {
                         >${msg("Documentation")}</a
                     >
                 </p>
-            </ak-form-element-horizontal>
+            </ak-form-element-horizontal>`;
-        </form>`;
     }
 }

web/src/admin/outposts/ServiceConnectionDockerForm.ts

@@ -42,8 +42,7 @@ export class ServiceConnectionDockerForm extends ModelForm<DockerServiceConnecti
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
-            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -112,7 +111,6 @@ export class ServiceConnectionDockerForm extends ModelForm<DockerServiceConnecti
                 <p class="pf-c-form__helper-text">
                     ${msg("When connecting via SSH, this keypair is used for authentication.")}
                 </p>
-            </ak-form-element-horizontal>
+            </ak-form-element-horizontal>`;
-        </form>`;
     }
 }

web/src/admin/outposts/ServiceConnectionKubernetesForm.ts

@@ -45,8 +45,7 @@ export class ServiceConnectionKubernetesForm extends ModelForm<
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
-            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -100,7 +99,6 @@ export class ServiceConnectionKubernetesForm extends ModelForm<
                         >${msg("Verify Kubernetes API SSL Certificate")}</span
                     >
                 </label>
-            </ak-form-element-horizontal>
+            </ak-form-element-horizontal>`;
-        </form>`;
     }
 }

web/src/admin/policies/PolicyBindingForm.ts

@@ -133,8 +133,7 @@ export class PolicyBindingForm extends ModelForm<PolicyBinding, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <div class="pf-c-card pf-m-selectable pf-m-selected">
-            <div class="pf-c-card pf-m-selectable pf-m-selected">
                 <div class="pf-c-card__body">${this.renderModeSelector()}</div>
                 <div class="pf-c-card__footer">
                     <ak-form-element-horizontal
@@ -318,7 +317,6 @@ export class PolicyBindingForm extends ModelForm<PolicyBinding, string> {
                 <p class="pf-c-form__helper-text">
                     ${msg("Result used when policy execution fails.")}
                 </p>
-            </ak-form-element-horizontal>
+            </ak-form-element-horizontal>`;
-        </form>`;
     }
 }

web/src/admin/policies/PolicyTestForm.ts

@@ -115,7 +115,7 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
         `;
     }
 
-    renderInlineForm(): TemplateResult {
+    renderForm(): TemplateResult {
         return html`<ak-form-element-horizontal label=${msg("User")} ?required=${true} name="user">
                 <ak-search-select
                     .fetchObjects=${async (query?: string): Promise<User[]> => {

web/src/admin/policies/dummy/DummyPolicyForm.ts

@@ -41,8 +41,7 @@ export class DummyPolicyForm extends ModelForm<DummyPolicy, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <span>
-            <span>
                 ${msg(
                     "A policy used for testing. Always returns the same result as specified below after waiting a random duration.",
                 )}
@@ -123,7 +122,6 @@ export class DummyPolicyForm extends ModelForm<DummyPolicy, string> {
                         />
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/policies/event_matcher/EventMatcherPolicyForm.ts

@@ -53,8 +53,7 @@ export class EventMatcherPolicyForm extends ModelForm<EventMatcherPolicy, string
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <span>
-            <span>
                 ${msg(
                     "Matches an event against a set of criteria. If any of the configured values match, the policy passes.",
                 )}
@@ -187,7 +186,6 @@ export class EventMatcherPolicyForm extends ModelForm<EventMatcherPolicy, string
                         </p>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/policies/expiry/ExpiryPolicyForm.ts

@@ -41,8 +41,7 @@ export class PasswordExpiryPolicyForm extends ModelForm<PasswordExpiryPolicy, st
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <span>
-            <span>
                 ${msg(
                     "Checks if the request's user's password has been changed in the last x days, and denys based on settings.",
                 )}
@@ -110,7 +109,6 @@ export class PasswordExpiryPolicyForm extends ModelForm<PasswordExpiryPolicy, st
                         </label>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/policies/expression/ExpressionPolicyForm.ts

@@ -43,8 +43,7 @@ export class ExpressionPolicyForm extends ModelForm<ExpressionPolicy, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <span>
-            <span>
                 ${msg(
                     "Executes the python snippet to determine whether to allow or deny a request.",
                 )}
@@ -101,7 +100,6 @@ export class ExpressionPolicyForm extends ModelForm<ExpressionPolicy, string> {
                         </p>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/policies/password/PasswordPolicyForm.ts

@@ -229,8 +229,7 @@ export class PasswordPolicyForm extends ModelForm<PasswordPolicy, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <span>
-            <span>
                 ${msg(
                     "Checks the value from the policy request against several rules, mostly used to ensure password strength.",
                 )}
@@ -348,7 +347,6 @@ export class PasswordPolicyForm extends ModelForm<PasswordPolicy, string> {
             </ak-form-element-horizontal>
             ${this.showStatic ? this.renderStaticRules() : html``}
             ${this.showHIBP ? this.renderHIBP() : html``}
-            ${this.showZxcvbn ? this.renderZxcvbn() : html``}
+            ${this.showZxcvbn ? this.renderZxcvbn() : html``}`;
-        </form>`;
     }
 }

web/src/admin/policies/reputation/ReputationPolicyForm.ts

@@ -41,8 +41,7 @@ export class ReputationPolicyForm extends ModelForm<ReputationPolicy, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <span>
-            <span>
                 ${msg("Allows/denys requests based on the users and/or the IPs reputation.")}
             </span>
             <span>
@@ -131,7 +130,6 @@ doesn't pass when either or both of the selected options are equal or above the
                         />
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/property-mappings/PropertyMappingLDAPForm.ts

@@ -41,8 +41,7 @@ export class PropertyMappingLDAPForm extends ModelForm<LDAPPropertyMapping, stri
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
-            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -81,7 +80,6 @@ export class PropertyMappingLDAPForm extends ModelForm<LDAPPropertyMapping, stri
                         ${msg("See documentation for a list of all variables.")}
                     </a>
                 </p>
-            </ak-form-element-horizontal>
+            </ak-form-element-horizontal>`;
-        </form>`;
     }
 }

web/src/admin/property-mappings/PropertyMappingNotification.ts

@@ -41,8 +41,7 @@ export class PropertyMappingNotification extends ModelForm<NotificationWebhookMa
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
-            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -66,7 +65,6 @@ export class PropertyMappingNotification extends ModelForm<NotificationWebhookMa
                         ${msg("See documentation for a list of all variables.")}
                     </a>
                 </p>
-            </ak-form-element-horizontal>
+            </ak-form-element-horizontal>`;
-        </form>`;
     }
 }

web/src/admin/property-mappings/PropertyMappingSAMLForm.ts

@@ -41,8 +41,7 @@ export class PropertyMappingSAMLForm extends ModelForm<SAMLPropertyMapping, stri
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
-            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -93,7 +92,6 @@ export class PropertyMappingSAMLForm extends ModelForm<SAMLPropertyMapping, stri
                         ${msg("See documentation for a list of all variables.")}
                     </a>
                 </p>
-            </ak-form-element-horizontal>
+            </ak-form-element-horizontal>`;
-        </form>`;
     }
 }

web/src/admin/property-mappings/PropertyMappingSCIMForm.ts

@@ -41,8 +41,7 @@ export class PropertyMappingSCIMForm extends ModelForm<SCIMMapping, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
-            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -66,7 +65,6 @@ export class PropertyMappingSCIMForm extends ModelForm<SCIMMapping, string> {
                         ${msg("See documentation for a list of all variables.")}
                     </a>
                 </p>
-            </ak-form-element-horizontal>
+            </ak-form-element-horizontal>`;
-        </form>`;
     }
 }

web/src/admin/property-mappings/PropertyMappingScopeForm.ts

@@ -41,8 +41,7 @@ export class PropertyMappingScopeForm extends ModelForm<ScopeMapping, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
-            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -93,7 +92,6 @@ export class PropertyMappingScopeForm extends ModelForm<ScopeMapping, string> {
                         ${msg("See documentation for a list of all variables.")}
                     </a>
                 </p>
-            </ak-form-element-horizontal>
+            </ak-form-element-horizontal>`;
-        </form>`;
     }
 }

web/src/admin/property-mappings/PropertyMappingTestForm.ts

@@ -118,7 +118,7 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
         `;
     }
 
-    renderInlineForm(): TemplateResult {
+    renderForm(): TemplateResult {
         return html`<ak-form-element-horizontal label=${msg("User")} ?required=${true} name="user">
                 <ak-search-select
                     .fetchObjects=${async (query?: string): Promise<User[]> => {

web/src/admin/providers/ldap/LDAPProviderForm.ts

@@ -60,8 +60,7 @@ export class LDAPProviderFormPage extends ModelForm<LDAPProvider, number> {
     // weird-- we're looking up Authentication flows, but we're storing them in the Authorization
     // field of the target Provider.
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
-            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -266,7 +265,6 @@ export class LDAPProviderFormPage extends ModelForm<LDAPProvider, number> {
                         </p>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

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

@@ -167,8 +167,7 @@ export class OAuth2ProviderFormPage extends ModelForm<OAuth2Provider, number> {
     renderForm(): TemplateResult {
         const provider = this.instance;
 
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-text-input
-            <ak-text-input
                 name="name"
                 label=${msg("Name")}
                 value=${ifDefined(provider?.name)}
@@ -383,7 +382,6 @@ export class OAuth2ProviderFormPage extends ModelForm<OAuth2Provider, number> {
                         </p>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

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

@@ -266,8 +266,7 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
-            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -457,7 +456,6 @@ ${this.instance?.skipPathRegex}</textarea
                         </p>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/providers/radius/RadiusProviderForm.ts

@@ -49,8 +49,7 @@ export class RadiusProviderFormPage extends ModelForm<RadiusProvider, number> {
     // weird-- we're looking up Authentication flows, but we're storing them in the Authorization
     // field of the target Provider.
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
-            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -108,7 +107,6 @@ export class RadiusProviderFormPage extends ModelForm<RadiusProvider, number> {
                         </p>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

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

@@ -66,8 +66,7 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
-            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -400,7 +399,6 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
                         </ak-radio>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/providers/saml/SAMLProviderImportForm.ts

@@ -29,7 +29,7 @@ export class SAMLProviderImportForm extends Form<SAMLProvider> {
         });
     }
 
-    renderInlineForm(): TemplateResult {
+    renderForm(): TemplateResult {
         return html`<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input type="text" class="pf-c-form-control" required />
             </ak-form-element-horizontal>

web/src/admin/providers/scim/SCIMProviderForm.ts

@@ -61,8 +61,7 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
-            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -226,7 +225,6 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
                         </p>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/sources/ldap/LDAPSourceForm.ts

@@ -63,8 +63,7 @@ export class LDAPSourceForm extends ModelForm<LDAPSource, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
-            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -468,7 +467,6 @@ export class LDAPSourceForm extends ModelForm<LDAPSource, string> {
                         </p>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/sources/oauth/OAuthSourceForm.ts

@@ -231,8 +231,7 @@ export class OAuthSourceForm extends ModelForm<OAuthSource, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
-            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -436,7 +435,6 @@ export class OAuthSourceForm extends ModelForm<OAuthSource, string> {
                         </p>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/sources/plex/PlexSourceForm.ts

@@ -178,8 +178,7 @@ export class PlexSourceForm extends ModelForm<PlexSource, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
-            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -362,7 +361,6 @@ export class PlexSourceForm extends ModelForm<PlexSource, string> {
                         </p>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/sources/saml/SAMLSourceForm.ts

@@ -83,8 +83,7 @@ export class SAMLSourceForm extends ModelForm<SAMLSource, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
-            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -507,7 +506,6 @@ export class SAMLSourceForm extends ModelForm<SAMLSource, string> {
                         </p>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/stages/authenticator_duo/AuthenticatorDuoStageForm.ts

@@ -50,8 +50,7 @@ export class AuthenticatorDuoStageForm extends ModelForm<AuthenticatorDuoStage,
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <span>
-            <span>
                 ${msg(
                     "Stage used to configure a duo-based authenticator. This stage should be used for configuration flows.",
                 )}
@@ -189,7 +188,6 @@ export class AuthenticatorDuoStageForm extends ModelForm<AuthenticatorDuoStage,
                         </p>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/stages/authenticator_duo/DuoDeviceImportForm.ts

@@ -42,10 +42,10 @@ export class DuoDeviceImportForm extends ModelForm<AuthenticatorDuoStage, string
     }
 
     renderForm(): TemplateResult {
-        return html` <form class="pf-c-form pf-m-horizontal">
+        return html` ${this.instance?.adminIntegrationKey !== ""
-            ${this.instance?.adminIntegrationKey !== "" ? this.renderFormAutomatic() : html``}
+            ? this.renderFormAutomatic()
-            ${this.renderFormManual()}
+            : html``}
-        </form>`;
+        ${this.renderFormManual()}`;
     }
 
     renderFormManual(): TemplateResult {

web/src/admin/stages/authenticator_sms/AuthenticatorSMSStageForm.ts

@@ -207,8 +207,9 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <span>
-            <span> ${msg("Stage used to configure an SMS-based TOTP authenticator.")} </span>
+                ${msg("Stage used to configure an SMS-based TOTP authenticator.")}
+            </span>
             <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
@@ -341,7 +342,6 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
                         </p>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/stages/authenticator_static/AuthenticatorStaticStageForm.ts

@@ -48,8 +48,7 @@ export class AuthenticatorStaticStageForm extends ModelForm<AuthenticatorStaticS
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <span>
-            <span>
                 ${msg(
                     "Stage used to configure a static authenticator (i.e. static tokens). This stage should be used for configuration flows.",
                 )}
@@ -156,7 +155,6 @@ export class AuthenticatorStaticStageForm extends ModelForm<AuthenticatorStaticS
                         </p>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/stages/authenticator_totp/AuthenticatorTOTPStageForm.ts

@@ -50,8 +50,7 @@ export class AuthenticatorTOTPStageForm extends ModelForm<AuthenticatorTOTPStage
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <span>
-            <span>
                 ${msg(
                     "Stage used to configure a TOTP authenticator (i.e. Authy/Google Authenticator).",
                 )}
@@ -146,7 +145,6 @@ export class AuthenticatorTOTPStageForm extends ModelForm<AuthenticatorTOTPStage
                         </p>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/stages/authenticator_validate/AuthenticatorValidateStageForm.ts

@@ -71,8 +71,7 @@ export class AuthenticatorValidateStageForm extends ModelForm<AuthenticatorValid
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <span>
-            <span>
                 ${msg(
                     "Stage used to validate any authenticator. This stage should be used during authentication or authorization flows.",
                 )}
@@ -254,7 +253,6 @@ export class AuthenticatorValidateStageForm extends ModelForm<AuthenticatorValid
                           `
                         : html``}
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/stages/authenticator_webauthn/AuthenticateWebAuthnStageForm.ts

@@ -55,10 +55,9 @@ export class AuthenticateWebAuthnStageForm extends ModelForm<AuthenticateWebAuth
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <span>
-            <span>
                 ${msg(
-                    "Stage used to configure a WebAutnn authenticator (i.e. Yubikey, FaceID/Windows Hello).",
+                    "Stage used to configure a WebAuthn authenticator (i.e. Yubikey, FaceID/Windows Hello).",
                 )}
             </span>
             <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
@@ -214,7 +213,6 @@ export class AuthenticateWebAuthnStageForm extends ModelForm<AuthenticateWebAuth
                         </p>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/stages/captcha/CaptchaStageForm.ts

@@ -40,8 +40,7 @@ export class CaptchaStageForm extends ModelForm<CaptchaStage, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <span>
-            <span>
                 ${msg(
                     "This stage checks the user's current session against the Google reCaptcha (or compatible) service.",
                 )}
@@ -133,7 +132,6 @@ export class CaptchaStageForm extends ModelForm<CaptchaStage, string> {
                         </p>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/stages/consent/ConsentStageForm.ts

@@ -49,8 +49,7 @@ export class ConsentStageForm extends ModelForm<ConsentStage, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <span>
-            <span>
                 ${msg(
                     "Prompt for the user's consent. The consent can either be permanent or expire in a defined amount of time.",
                 )}
@@ -120,7 +119,6 @@ export class ConsentStageForm extends ModelForm<ConsentStage, string> {
                         <ak-utils-time-delta-help></ak-utils-time-delta-help>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/stages/deny/DenyStageForm.ts

@@ -39,8 +39,7 @@ export class DenyStageForm extends ModelForm<DenyStage, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <span>
-            <span>
                 ${msg(
                     "Statically deny the flow. To use this stage effectively, disable *Evaluate when flow is planned* on the respective binding.",
                 )}
@@ -52,7 +51,6 @@ export class DenyStageForm extends ModelForm<DenyStage, string> {
                     class="pf-c-form-control"
                     required
                 />
-            </ak-form-element-horizontal>
+            </ak-form-element-horizontal>`;
-        </form>`;
     }
 }

web/src/admin/stages/dummy/DummyStageForm.ts

@@ -40,8 +40,7 @@ export class DummyStageForm extends ModelForm<DummyStage, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <span>
-            <span>
                 ${msg(
                     "Dummy stage used for testing. Shows a simple continue button and always passes.",
                 )}
@@ -68,7 +67,6 @@ export class DummyStageForm extends ModelForm<DummyStage, string> {
                     </span>
                     <span class="pf-c-switch__label">${msg("Throw error?")}</span>
                 </label>
-            </ak-form-element-horizontal>
+            </ak-form-element-horizontal>`;
-        </form>`;
     }
 }

web/src/admin/stages/email/EmailStageForm.ts

@@ -147,8 +147,7 @@ export class EmailStageForm extends ModelForm<EmailStage, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <span>
-            <span>
                 ${msg(
                     "Verify the user's email address by sending them a one-time-link. Can also be used for recovery to verify the user's authenticity.",
                 )}
@@ -256,7 +255,6 @@ export class EmailStageForm extends ModelForm<EmailStage, string> {
                     </ak-form-element-horizontal>
                 </div>
             </ak-form-group>
-            ${this.renderConnectionSettings()}
+            ${this.renderConnectionSettings()}`;
-        </form>`;
     }
 }

web/src/admin/stages/identification/IdentificationStageForm.ts

@@ -68,8 +68,7 @@ export class IdentificationStageForm extends ModelForm<IdentificationStage, stri
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <span>
-            <span>
                 ${msg("Let the user identify themselves with their username or Email address.")}
             </span>
             <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
@@ -299,7 +298,6 @@ export class IdentificationStageForm extends ModelForm<IdentificationStage, stri
                         </p>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/stages/invitation/InvitationForm.ts

@@ -43,8 +43,7 @@ export class InvitationForm extends ModelForm<Invitation, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal
-            <ak-form-element-horizontal
                 ?slugMode=${true}
                 label=${msg("Name")}
                 ?required=${true}
@@ -107,7 +106,6 @@ export class InvitationForm extends ModelForm<Invitation, string> {
                 <p class="pf-c-form__helper-text">
                     ${msg("When enabled, the invitation will be deleted after usage.")}
                 </p>
-            </ak-form-element-horizontal>
+            </ak-form-element-horizontal>`;
-        </form>`;
     }
 }

web/src/admin/stages/invitation/InvitationStageForm.ts

@@ -40,8 +40,7 @@ export class InvitationStageForm extends ModelForm<InvitationStage, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <span>
-            <span>
                 ${msg("This stage can be included in enrollment flows to accept invitations.")}
             </span>
             <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
@@ -81,7 +80,6 @@ export class InvitationStageForm extends ModelForm<InvitationStage, string> {
                         </p>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/stages/password/PasswordStageForm.ts

@@ -62,8 +62,9 @@ export class PasswordStageForm extends ModelForm<PasswordStage, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <span>
-            <span> ${msg("Validate the user's password against the selected backend(s).")} </span>
+                ${msg("Validate the user's password against the selected backend(s).")}
+            </span>
             <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
@@ -180,7 +181,6 @@ export class PasswordStageForm extends ModelForm<PasswordStage, string> {
                         </p>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/stages/prompt/PromptForm.ts

@@ -283,8 +283,7 @@ export class PromptForm extends ModelForm<Prompt, string> {
     }
 
     renderEditForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
-            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
@@ -454,7 +453,6 @@ export class PromptForm extends ModelForm<Prompt, string> {
                     class="pf-c-form-control"
                     required
                 />
-            </ak-form-element-horizontal>
+            </ak-form-element-horizontal>`;
-        </form>`;
     }
 }

web/src/admin/stages/prompt/PromptStageForm.ts

@@ -60,8 +60,7 @@ export class PromptStageForm extends ModelForm<PromptStage, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <span>
-            <span>
                 ${msg(
                     "Show arbitrary input fields to the user, for example during enrollment. Data is saved in the flow context under the 'prompt_data' variable.",
                 )}
@@ -146,7 +145,6 @@ export class PromptStageForm extends ModelForm<PromptStage, string> {
                         </p>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/stages/user_delete/UserDeleteStageForm.ts

@@ -39,8 +39,7 @@ export class UserDeleteStageForm extends ModelForm<UserDeleteStage, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <span>
-            <span>
                 ${msg(
                     "Delete the currently pending user. CAUTION, this stage does not ask for confirmation. Use a consent stage to ensure the user is aware of their actions.",
                 )}
@@ -52,7 +51,6 @@ export class UserDeleteStageForm extends ModelForm<UserDeleteStage, string> {
                     class="pf-c-form-control"
                     required
                 />
-            </ak-form-element-horizontal>
+            </ak-form-element-horizontal>`;
-        </form>`;
     }
 }

web/src/admin/stages/user_login/UserLoginStageForm.ts

@@ -42,8 +42,7 @@ export class UserLoginStageForm extends ModelForm<UserLoginStage, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <span>${msg("Log the currently pending user in.")}</span>
-            <span>${msg("Log the currently pending user in.")}</span>
             <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
@@ -125,7 +124,6 @@ export class UserLoginStageForm extends ModelForm<UserLoginStage, string> {
                         </p>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/stages/user_logout/UserLogoutStageForm.ts

@@ -39,8 +39,7 @@ export class UserLogoutStageForm extends ModelForm<UserLogoutStage, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <span>${msg("Remove the user from the current session.")}</span>
-            <span>${msg("Remove the user from the current session.")}</span>
             <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
@@ -48,7 +47,6 @@ export class UserLogoutStageForm extends ModelForm<UserLogoutStage, string> {
                     class="pf-c-form-control"
                     required
                 />
-            </ak-form-element-horizontal>
+            </ak-form-element-horizontal>`;
-        </form>`;
     }
 }

web/src/admin/stages/user_write/UserWriteStageForm.ts

@@ -44,8 +44,7 @@ export class UserWriteStageForm extends ModelForm<UserWriteStage, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <span>
-            <span>
                 ${msg(
                     `Write any data from the flow's context's 'prompt_data' to the currently pending user. If no user
         is pending, a new user is created, and data is written to them.`,
@@ -161,7 +160,6 @@ export class UserWriteStageForm extends ModelForm<UserWriteStage, string> {
                         </p>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/tenants/TenantForm.ts

@@ -46,8 +46,11 @@ export class TenantForm extends ModelForm<Tenant, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal
-            <ak-form-element-horizontal label=${msg("Domain")} ?required=${true} name="domain">
+                label=${msg("Domain")}
+                ?required=${true}
+                name="domain"
+            >
                 <input
                     type="text"
                     value="${first(this.instance?.domain, window.location.host)}"
@@ -275,7 +278,6 @@ export class TenantForm extends ModelForm<Tenant, string> {
                         </p>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
+            </ak-form-group>`;
-        </form>`;
     }
 }

web/src/admin/tokens/TokenForm.ts

@@ -58,8 +58,7 @@ export class TokenForm extends ModelForm<Token, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal
-            <ak-form-element-horizontal
                 label=${msg("Identifier")}
                 name="identifier"
                 ?required=${true}
@@ -151,7 +150,6 @@ export class TokenForm extends ModelForm<Token, string> {
                     )}
                 </p>
             </ak-form-element-horizontal>
-            ${this.showExpiry ? this.renderExpiry() : html``}
+            ${this.showExpiry ? this.renderExpiry() : html``}`;
-        </form>`;
     }
 }

web/src/admin/users/RelatedUserList.ts

@@ -68,7 +68,7 @@ export class RelatedUserAdd extends Form<{ users: number[] }> {
         return data;
     }
 
-    renderInlineForm(): TemplateResult {
+    renderForm(): TemplateResult {
         return html`${this.group?.isSuperuser ? html`` : html``}
             <ak-form-element-horizontal label=${msg("Users to add")} name="users">
                 <div class="pf-c-input-group">

web/src/admin/users/ServiceAccountForm.ts

@@ -34,7 +34,7 @@ export class ServiceAccountForm extends Form<UserServiceAccountRequest> {
         this.result = undefined;
     }
 
-    renderInlineForm(): TemplateResult {
+    renderForm(): TemplateResult {
         return html`<ak-form-element-horizontal
                 label=${msg("Username")}
                 ?required=${true}
@@ -118,10 +118,10 @@ export class ServiceAccountForm extends Form<UserServiceAccountRequest> {
             </form>`;
     }
 
-    renderForm(): TemplateResult {
+    renderFormWrapper(): TemplateResult {
         if (this.result) {
             return this.renderResponseForm();
         }
-        return super.renderForm();
+        return super.renderFormWrapper();
     }
 }

web/src/admin/users/UserForm.ts

@@ -64,8 +64,11 @@ export class UserForm extends ModelForm<User, number> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal
-            <ak-form-element-horizontal label=${msg("Username")} ?required=${true} name="username">
+                label=${msg("Username")}
+                ?required=${true}
+                name="username"
+            >
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.username)}"
@@ -165,7 +168,6 @@ export class UserForm extends ModelForm<User, number> {
                 <p class="pf-c-form__helper-text">
                     ${msg("Set custom attributes using YAML or JSON.")}
                 </p>
-            </ak-form-element-horizontal>
+            </ak-form-element-horizontal>`;
-        </form>`;
     }
 }

web/src/admin/users/UserPasswordForm.ts

@@ -25,7 +25,7 @@ export class UserPasswordForm extends Form<UserPasswordSetRequest> {
         });
     }
 
-    renderInlineForm(): TemplateResult {
+    renderForm(): TemplateResult {
         return html`<ak-form-element-horizontal
             label=${msg("Password")}
             ?required=${true}

web/src/admin/users/UserResetEmailForm.ts

@@ -31,7 +31,7 @@ export class UserResetEmailForm extends Form<CoreUsersRecoveryEmailRetrieveReque
         return new CoreApi(DEFAULT_CONFIG).coreUsersRecoveryEmailRetrieve(data);
     }
 
-    renderInlineForm(): TemplateResult {
+    renderForm(): TemplateResult {
         return html`<ak-form-element-horizontal
             label=${msg("Email stage")}
             ?required=${true}

web/src/elements/forms/Form.ts

@@ -36,13 +36,13 @@ export interface KeyUnknown {
  *
  * The base form element for interacting with user inputs.
  *
- * All forms either[1] inherit from this class and implement the `renderInlineForm()` method to
+ * All forms either[1] inherit from this class and implement the `renderForm()` method to
  * produce the actual form, or include the form in-line as a slotted element. Bizarrely, this form
  * will not render at all if it's not actually in the viewport?[2]
  *
  * @element ak-form
  *
- * @slot - Where the form goes if `renderInlineForm()` returns undefined.
+ * @slot - Where the form goes if `renderForm()` returns undefined.
  * @fires eventname - description
  *
  * @csspart partname - description
@@ -52,7 +52,7 @@ export interface KeyUnknown {
  *
  * 1. Specialization: Separate this component into three different classes:
  *    - The base class
- *    - The "use `renderInlineForm` class
+ *    - The "use `renderForm` class
  *    - The slotted class.
  * 2. There is already specialization-by-type throughout all of our code.
  *    Consider refactoring serializeForm() so that the conversions are on
@@ -343,21 +343,22 @@ export abstract class Form<T> extends AKElement {
         }
     }
 
-    renderForm(): TemplateResult {
+    renderFormWrapper(): TemplateResult {
-        const inline = this.renderInlineForm();
+        const inline = this.renderForm();
         if (inline) {
-            return html`<form class="pf-c-form pf-m-horizontal" @submit=${this.submit}>
+            return html`<form
+                class="pf-c-form pf-m-horizontal"
+                @submit=${(ev: Event) => {
+                    ev.preventDefault();
+                }}
+            >
                 ${inline}
             </form>`;
         }
         return html`<slot></slot>`;
     }
 
-    /**
+    renderForm(): TemplateResult | undefined {
-     * Inline form render callback when inheriting this class, should be overwritten
-     * instead of `this.renderForm`
-     */
-    renderInlineForm(): TemplateResult | undefined {
         return undefined;
     }
 
@@ -378,7 +379,7 @@ export abstract class Form<T> extends AKElement {
     }
 
     renderVisible(): TemplateResult {
-        return html` ${this.renderNonFieldErrors()} ${this.renderForm()}`;
+        return html` ${this.renderNonFieldErrors()} ${this.renderFormWrapper()}`;
     }
 
     render(): TemplateResult {

web/src/user/user-settings/mfa/MFADeviceForm.ts

@@ -64,15 +64,13 @@ export class MFADeviceForm extends ModelForm<Device, number> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
-            <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
+            <input
-                <input
+                type="text"
-                    type="text"
+                value="${ifDefined(this.instance?.name)}"
-                    value="${ifDefined(this.instance?.name)}"
+                class="pf-c-form-control"
-                    class="pf-c-form-control"
+                required
-                    required
+            />
-                />
+        </ak-form-element-horizontal>`;
-            </ak-form-element-horizontal>
-        </form>`;
     }
 }

web/src/user/user-settings/tokens/UserTokenForm.ts

@@ -43,8 +43,7 @@ export class UserTokenForm extends ModelForm<Token, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html` <ak-form-element-horizontal
-            <ak-form-element-horizontal
                 label=${msg("Identifier")}
                 ?required=${true}
                 name="identifier"
@@ -62,7 +61,6 @@ export class UserTokenForm extends ModelForm<Token, string> {
                     value="${ifDefined(this.instance?.description)}"
                     class="pf-c-form-control"
                 />
-            </ak-form-element-horizontal>
+            </ak-form-element-horizontal>`;
-        </form>`;
     }
 }

web/xliff/de.xlf

@@ -4021,10 +4021,6 @@ doesn't pass when either or both of the selected options are equal or above the
         <source>When multiple stages are selected, the user can choose which one they want to enroll.</source>
         <target>Wenn mehrere Stufen ausgewählt sind, kann der Benutzer wählen, welche er registrieren möchte.</target>
       </trans-unit>
-      <trans-unit id="s9a823993c07e5d64">
-        <source>Stage used to configure a WebAutnn authenticator (i.e. Yubikey, FaceID/Windows Hello).</source>
-        <target>Phase zum Konfigurieren eines WebAutnn-Authentifikators (z. B. Yubikey, FaceID/Windows Hello).</target>
-      </trans-unit>
       <trans-unit id="s34b23ebbac9f6ab9">
         <source>User verification</source>
         <target>Benutzerüberprüfung</target>
@@ -5933,6 +5929,9 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="s01794c0ee3629c1b">
   <source>Flow Info</source>
+</trans-unit>
+<trans-unit id="s24bce955914b1f0a">
+  <source>Stage used to configure a WebAuthn authenticator (i.e. Yubikey, FaceID/Windows Hello).</source>
 </trans-unit>
     </body>
   </file>

web/xliff/en.xlf

@@ -4245,10 +4245,6 @@ doesn't pass when either or both of the selected options are equal or above the
         <source>When multiple stages are selected, the user can choose which one they want to enroll.</source>
         <target>When multiple stages are selected, the user can choose which one they want to enroll.</target>
       </trans-unit>
-      <trans-unit id="s9a823993c07e5d64">
-        <source>Stage used to configure a WebAutnn authenticator (i.e. Yubikey, FaceID/Windows Hello).</source>
-        <target>Stage used to configure a WebAutnn authenticator (i.e. Yubikey, FaceID/Windows Hello).</target>
-      </trans-unit>
       <trans-unit id="s34b23ebbac9f6ab9">
         <source>User verification</source>
         <target>User verification</target>
@@ -6247,6 +6243,9 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="s01794c0ee3629c1b">
   <source>Flow Info</source>
+</trans-unit>
+<trans-unit id="s24bce955914b1f0a">
+  <source>Stage used to configure a WebAuthn authenticator (i.e. Yubikey, FaceID/Windows Hello).</source>
 </trans-unit>
     </body>
   </file>

web/xliff/es.xlf

@@ -3948,10 +3948,6 @@ doesn't pass when either or both of the selected options are equal or above the
       <trans-unit id="s7e5af9c6ba6f5cc6">
         <source>When multiple stages are selected, the user can choose which one they want to enroll.</source>
       </trans-unit>
-      <trans-unit id="s9a823993c07e5d64">
-        <source>Stage used to configure a WebAutnn authenticator (i.e. Yubikey, FaceID/Windows Hello).</source>
-        <target>Etapa utilizada para configurar un autenticador WebAutnn (es decir, Yubikey, FaceID/Windows Hello).</target>
-      </trans-unit>
       <trans-unit id="s34b23ebbac9f6ab9">
         <source>User verification</source>
         <target>Verificación del usuario</target>
@@ -5841,6 +5837,9 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="s01794c0ee3629c1b">
   <source>Flow Info</source>
+</trans-unit>
+<trans-unit id="s24bce955914b1f0a">
+  <source>Stage used to configure a WebAuthn authenticator (i.e. Yubikey, FaceID/Windows Hello).</source>
 </trans-unit>
     </body>
   </file>

web/xliff/fr.xlf

@@ -5303,11 +5303,6 @@ doesn't pass when either or both of the selected options are equal or above the
         <source>When multiple stages are selected, the user can choose which one they want to enroll.</source>
         <target>Lorsque plusieurs étapes sont sélectionnées, les utilisateurs peuvent choisir celle qu’ils souhaient utiliser pour s’enrôler.</target>
         
-      </trans-unit>
-      <trans-unit id="s9a823993c07e5d64">
-        <source>Stage used to configure a WebAutnn authenticator (i.e. Yubikey, FaceID/Windows Hello).</source>
-        <target>Étape de configuration d'un authentificateur WebAuthn (Yubikey, FaceID/Windows Hello).</target>
-        
       </trans-unit>
       <trans-unit id="s34b23ebbac9f6ab9">
         <source>User verification</source>
@@ -7823,6 +7818,9 @@ Les liaisons avec les groupes/utilisateurs sont vérifiées par rapport à l'uti
 </trans-unit>
 <trans-unit id="s01794c0ee3629c1b">
   <source>Flow Info</source>
+</trans-unit>
+<trans-unit id="s24bce955914b1f0a">
+  <source>Stage used to configure a WebAuthn authenticator (i.e. Yubikey, FaceID/Windows Hello).</source>
 </trans-unit>
     </body>
   </file>

web/xliff/pl.xlf

@@ -4118,10 +4118,6 @@ doesn't pass when either or both of the selected options are equal or above the
         <source>When multiple stages are selected, the user can choose which one they want to enroll.</source>
         <target>W przypadku wybrania wielu etapów użytkownik może wybrać, na który chce się zapisać.</target>
       </trans-unit>
-      <trans-unit id="s9a823993c07e5d64">
-        <source>Stage used to configure a WebAutnn authenticator (i.e. Yubikey, FaceID/Windows Hello).</source>
-        <target>Etap używany do konfiguracji tokena uwierzytelniającego WebAuthn (tj. Yubikey, FaceID/Windows Hello).</target>
-      </trans-unit>
       <trans-unit id="s34b23ebbac9f6ab9">
         <source>User verification</source>
         <target>Weryfikacja użytkownika</target>
@@ -6080,6 +6076,9 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="s01794c0ee3629c1b">
   <source>Flow Info</source>
+</trans-unit>
+<trans-unit id="s24bce955914b1f0a">
+  <source>Stage used to configure a WebAuthn authenticator (i.e. Yubikey, FaceID/Windows Hello).</source>
 </trans-unit>
     </body>
   </file>

web/xliff/pseudo-LOCALE.xlf

@@ -4208,10 +4208,6 @@ doesn't pass when either or both of the selected options are equal or above the
       <trans-unit id="s7e5af9c6ba6f5cc6">
         <source>When multiple stages are selected, the user can choose which one they want to enroll.</source>
         
-      </trans-unit>
-      <trans-unit id="s9a823993c07e5d64">
-        <source>Stage used to configure a WebAutnn authenticator (i.e. Yubikey, FaceID/Windows Hello).</source>
-        
       </trans-unit>
       <trans-unit id="s34b23ebbac9f6ab9">
         <source>User verification</source>
@@ -6182,6 +6178,9 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="s01794c0ee3629c1b">
   <source>Flow Info</source>
+</trans-unit>
+<trans-unit id="s24bce955914b1f0a">
+  <source>Stage used to configure a WebAuthn authenticator (i.e. Yubikey, FaceID/Windows Hello).</source>
 </trans-unit>
     </body>
   </file>

web/xliff/tr.xlf

@@ -3947,10 +3947,6 @@ doesn't pass when either or both of the selected options are equal or above the
       <trans-unit id="s7e5af9c6ba6f5cc6">
         <source>When multiple stages are selected, the user can choose which one they want to enroll.</source>
       </trans-unit>
-      <trans-unit id="s9a823993c07e5d64">
-        <source>Stage used to configure a WebAutnn authenticator (i.e. Yubikey, FaceID/Windows Hello).</source>
-        <target>Aşama bir WebAutnn kimlik doğrulayıcısını (örn. Yubikey, FaceID/Windows Hello) yapılandırmak için kullanılır.</target>
-      </trans-unit>
       <trans-unit id="s34b23ebbac9f6ab9">
         <source>User verification</source>
         <target>Kullanıcı doğrulaması</target>
@@ -5834,6 +5830,9 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="s01794c0ee3629c1b">
   <source>Flow Info</source>
+</trans-unit>
+<trans-unit id="s24bce955914b1f0a">
+  <source>Stage used to configure a WebAuthn authenticator (i.e. Yubikey, FaceID/Windows Hello).</source>
 </trans-unit>
     </body>
   </file>

web/xliff/zh-Hans.xlf

@@ -5305,11 +5305,6 @@ doesn't pass when either or both of the selected options are equal or above the
         <source>When multiple stages are selected, the user can choose which one they want to enroll.</source>
         <target>选中多个阶段时，用户可以选择要注册哪个。</target>
         
-      </trans-unit>
-      <trans-unit id="s9a823993c07e5d64">
-        <source>Stage used to configure a WebAutnn authenticator (i.e. Yubikey, FaceID/Windows Hello).</source>
-        <target>用来配置 WebAuthn 身份验证器（即 Yubikey、FaceID/Windows Hello）的阶段。</target>
-        
       </trans-unit>
       <trans-unit id="s34b23ebbac9f6ab9">
         <source>User verification</source>
@@ -7828,6 +7823,9 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="s01794c0ee3629c1b">
   <source>Flow Info</source>
+</trans-unit>
+<trans-unit id="s24bce955914b1f0a">
+  <source>Stage used to configure a WebAuthn authenticator (i.e. Yubikey, FaceID/Windows Hello).</source>
 </trans-unit>
     </body>
   </file>

web/xliff/zh-Hant.xlf

@@ -3984,10 +3984,6 @@ doesn't pass when either or both of the selected options are equal or above the
         <source>When multiple stages are selected, the user can choose which one they want to enroll.</source>
         <target>选中多个阶段时，用户可以选择要注册哪个。</target>
       </trans-unit>
-      <trans-unit id="s9a823993c07e5d64">
-        <source>Stage used to configure a WebAutnn authenticator (i.e. Yubikey, FaceID/Windows Hello).</source>
-        <target>用于配置 Webautnn 身份验证器（即 Yubikey、FaceID/Windows Hello）的阶段。</target>
-      </trans-unit>
       <trans-unit id="s34b23ebbac9f6ab9">
         <source>User verification</source>
         <target>用户验证</target>
@@ -5886,6 +5882,9 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="s01794c0ee3629c1b">
   <source>Flow Info</source>
+</trans-unit>
+<trans-unit id="s24bce955914b1f0a">
+  <source>Stage used to configure a WebAuthn authenticator (i.e. Yubikey, FaceID/Windows Hello).</source>
 </trans-unit>
     </body>
   </file>

web/xliff/zh_TW.xlf

@@ -3984,10 +3984,6 @@ doesn't pass when either or both of the selected options are equal or above the
         <source>When multiple stages are selected, the user can choose which one they want to enroll.</source>
         <target>选中多个阶段时，用户可以选择要注册哪个。</target>
       </trans-unit>
-      <trans-unit id="s9a823993c07e5d64">
-        <source>Stage used to configure a WebAutnn authenticator (i.e. Yubikey, FaceID/Windows Hello).</source>
-        <target>用于配置 Webautnn 身份验证器（即 Yubikey、FaceID/Windows Hello）的阶段。</target>
-      </trans-unit>
       <trans-unit id="s34b23ebbac9f6ab9">
         <source>User verification</source>
         <target>用户验证</target>
@@ -5885,6 +5881,9 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="s01794c0ee3629c1b">
   <source>Flow Info</source>
+</trans-unit>
+<trans-unit id="s24bce955914b1f0a">
+  <source>Stage used to configure a WebAuthn authenticator (i.e. Yubikey, FaceID/Windows Hello).</source>
 </trans-unit>
     </body>
   </file>