From 948d2cbdca05c74658b10c2b2fe20d6fe5983e46 Mon Sep 17 00:00:00 2001
From: Tom Price <tom@codedinternet.com>
Date: Sat, 7 May 2022 20:32:11 +0100
Subject: [PATCH] web/user: add missing checkbox element in user settings
 (#2762)

---
 .../details/stages/prompt/PromptStage.ts      | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/web/src/user/user-settings/details/stages/prompt/PromptStage.ts b/web/src/user/user-settings/details/stages/prompt/PromptStage.ts
index a7da7faa7..8084828c0 100644
--- a/web/src/user/user-settings/details/stages/prompt/PromptStage.ts
+++ b/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`