@nibssplc/cams-sdk-react 0.0.1-beta.105 → 0.0.1-beta.106

package/dist/components/ADLoginModal.d.ts

@@ -1,7 +1,9 @@
 interface ADLoginModalProps {
     open: boolean;
+    isLoading: boolean;
+    setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
     onOpenChange: (open: boolean) => void;
     onLogin: (credentials: Credentials) => Promise<void>;
 }
-export declare const ADLoginModal: ({ open, onOpenChange, onLogin, }: ADLoginModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ADLoginModal: ({ open, isLoading, setIsLoading, onOpenChange, onLogin, }: ADLoginModalProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/hooks/useOTPHandler.d.ts

@@ -15,13 +15,8 @@ export declare const useOTPHandler: ({ provider, accessToken, idToken, appCode,
     resetAttempts: () => void;
     remainingAttempts: number;
 };
-export declare const CredentialsHandler: (credentials: Credentials, appCode: string, CredAuthEndpoint: string, onAuthComplete: (state: boolean, data: UserValidatedResponse | null) => void) => {
-    handleSubmitCredentials: ({ username, password, MFACode, appCode, }: {
-        username: string;
-        password: string;
-        MFACode: string;
-        appCode: string;
-    }) => Promise<boolean>;
+export declare const useCredentialsHandler: (onAuthComplete: (state: boolean, data: UserValidatedResponse | null) => void) => {
+    handleSubmitCredentials: (CredAuthEndpoint: string, credentials: Credentials, appCode: string) => Promise<boolean>;
     loading: boolean;
     setLoading: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     attemptCount: number;

package/dist/index.cjs.js

@@ -1740,7 +1740,7 @@ var GenerateDeviceId = function () {
     var userAgent = window.navigator.userAgent;
     var deviceId = "";
     // Parse browser, version, OS, and device type
-    var browserMatch = Array.from(userAgent.matchAll(/(Chrome|Firefox|Safari|Edge|Opera)\/([\d.]+)/ig));
+    var browserMatch = Array.from(userAgent.matchAll(/(Chrome|Firefox|Safari|Edge|Opera)\/([\d.]+)/gi));
     var osMatch = Array.from(userAgent.matchAll(/\(([^)]+)\)/g));
     var isMobile = /Mobile|Android|iPhone|iPad/i.test(userAgent);
     // Browser info
@@ -1770,6 +1770,10 @@ var GenerateDeviceId = function () {
     deviceId += "_".concat(hash);
     return (_a = deviceId.replace(/[^a-zA-Z0-9-_]/g, "_")) !== null && _a !== void 0 ? _a : "unknown-device";
 };
+var APIHeaders = {
+    "X-DEVICE-ID": GenerateDeviceId(),
+    "X-API-VERSION": "1.0",
+};
 
 var MAX_ATTEMPTS = 3;
 var useOTPHandler = function (_a) {
@@ -1804,9 +1808,7 @@ var useOTPHandler = function (_a) {
                             MFACode: authenticationValue,
                             appCode: appCode,
                         }, {
-                            headers: {
-                                "X-Device-ID": GenerateDeviceId(),
-                            },
+                            headers: APIHeaders,
                             timeout: 605000,
                         })];
                 case 2:
@@ -1869,34 +1871,31 @@ var useOTPHandler = function (_a) {
         remainingAttempts: MAX_ATTEMPTS - attemptCount,
     };
 };
-var CredentialsHandler = function (credentials, appCode, CredAuthEndpoint, onAuthComplete) {
+var useCredentialsHandler = function (onAuthComplete) {
     var _a = React.useState(false), loading = _a[0], setLoading = _a[1];
     var _b = React.useState(0), attemptCount = _b[0], setAttemptCount = _b[1];
     var _c = React.useState(false), isMaxAttemptsReached = _c[0], setIsMaxAttemptsReached = _c[1];
     var handleSubmitCredentials = React.useMemo(function () {
-        return function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
+        return function (CredAuthEndpoint, credentials, appCode) { return __awaiter(void 0, void 0, void 0, function () {
             var currentAttempt, response, error_2, currentAttempt;
-            var username = _b.username, password = _b.password, MFACode = _b.MFACode, appCode = _b.appCode;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
                     case 0:
-                        _c.trys.push([0, 2, 3, 4]);
+                        _a.trys.push([0, 2, 3, 4]);
                         setLoading(true);
                         currentAttempt = attemptCount + 1;
                         setAttemptCount(currentAttempt);
                         return [4 /*yield*/, axios.post(CredAuthEndpoint, {
-                                username: username,
-                                password: password,
-                                MFACode: MFACode,
+                                username: credentials.username,
+                                password: credentials.password,
+                                MFACode: credentials.MFACode,
                                 appCode: appCode,
                             }, {
-                                headers: {
-                                    "X-Device-ID": GenerateDeviceId(),
-                                },
+                                headers: APIHeaders,
                                 timeout: 605000,
                             })];
                     case 1:
-                        response = (_c.sent()).data;
+                        response = (_a.sent()).data;
                         if (response) {
                             onAuthComplete(true, response);
                             return [2 /*return*/, true];
@@ -1914,7 +1913,7 @@ var CredentialsHandler = function (credentials, appCode, CredAuthEndpoint, onAut
                             return [2 /*return*/, false];
                         }
                     case 2:
-                        error_2 = _c.sent();
+                        error_2 = _a.sent();
                         console.error(error_2);
                         currentAttempt = attemptCount + 1;
                         if (currentAttempt >= MAX_ATTEMPTS) {
@@ -1933,7 +1932,7 @@ var CredentialsHandler = function (credentials, appCode, CredAuthEndpoint, onAut
                 }
             });
         }); };
-    }, [credentials.username, credentials.password, credentials.MFACode]);
+    }, []);
     return {
         handleSubmitCredentials: handleSubmitCredentials,
         loading: loading,
@@ -1969,10 +1968,7 @@ var MFAOptions = function (_a) {
                     // 1. Fetch authentication challenge from your server
                     console.log("Requesting authentication challenge from server...");
                     return [4 /*yield*/, axios.post(MFAEndpoints.RetrieveAuthChallenge, {}, {
-                            headers: {
-                                "X-DEVICE-ID": GenerateDeviceId(),
-                                "X-API-VERSION": "1.0",
-                            },
+                            headers: APIHeaders,
                         })];
                 case 1:
                     options = (_a.sent()).data;
@@ -1986,10 +1982,7 @@ var MFAOptions = function (_a) {
                     // 3. Send the assertion back to the server for verification
                     console.log("Sending assertion to server for verification...");
                     return [4 /*yield*/, axios.post(MFAEndpoints.AuthChallengeVerify, assertionResponse, {
-                            headers: {
-                                "X-DEVICE-ID": GenerateDeviceId(),
-                                "X-API-VERSION": "1.0",
-                            },
+                            headers: APIHeaders,
                             withCredentials: true, // credentials: 'include'
                         })];
                 case 3:
@@ -2116,14 +2109,13 @@ var credentialsSchema = z.z.object({
     password: z.z.string().min(1, "Password is required"),
 });
 var ADLoginModal = function (_a) {
-    var open = _a.open, onOpenChange = _a.onOpenChange, onLogin = _a.onLogin;
+    var open = _a.open, isLoading = _a.isLoading, setIsLoading = _a.setIsLoading, onOpenChange = _a.onOpenChange, onLogin = _a.onLogin;
     var _b = React.useState("credentials"), step = _b[0], setStep = _b[1];
     var _c = React.useState({
         username: "",
         password: "",
     }), credentials = _c[0], setCredentials = _c[1];
     var _d = React.useState(""), mfaCode = _d[0], setMfaCode = _d[1];
-    var _e = React.useState(false), isLoading = _e[0], setIsLoading = _e[1];
     var form = reactHookForm.useForm({
         resolver: a$1(credentialsSchema),
         defaultValues: { username: "", password: "" },
@@ -2173,7 +2165,7 @@ var ADLoginModal = function (_a) {
         form.reset();
         setMfaCode("");
     };
-    return (jsxRuntimeExports.jsx(Dialog, { open: open, onOpenChange: handleClose, children: jsxRuntimeExports.jsxs(DialogContent, { className: "sm:max-w-[75%] max-w-[400px]", children: [jsxRuntimeExports.jsx(DialogHeader, { children: jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(lucideReact.KeyIcon, { className: "w-8 h-8 text-[#506f4a]" }), jsxRuntimeExports.jsx(DialogTitle, { className: "text-2xl", children: "Sign in with AD" })] }) }), step === "credentials" ? (jsxRuntimeExports.jsx(Form, __assign({}, form, { children: jsxRuntimeExports.jsxs("form", { onSubmit: form.handleSubmit(handleCredentialsSubmit), className: "space-y-4", children: [jsxRuntimeExports.jsx(FormField, { control: form.control, name: "username", render: function (_a) {
+    return (jsxRuntimeExports.jsx(Dialog, { open: open, onOpenChange: handleClose, children: jsxRuntimeExports.jsxs(DialogContent, { className: "w-[70vw] min-w-[250px] max-w-[350px]", children: [jsxRuntimeExports.jsx(DialogHeader, { children: jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(lucideReact.KeyIcon, { className: "w-8 h-8 text-[#506f4a]" }), jsxRuntimeExports.jsx(DialogTitle, { className: "text-2xl", children: "Sign in with AD" })] }) }), step === "credentials" ? (jsxRuntimeExports.jsx(Form, __assign({}, form, { children: jsxRuntimeExports.jsxs("form", { onSubmit: form.handleSubmit(handleCredentialsSubmit), className: "space-y-4", children: [jsxRuntimeExports.jsx(FormField, { control: form.control, name: "username", render: function (_a) {
                                     var field = _a.field;
                                     return (jsxRuntimeExports.jsxs(FormItem, { children: [jsxRuntimeExports.jsx(FormLabel, { children: "Username" }), jsxRuntimeExports.jsx(FormControl, { children: jsxRuntimeExports.jsx(Input, __assign({ className: "h-12", placeholder: "Enter your username" }, field)) }), jsxRuntimeExports.jsx(FormMessage, {})] }));
                                 } }), jsxRuntimeExports.jsx(FormField, { control: form.control, name: "password", render: function (_a) {
@@ -2198,6 +2190,20 @@ var DefaultLoginPage = function (_a) {
     var login = context.login, isLoading = context.isLoading, authMode = context.authMode;
     var _b = React.useState(false), showADModal = _b[0], setShowADModal = _b[1];
     var register = useWebAuthn().register;
+    var _c = useCredentialsHandler(function (state, data) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            console.log(data);
+            if (state && data) {
+                context.isAuthenticated = true;
+                context.requiresMFA = false;
+                context.setUserProfile({
+                    type: "AUTH_SUCCESS",
+                    userProfile: __assign({}, data),
+                });
+            }
+            return [2 /*return*/];
+        });
+    }); }), handleSubmitCredentials = _c.handleSubmitCredentials, isCredAuthLoading = _c.loading, setIsCredAuthLoading = _c.setLoading;
     var handleMSALLogin = function () {
         if (authMode === "MSAL") {
             login();
@@ -2216,10 +2222,7 @@ var DefaultLoginPage = function (_a) {
                     // 1. Fetch challenge from your server
                     console.log("Requesting registration challenge from server...");
                     return [4 /*yield*/, axios.post(MFAEndpoints.RegisterNewChallenge, __assign({}, data), {
-                            headers: {
-                                "X-DEVICE-ID": GenerateDeviceId(),
-                                "X-API-VERSION": "1.0",
-                            },
+                            headers: APIHeaders,
                         })];
                 case 1:
                     options = (_a.sent()).data;
@@ -2233,10 +2236,7 @@ var DefaultLoginPage = function (_a) {
                     // 3. Send the response back to the server for verification
                     console.log("Sending attestation to server for verification...");
                     return [4 /*yield*/, axios.post(MFAEndpoints.RegisterVerify, attestationResponse, {
-                            headers: {
-                                "X-DEVICE-ID": GenerateDeviceId(),
-                                "X-API-VERSION": "1.0",
-                            },
+                            headers: APIHeaders,
                             withCredentials: true, // credentials: 'include'
                         })];
                 case 3:
@@ -2256,28 +2256,15 @@ var DefaultLoginPage = function (_a) {
                                     // variant="outline"
                                     , { 
                                         // variant="outline"
-                                        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: handleMSALLogin, disabled: isLoading, children: [jsxRuntimeExports.jsx("img", { src: MicrosoftLogo, alt: "Microsoft Logo", width: 35, height: 35 }), jsxRuntimeExports.jsx("span", { className: "ml-2", children: isLoading ? "Logging in..." : "Sign in with Microsoft" })] }), useADLogin && (jsxRuntimeExports.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 setShowADModal(true); }, disabled: isLoading, children: [jsxRuntimeExports.jsx(lucideReact.KeyIcon, { className: "w-24 h-24 text-[#506f4a]" }), jsxRuntimeExports.jsx("span", { children: isLoading
+                                        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: handleMSALLogin, disabled: isLoading, children: [jsxRuntimeExports.jsx("img", { src: MicrosoftLogo, alt: "Microsoft Logo", width: 35, height: 35 }), jsxRuntimeExports.jsx("span", { className: "ml-2", children: isLoading ? "Logging in..." : "Sign in with Microsoft" })] }), useADLogin && (jsxRuntimeExports.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 setShowADModal(true); }, disabled: isLoading, children: [jsxRuntimeExports.jsx(lucideReact.KeyIcon, { className: "text-[#506f4a]", size: 64 }), jsxRuntimeExports.jsx("span", { children: isLoading
                                                     ? "Logging in..."
-                                                    : "Sign in with ActiveDirectory" })] })), usePassKey && (jsxRuntimeExports.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 handleRegister(PassKeysRegisterProps); }, disabled: isLoading, children: [jsxRuntimeExports.jsx(lucideReact.KeyIcon, { className: "w-12 h-12 text-[#506f4a]" }), jsxRuntimeExports.jsx("span", { children: "Create a Passkey" })] }))] }), 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" })] })] }) }) }, "landing"), jsxRuntimeExports.jsx(ADLoginModal, { open: showADModal, onOpenChange: setShowADModal, onLogin: function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
+                                                    : "Sign in with ActiveDirectory" })] })), usePassKey && (jsxRuntimeExports.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 handleRegister(PassKeysRegisterProps); }, disabled: isLoading, children: [jsxRuntimeExports.jsx(lucideReact.KeyIcon, { className: "text-[#506f4a]", size: 64 }), jsxRuntimeExports.jsx("span", { children: "Create a Passkey" })] }))] }), 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" })] })] }) }) }, "landing"), jsxRuntimeExports.jsx(ADLoginModal, { open: showADModal, onOpenChange: setShowADModal, isLoading: isCredAuthLoading, setIsLoading: setIsCredAuthLoading, onLogin: function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
                     var username = _b.username, password = _b.password, MFACode = _b.MFACode;
                     return __generator(this, function (_c) {
                         // Implement your AD login logic here
                         console.log("AD Login:", { username: username, password: password, MFACode: MFACode });
                         // Example: await adLoginService(username, password, mfaCode);
-                        CredentialsHandler({ username: username, password: password, MFACode: MFACode }, context.appCode, CredentialsAuthEndpoint !== null && CredentialsAuthEndpoint !== void 0 ? CredentialsAuthEndpoint : "/api/auth/validate", function (state, data) { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                console.log(data);
-                                if (state && data) {
-                                    context.isAuthenticated = true;
-                                    context.requiresMFA = false;
-                                    context.setUserProfile({
-                                        type: "AUTH_SUCCESS",
-                                        userProfile: __assign({}, data),
-                                    });
-                                }
-                                return [2 /*return*/];
-                            });
-                        }); });
+                        handleSubmitCredentials(CredentialsAuthEndpoint !== null && CredentialsAuthEndpoint !== void 0 ? CredentialsAuthEndpoint : "/api/auth/validate", { username: username, password: password, MFACode: MFACode }, context.appCode);
                         return [2 /*return*/];
                     });
                 }); } })] }));