@sheerid/jslib-nightly
Version:
SheerID JavaScript Library
217 lines (215 loc) • 7.28 kB
JavaScript
/**
* VERSION: 2.113.0-alpha.0
* BUILD_TIMESTAMP: 1750184680813
* BUILD_DATE: Tue Jun 17 2025 18:24:40 GMT+0000 (Coordinated Universal Time)
* BUILD_COMMIT: 896154e79f58fffa6d52f3ed37f2db760a63df88
*/
import { ak as V, B as R, V as F, j as a, A as B, u as K, q as O } from "./es6-B9qAIX4x.js";
import * as N from "react";
import P, { forwardRef as S, useRef as z, useImperativeHandle as U, useEffect as Z } from "react";
import { FormattedHTMLMessage as x } from "react-intl";
var q = ["alpha", "numeric", "alphanumeric"], G = {
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"
}
}, J = S(function(t, s) {
var h = t.allowedCharacters, m = h === void 0 ? "alphanumeric" : h, c = t.ariaLabel, p = t.autoFocus, C = p === void 0 ? !0 : p, b = t.containerClassName, l = t.disabled, d = t.inputClassName, f = t.isPassword, y = f === void 0 ? !1 : f, E = t.length, w = E === void 0 ? 6 : E, D = t.placeholder, M = t.onChange;
if (isNaN(w) || w < 1)
throw new Error("Length should be a number and greater than 0");
if (!q.some(function(u) {
return u === m;
}))
throw new Error("Invalid value for allowedCharacters. Use alpha, numeric, or alphanumeric");
var r = z([]), v = G[m];
U(s, 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();
}
g();
}
};
}), Z(function() {
C && r.current[0].focus();
}, []);
for (var g = function() {
var e = r.current.map(function(i) {
return i.value;
}).join("");
M && M(e);
}, L = function(e) {
var i = e.target, n = i.value, o = i.nextElementSibling;
n.length > 1 ? (e.target.value = n.charAt(0), o !== null && o.focus()) : n.match(v.pattern) ? o !== null && o.focus() : e.target.value = "", g();
}, T = function(e) {
var i = e.key, n = e.target;
if (i === "Backspace") {
if (n.value === "") {
if (n.previousElementSibling !== null) {
var o = n.previousElementSibling;
o.value = "", o.focus(), e.preventDefault();
}
} else
n.value = "";
g();
}
}, k = function(e) {
e.target.select();
}, $ = function(e) {
for (var i = e.clipboardData.getData("Text"), n = 0, o = 0; o < i.length; o++) {
var A = i.charAt(o), I = r.current[n].value;
A.match(v.pattern) && (I || (r.current[n].value = A, r.current[n].nextElementSibling !== null && (r.current[n].nextElementSibling.focus(), n++)));
}
g(), e.preventDefault();
}, _ = [], H = function(e) {
_.push(P.createElement("input", Object.assign({
key: e,
onChange: L,
onKeyDown: T,
onFocus: k,
onPaste: $
}, v, {
type: y ? "password" : v.type,
ref: function(n) {
r.current[e] = n;
},
maxLength: 1,
className: d,
autoComplete: e === 0 ? "one-time-code" : "off",
"aria-label": c ? c + ". Character " + (e + 1) + "." : "Character " + (e + 1) + ".",
disabled: l,
placeholder: D
})));
}, j = 0; j < w; j++)
H(j);
return P.createElement("div", {
className: b
}, _);
});
const Y = ({
verificationService: t
}) => {
const s = t.viewModel, { fieldValidationErrors: h, verificationResponse: m } = t, { errorIds: c } = m, p = N.useRef(null), C = (l, d) => {
const f = O(
s,
(y) => {
y[l] = d;
}
);
t.updateViewModel(f);
}, b = () => {
const l = O(
s,
(d) => {
d.didManuallyVerify = !0, delete d.authenticationCode;
}
);
return t.updateViewModel(l), l;
};
return N.useEffect(() => {
s.authenticationCode && (s.authenticationCode = "");
}, []), N.useEffect(() => {
s.authenticationCode.length >= V && R(s, t, F.completeAuthentication);
}, [s.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(B, { align: "center", children: /* @__PURE__ */ a.jsx(
x,
{
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(
x,
{
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(
J,
{
onChange: (l) => {
C("authenticationCode", l), K("authenticationCode", l, t);
},
ref: p,
allowedCharacters: "numeric",
length: V,
isPassword: !0,
containerClassName: "auth-code__container",
inputClassName: `auth-code__input${h.authenticationCode ? " auth-code__input-error" : ""}`
}
),
h.authenticationCode || (c == null ? void 0 : c.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(
x,
{
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: () => {
R(
b(),
t,
F.completeAuthentication
);
},
children: /* @__PURE__ */ a.jsx(
x,
{
id: "step.completeAuthentication.manuallyVerifyButton",
defaultMessage: "Manually verify"
}
)
}
) })
]
}
);
};
export {
Y as default
};