import { Alert as u } from "./accelbyte-widgets123.mjs";
import { Button as p } from "./accelbyte-widgets107.mjs";
import { CommonError as s } from "./accelbyte-widgets124.mjs";
import { Dialog as h, DialogBody as f } from "./accelbyte-widgets235.mjs";
import { FormGroupError as c, FormGroup as y } from "./accelbyte-widgets263.mjs";
import { InputGroup as E } from "./accelbyte-widgets229.mjs";
import { Loading as g } from "./accelbyte-widgets136.mjs";
import { t as l } from "./accelbyte-widgets58.mjs";
import { Ctx as b } from "./accelbyte-widgets33.mjs";
import { AlertType as v } from "./accelbyte-widgets128.mjs";
import { ErrorHelper as C } from "./accelbyte-widgets120.mjs";
import A from "classnames";
import { Iam as S } from "@accelbyte/sdk-iam";
import e from "react";
import { Trans as r } from "react-i18next";
import "./accelbyte-widgets624.mjs";
import { QRCodeImage as w } from "./accelbyte-widgets625.mjs";
import { Copy as N, Check as x } from "react-feather";
import { validateAlphanumeric as K, ValidateAlphaNumericErrorType as T } from "./accelbyte-widgets293.mjs";
import { Validation as P } from "./accelbyte-widgets269.mjs";
const F = 10138;
class Z extends e.Component {
  constructor(o) {
    super(o), this.generateAuthenticatorSecretKey = async () => {
      this.setState({ isLoading: !0 });
      try {
        await this.appState.userAppManager.generateAuthenticatorSecretKey();
      } catch (t) {
        console.error(t);
      } finally {
        this.setState({ isLoading: !1 });
      }
    }, this.enableAuthenticator = async () => {
      this.setState({ errorInput: null, alert: null });
      try {
        await S.UsersV4Api(this.appState.getSdk()).postUserMeMfaAuthenticatorEnable({ code: this.state.TwoFACode }), this.props.onClose(), this.props.onSuccess(), this.props.onUpdated();
      } catch (t) {
        console.error(t), C.extractServiceErrorCode(t) === F ? this.setState({ errorInput: t }) : this.setState({
          alert: {
            type: v.danger,
            element: /* @__PURE__ */ e.createElement(s, { error: t })
          }
        });
      }
    }, this.onChangeTwoFACode = (t) => {
      const a = t.target.value;
      this.setState({ TwoFACode: a }), this.validation.set("verificationCode", K(a));
    }, this.onCopyCode = (t) => {
      navigator.clipboard.writeText(t), this.setState({ isCopied: !0 }), setTimeout(() => {
        this.setState({ isCopied: !1 });
      }, 1e3);
    }, this.renderError = () => {
      const t = this.validation.get("verificationCode"), { errorInput: a } = this.state;
      switch (t) {
        case T.enum.empty:
          return /* @__PURE__ */ e.createElement(c, null, /* @__PURE__ */ e.createElement(r, { i18nKey: "AccountPasswordSecurity.2fa.twoFaCode.error.empty" }, "Code is required"));
      }
      return /* @__PURE__ */ e.createElement(c, null, /* @__PURE__ */ e.createElement(s, { error: a }));
    }, this.state = {
      authenticatorKey: { secretKey: "", uri: "" },
      TwoFACode: "",
      errorInput: null,
      isLoading: !1,
      alert: null,
      isCopied: !1
    }, this.appState = b.getAppState(), this.validation = new P(), this.validation.listen(() => this.setState({}));
  }
  componentDidUpdate(o) {
    o.isOpen !== this.props.isOpen && this.generateAuthenticatorSecretKey();
  }
  render() {
    const { alert: o, isLoading: t, errorInput: a, TwoFACode: i } = this.state, { authenticatorKey: n } = this.appState.userAppManager.state, { onClose: m, isOpen: d } = this.props;
    return /* @__PURE__ */ e.createElement(h, { title: l("AccountPasswordSecurity.2fa.authenticator.title"), isOpen: d, className: "authenticatorApp", onClose: m }, /* @__PURE__ */ e.createElement(f, null, /* @__PURE__ */ e.createElement("div", { className: "mb-4 text-[color:rgb(var(--od-rgb-text),0.65)]" }, /* @__PURE__ */ e.createElement(r, { i18nKey: "AccountPasswordSecurity.2fa.authenticator.subtitle" }, "Please follow the instruction below to setup two-factor authentication")), o && /* @__PURE__ */ e.createElement(u, { type: o.type, onDismiss: () => this.setState({ alert: null }), className: "mb-3" }, o.element), /* @__PURE__ */ e.createElement("div", { className: "bg-grayD1 p-8" }, /* @__PURE__ */ e.createElement("div", { className: "flex text-[color:rgb(var(--od-rgba-text))]" }, /* @__PURE__ */ e.createElement("div", { className: "mr-3 flex h-6 w-6 justify-center rounded-full bg-blue-50" }, "1"), /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(r, { i18nKey: "AccountPasswordSecurity.2fa.authenticator.step1.title" }, "Download an authenticator app"))), /* @__PURE__ */ e.createElement("div", { className: "descStep border-l-2 border-blue-50" }, /* @__PURE__ */ e.createElement(r, { i18nKey: "AccountPasswordSecurity.2fa.authenticator.step1.desc" }, "Download and install an authenticator app for your phone or tablet.")), /* @__PURE__ */ e.createElement("div", { className: "flex text-[color:rgb(var(--od-rgba-text))]" }, /* @__PURE__ */ e.createElement("div", { className: "mr-3 flex h-6 w-6 justify-center rounded-full bg-blue-50" }, "2"), /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(r, { i18nKey: "AccountPasswordSecurity.2fa.authenticator.step2.title" }, "Scan the QR code"))), /* @__PURE__ */ e.createElement("div", { className: "descStep border-l-2 border-blue-50" }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(r, { i18nKey: "AccountPasswordSecurity.2fa.authenticator.step2.desc" }, "Open the authenticator app and follow the instruction to scan this QR Code")), /* @__PURE__ */ e.createElement("div", { className: "mt-3 items-center md:flex" }, t || !n ? /* @__PURE__ */ e.createElement(g, null) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(w, { qrValue: n.uri, onRetry: this.generateAuthenticatorSecretKey }), n.secretKey && /* @__PURE__ */ e.createElement("div", { className: "decsQRcode sm:py-3 md:p-3" }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(r, { i18nKey: "AccountPasswordSecurity.2fa.authenticator.step2.desc2" }, "Can't scan the QR code? Enter this text code manually.")), /* @__PURE__ */ e.createElement("div", { className: "bg-gray-80 rounded p-3 pr-1.5" }, /* @__PURE__ */ e.createElement("div", { className: "flex justify-between" }, /* @__PURE__ */ e.createElement("input", { className: "bg-gray-80 w-full cursor-text break-all", disabled: !0, value: n.secretKey }), /* @__PURE__ */ e.createElement("button", { onClick: () => this.onCopyCode(n.secretKey) }, this.state.isCopied ? /* @__PURE__ */ e.createElement(x, { className: "m-1.5" }) : /* @__PURE__ */ e.createElement(N, { className: "m-1.5" })))))))), /* @__PURE__ */ e.createElement("div", { className: "flex text-[color:rgb(var(--od-rgba-text))]" }, /* @__PURE__ */ e.createElement("div", { className: "mr-3 flex h-6 w-6 justify-center rounded-full bg-blue-50" }, "3"), /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(r, { i18nKey: "AccountPasswordSecurity.2fa.authenticator.step3.title" }, "Enter the authentication code"))), /* @__PURE__ */ e.createElement("div", { className: "descStep" }, /* @__PURE__ */ e.createElement("div", { className: "mb-3" }, /* @__PURE__ */ e.createElement(r, { i18nKey: "AccountPasswordSecurity.2fa.authenticator.step3.desc" }, "Once you have scanned the barcode, enter the 6-digit authentication code generated by the authenticator app.")), /* @__PURE__ */ e.createElement(y, null, /* @__PURE__ */ e.createElement(
      E,
      {
        className: A("mb-3 w-3/5", {
          "border-red-40": a || this.validation.get("verificationCode")
        }),
        placeholder: l("AccountPasswordSecurity.2fa.authenticator.placeholder"),
        value: i,
        onChange: this.onChangeTwoFACode
      }
    ), (a || this.validation.get("verificationCode")) && this.renderError()), /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(p, { className: "btn btn-primary", onClick: this.enableAuthenticator, disabled: !i }, /* @__PURE__ */ e.createElement(r, { i18nKey: "AccountPasswordSecurity.2fa.authenticator.activate" }, "ACTIVATE")))))));
  }
}
export {
  Z as AuthenticatorAppDialog
};
