web/user: fix static prompt fields being rendered with label

closes #2584

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2022-05-28 20:05:43 +02:00
parent 335131affc
commit 4ed8171130
2 changed files with 39 additions and 29 deletions

View File

@ -133,6 +133,18 @@ export class PromptStage extends BaseStage<PromptChallenge, PromptChallengeRespo
return html`<p class="pf-c-form__helper-text">${unsafeHTML(prompt.subText)}</p>`; return html`<p class="pf-c-form__helper-text">${unsafeHTML(prompt.subText)}</p>`;
} }
shouldRenderInWrapper(prompt: StagePrompt): bool {
// Special types that aren't rendered in a wrapper
if (
prompt.type === PromptTypeEnum.Static ||
prompt.type === PromptTypeEnum.Hidden ||
prompt.type === PromptTypeEnum.Separator
) {
return false;
}
return true;
}
renderField(prompt: StagePrompt): TemplateResult { renderField(prompt: StagePrompt): TemplateResult {
// Checkbox is rendered differently // Checkbox is rendered differently
if (prompt.type === PromptTypeEnum.Checkbox) { if (prompt.type === PromptTypeEnum.Checkbox) {
@ -151,26 +163,19 @@ export class PromptStage extends BaseStage<PromptChallenge, PromptChallengeRespo
<p class="pf-c-form__helper-text">${unsafeHTML(prompt.subText)}</p> <p class="pf-c-form__helper-text">${unsafeHTML(prompt.subText)}</p>
</div>`; </div>`;
} }
// Special types that aren't rendered in a wrapper if (this.shouldRenderInWrapper(prompt)) {
if ( return html`<ak-form-element
prompt.type === PromptTypeEnum.Static || label="${prompt.label}"
prompt.type === PromptTypeEnum.Hidden || ?required="${prompt.required}"
prompt.type === PromptTypeEnum.Separator class="pf-c-form__group"
) { .errors=${(this.challenge?.responseErrors || {})[prompt.fieldKey]}
return html` >
${unsafeHTML(this.renderPromptInner(prompt, false))} ${unsafeHTML(this.renderPromptInner(prompt, false))}
${this.renderPromptHelpText(prompt)} ${this.renderPromptHelpText(prompt)}
`; </ak-form-element>`;
} }
return html`<ak-form-element return html` ${unsafeHTML(this.renderPromptInner(prompt, false))}
label="${prompt.label}" ${this.renderPromptHelpText(prompt)}`;
?required="${prompt.required}"
class="pf-c-form__group"
.errors=${(this.challenge?.responseErrors || {})[prompt.fieldKey]}
>
${unsafeHTML(this.renderPromptInner(prompt, false))}
${this.renderPromptHelpText(prompt)}
</ak-form-element>`;
} }
renderContinue(): TemplateResult { renderContinue(): TemplateResult {

View File

@ -36,19 +36,24 @@ export class UserSettingsPromptStage extends PromptStage {
renderField(prompt: StagePrompt): TemplateResult { renderField(prompt: StagePrompt): TemplateResult {
const errors = (this.challenge?.responseErrors || {})[prompt.fieldKey]; const errors = (this.challenge?.responseErrors || {})[prompt.fieldKey];
if (this.shouldRenderInWrapper(prompt)) {
return html`
<ak-form-element-horizontal
label=${t`${prompt.label}`}
?required=${prompt.required}
name=${prompt.fieldKey}
?invalid=${errors !== undefined}
.errorMessages=${(errors || []).map((error) => {
return error.string;
})}
>
${unsafeHTML(this.renderPromptInner(prompt, true))}
${this.renderPromptHelpText(prompt)}
</ak-form-element-horizontal>
`;
}
return html` return html`
<ak-form-element-horizontal ${unsafeHTML(this.renderPromptInner(prompt, true))} ${this.renderPromptHelpText(prompt)}
label=${t`${prompt.label}`}
?required=${prompt.required}
name=${prompt.fieldKey}
?invalid=${errors !== undefined}
.errorMessages=${(errors || []).map((error) => {
return error.string;
})}
>
${unsafeHTML(this.renderPromptInner(prompt, true))}
${this.renderPromptHelpText(prompt)}
</ak-form-element-horizontal>
`; `;
} }