trustchain-oc1-orchestral
/
authentik
Archived
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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:
macmoritz 2023-04-28 11:26:39 +02:00 committed by GitHub
parent 5e7731a4aa
commit 01663468de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/flow/stages/prompt/PromptStage.ts
View File

@ -13,6 +13,7 @@ import { unsafeHTML } from "lit/directives/unsafe-html.js";
import PFAlert from "@patternfly/patternfly/components/Alert/alert.css"; import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";
import PFButton from "@patternfly/patternfly/components/Button/button.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 PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFLogin from "@patternfly/patternfly/components/Login/login.css"; import PFLogin from "@patternfly/patternfly/components/Login/login.css";
@ -38,6 +39,7 @@ export class PromptStage extends BaseStage<PromptChallenge, PromptChallengeRespo
PFFormControl, PFFormControl,
PFTitle, PFTitle,
PFButton, PFButton,
PFCheck,
css` css`
textarea { textarea {
min-height: 4em; min-height: 4em;
@ -173,12 +175,15 @@ export class PromptStage extends BaseStage<PromptChallenge, PromptChallengeRespo
<input <input
type="radio" type="radio"
class="pf-c-check__input" class="pf-c-check__input"
id="${prompt.fieldKey}"
name="${prompt.fieldKey}" name="${prompt.fieldKey}"
checked="${prompt.initialValue === choice}" checked="${prompt.initialValue === choice}"
required="${prompt.required}" required="${prompt.required}"
value="${choice}" value="${choice}"
/> />
<label class="pf-c-check__label">${choice}</label> <label class="pf-c-check__label" for="${
prompt.fieldKey
}">${choice}</label>
</div> </div>
`; `;
}) })
@ -239,11 +244,12 @@ export class PromptStage extends BaseStage<PromptChallenge, PromptChallengeRespo
<input <input
type="checkbox" type="checkbox"
class="pf-c-check__input" class="pf-c-check__input"
id="${prompt.fieldKey}"
name="${prompt.fieldKey}" name="${prompt.fieldKey}"
?checked=${prompt.initialValue !== ""} ?checked=${prompt.initialValue !== ""}
?required=${prompt.required} ?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 ${prompt.required
? html`<p class="pf-c-form__helper-text">${t`Required.`}</p>` ? html`<p class="pf-c-form__helper-text">${t`Required.`}</p>`
: html``} : html``}

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

@ -3,20 +3,14 @@ import { PromptStage } from "@goauthentik/flow/stages/prompt/PromptStage";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
import { CSSResult, TemplateResult, html } from "lit"; import { TemplateResult, html } from "lit";
import { customElement } from "lit/decorators.js"; import { customElement } from "lit/decorators.js";
import { unsafeHTML } from "lit/directives/unsafe-html.js"; import { unsafeHTML } from "lit/directives/unsafe-html.js";
import PFCheck from "@patternfly/patternfly/components/Check/check.css";
import { PromptTypeEnum, StagePrompt } from "@goauthentik/api"; import { PromptTypeEnum, StagePrompt } from "@goauthentik/api";
@customElement("ak-user-stage-prompt") @customElement("ak-user-stage-prompt")
export class UserSettingsPromptStage extends PromptStage { export class UserSettingsPromptStage extends PromptStage {
static get styles(): CSSResult[] {
return super.styles.concat(PFCheck);
}
renderPromptInner(prompt: StagePrompt): string { renderPromptInner(prompt: StagePrompt): string {
switch (prompt.type) { switch (prompt.type) {
// Checkbox requires slightly different rendering here due to the use of horizontal form elements // Checkbox requires slightly different rendering here due to the use of horizontal form elements