diff --git a/web/src/flow/stages/prompt/PromptStage.ts b/web/src/flow/stages/prompt/PromptStage.ts index e39600be0..b3a3802de 100644 --- a/web/src/flow/stages/prompt/PromptStage.ts +++ b/web/src/flow/stages/prompt/PromptStage.ts @@ -50,147 +50,151 @@ export class PromptStage extends BaseStage`; + value="${prompt.initialValue}" + />`; case PromptTypeEnum.TextArea: - return ``; case PromptTypeEnum.TextReadOnly: - return ``; + value="${prompt.initialValue}" + />`; case PromptTypeEnum.TextAreaReadOnly: - return ``; case PromptTypeEnum.Username: - return ``; + value="${prompt.initialValue}" + />`; case PromptTypeEnum.Email: - return ``; + value="${prompt.initialValue}" + />`; case PromptTypeEnum.Password: - return ``; + ?required=${prompt.required} + />`; case PromptTypeEnum.Number: - return ``; + value="${prompt.initialValue}" + />`; case PromptTypeEnum.Date: - return ``; + value="${prompt.initialValue}" + />`; case PromptTypeEnum.DateTime: - return ``; + value="${prompt.initialValue}" + />`; case PromptTypeEnum.File: - return ``; + value="${prompt.initialValue}" + />`; case PromptTypeEnum.Separator: - return `${prompt.placeholder}`; + return html`${prompt.placeholder}`; case PromptTypeEnum.Hidden: - return ``; + ?required=${prompt.required} + />`; case PromptTypeEnum.Static: - return `

${prompt.initialValue}

`; + return html`

${unsafeHTML(prompt.initialValue)}

`; case PromptTypeEnum.Dropdown: - return ``; case PromptTypeEnum.RadioButtonGroup: - return ( - prompt.choices - ?.map((choice) => { - return `
- - -
- `; - }) - .join("") || "" - ); + return html`${(prompt.choices || []).map((choice) => { + const id = `${prompt.fieldKey}-${choice}`; + return html`
+ + +
`; + })}`; case PromptTypeEnum.AkLocale: - return ` @@ -202,19 +206,17 @@ export class PromptStage extends BaseStage { - return ``; - }) - .join("")} + })} `; default: - return `

invalid type '${prompt.type}'

`; + return html`

invalid type '${prompt.type}'

`; } } @@ -263,11 +265,10 @@ export class PromptStage extends BaseStage - ${unsafeHTML(this.renderPromptInner(prompt))} ${this.renderPromptHelpText(prompt)} + ${this.renderPromptInner(prompt)} ${this.renderPromptHelpText(prompt)} `; } - return html` ${unsafeHTML(this.renderPromptInner(prompt))} - ${this.renderPromptHelpText(prompt)}`; + return html` ${this.renderPromptInner(prompt)} ${this.renderPromptHelpText(prompt)}`; } renderContinue(): TemplateResult { 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 0c4cbdde4..6be4ebaf1 100644 --- a/web/src/user/user-settings/details/stages/prompt/PromptStage.ts +++ b/web/src/user/user-settings/details/stages/prompt/PromptStage.ts @@ -5,17 +5,16 @@ import { t } from "@lingui/macro"; import { TemplateResult, html } from "lit"; import { customElement } from "lit/decorators.js"; -import { unsafeHTML } from "lit/directives/unsafe-html.js"; import { PromptTypeEnum, StagePrompt } from "@goauthentik/api"; @customElement("ak-user-stage-prompt") export class UserSettingsPromptStage extends PromptStage { - renderPromptInner(prompt: StagePrompt): string { + renderPromptInner(prompt: StagePrompt): TemplateResult { switch (prompt.type) { // Checkbox requires slightly different rendering here due to the use of horizontal form elements case PromptTypeEnum.Checkbox: - return ` - ${unsafeHTML(this.renderPromptInner(prompt))} - ${this.renderPromptHelpText(prompt)} + ${this.renderPromptInner(prompt)} ${this.renderPromptHelpText(prompt)} `; } - return html` - ${unsafeHTML(this.renderPromptInner(prompt))} ${this.renderPromptHelpText(prompt)} - `; + return html` ${this.renderPromptInner(prompt)} ${this.renderPromptHelpText(prompt)} `; } renderContinue(): TemplateResult {