
/**
 *   WARNING: This file is intended to be used within MySheerID.
 *   This file is not intended for use in other contexts and there are no guarantees about its behavior outside of MySheerID.
 */ 
/**
 *   VERSION: 2.239.0-alpha.0
 *   BUILD_TIMESTAMP: 1780013005605
 *   BUILD_DATE: Fri May 29 2026 00:03:25 GMT+0000 (Coordinated Universal Time)
 *   BUILD_COMMIT: 3344b6c0fd9fa858907db310cfb1ef5e0d224da2
 */
import { r as c, R as V, a7 as R, Q as F, V as O, j as a, M as K, F as C, u as S, k as P } from "../_mysheerid-preview.js";
var z = ["alpha", "numeric", "alphanumeric"], B = {
  alpha: {
    type: "text",
    inputMode: "text",
    pattern: "[a-zA-Z]{1}"
  },
  alphanumeric: {
    type: "text",
    inputMode: "text",
    pattern: "[a-zA-Z0-9]{1}"
  },
  numeric: {
    type: "tel",
    inputMode: "numeric",
    pattern: "[0-9]{1}",
    min: "0",
    max: "9"
  }
}, U = c.forwardRef(function(t, i) {
  var h = t.allowedCharacters, p = h === void 0 ? "alphanumeric" : h, m = t.ariaLabel, f = t.autoFocus, b = f === void 0 ? !0 : f, y = t.containerClassName, l = t.disabled, d = t.inputClassName, v = t.isPassword, w = v === void 0 ? !1 : v, N = t.length, j = N === void 0 ? 6 : N, D = t.placeholder, M = t.onChange;
  if (isNaN(j) || j < 1)
    throw new Error("Length should be a number and greater than 0");
  if (!z.some(function(u) {
    return u === p;
  }))
    throw new Error("Invalid value for allowedCharacters. Use alpha, numeric, or alphanumeric");
  var r = c.useRef([]), g = B[p];
  c.useImperativeHandle(i, function() {
    return {
      focus: function() {
        r.current && r.current[0].focus();
      },
      clear: function() {
        if (r.current) {
          for (var e = 0; e < r.current.length; e++)
            r.current[e].value = "";
          r.current[0].focus();
        }
        x();
      }
    };
  }), c.useEffect(function() {
    b && r.current[0].focus();
  }, []);
  for (var x = function() {
    var e = r.current.map(function(o) {
      return o.value;
    }).join("");
    M && M(e);
  }, I = function(e) {
    var o = e.target, n = o.value, s = o.nextElementSibling;
    n.length > 1 ? (e.target.value = n.charAt(0), s !== null && s.focus()) : n.match(g.pattern) ? s !== null && s.focus() : e.target.value = "", x();
  }, L = function(e) {
    var o = e.key, n = e.target;
    if (o === "Backspace") {
      if (n.value === "") {
        if (n.previousElementSibling !== null) {
          var s = n.previousElementSibling;
          s.value = "", s.focus(), e.preventDefault();
        }
      } else
        n.value = "";
      x();
    }
  }, T = function(e) {
    e.target.select();
  }, k = function(e) {
    for (var o = e.clipboardData.getData("Text"), n = 0, s = 0; s < o.length; s++) {
      var A = o.charAt(s), H = r.current[n].value;
      A.match(g.pattern) && (H || (r.current[n].value = A, r.current[n].nextElementSibling !== null && (r.current[n].nextElementSibling.focus(), n++)));
    }
    x(), e.preventDefault();
  }, _ = [], $ = function(e) {
    _.push(V.createElement("input", Object.assign({
      key: e,
      onChange: I,
      onKeyDown: L,
      onFocus: T,
      onPaste: k
    }, g, {
      type: w ? "password" : g.type,
      ref: function(n) {
        r.current[e] = n;
      },
      maxLength: 1,
      className: d,
      autoComplete: e === 0 ? "one-time-code" : "off",
      "aria-label": m ? m + ". Character " + (e + 1) + "." : "Character " + (e + 1) + ".",
      disabled: l,
      placeholder: D
    })));
  }, E = 0; E < j; E++)
    $(E);
  return V.createElement("div", {
    className: y
  }, _);
});
const G = ({
  verificationService: t
}) => {
  const i = t.viewModel, { fieldValidationErrors: h, verificationResponse: p } = t, { errorIds: m } = p, f = c.useRef(null), b = (l, d) => {
    const v = P(
      i,
      (w) => {
        w[l] = d;
      }
    );
    t.updateViewModel(v);
  }, y = () => {
    const l = P(
      i,
      (d) => {
        d.didManuallyVerify = !0, delete d.authenticationCode;
      }
    );
    return t.updateViewModel(l), l;
  };
  return c.useEffect(() => {
    i.authenticationCode && (i.authenticationCode = "");
  }, []), c.useEffect(() => {
    i.authenticationCode.length >= R && F(i, t, O.completeAuthentication);
  }, [i.authenticationCode]), /* @__PURE__ */ a.jsxs(
    "div",
    {
      id: "sid-step-complete-authentication",
      className: "sid-step-complete-authentication-container sid-l-container",
      children: [
        /* @__PURE__ */ a.jsxs("div", { className: "sid-header", children: [
          /* @__PURE__ */ a.jsx(K, { align: "center", children: /* @__PURE__ */ a.jsx(
            C,
            {
              id: "step.completeAuthentication.title",
              defaultMessage: "Verify with Remember Me"
            }
          ) }),
          /* @__PURE__ */ a.jsx("div", { className: "sid-header__subtitle sid-l-horz-center", children: /* @__PURE__ */ a.jsx(
            C,
            {
              id: "step.completeAuthentication.subtitle",
              defaultMessage: "Enter the code sent to your email."
            }
          ) })
        ] }),
        /* @__PURE__ */ a.jsx("div", { className: "sid-l-space-top-md" }),
        /* @__PURE__ */ a.jsxs("div", { className: "auth-code", children: [
          /* @__PURE__ */ a.jsx(
            U,
            {
              onChange: (l) => {
                b("authenticationCode", l), S("authenticationCode", l, t);
              },
              ref: f,
              allowedCharacters: "numeric",
              length: R,
              isPassword: !0,
              containerClassName: "auth-code__container",
              inputClassName: `auth-code__input${h.authenticationCode ? " auth-code__input-error" : ""}`
            }
          ),
          h.authenticationCode || m?.length > 0 && /* @__PURE__ */ a.jsxs("div", { className: "auth-code__error-container", children: [
            /* @__PURE__ */ a.jsx("div", { children: /* @__PURE__ */ a.jsx(
              "img",
              {
                alt: "red-exclaimation-circle",
                src: "https://assets-resources.sheerid.com/common/images/2018/icons/red-exclaimation-circle.svg"
              }
            ) }),
            /* @__PURE__ */ a.jsx("div", { className: "auth-code__error-text", children: /* @__PURE__ */ a.jsx(
              C,
              {
                id: "errorId.invalidAuthenticationLoopToken",
                defaultMessage: "The code provided is invalid"
              }
            ) })
          ] })
        ] }),
        /* @__PURE__ */ a.jsx("div", { className: "sid-complete-auth__manually-verify-button-continer", children: /* @__PURE__ */ a.jsx(
          "button",
          {
            type: "button",
            className: "sid-btn sid-btn-light sid-complete-auth__manually-verify-button",
            "aria-label": "submit",
            onClick: () => {
              F(
                y(),
                t,
                O.completeAuthentication
              );
            },
            children: /* @__PURE__ */ a.jsx(
              C,
              {
                id: "step.completeAuthentication.manuallyVerifyButton",
                defaultMessage: "Manually verify"
              }
            )
          }
        ) })
      ]
    }
  );
};
export {
  G as default
};
