web/stages/prompt: render later so fields aren't cached
This commit is contained in:
parent
05a5b5b675
commit
b9a9da4ec7
|
@ -1,5 +1,6 @@
|
||||||
import { gettext } from "django";
|
import { gettext } from "django";
|
||||||
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
|
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
|
||||||
|
import { unsafeHTML } from "lit-html/directives/unsafe-html";
|
||||||
import { Challenge } from "../../../api/Flows";
|
import { Challenge } from "../../../api/Flows";
|
||||||
import { COMMON_STYLES } from "../../../common/styles";
|
import { COMMON_STYLES } from "../../../common/styles";
|
||||||
import { BaseStage } from "../base";
|
import { BaseStage } from "../base";
|
||||||
|
@ -28,10 +29,10 @@ export class PromptStage extends BaseStage {
|
||||||
return COMMON_STYLES;
|
return COMMON_STYLES;
|
||||||
}
|
}
|
||||||
|
|
||||||
renderPromptInner(prompt: Prompt): TemplateResult {
|
renderPromptInner(prompt: Prompt): string {
|
||||||
switch (prompt.type) {
|
switch (prompt.type) {
|
||||||
case "text":
|
case "text":
|
||||||
return html`<input
|
return `<input
|
||||||
type="text"
|
type="text"
|
||||||
name="${prompt.field_key}"
|
name="${prompt.field_key}"
|
||||||
placeholder="${prompt.placeholder}"
|
placeholder="${prompt.placeholder}"
|
||||||
|
@ -40,7 +41,7 @@ export class PromptStage extends BaseStage {
|
||||||
?required=${prompt.required}
|
?required=${prompt.required}
|
||||||
value="">`;
|
value="">`;
|
||||||
case "username":
|
case "username":
|
||||||
return html`<input
|
return `<input
|
||||||
type="text"
|
type="text"
|
||||||
name="${prompt.field_key}"
|
name="${prompt.field_key}"
|
||||||
placeholder="${prompt.placeholder}"
|
placeholder="${prompt.placeholder}"
|
||||||
|
@ -49,7 +50,7 @@ export class PromptStage extends BaseStage {
|
||||||
?required=${prompt.required}
|
?required=${prompt.required}
|
||||||
value="">`;
|
value="">`;
|
||||||
case "email":
|
case "email":
|
||||||
return html`<input
|
return `<input
|
||||||
type="email"
|
type="email"
|
||||||
name="${prompt.field_key}"
|
name="${prompt.field_key}"
|
||||||
placeholder="${prompt.placeholder}"
|
placeholder="${prompt.placeholder}"
|
||||||
|
@ -57,7 +58,7 @@ export class PromptStage extends BaseStage {
|
||||||
?required=${prompt.required}
|
?required=${prompt.required}
|
||||||
value="">`;
|
value="">`;
|
||||||
case "password":
|
case "password":
|
||||||
return html`<input
|
return `<input
|
||||||
type="password"
|
type="password"
|
||||||
name="${prompt.field_key}"
|
name="${prompt.field_key}"
|
||||||
placeholder="${prompt.placeholder}"
|
placeholder="${prompt.placeholder}"
|
||||||
|
@ -65,48 +66,48 @@ export class PromptStage extends BaseStage {
|
||||||
class="pf-c-form-control"
|
class="pf-c-form-control"
|
||||||
?required=${prompt.required}>`;
|
?required=${prompt.required}>`;
|
||||||
case "number":
|
case "number":
|
||||||
return html`<input
|
return `<input
|
||||||
type="number"
|
type="number"
|
||||||
name="${prompt.field_key}"
|
name="${prompt.field_key}"
|
||||||
placeholder="${prompt.placeholder}"
|
placeholder="${prompt.placeholder}"
|
||||||
class="pf-c-form-control"
|
class="pf-c-form-control"
|
||||||
?required=${prompt.required}>`;
|
?required=${prompt.required}>`;
|
||||||
case "checkbox":
|
case "checkbox":
|
||||||
return html`<input
|
return `<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
name="${prompt.field_key}"
|
name="${prompt.field_key}"
|
||||||
placeholder="${prompt.placeholder}"
|
placeholder="${prompt.placeholder}"
|
||||||
class="pf-c-form-control"
|
class="pf-c-form-control"
|
||||||
?required=${prompt.required}>`;
|
?required=${prompt.required}>`;
|
||||||
case "date":
|
case "date":
|
||||||
return html`<input
|
return `<input
|
||||||
type="date"
|
type="date"
|
||||||
name="${prompt.field_key}"
|
name="${prompt.field_key}"
|
||||||
placeholder="${prompt.placeholder}"
|
placeholder="${prompt.placeholder}"
|
||||||
class="pf-c-form-control"
|
class="pf-c-form-control"
|
||||||
?required=${prompt.required}>`;
|
?required=${prompt.required}>`;
|
||||||
case "date-time":
|
case "date-time":
|
||||||
return html`<input
|
return `<input
|
||||||
type="datetime"
|
type="datetime"
|
||||||
name="${prompt.field_key}"
|
name="${prompt.field_key}"
|
||||||
placeholder="${prompt.placeholder}"
|
placeholder="${prompt.placeholder}"
|
||||||
class="pf-c-form-control"
|
class="pf-c-form-control"
|
||||||
?required=${prompt.required}>`;
|
?required=${prompt.required}>`;
|
||||||
case "separator":
|
case "separator":
|
||||||
return html`<hr>`;
|
return "<hr>";
|
||||||
case "hidden":
|
case "hidden":
|
||||||
return html`<input
|
return `<input
|
||||||
type="hidden"
|
type="hidden"
|
||||||
name="${prompt.field_key}"
|
name="${prompt.field_key}"
|
||||||
value="${prompt.placeholder}"
|
value="${prompt.placeholder}"
|
||||||
class="pf-c-form-control"
|
class="pf-c-form-control"
|
||||||
?required=${prompt.required}>`;
|
?required=${prompt.required}>`;
|
||||||
case "static":
|
case "static":
|
||||||
return html`<p
|
return `<p
|
||||||
class="pf-c-form-control">${prompt.placeholder}
|
class="pf-c-form-control">${prompt.placeholder}
|
||||||
</p>`;
|
</p>`;
|
||||||
}
|
}
|
||||||
return html``;
|
return "";
|
||||||
}
|
}
|
||||||
|
|
||||||
render(): TemplateResult {
|
render(): TemplateResult {
|
||||||
|
@ -126,7 +127,7 @@ export class PromptStage extends BaseStage {
|
||||||
?required="${prompt.required}"
|
?required="${prompt.required}"
|
||||||
class="pf-c-form__group"
|
class="pf-c-form__group"
|
||||||
.errors=${(this.challenge?.response_errors || {})[prompt.field_key]}>
|
.errors=${(this.challenge?.response_errors || {})[prompt.field_key]}>
|
||||||
${this.renderPromptInner(prompt)}
|
${unsafeHTML(this.renderPromptInner(prompt))}
|
||||||
</ak-form-element>`;
|
</ak-form-element>`;
|
||||||
})}
|
})}
|
||||||
<div class="pf-c-form__group pf-m-action">
|
<div class="pf-c-form__group pf-m-action">
|
||||||
|
|
Reference in New Issue