Migrate mfa to Lit

src/panels/profile/dialog-ha-mfa-module-setup-flow.ts

@@ -0,0 +1,281 @@
+import "@material/mwc-button";
+import {
+  css,
+  CSSResult,
+  customElement,
+  internalProperty,
+  LitElement,
+  property,
+} from "lit-element";
+import { html, TemplateResult } from "lit-html";
+import { localizeKey } from "../../common/translations/localize";
+import "../../components/ha-circular-progress";
+import "../../components/ha-form/ha-form";
+import "../../components/ha-markdown";
+import {
+  DataEntryFlowStep,
+  DataEntryFlowStepForm,
+} from "../../data/data_entry_flow";
+import { haStyleDialog } from "../../resources/styles";
+import { HomeAssistant } from "../../types";
+import "../../components/ha-dialog";
+
+let instance = 0;
+
+@customElement("ha-mfa-module-setup-flow")
+class HaMfaModuleSetupFlow extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @internalProperty() private _dialogClosedCallback?: (params: {
+    flowFinished: boolean;
+  }) => void;
+
+  @internalProperty() private _instance?: number;
+
+  @internalProperty() private _loading = false;
+
+  @internalProperty() private _opened = false;
+
+  @internalProperty() private _stepData: any = {};
+
+  @internalProperty() private _step?: DataEntryFlowStep;
+
+  @internalProperty() private _errorMessage?: string;
+
+  public showDialog({ continueFlowId, mfaModuleId, dialogClosedCallback }) {
+    this._instance = instance++;
+    this._dialogClosedCallback = dialogClosedCallback;
+    this._opened = true;
+
+    const fetchStep = continueFlowId
+      ? this.hass.callWS({
+          type: "auth/setup_mfa",
+          flow_id: continueFlowId,
+        })
+      : this.hass.callWS({
+          type: "auth/setup_mfa",
+          mfa_module_id: mfaModuleId,
+        });
+
+    const curInstance = this._instance;
+
+    fetchStep.then((step) => {
+      if (curInstance !== this._instance) return;
+
+      this._processStep(step);
+    });
+  }
+
+  public closeDialog() {
+    // Closed dialog by clicking on the overlay
+    if (this._step) {
+      this._flowDone();
+    }
+    this._opened = false;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._opened) {
+      return html``;
+    }
+    return html`
+      <ha-dialog
+        open
+        .heading=${this._computeStepTitle()}
+        @closing=${this.closeDialog}
+      >
+        <div>
+          ${this._errorMessage
+            ? html`<div class="error">${this._errorMessage}</div>`
+            : ""}
+          ${!this._step
+            ? html`<div class="init-spinner">
+                <ha-circular-progress active></ha-circular-progress>
+              </div>`
+            : html`${this._step.type === "abort"
+                ? html` <ha-markdown
+                    allowsvg
+                    breaks
+                    .content=${this.hass.localize(
+                      `component.auth.mfa_setup.${this._step.handler}.abort.${this._step.reason}`
+                    )}
+                  ></ha-markdown>`
+                : this._step.type === "create_entry"
+                ? html`<p>
+                    ${this.hass.localize(
+                      "ui.panel.profile.mfa_setup.step_done",
+                      "step",
+                      this._step.title
+                    )}
+                  </p>`
+                : this._step.type === "form"
+                ? html` <ha-markdown
+                      allowsvg
+                      breaks
+                      .content=${localizeKey(
+                        this.hass.localize,
+                        `component.auth.mfa_setup.${this._step!.handler}.step.${
+                          (this._step! as DataEntryFlowStepForm).step_id
+                        }.description`,
+                        this._step!.description_placeholders
+                      )}
+                    ></ha-markdown>
+                    <ha-form
+                      .data=${this._stepData}
+                      .schema=${this._step.data_schema}
+                      .error=${this._step.errors}
+                      .computeLabel=${this._computeLabel}
+                      .computeError=${this._computeError}
+                      @value-changed=${this._stepDataChanged}
+                    ></ha-form>`
+                : ""}`}
+        </div>
+        ${["abort", "create_entry"].includes(this._step?.type || "")
+          ? html`<mwc-button slot="primaryAction" @click=${this.closeDialog}
+              >${this.hass.localize(
+                "ui.panel.profile.mfa_setup.close"
+              )}</mwc-button
+            >`
+          : ""}
+        ${this._step?.type === "form"
+          ? html`<mwc-button
+              slot="primaryAction"
+              .disabled=${this._loading}
+              @click=${this._submitStep}
+              >${this.hass.localize(
+                "ui.panel.profile.mfa_setup.submit"
+              )}</mwc-button
+            >`
+          : ""}
+      </ha-dialog>
+    `;
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyleDialog,
+      css`
+        .error {
+          color: red;
+        }
+        ha-dialog {
+          max-width: 500px;
+        }
+        ha-markdown {
+          --markdown-svg-background-color: white;
+          --markdown-svg-color: black;
+          display: block;
+          margin: 0 auto;
+        }
+        ha-markdown a {
+          color: var(--primary-color);
+        }
+        .init-spinner {
+          padding: 10px 100px 34px;
+          text-align: center;
+        }
+        .submit-spinner {
+          margin-right: 16px;
+        }
+      `,
+    ];
+  }
+
+  protected firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    this.hass.loadBackendTranslation("mfa_setup", "auth");
+    this.addEventListener("keypress", (ev) => {
+      if (ev.key === "Enter") {
+        this._submitStep();
+      }
+    });
+  }
+
+  private _stepDataChanged(ev: CustomEvent) {
+    this._stepData = ev.detail.value;
+  }
+
+  private _submitStep() {
+    this._loading = true;
+    this._errorMessage = undefined;
+
+    const curInstance = this._instance;
+
+    this.hass
+      .callWS({
+        type: "auth/setup_mfa",
+        flow_id: this._step!.flow_id,
+        user_input: this._stepData,
+      })
+      .then(
+        (step) => {
+          if (curInstance !== this._instance) {
+            return;
+          }
+
+          this._processStep(step);
+          this._loading = false;
+        },
+        (err) => {
+          this._errorMessage =
+            (err && err.body && err.body.message) || "Unknown error occurred";
+          this._loading = false;
+        }
+      );
+  }
+
+  private _processStep(step) {
+    if (!step.errors) step.errors = {};
+    this._step = step;
+    // We got a new form if there are no errors.
+    if (Object.keys(step.errors).length === 0) {
+      this._stepData = {};
+    }
+  }
+
+  private _flowDone() {
+    const flowFinished = Boolean(
+      this._step && ["create_entry", "abort"].includes(this._step.type)
+    );
+
+    this._dialogClosedCallback!({
+      flowFinished,
+    });
+
+    this._errorMessage = undefined;
+    this._step = undefined;
+    this._stepData = {};
+    this._dialogClosedCallback = undefined;
+    this.closeDialog();
+  }
+
+  private _computeStepTitle() {
+    return this._step?.type === "abort"
+      ? this.hass.localize("ui.panel.profile.mfa_setup.title_aborted")
+      : this._step?.type === "create_entry"
+      ? this.hass.localize("ui.panel.profile.mfa_setup.title_success")
+      : this._step?.type === "form"
+      ? this.hass.localize(
+          `component.auth.mfa_setup.${this._step.handler}.step.${this._step.step_id}.title`
+        )
+      : "";
+  }
+
+  private _computeLabel = (schema) =>
+    this.hass.localize(
+      `component.auth.mfa_setup.${this._step!.handler}.step.${
+        (this._step! as DataEntryFlowStepForm).step_id
+      }.data.${schema.name}`
+    ) || schema.name;
+
+  private _computeError = (error) =>
+    this.hass.localize(
+      `component.auth.mfa_setup.${this._step!.handler}.error.${error}`
+    ) || error;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-mfa-module-setup-flow": HaMfaModuleSetupFlow;
+  }
+}