@nibssplc/cams-sdk-react 0.0.1-beta.64 → 0.0.1-beta.66

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs.js CHANGED
@@ -1230,7 +1230,7 @@ function CAMSProviderCore(props) {
1230
1230
  }, [mode, auth, userProfile]);
1231
1231
  var value = React.useMemo(function () {
1232
1232
  return (__assign(__assign({}, auth), { logout: enhancedLogout, userProfile: userProfile, setUserProfile: setUserProfile, authMode: mode }));
1233
- }, [auth, userProfile, mode]);
1233
+ }, [auth, userProfile, mode, mode === "MSAL" && "requiresMFA" in auth ? auth.requiresMFA : null]);
1234
1234
  return jsxRuntimeExports.jsx(CAMSContext.Provider, { value: value, children: children });
1235
1235
  }
1236
1236
  function UnifiedCAMSProvider(props) {
@@ -1482,9 +1482,9 @@ var GenericOTPVerifier = function (_a) {
1482
1482
  resolver: a$1(Schema),
1483
1483
  defaultValues: (_c = {}, _c[fieldName] = "", _c),
1484
1484
  });
1485
- return (jsxRuntimeExports.jsxs(Card, { className: "relative rounded space-y-4 p-0 m-0 py-8 space-x-6", children: [jsxRuntimeExports.jsxs(CardHeader, { className: "flex items-center justify-center flex-col gap-2 mt-2 text-center mb-8", children: [jsxRuntimeExports.jsx("div", { className: "w-16 h-16 bg-gradient-to-br from-lime-400 via-green-500 to-emerald-600 rounded-xl flex items-center justify-center text-white text-2xl mb-6 group-hover:scale-110 transition-transform duration-300", children: jsxRuntimeExports.jsx(lucideReact.RectangleEllipsis, {}) }), jsxRuntimeExports.jsx(CardTitle, { className: "font-bold text-emerald-700 text-2xl", children: "One-Time-Password (OTP)" }), attemptCount > 0 && (jsxRuntimeExports.jsx("div", { className: "text-sm mt-2 ".concat(isMaxAttemptsReached ? 'text-red-600' : 'text-orange-600'), children: isMaxAttemptsReached
1485
+ return (jsxRuntimeExports.jsxs("div", { className: "relative rounded space-y-4 p-0 m-0 py-8 space-x-6", children: [jsxRuntimeExports.jsxs(CardHeader, { className: "flex items-center justify-center flex-col gap-2 mt-2 text-center mb-8", children: [jsxRuntimeExports.jsx("div", { className: "w-16 h-16 bg-gradient-to-br from-lime-400 via-green-500 to-emerald-600 rounded-xl flex items-center justify-center text-white text-2xl mb-6 group-hover:scale-110 transition-transform duration-300", children: jsxRuntimeExports.jsx(lucideReact.RectangleEllipsis, {}) }), jsxRuntimeExports.jsx(CardTitle, { className: "font-bold text-emerald-700 text-2xl", children: "One-Time-Password (OTP)" }), attemptCount > 0 && (jsxRuntimeExports.jsx("div", { className: "text-sm mt-2 ".concat(isMaxAttemptsReached ? 'text-red-600' : 'text-orange-600'), children: isMaxAttemptsReached
1486
1486
  ? 'Maximum attempts reached. Please try again later.'
1487
- : "Attempt ".concat(attemptCount, "/3 - ").concat(remainingAttempts, " attempts remaining") }))] }), jsxRuntimeExports.jsx(CardContent, { className: "space-y-6", children: jsxRuntimeExports.jsx(Form, __assign({}, form, { children: jsxRuntimeExports.jsx("form", { className: "flex items-center justify-center my-4 ", children: jsxRuntimeExports.jsx(FormField, { control: form.control, name: fieldName, render: function () { return (jsxRuntimeExports.jsxs(FormItem, { className: "flex items-center justify-center flex-col gap-y-1 space-y-4", children: [jsxRuntimeExports.jsx(FormControl, { children: jsxRuntimeExports.jsx(InputOTP, { maxLength: 6, value: value, disabled: isMaxAttemptsReached, onChange: function (authenticationValue) {
1487
+ : "Attempt ".concat(attemptCount, "/3 - ").concat(remainingAttempts, " attempts remaining") }))] }), jsxRuntimeExports.jsx("div", { className: "space-y-6", children: jsxRuntimeExports.jsx(Form, __assign({}, form, { children: jsxRuntimeExports.jsx("form", { className: "flex items-center justify-center my-4 ", children: jsxRuntimeExports.jsx(FormField, { control: form.control, name: fieldName, render: function () { return (jsxRuntimeExports.jsxs(FormItem, { className: "flex items-center justify-center flex-col gap-y-1 space-y-4", children: [jsxRuntimeExports.jsx(FormControl, { children: jsxRuntimeExports.jsx(InputOTP, { maxLength: 6, value: value, disabled: isMaxAttemptsReached, onChange: function (authenticationValue) {
1488
1488
  setValue(authenticationValue);
1489
1489
  if (authenticationValue.length === 6 && !isMaxAttemptsReached) {
1490
1490
  setLoading === null || setLoading === void 0 ? void 0 : setLoading(true);
@@ -1737,33 +1737,54 @@ var MFAOptions = function (_a) {
1737
1737
  var _d = React.useState(false), otpVisible = _d[0], setOtpVisible = _d[1];
1738
1738
  var _e = React.useState(false), showSuccessAnimation = _e[0], setShowSuccessAnimation = _e[1];
1739
1739
  var _f = React.useState(null), authType = _f[0], setAuthType = _f[1];
1740
+ var _g = React.useState(""), lastOTPCode = _g[0], setLastOTPCode = _g[1];
1740
1741
  var context = useCAMSContext();
1741
- var sendEmailOTP = (context.authMode === "MSAL" && "sendEmailOTP" in context
1742
+ var _h = context.authMode === "MSAL" && "sendEmailOTP" in context
1742
1743
  ? context
1743
- : { sendEmailOTP: null }).sendEmailOTP;
1744
+ : { sendEmailOTP: null, completeMFA: null }, sendEmailOTP = _h.sendEmailOTP, completeMFA = _h.completeMFA;
1744
1745
  var accessToken = context.authMode === "MSAL" ? context.accessToken : "";
1745
1746
  var idToken = context.authMode === "MSAL" ? context.idToken : "";
1746
- var _g = useOTPHandler({
1747
+ var _j = useOTPHandler({
1747
1748
  accessToken: accessToken || "",
1748
1749
  idToken: idToken || "",
1749
1750
  provider: "MSAL",
1750
1751
  appCode: context.appCode || "",
1751
1752
  authenticationType: authType,
1752
1753
  MFAEndpoint: MFAEndpoint,
1753
- onAuthComplete: function (state, data) {
1754
- if (state) {
1755
- setShowSuccessAnimation(true);
1756
- sonner.toast.success(jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm text-green-600 bg-green-50 p-3 rounded-lg", children: [jsxRuntimeExports.jsx(lucideReact.ShieldCheck, { className: "w-4 h-4" }), jsxRuntimeExports.jsx("span", { children: "Multi-Factor Authentication Successful" })] }));
1757
- setTimeout(function () { return onComplete === null || onComplete === void 0 ? void 0 : onComplete(true); }, 2000);
1758
- }
1759
- else {
1760
- sonner.toast.error(jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm text-red-600 bg-red-50 p-3 rounded-lg", children: [jsxRuntimeExports.jsx(lucideReact.ShieldClose, { className: "w-4 h-4" }), jsxRuntimeExports.jsx("span", { children: (data === null || data === void 0 ? void 0 : data.message) || "Invalid code. Please try again." })] }));
1761
- if (isMaxAttemptsReached) {
1762
- setTimeout(function () { return onComplete === null || onComplete === void 0 ? void 0 : onComplete(false); }, 1000);
1754
+ onAuthComplete: function (state, data) { return __awaiter(void 0, void 0, void 0, function () {
1755
+ var error_1;
1756
+ return __generator(this, function (_a) {
1757
+ switch (_a.label) {
1758
+ case 0:
1759
+ if (!state) return [3 /*break*/, 5];
1760
+ if (!(completeMFA && authType && lastOTPCode)) return [3 /*break*/, 4];
1761
+ _a.label = 1;
1762
+ case 1:
1763
+ _a.trys.push([1, 3, , 4]);
1764
+ return [4 /*yield*/, completeMFA(lastOTPCode, authType)];
1765
+ case 2:
1766
+ _a.sent();
1767
+ return [3 /*break*/, 4];
1768
+ case 3:
1769
+ error_1 = _a.sent();
1770
+ console.error("Failed to complete MFA:", error_1);
1771
+ return [3 /*break*/, 4];
1772
+ case 4:
1773
+ setShowSuccessAnimation(true);
1774
+ sonner.toast.success(jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm text-green-600 bg-green-50 p-3 rounded-lg", children: [jsxRuntimeExports.jsx(lucideReact.ShieldCheck, { className: "w-4 h-4" }), jsxRuntimeExports.jsx("span", { children: "Multi-Factor Authentication Successful" })] }));
1775
+ setTimeout(function () { return onComplete === null || onComplete === void 0 ? void 0 : onComplete(true); }, 2000);
1776
+ return [3 /*break*/, 6];
1777
+ case 5:
1778
+ sonner.toast.error(jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm text-red-600 bg-red-50 p-3 rounded-lg", children: [jsxRuntimeExports.jsx(lucideReact.ShieldClose, { className: "w-4 h-4" }), jsxRuntimeExports.jsx("span", { children: (data === null || data === void 0 ? void 0 : data.message) || "Invalid code. Please try again." })] }));
1779
+ if (isMaxAttemptsReached) {
1780
+ setTimeout(function () { return onComplete === null || onComplete === void 0 ? void 0 : onComplete(false); }, 1000);
1781
+ }
1782
+ _a.label = 6;
1783
+ case 6: return [2 /*return*/];
1763
1784
  }
1764
- }
1765
- },
1766
- }), handleSubmitOTP = _g.handleSubmitOTP, loading = _g.loading, setLoading = _g.setLoading, attemptCount = _g.attemptCount, remainingAttempts = _g.remainingAttempts, isMaxAttemptsReached = _g.isMaxAttemptsReached, resetAttempts = _g.resetAttempts;
1785
+ });
1786
+ }); },
1787
+ }), handleSubmitOTP = _j.handleSubmitOTP, loading = _j.loading, setLoading = _j.setLoading, attemptCount = _j.attemptCount, remainingAttempts = _j.remainingAttempts, isMaxAttemptsReached = _j.isMaxAttemptsReached, resetAttempts = _j.resetAttempts;
1767
1788
  var handleGoBack = function () {
1768
1789
  setAuthType(null);
1769
1790
  setOtpVisible(false);
@@ -1772,9 +1793,9 @@ var MFAOptions = function (_a) {
1772
1793
  };
1773
1794
  // Show success animation if authentication is successful
1774
1795
  if (showSuccessAnimation) {
1775
- return (jsxRuntimeExports.jsx(Card, { className: "mx-auto space-y-6 p-6 bg-white rounded-lg shadow-md", children: jsxRuntimeExports.jsx(AuthSuccessAnimation, { onComplete: function () {
1776
- // Animation completed, can add additional logic here if needed
1777
- } }) }));
1796
+ return (jsxRuntimeExports.jsx("div", { className: "flex justify-center items-center h-dvh", children: jsxRuntimeExports.jsx(Card, { className: "mx-auto space-y-6 p-6 bg-white rounded-lg shadow-md", children: jsxRuntimeExports.jsx(AuthSuccessAnimation, { onComplete: function () {
1797
+ // Animation completed, can add additional logic here if needed
1798
+ } }) }) }));
1778
1799
  }
1779
1800
  var content = jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
1780
1801
  if (!authType) {
@@ -1806,14 +1827,20 @@ var MFAOptions = function (_a) {
1806
1827
  }, children: [jsxRuntimeExports.jsx("img", { src: MicrosoftAuthenticatorImg, alt: "Authenticator", className: "rounded-full", width: 24, height: 24, onError: function () { return jsxRuntimeExports.jsx(lucideReact.Shield, {}); } }), jsxRuntimeExports.jsxs("div", { className: "text-left", children: [jsxRuntimeExports.jsx("div", { className: "font-medium", children: "Authenticator App" }), jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-500", children: "Use Authenticator App" })] })] })] })] }));
1807
1828
  }
1808
1829
  else if (authType === "EmailOTP") {
1809
- content = (jsxRuntimeExports.jsxs(Dialog, { open: otpVisible, onOpenChange: function () {
1830
+ content = (jsxRuntimeExports.jsx(Dialog, { open: otpVisible, onOpenChange: function () {
1810
1831
  setAuthType(null);
1811
1832
  setOtpVisible(false);
1812
1833
  setValue("");
1813
- }, children: [jsxRuntimeExports.jsx(DialogHeader, { children: jsxRuntimeExports.jsx(DialogTitle, { children: "Email OTP" }) }), jsxRuntimeExports.jsx(DialogContent, { className: "sm:max-w-[425px]", children: jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsx(GenericOTPVerifier, { value: value, setValue: setValue, isDisabled: loading || isMaxAttemptsReached, onChangeOTP: handleSubmitOTP, fieldName: "EmailOTP", attemptCount: attemptCount, remainingAttempts: remainingAttempts, isMaxAttemptsReached: isMaxAttemptsReached }), jsxRuntimeExports.jsx(Button, { variant: "ghost", className: "w-full text-sm", onClick: handleGoBack, children: "\u2190 Choose different method" })] }) })] }));
1834
+ }, children: jsxRuntimeExports.jsxs(DialogContent, { className: "space-y-2", children: [jsxRuntimeExports.jsx("div", { className: "absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-lime-400 to-emerald-600" }), jsxRuntimeExports.jsx(DialogHeader, { className: "w-full", children: jsxRuntimeExports.jsx(DialogTitle, { className: "text-center", children: "Email OTP" }) }), jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [jsxRuntimeExports.jsx(GenericOTPVerifier, { value: value, setValue: setValue, isDisabled: loading || isMaxAttemptsReached, onChangeOTP: function (code) {
1835
+ setLastOTPCode(code);
1836
+ return handleSubmitOTP(code);
1837
+ }, fieldName: "EmailOTP", attemptCount: attemptCount, remainingAttempts: remainingAttempts, isMaxAttemptsReached: isMaxAttemptsReached }), jsxRuntimeExports.jsx(Button, { variant: "ghost", className: "w-full text-sm", onClick: handleGoBack, children: "\u2190 Choose different method" })] })] }) }));
1814
1838
  }
1815
1839
  else if (authType === "AuthenticatorCode") {
1816
- content = (jsxRuntimeExports.jsxs(Dialog, { open: otpVisible, onOpenChange: handleGoBack, children: [jsxRuntimeExports.jsx(DialogHeader, { children: jsxRuntimeExports.jsx(DialogTitle, { children: "Authenticator App" }) }), jsxRuntimeExports.jsx(DialogContent, { className: "sm:max-w-[425px]", children: loading ? (jsxRuntimeExports.jsx("div", { className: "p-3 flex justify-center items-center", children: jsxRuntimeExports.jsx(LoadingSpinner, {}) })) : (jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 text-center", children: "Enter the 6-digit Code from your Authenticator app" }), jsxRuntimeExports.jsx(GenericOTPVerifier, { value: value, setValue: setValue, isDisabled: loading || isMaxAttemptsReached, onChangeOTP: handleSubmitOTP, fieldName: "AuthenticatorCode", attemptCount: attemptCount, remainingAttempts: remainingAttempts, isMaxAttemptsReached: isMaxAttemptsReached })] })) })] }));
1840
+ content = (jsxRuntimeExports.jsx(Dialog, { open: otpVisible, onOpenChange: handleGoBack, children: jsxRuntimeExports.jsxs(DialogContent, { className: "sm:max-w-[425px] space-y-2", children: [jsxRuntimeExports.jsx("div", { className: "absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-lime-400 to-emerald-600" }), jsxRuntimeExports.jsx(DialogHeader, { className: "w-full", children: jsxRuntimeExports.jsx(DialogTitle, { className: "text-center", children: "Authenticator App" }) }), loading ? (jsxRuntimeExports.jsx("div", { className: "p-3 h-full flex justify-center items-center", children: jsxRuntimeExports.jsx(LoadingSpinner, {}) })) : (jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 text-center", children: "Enter the 6-digit Code from your Authenticator app" }), jsxRuntimeExports.jsx(GenericOTPVerifier, { value: value, setValue: setValue, isDisabled: loading || isMaxAttemptsReached, onChangeOTP: function (code) {
1841
+ setLastOTPCode(code);
1842
+ return handleSubmitOTP(code);
1843
+ }, fieldName: "AuthenticatorCode", attemptCount: attemptCount, remainingAttempts: remainingAttempts, isMaxAttemptsReached: isMaxAttemptsReached }), jsxRuntimeExports.jsx(Button, { variant: "ghost", className: "w-full text-sm", onClick: handleGoBack, children: "\u2190 Choose different method" })] }))] }) }));
1817
1844
  }
1818
1845
  return (jsxRuntimeExports.jsx("div", { className: "flex justify-center items-center h-dvh", children: jsxRuntimeExports.jsxs(Card, { className: "mx-auto space-y-6 p-6 bg-white rounded-lg shadow-md", children: [jsxRuntimeExports.jsxs(CardHeader, { children: [jsxRuntimeExports.jsx("div", { className: "flex justify-center items", children: jsxRuntimeExports.jsx("img", { src: OTPAuthenticationImg, alt: "NIBSS Logo", width: 365, height: 365 }) }), jsxRuntimeExports.jsx(CardTitle, { className: "text-3xl font-bold mb-6 text-center", children: "Two-Factor Authentication" }), jsxRuntimeExports.jsx(CardTitle, { className: "text-gray-300 text-base -tracking-wide text-center", children: "Your Microsoft account has been validated. Please complete two-factor authentication to continue." })] }), jsxRuntimeExports.jsx(CardContent, { className: "max-w-[80%]", children: content }), jsxRuntimeExports.jsxs(CardFooter, { className: "flex items-center justify-center mt-6 space-x-2 text-gray-400 text-sm", children: [jsxRuntimeExports.jsx(lucideReact.ShieldCheck, { className: "w-4 h-4 text-[#506f4a] pulse-glow" }), jsxRuntimeExports.jsx("span", { children: "Powered By NIBSS" })] })] }) }));
1819
1846
  };