import { Alert as M } from "./accelbyte-widgets123.mjs";
import { Button as A } from "./accelbyte-widgets107.mjs";
import { CommonError as N } from "./accelbyte-widgets124.mjs";
import { FormGroup as p, FormGroupError as h } from "./accelbyte-widgets263.mjs";
import { InputGroupPassword as w } from "./accelbyte-widgets264.mjs";
import { PasswordConstraint as O } from "./accelbyte-widgets265.mjs";
import { Loading as F, LoadingSize as K } from "./accelbyte-widgets136.mjs";
import { Spinner as I, SpinnerStyle as U } from "./accelbyte-widgets154.mjs";
import { getCurrentLanguage as g, t as x } from "./accelbyte-widgets58.mjs";
import { Ctx as v } from "./accelbyte-widgets33.mjs";
import { AlertType as b } from "./accelbyte-widgets128.mjs";
import { ErrorHelper as L } from "./accelbyte-widgets120.mjs";
import j from "classnames";
import { InputValidationHelper as V, ValidateableInputField as k } from "@accelbyte/sdk-iam";
import e from "react";
import { Trans as n } from "react-i18next";
import { AccountMainSection as G, AccountMainSectionHeader as B, AccountMainSectionBody as D } from "./accelbyte-widgets122.mjs";
import { CommonEntryGroup as f, CommonEntryGroupLabel as P, CommonEntryGroupInput as E } from "./accelbyte-widgets266.mjs";
import { validationOutdatedModalEvent as R } from "./accelbyte-widgets141.mjs";
import "./accelbyte-widgets267.mjs";
import { TwoFactorAuthenticatorSection as T } from "./accelbyte-widgets268.mjs";
import { mockPassword as C, mockInputValidationPassword as H } from "./accelbyte-widgets209.mjs";
import { Validation as _ } from "./accelbyte-widgets269.mjs";
class we extends e.Component {
  constructor(l) {
    super(l), this.resetState = () => {
      this.setState({
        currentPassword: "",
        password: "",
        passwordConfirm: "",
        alert: null
      });
    }, this.onUpdateSuccess = () => {
      this.resetState(), this.notifyUpdateSuccess(), this.updateValidationObject();
    }, this.notifyUpdateSuccess = () => {
      this.setState({
        alert: {
          type: b.success,
          element: /* @__PURE__ */ e.createElement(n, { i18nKey: "AccountChangePasswordPage.updateSuccess" }, "Password successfully updated.")
        }
      });
    }, this.notifyUpdateError = async (t) => {
      if (await this.inputValidationManager.isInputValidationError(t)) {
        R.openValidationOutdatedModal(), this.resetState();
        return;
      }
      const a = L.extractServiceErrorCode(t);
      this.setState({
        alert: {
          type: b.danger,
          element: a ? /* @__PURE__ */ e.createElement(N, { error: t }) : /* @__PURE__ */ e.createElement(n, { i18nKey: "AccountChangePasswordPage.updateError" }, "We are unable to process this request. Please try again.")
        }
      });
    }, this.getValidationObject = () => {
      const { currentPassword: t, password: a, passwordConfirm: s } = this.state, r = {
        match: !1,
        differentPassword: !1
      };
      return t && a && t !== a && (r.differentPassword = !0), a && s && a === s && (r.match = !0), r;
    }, this.updateValidationObject = () => {
      this.setState({
        passwordValidation: this.getValidationObject()
      });
    }, this.onCurrentPasswordChange = (t) => {
      const a = t.target.value;
      this.setState(
        {
          currentPassword: a
        },
        () => this.updateValidationObject()
      );
    }, this.onPasswordChange = (t) => {
      const a = t.target.value, { validations: s } = this.inputValidationManager.state;
      this.validation.set("password", V.validatePassword(a, s)), this.setState(
        {
          password: a
        },
        () => this.updateValidationObject()
      );
    }, this.onPasswordConfirmChange = (t) => {
      const a = t.target.value;
      this.setState(
        {
          passwordConfirm: a
        },
        () => this.updateValidationObject()
      );
    }, this.onSubmit = async (t) => {
      t.preventDefault();
      const { currentPassword: a, password: s } = this.state;
      this.setState({ alert: null });
      try {
        await this.userAppManager.updatePassword(a, s, g()), this.onUpdateSuccess();
      } catch (r) {
        this.notifyUpdateError(r);
      }
    }, this.onReload = () => {
      this.setState({ alert: null }), this.inputValidationManager.fetchValidations(g()).catch((t) => this.notifyUpdateError(t));
    }, this.userAppManager = v.getAppState().getUserManager(), this.inputValidationManager = v.getAppState().getInputValidationManager(), this.state = {
      currentPassword: "",
      password: "",
      passwordConfirm: "",
      passwordValidation: {
        match: !1,
        differentPassword: !1
      },
      alert: null
    }, this.inputValidationManager.subscribe(() => this.setState({})), this.validation = new _(), this.validation.listen(() => this.setState({}));
  }
  async componentDidMount() {
    this.props.isPreviewMode || this.inputValidationManager.state.validations.length === 0 && await this.inputValidationManager.fetchValidations(g());
  }
  isFieldValid() {
    const { currentPassword: l, password: t, passwordConfirm: a, passwordValidation: s } = this.state, r = !!l && !!t && !!a, d = Object.keys(s).reduce(
      (o, c) => o && s[c],
      !0
    );
    return r && d && this.validation.isAllValid();
  }
  render() {
    const { isUpdating: l } = this.userAppManager.state, { fetchError: t, isFetching: a, validations: s } = this.inputValidationManager.state, { alert: r, currentPassword: d, password: o, passwordConfirm: c } = this.state, i = this.props.isPreviewMode, m = i ? H : s, y = Boolean(o && c && o !== c), u = Boolean(d && o && d === o), S = Boolean(o && !u && this.validation.get("password"));
    return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(G, { className: "accountChangePasswordPage" }, /* @__PURE__ */ e.createElement(B, null, /* @__PURE__ */ e.createElement(n, { i18nKey: "AccountChangePasswordPage.title" }, "Change Password")), /* @__PURE__ */ e.createElement(D, { className: "w-full" }, !!r && /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(M, { type: r.type, onDismiss: () => this.setState({ alert: null }) }, r.element), !!t && /* @__PURE__ */ e.createElement(A, { className: "btn btn-primary mt-4", onClick: this.onReload }, /* @__PURE__ */ e.createElement(n, { i18nKey: "Common.reload" }, "Reload"))), m.length <= 0 && a && /* @__PURE__ */ e.createElement(F, { className: K.medium }), m.length > 0 && !t && /* @__PURE__ */ e.createElement("form", { onSubmit: this.onSubmit, className: "mt-4 w-full" }, /* @__PURE__ */ e.createElement("div", { className: "md:flex md:items-center" }, /* @__PURE__ */ e.createElement("div", { className: "md:w-2/3" }, /* @__PURE__ */ e.createElement("div", { className: "w-full" }, /* @__PURE__ */ e.createElement(f, null, /* @__PURE__ */ e.createElement(P, null, /* @__PURE__ */ e.createElement(n, { i18nKey: "AccountChangePasswordPage.form.currentPasswordLabel" }, "Current password")), /* @__PURE__ */ e.createElement(E, { className: "flex items-center" }, /* @__PURE__ */ e.createElement(p, { className: "w-full" }, /* @__PURE__ */ e.createElement(
      w,
      {
        value: i ? C : d,
        name: "currentPassword",
        placeholder: x("AccountChangePasswordPage.form.currentPasswordPlaceholder"),
        onChange: this.onCurrentPasswordChange,
        togglePassword: !0,
        readOnly: i
      }
    )))), /* @__PURE__ */ e.createElement(f, null, /* @__PURE__ */ e.createElement(P, null, /* @__PURE__ */ e.createElement(n, { i18nKey: "AccountChangePasswordPage.form.newPasswordLabel" }, "New password")), /* @__PURE__ */ e.createElement(E, { className: "flex items-center" }, /* @__PURE__ */ e.createElement(p, { className: "w-full" }, /* @__PURE__ */ e.createElement(
      w,
      {
        value: i ? `${C}new` : o,
        name: "password",
        onChange: this.onPasswordChange,
        togglePassword: !0,
        hasStrengthMeter: !u && !S && !!o,
        readOnly: i
      }
    ), u && /* @__PURE__ */ e.createElement(h, null, /* @__PURE__ */ e.createElement(n, { i18nKey: "AccountChangePasswordPage.form.newPasswordLabelError" }, "Your new password cannot be the same as the previous one")), S && /* @__PURE__ */ e.createElement(h, null, /* @__PURE__ */ e.createElement(n, { i18nKey: "AccountChangePasswordPage.form.newPasswordInvalid" }, "Please enter a valid password")), /* @__PURE__ */ e.createElement(
      O,
      {
        descriptions: V.getValidationDescription(
          k.enum.password,
          m
        )
      }
    )))), /* @__PURE__ */ e.createElement(f, null, /* @__PURE__ */ e.createElement(P, null, /* @__PURE__ */ e.createElement(n, { i18nKey: "AccountChangePasswordPage.form.confirmPasswordLabel" }, "Confirm new password")), /* @__PURE__ */ e.createElement(E, { className: "flex items-center" }, /* @__PURE__ */ e.createElement(p, { className: "w-full", hasError: y }, /* @__PURE__ */ e.createElement(
      w,
      {
        value: i ? `${C}new` : c,
        name: "passwordConfirm",
        onChange: this.onPasswordConfirmChange,
        togglePassword: !0,
        readOnly: i
      }
    ), y && /* @__PURE__ */ e.createElement(h, null, /* @__PURE__ */ e.createElement(n, { i18nKey: "AccountChangePasswordPage.form.confirmPasswordLabelError" }, "The password that you entered does not match"))))))), /* @__PURE__ */ e.createElement("div", { className: "md:w-1/3" })), /* @__PURE__ */ e.createElement("div", { className: "border-gray-90 block border-t pt-6 text-right" }, /* @__PURE__ */ e.createElement("div", { className: "inline-block" }, /* @__PURE__ */ e.createElement(
      "button",
      {
        type: "submit",
        className: j("btn btn-primary uppercase"),
        disabled: l || !this.isFieldValid()
      },
      l ? /* @__PURE__ */ e.createElement(I, { className: U.inline }) : /* @__PURE__ */ e.createElement(n, { i18nKey: "AccountChangePasswordPage.form.updatePassword" }, "Update Password")
    )))))), /* @__PURE__ */ e.createElement(T, { isPreviewMode: i }));
  }
}
export {
  we as default
};
