@sheerid/jslib-nightly
Version:
SheerID JavaScript Library
214 lines (212 loc) • 7.16 kB
JavaScript
/**
* VERSION: 2.130.0-alpha.4
* BUILD_TIMESTAMP: 1759000305348
* BUILD_DATE: Sat Sep 27 2025 19:11:45 GMT+0000 (Coordinated Universal Time)
* BUILD_COMMIT: be6ef87ab40e8747994d32363389cf39e36a4326
*/
import { t as c, R as V, a8 as R, N as F, V as O, j as a, A as K, b as C, f as S, n as P } from "../sheerid.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 p = t.allowedCharacters, m = p === void 0 ? "alphanumeric" : p, d = t.ariaLabel, f = t.autoFocus, b = f === void 0 ? !0 : f, y = t.containerClassName, l = t.disabled, h = t.inputClassName, v = t.isPassword, w = v === void 0 ? !1 : v, E = t.length, N = E === void 0 ? 6 : E, D = t.placeholder, M = t.onChange;
if (isNaN(N) || N < 1)
throw new Error("Length should be a number and greater than 0");
if (!z.some(function(u) {
return u === m;
}))
throw new Error("Invalid value for allowedCharacters. Use alpha, numeric, or alphanumeric");
var r = c.useRef([]), g = B[m];
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);
}, L = 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();
}, T = 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();
}
}, $ = function(e) {
e.target.select();
}, k = function(e) {
for (var o = e.clipboardData.getData("Text"), n = 0, s = 0; s < o.length; s++) {
var _ = o.charAt(s), I = r.current[n].value;
_.match(g.pattern) && (I || (r.current[n].value = _, r.current[n].nextElementSibling !== null && (r.current[n].nextElementSibling.focus(), n++)));
}
x(), e.preventDefault();
}, A = [], H = function(e) {
A.push(V.createElement("input", Object.assign({
key: e,
onChange: L,
onKeyDown: T,
onFocus: $,
onPaste: k
}, g, {
type: w ? "password" : g.type,
ref: function(n) {
r.current[e] = n;
},
maxLength: 1,
className: h,
autoComplete: e === 0 ? "one-time-code" : "off",
"aria-label": d ? d + ". Character " + (e + 1) + "." : "Character " + (e + 1) + ".",
disabled: l,
placeholder: D
})));
}, j = 0; j < N; j++)
H(j);
return V.createElement("div", {
className: y
}, A);
});
const G = ({
verificationService: t
}) => {
const i = t.viewModel, { fieldValidationErrors: p, verificationResponse: m } = t, { errorIds: d } = m, f = c.useRef(null), b = (l, h) => {
const v = P(
i,
(w) => {
w[l] = h;
}
);
t.updateViewModel(v);
}, y = () => {
const l = P(
i,
(h) => {
h.didManuallyVerify = !0, delete h.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${p.authenticationCode ? " auth-code__input-error" : ""}`
}
),
p.authenticationCode || (d == null ? void 0 : d.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
};