web/user: add missing checkbox element in user settings (#2762)

web/src/user/user-settings/details/stages/prompt/PromptStage.ts

@@ -1,16 +1,39 @@
 import { t } from "@lingui/macro";
 
-import { TemplateResult, html } from "lit";
+import { CSSResult, TemplateResult, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
-import { StagePrompt } from "@goauthentik/api";
+import PFCheck from "@patternfly/patternfly/components/Check/check.css";
+
+import { PromptTypeEnum, StagePrompt } from "@goauthentik/api";
 
 import "../../../../../elements/forms/HorizontalFormElement";
 import { PromptStage } from "../../../../../flows/stages/prompt/PromptStage";
 
 @customElement("ak-user-stage-prompt")
 export class UserSettingsPromptStage extends PromptStage {
+    static get styles(): CSSResult[] {
+        return super.styles.concat([PFCheck]);
+    }
+
+    renderPromptInner(prompt: StagePrompt, placeholderAsValue: boolean): string {
+        switch (prompt.type) {
+            // Checkbox requires slightly different rendering here due to the use of horizontal form elements
+            case PromptTypeEnum.Checkbox:
+                return `<input
+                    type="checkbox"
+                    class="pf-c-check__input"
+                    name="${prompt.fieldKey}"
+                    ?checked=${prompt.placeholder !== ""}
+                    ?required=${prompt.required}
+                    style="vertical-align: bottom"
+                />`;
+            default:
+                return super.renderPromptInner(prompt, placeholderAsValue);
+        }
+    }
+
     renderField(prompt: StagePrompt): TemplateResult {
         const errors = (this.challenge?.responseErrors || {})[prompt.fieldKey];
         return html`