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>
This commit is contained in:
parent
5e7731a4aa
commit
01663468de
|
@ -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``}
|
||||
|
|
|
@ -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
|
||||
|
|
Reference in New Issue