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)

Browse source 
* 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 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``}

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 { 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