From 01663468de370c369c21f4209a259d3a6027f993 Mon Sep 17 00:00:00 2001
From: macmoritz <49832924+macmoritz@users.noreply.github.com>
Date: Fri, 28 Apr 2023 11:26:39 +0200
Subject: [PATCH] web: Fix label not clickable for checkbox and choice field in
 prompts (#5355)

* fix label not clickable for checkbox and choice field in prompts

* web/flows: fix label for attribute, fix checkbox styling

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

# Conflicts:
#	web/src/flow/stages/prompt/PromptStage.ts

---------

Co-authored-by: moritz <m.tratar@senbax.computer>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
---
 web/src/flow/stages/prompt/PromptStage.ts              | 10 ++++++++--
 .../user-settings/details/stages/prompt/PromptStage.ts |  8 +-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/web/src/flow/stages/prompt/PromptStage.ts b/web/src/flow/stages/prompt/PromptStage.ts
index 4eb456b50..e39600be0 100644
--- a/web/src/flow/stages/prompt/PromptStage.ts
+++ b/web/src/flow/stages/prompt/PromptStage.ts
@@ -13,6 +13,7 @@ import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
 import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFCheck from "@patternfly/patternfly/components/Check/check.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
 import PFLogin from "@patternfly/patternfly/components/Login/login.css";
@@ -38,6 +39,7 @@ export class PromptStage extends BaseStage<PromptChallenge, PromptChallengeRespo
             PFFormControl,
             PFTitle,
             PFButton,
+            PFCheck,
             css`
                 textarea {
                     min-height: 4em;
@@ -173,12 +175,15 @@ export class PromptStage extends BaseStage<PromptChallenge, PromptChallengeRespo
                                     <input
                                         type="radio"
                                         class="pf-c-check__input"
+                                        id="${prompt.fieldKey}"
                                         name="${prompt.fieldKey}"
                                         checked="${prompt.initialValue === choice}"
                                         required="${prompt.required}"
                                         value="${choice}"
                                     />
-                                    <label class="pf-c-check__label">${choice}</label>
+                                    <label class="pf-c-check__label" for="${
+                                        prompt.fieldKey
+                                    }">${choice}</label>
                                 </div>
                             `;
                         })
@@ -239,11 +244,12 @@ export class PromptStage extends BaseStage<PromptChallenge, PromptChallengeRespo
                 <input
                     type="checkbox"
                     class="pf-c-check__input"
+                    id="${prompt.fieldKey}"
                     name="${prompt.fieldKey}"
                     ?checked=${prompt.initialValue !== ""}
                     ?required=${prompt.required}
                 />
-                <label class="pf-c-check__label">${prompt.label}</label>
+                <label class="pf-c-check__label" for="${prompt.fieldKey}">${prompt.label}</label>
                 ${prompt.required
                     ? html`<p class="pf-c-form__helper-text">${t`Required.`}</p>`
                     : html``}
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 0b3d33799..0c4cbdde4 100644
--- a/web/src/user/user-settings/details/stages/prompt/PromptStage.ts
+++ b/web/src/user/user-settings/details/stages/prompt/PromptStage.ts
@@ -3,20 +3,14 @@ import { PromptStage } from "@goauthentik/flow/stages/prompt/PromptStage";
 
 import { t } from "@lingui/macro";
 
-import { CSSResult, TemplateResult, html } from "lit";
+import { TemplateResult, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
-import PFCheck from "@patternfly/patternfly/components/Check/check.css";
-
 import { PromptTypeEnum, StagePrompt } from "@goauthentik/api";
 
 @customElement("ak-user-stage-prompt")
 export class UserSettingsPromptStage extends PromptStage {
-    static get styles(): CSSResult[] {
-        return super.styles.concat(PFCheck);
-    }
-
     renderPromptInner(prompt: StagePrompt): string {
         switch (prompt.type) {
             // Checkbox requires slightly different rendering here due to the use of horizontal form elements