@nibssplc/cams-sdk-react 1.0.0-rc.84 → 1.0.0-rc.86

package/dist/components/DefaultLoginPage.d.ts

@@ -1,10 +1,11 @@
 import { MFAEndpoints } from "./MFAGate";
-interface LoginPageProps {
+export interface LoginPageProps {
     usePassKey?: boolean;
     CredentialsAuthEndpoint?: string;
     useADLogin?: boolean;
     MFAEndpoints: MFAEndpoints;
     PassKeysRegisterProps?: Record<string, unknown>;
+    onADLoginSuccess?: () => void;
 }
-declare const DefaultLoginPage: ({ usePassKey, useADLogin, MFAEndpoints, CredentialsAuthEndpoint, PassKeysRegisterProps, }: LoginPageProps) => import("react/jsx-runtime").JSX.Element;
+declare const DefaultLoginPage: ({ usePassKey, useADLogin, MFAEndpoints, CredentialsAuthEndpoint, PassKeysRegisterProps, onADLoginSuccess, }: LoginPageProps) => import("react/jsx-runtime").JSX.Element;
 export default DefaultLoginPage;

package/dist/index.cjs.js

@@ -1556,29 +1556,22 @@ var useCredentialsHandler = function (onAuthComplete) {
 };
 
 var MFAOptions = function (_a) {
-    var _b, _c, _d, _e, _f;
+    var _b, _c;
     var onComplete = _a.onComplete, onAuthFailed = _a.onAuthFailed, MFAEndpoints = _a.MFAEndpoints, usePassKey = _a.usePassKey;
-    var _g = React.useState(""), value = _g[0], setValue = _g[1];
-    var _h = React.useState(false), otpVisible = _h[0], setOtpVisible = _h[1];
-    var _j = React.useState(false), showSuccessAnimation = _j[0], setShowSuccessAnimation = _j[1];
-    var _k = React.useState(null), authType = _k[0], setAuthType = _k[1];
+    var _d = React.useState(""), value = _d[0], setValue = _d[1];
+    var _e = React.useState(false), otpVisible = _e[0], setOtpVisible = _e[1];
+    var _f = React.useState(false), showSuccessAnimation = _f[0], setShowSuccessAnimation = _f[1];
+    var _g = React.useState(null), authType = _g[0], setAuthType = _g[1];
     var context = useCAMSContext();
-    var _l = context.authMode === "MSAL" && "sendEmailOTP" in context
+    var _h = context.authMode === "MSAL" && "AuthenticatorCode" in context
         ? context
         : { completeMFA: null, logout: function () { return __awaiter$1(void 0, void 0, void 0, function () { return __generator$1(this, function (_a) {
                 return [2 /*return*/];
-            }); }); } }, completeMFA = _l.completeMFA, logout = _l.logout;
-    context.authMode === "MSAL" ? context.accessToken : "";
-    context.authMode === "MSAL" ? context.idToken : "";
+            }); }); } }, completeMFA = _h.completeMFA, logout = _h.logout;
     var authenticate = useWebAuthn().authenticate;
     var authenticator = new camsSdk.CAMSMFAAuthenticator();
-    camsSdk.Logger.debug("User context:", {
-        user: context.user,
-        profile: (_b = context.user) === null || _b === void 0 ? void 0 : _b.profile,
-        email: (_d = (_c = context.user) === null || _c === void 0 ? void 0 : _c.profile) === null || _d === void 0 ? void 0 : _d.email,
-    });
-    var _m = useOTPHandler({
-        email: ((_f = (_e = context.user) === null || _e === void 0 ? void 0 : _e.profile) === null || _f === void 0 ? void 0 : _f.email) || context.email,
+    var _j = useOTPHandler({
+        email: ((_c = (_b = context.user) === null || _b === void 0 ? void 0 : _b.profile) === null || _c === void 0 ? void 0 : _c.email) || context.email,
         appCode: context.appCode || "",
         MFAEndpoint: MFAEndpoints.ValidateUserMFA,
         onAuthComplete: function (state, data) {
@@ -1607,7 +1600,7 @@ var MFAOptions = function (_a) {
                 }
             }
         },
-    }), handleSubmitOTP = _m.handleSubmitOTP, loading = _m.loading, attemptCount = _m.attemptCount, remainingAttempts = _m.remainingAttempts, isMaxAttemptsReached = _m.isMaxAttemptsReached, resetAttempts = _m.resetAttempts;
+    }), handleSubmitOTP = _j.handleSubmitOTP, loading = _j.loading, attemptCount = _j.attemptCount, remainingAttempts = _j.remainingAttempts, isMaxAttemptsReached = _j.isMaxAttemptsReached, resetAttempts = _j.resetAttempts;
     var handleGoBack = function () {
         setAuthType(null);
         setOtpVisible(false);
@@ -1729,12 +1722,12 @@ var ADLoginModal = function (_a) {
                                     return (jsxRuntime.jsxs(FormItem, { children: [jsxRuntime.jsx(FormLabel, { children: "Username" }), jsxRuntime.jsx(FormControl, { children: jsxRuntime.jsx(Input, __assign({ className: "h-12", placeholder: "Enter your username" }, field)) }), jsxRuntime.jsx(FormMessage, {})] }));
                                 } }), jsxRuntime.jsx(FormField, { control: form.control, name: "password", render: function (_a) {
                                     var field = _a.field;
-                                    return (jsxRuntime.jsxs(FormItem, { children: [jsxRuntime.jsx(FormLabel, { children: "Password" }), jsxRuntime.jsx(FormControl, { children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(Input, __assign({ className: "h-12 pr-10", type: "password", placeholder: "Enter your password" }, field)), jsxRuntime.jsx("button", { type: "button", onClick: function () { return setShowPassword(!showPassword); }, className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground", children: showPassword ? (jsxRuntime.jsx(lucideReact.EyeOff, { className: "w-5 h-5" })) : (jsxRuntime.jsx(lucideReact.Eye, { className: "w-5 h-5" })) })] }) }), jsxRuntime.jsx(FormMessage, {})] }));
-                                } }), jsxRuntime.jsx(Button, { type: "submit", className: "py-3 w-full bg-[#506f4a] hover:bg-[#506f4a]/90", children: "Continue" })] }) }))) : (jsxRuntime.jsxs("div", { className: "space-y-4", children: [jsxRuntime.jsx(GenericOTPVerifier, { value: MFACode, setValue: setMFACode, setLoading: setIsLoading, isDisabled: isLoading, onChangeOTP: handleMFASubmit, fieldName: "AuthenticatorCode" }), isLoading && (jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 text-sm text-muted-foreground", children: [jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 animate-spin" }), jsxRuntime.jsx("span", { children: "Verifying..." })] }))] }))] }) }));
+                                    return (jsxRuntime.jsxs(FormItem, { children: [jsxRuntime.jsx(FormLabel, { children: "Password" }), jsxRuntime.jsx(FormControl, { children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(Input, __assign({ className: "h-12 pr-10", type: showPassword ? "text" : "password", placeholder: "Enter your password" }, field)), jsxRuntime.jsx("button", { type: "button", onClick: function () { return setShowPassword(!showPassword); }, className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground", children: showPassword ? (jsxRuntime.jsx(lucideReact.EyeOff, { className: "w-5 h-5" })) : (jsxRuntime.jsx(lucideReact.Eye, { className: "w-5 h-5" })) })] }) }), jsxRuntime.jsx(FormMessage, {})] }));
+                                } }), jsxRuntime.jsx(Button, { type: "submit", className: "py-4 w-full bg-[#506f4a] hover:bg-[#506f4a]/90", children: "Continue" })] }) }))) : (jsxRuntime.jsxs("div", { className: "space-y-4", children: [jsxRuntime.jsx(GenericOTPVerifier, { value: MFACode, setValue: setMFACode, setLoading: setIsLoading, isDisabled: isLoading, onChangeOTP: handleMFASubmit, fieldName: "AuthenticatorCode" }), isLoading && (jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 text-sm text-muted-foreground", children: [jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 animate-spin" }), jsxRuntime.jsx("span", { children: "Verifying..." })] }))] }))] }) }));
 };
 
 var DefaultLoginPage = function (_a) {
-    var usePassKey = _a.usePassKey, useADLogin = _a.useADLogin, MFAEndpoints = _a.MFAEndpoints, CredentialsAuthEndpoint = _a.CredentialsAuthEndpoint, PassKeysRegisterProps = _a.PassKeysRegisterProps;
+    var usePassKey = _a.usePassKey, useADLogin = _a.useADLogin, MFAEndpoints = _a.MFAEndpoints, CredentialsAuthEndpoint = _a.CredentialsAuthEndpoint, PassKeysRegisterProps = _a.PassKeysRegisterProps, onADLoginSuccess = _a.onADLoginSuccess;
     var cardVariants = {
         hidden: { opacity: 0, scale: 0.8, y: 50 },
         visible: {
@@ -1748,20 +1741,20 @@ var DefaultLoginPage = function (_a) {
     var context = useCAMSContext();
     var login = context.login, isLoading = context.isLoading, authMode = context.authMode;
     var _b = React.useState(false), showADModal = _b[0], setShowADModal = _b[1];
+    var _c = React.useState(false), showSuccessAnimation = _c[0], setShowSuccessAnimation = _c[1];
     var register = useWebAuthn().register;
     var authentication = new camsSdk.CAMSMFAAuthenticator();
-    var _c = useCredentialsHandler(function (state, data) { return __awaiter$1(void 0, void 0, void 0, function () {
+    var _d = useCredentialsHandler(function (state, data) { return __awaiter$1(void 0, void 0, void 0, function () {
         return __generator$1(this, function (_a) {
             console.log(data);
             if (state && data && data.isValid) {
-                context.isAuthenticated = true;
+                setShowSuccessAnimation(true);
                 localStorage.setItem(context.storageKey, JSON.stringify({
-                    isAuthenticated: false,
+                    isAuthenticated: true,
                     requiresMFA: false,
                     accessToken: "Credentials",
                     idToken: "Credentials",
                 }));
-                context.requiresMFA = false;
                 context.setUserProfile({
                     state: "AUTH_SUCCESS",
                     message: data.message,
@@ -1774,13 +1767,14 @@ var DefaultLoginPage = function (_a) {
                         tokens: data.tokens,
                     },
                 });
+                setShowADModal(false);
             }
             else {
                 sonner.toast.error("\u274C AD Login failed. ".concat((data === null || data === void 0 ? void 0 : data.message) || "Unknown error"));
             }
             return [2 /*return*/];
         });
-    }); }), handleSubmitCredentials = _c.handleSubmitCredentials, isCredAuthLoading = _c.loading, setIsCredAuthLoading = _c.setLoading;
+    }); }), handleSubmitCredentials = _d.handleSubmitCredentials, isCredAuthLoading = _d.loading, setIsCredAuthLoading = _d.setLoading;
     var handleMSALLogin = function () {
         if (typeof window !== "undefined" && !window.crypto) {
             sonner.toast.error("Crypto API not available. Please use a modern browser.");
@@ -1794,6 +1788,11 @@ var DefaultLoginPage = function (_a) {
             console.warn("Regular CAMS login requires configuration");
         }
     };
+    if (showSuccessAnimation && useADLogin) {
+        return (jsxRuntime.jsx("div", { className: "flex justify-center items-center h-dvh", children: jsxRuntime.jsx(Card, { className: "mx-auto space-y-6 p-6 bg-white rounded-lg shadow-md", children: jsxRuntime.jsx(AuthSuccessAnimation, { onComplete: function () {
+                        onADLoginSuccess === null || onADLoginSuccess === void 0 ? void 0 : onADLoginSuccess();
+                    } }) }) }));
+    }
     return (jsxRuntime.jsxs("main", { className: "cams-sdk min-h-screen bg-gray-50", children: [jsxRuntime.jsx(framerMotion.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.5 }, children: jsxRuntime.jsx("div", { className: "flex h-screen items-center justify-center", children: jsxRuntime.jsxs(framerMotion.motion.div, { variants: cardVariants, initial: "hidden", animate: "visible", exit: "exit", className: "w-full max-w-md p-6 space-y-4 rounded-2xl shadow-2xl", children: [jsxRuntime.jsxs(CardHeader, { className: "text-center space-y-3", children: [jsxRuntime.jsx("div", { className: "w-full flex items-center justify-center", children: jsxRuntime.jsx("img", { src: NIBSSLogo, alt: "NIBSS Logo", width: 225, height: 225 }) }), jsxRuntime.jsx(CardTitle, { className: "text-3xl font-bold", children: "NIBSS CAMS" }), jsxRuntime.jsx(CardTitle, { className: "text-gray-500 dark:text-gray-400 font-bold text-lg", children: "Centralized Authentication" })] }), jsxRuntime.jsxs(CardAction, { className: "w-full flex flex-col items-center justify-center text-center text-gray-500 dark:text-gray-400 mb-8", children: [jsxRuntime.jsx("img", { src: AuthLogo, alt: "Auth Logo", width: 365, height: 365 }), "Use Below Identity Providers To Authenticate"] }), jsxRuntime.jsxs("div", { className: "space-y-4", children: [jsxRuntime.jsxs(Button
                                     // variant="outline"
                                     , { 
@@ -1803,7 +1802,7 @@ var DefaultLoginPage = function (_a) {
                                                     : "Sign in with ActiveDirectory" })] })), usePassKey && (jsxRuntime.jsxs(Button, { className: "w-full flex items-center justify-center cursor-pointer bg-[#506f4a] hover:bg-[#506f4a] rounded-lg border border-transparent px-5 py-8 text-base font-medium transition-colors duration-250", onClick: function () {
                                             return authentication.HandleRegister(MFAEndpoints.RegisterNewChallenge, MFAEndpoints.RegisterVerify +
                                                 "?username=".concat(PassKeysRegisterProps.username), register, PassKeysRegisterProps);
-                                        }, disabled: isLoading, children: [jsxRuntime.jsx(lucideReact.KeyIcon, { className: "text-[#506f4a]", size: 64 }), jsxRuntime.jsx("span", { children: "Create a Passkey" })] }))] }), jsxRuntime.jsxs(CardFooter, { className: "flex items-center justify-center mt-6 space-x-2 text-gray-400 text-sm", children: [jsxRuntime.jsx(lucideReact.ShieldCheck, { className: "w-4 h-4 text-[#506f4a] pulse-glow" }), jsxRuntime.jsx("span", { children: "Powered By NIBSS" })] })] }) }) }, "landing"), jsxRuntime.jsx(ADLoginModal, { open: showADModal, onOpenChange: setShowADModal, isLoading: isCredAuthLoading, setIsLoading: setIsCredAuthLoading, onLogin: function (_a) { return __awaiter$1(void 0, [_a], void 0, function (_b) {
+                                        }, disabled: isLoading, children: [jsxRuntime.jsx(lucideReact.KeyIcon, { className: "text-[#506f4a]", size: 64 }), jsxRuntime.jsx("span", { children: "Create a Passkey" })] }))] }), jsxRuntime.jsxs(CardFooter, { className: "flex items-center justify-center mt-6 space-x-2 text-gray-400 text-sm", children: [jsxRuntime.jsx(lucideReact.ShieldCheck, { className: "w-4 h-4 text-[#506f4a] pulse-glow" }), jsxRuntime.jsx("span", { children: "Powered By NIBSS" })] })] }) }) }, "landing"), jsxRuntime.jsx(ADLoginModal, { open: showADModal, onOpenChange: setShowADModal, isLoading: context.isLoading || isCredAuthLoading, setIsLoading: setIsCredAuthLoading, onLogin: function (_a) { return __awaiter$1(void 0, [_a], void 0, function (_b) {
                     var username = _b.username, password = _b.password, MFACode = _b.MFACode;
                     return __generator$1(this, function (_c) {
                         // Implement your AD login logic here
@@ -1862,6 +1861,8 @@ var MFAGate = function (_a) {
                     (_a = context.onAuthSuccess) === null || _a === void 0 ? void 0 : _a.call(context, tokens);
                 }
             }
+            // Force state update after MFA completion
+            setAuthState("Authenticated");
         }
         else if (!success) {
             camsSdk.Logger.error("MFA authentication failed", { context: context || null });
@@ -1955,7 +1956,7 @@ var MFAGate = function (_a) {
             return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
         case "Unauthenticated":
         default:
-            return (jsxRuntime.jsx(DefaultLoginPage, { usePassKey: usePassKey, useADLogin: useADLogin, MFAEndpoints: ValidatedMFAEndpoints, PassKeysRegisterProps: PassKeysRegisterProps, CredentialsAuthEndpoint: CredentialsAuthEndpoint }));
+            return (jsxRuntime.jsx(DefaultLoginPage, { usePassKey: usePassKey, useADLogin: useADLogin, MFAEndpoints: ValidatedMFAEndpoints, PassKeysRegisterProps: PassKeysRegisterProps, CredentialsAuthEndpoint: CredentialsAuthEndpoint, onADLoginSuccess: function () { return setAuthState("Authenticated"); } }));
     }
 };