import { AKElement } from "@goauthentik/elements/Base"; import { CSSResult } from "lit"; import { TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; import { ErrorDetail } from "@goauthentik/api"; /** * This is used in two places outside of Flow, and in both cases is used primarily to * display content, not take input. It displays the TOTP QR code, and the static * recovery tokens. But it's used a lot in Flow. */ @customElement("ak-form-element") export class FormElement extends AKElement { static get styles(): CSSResult[] { return [PFBase, PFForm, PFFormControl]; } @property() label?: string; @property({ type: Boolean }) required = false; @property({ attribute: false }) set errors(value: ErrorDetail[] | undefined) { this._errors = value; const hasError = (value || []).length > 0; this.querySelectorAll("input").forEach((input) => { input.setAttribute("aria-invalid", hasError.toString()); }); this.requestUpdate(); } _errors?: ErrorDetail[]; updated(): void { this.querySelectorAll("input[autofocus]").forEach((input) => { input.focus(); }); } render(): TemplateResult { return html`
${(this._errors || []).map((error) => { return html`

${error.string}

`; })}
`; } }