@nibssplc/cams-sdk-react 0.0.1-beta.102 → 0.0.1-beta.104

package/dist/components/DefaultLoginPage.d.ts

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

package/dist/components/MFAGate.d.ts

@@ -11,8 +11,10 @@ interface MFAGateProps {
     children: React.ReactNode;
     fallback?: React.ReactNode;
     usePassKey?: boolean;
+    useADLogin?: boolean;
+    CredentialsAuthEndpoint?: string;
     PassKeysRegisterProps?: Record<string, unknown>;
     MFAEndpoints?: MFAEndpoints;
 }
-declare const MFAGate: ({ children, fallback, usePassKey, PassKeysRegisterProps, MFAEndpoints, }: MFAGateProps) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null;
+declare const MFAGate: ({ children, fallback, usePassKey, useADLogin, CredentialsAuthEndpoint, PassKeysRegisterProps, MFAEndpoints, }: MFAGateProps) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null;
 export default MFAGate;

package/dist/hooks/useOTPHandler.d.ts

@@ -15,7 +15,7 @@ export declare const useOTPHandler: ({ provider, accessToken, idToken, appCode,
     resetAttempts: () => void;
     remainingAttempts: number;
 };
-export declare const useCredentialsHandler: (credentials: Credentials, appCode: string, CredAuthEndpoint: string, onAuthComplete: (state: boolean, data: UserValidatedResponse | null) => void) => {
+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;

package/dist/index.cjs.js

@@ -588,7 +588,7 @@ function register(options) {
                                     alg: param.alg,
                                 }); }), attestation: (((_b = options.attestation) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || "none"), authenticatorSelection: __assign(__assign({}, options.authenticatorSelection), { residentKey: (((_d = (_c = options.authenticatorSelection) === null || _c === void 0 ? void 0 : _c.residentKey) === null || _d === void 0 ? void 0 : _d.toLowerCase()) ||
                                         "discouraged"), userVerification: (((_f = (_e = options.authenticatorSelection) === null || _e === void 0 ? void 0 : _e.userVerification) === null || _f === void 0 ? void 0 : _f.toLowerCase()) ||
-                                        "preferred") }) }),
+                                        "discouraged") }) }),
                         })];
                 case 1:
                     credential = _k.sent();
@@ -1869,6 +1869,81 @@ var useOTPHandler = function (_a) {
         remainingAttempts: MAX_ATTEMPTS - attemptCount,
     };
 };
+var CredentialsHandler = function (credentials, appCode, CredAuthEndpoint, 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) {
+            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) {
+                    case 0:
+                        _c.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,
+                                appCode: appCode,
+                            }, {
+                                headers: {
+                                    "X-Device-ID": GenerateDeviceId(),
+                                },
+                                timeout: 605000,
+                            })];
+                    case 1:
+                        response = (_c.sent()).data;
+                        if (response) {
+                            onAuthComplete(true, response);
+                            return [2 /*return*/, true];
+                        }
+                        else {
+                            if (currentAttempt >= MAX_ATTEMPTS) {
+                                setIsMaxAttemptsReached(true);
+                                onAuthComplete(false, {
+                                    message: "Maximum attempts reached",
+                                });
+                            }
+                            else {
+                                onAuthComplete(false, response.response.data);
+                            }
+                            return [2 /*return*/, false];
+                        }
+                    case 2:
+                        error_2 = _c.sent();
+                        console.error(error_2);
+                        currentAttempt = attemptCount + 1;
+                        if (currentAttempt >= MAX_ATTEMPTS) {
+                            setIsMaxAttemptsReached(true);
+                            onAuthComplete(false, error_2.response.data);
+                        }
+                        else {
+                            onAuthComplete(false, error_2.response.data);
+                        }
+                        onAuthComplete(false, error_2.response.data);
+                        return [2 /*return*/, false];
+                    case 3:
+                        setLoading(false);
+                        return [7 /*endfinally*/];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); };
+    }, [credentials.username, credentials.password, credentials.MFACode]);
+    return {
+        handleSubmitCredentials: handleSubmitCredentials,
+        loading: loading,
+        setLoading: setLoading,
+        attemptCount: attemptCount,
+        isMaxAttemptsReached: isMaxAttemptsReached,
+        // resetAttempts,
+        remainingAttempts: MAX_ATTEMPTS - attemptCount,
+    };
+};
 
 var MFAOptions = function (_a) {
     var onComplete = _a.onComplete, onAuthFailed = _a.onAuthFailed, MFAEndpoints = _a.MFAEndpoints, usePassKey = _a.usePassKey;
@@ -2102,17 +2177,27 @@ var ADLoginModal = function (_a) {
         form.reset();
         setMfaCode("");
     };
-    return (jsxRuntimeExports.jsx(Dialog, { open: open, onOpenChange: handleClose, children: jsxRuntimeExports.jsxs(DialogContent, { className: "sm:max-w-[85%]", 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: "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) {
                                     var field = _a.field;
-                                    return (jsxRuntimeExports.jsxs(FormItem, { children: [jsxRuntimeExports.jsx(FormLabel, { children: "Username" }), jsxRuntimeExports.jsx(FormControl, { children: jsxRuntimeExports.jsx(Input, __assign({ placeholder: "Enter your username" }, field)) }), jsxRuntimeExports.jsx(FormMessage, {})] }));
+                                    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) {
                                     var field = _a.field;
-                                    return (jsxRuntimeExports.jsxs(FormItem, { children: [jsxRuntimeExports.jsx(FormLabel, { children: "Password" }), jsxRuntimeExports.jsx(FormControl, { children: jsxRuntimeExports.jsx(Input, __assign({ type: "password", placeholder: "Enter your password" }, field)) }), jsxRuntimeExports.jsx(FormMessage, {})] }));
+                                    return (jsxRuntimeExports.jsxs(FormItem, { children: [jsxRuntimeExports.jsx(FormLabel, { children: "Password" }), jsxRuntimeExports.jsx(FormControl, { children: jsxRuntimeExports.jsx(Input, __assign({ className: "h-12", type: "password", placeholder: "Enter your password" }, field)) }), jsxRuntimeExports.jsx(FormMessage, {})] }));
                                 } }), jsxRuntimeExports.jsx(Button, { type: "submit", className: "w-full bg-[#506f4a] hover:bg-[#506f4a]/90", children: "Continue" })] }) }))) : (jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsx(GenericOTPVerifier, { value: mfaCode, setValue: setMfaCode, setLoading: setIsLoading, isDisabled: isLoading, onChangeOTP: handleMFASubmit, fieldName: "AuthenticatorCode" }), isLoading && (jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center gap-2 text-sm text-muted-foreground", children: [jsxRuntimeExports.jsx(lucideReact.Loader2, { className: "w-4 h-4 animate-spin" }), jsxRuntimeExports.jsx("span", { children: "Verifying..." })] }))] }))] }) }));
 };
 
 var DefaultLoginPage = function (_a) {
-    var usePassKey = _a.usePassKey, MFAEndpoints = _a.MFAEndpoints, PassKeysRegisterProps = _a.PassKeysRegisterProps;
+    var usePassKey = _a.usePassKey, useADLogin = _a.useADLogin, MFAEndpoints = _a.MFAEndpoints, CredentialsAuthEndpoint = _a.CredentialsAuthEndpoint, PassKeysRegisterProps = _a.PassKeysRegisterProps;
+    var cardVariants = {
+        hidden: { opacity: 0, scale: 0.8, y: 50 },
+        visible: {
+            opacity: 1,
+            scale: 1,
+            y: 0,
+            transition: { type: "spring", duration: 0.6 },
+        },
+        exit: { opacity: 0, scale: 0.8, y: -50, transition: { duration: 0.3 } },
+    };
     var context = useCAMSContext();
     var login = context.login, isLoading = context.isLoading, authMode = context.authMode;
     var _b = React.useState(false), showADModal = _b[0], setShowADModal = _b[1];
@@ -2126,16 +2211,6 @@ var DefaultLoginPage = function (_a) {
             console.warn("Regular CAMS login requires configuration");
         }
     };
-    var cardVariants = {
-        hidden: { opacity: 0, scale: 0.8, y: 50 },
-        visible: {
-            opacity: 1,
-            scale: 1,
-            y: 0,
-            transition: { type: "spring", duration: 0.6 },
-        },
-        exit: { opacity: 0, scale: 0.8, y: -50, transition: { duration: 0.3 } },
-    };
     var handleRegister = function (data) { return __awaiter(void 0, void 0, void 0, function () {
         var options, attestationResponse, error_1;
         return __generator(this, function (_a) {
@@ -2185,11 +2260,28 @@ 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" })] }), 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-8 h-8 text-[#506f4a]" }), 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) {
+                                        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
+                                                    ? "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) {
                     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*/];
+                            });
+                        }); });
                         return [2 /*return*/];
                     });
                 }); } })] }));
@@ -2212,7 +2304,7 @@ var MFAGate = function (_a) {
     // loginComponent: LoginComponent = DefaultLoginPage,
     _c = _a.usePassKey, 
     // loginComponent: LoginComponent = DefaultLoginPage,
-    usePassKey = _c === void 0 ? false : _c, PassKeysRegisterProps = _a.PassKeysRegisterProps, MFAEndpoints = _a.MFAEndpoints;
+    usePassKey = _c === void 0 ? false : _c, _d = _a.useADLogin, useADLogin = _d === void 0 ? false : _d, CredentialsAuthEndpoint = _a.CredentialsAuthEndpoint, PassKeysRegisterProps = _a.PassKeysRegisterProps, MFAEndpoints = _a.MFAEndpoints;
     var context = useCAMSContext();
     var validatedMFAEndpoints = React.useMemo(function () {
         var parsed = MFAEndpointsSchema.safeParse(MFAEndpoints);
@@ -2247,7 +2339,7 @@ var MFAGate = function (_a) {
         return (jsxRuntimeExports.jsx(MFAOptions, { MFAEndpoints: validatedMFAEndpoints, usePassKey: usePassKey, onComplete: handleComplete, onAuthFailed: handleAuthFailed }));
     }
     if (!context.isAuthenticated) {
-        return (jsxRuntimeExports.jsx(DefaultLoginPage, { usePassKey: usePassKey, MFAEndpoints: MFAEndpoints, PassKeysRegisterProps: PassKeysRegisterProps }));
+        return (jsxRuntimeExports.jsx(DefaultLoginPage, { usePassKey: usePassKey, useADLogin: useADLogin, MFAEndpoints: MFAEndpoints, PassKeysRegisterProps: PassKeysRegisterProps, CredentialsAuthEndpoint: CredentialsAuthEndpoint }));
     }
     return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: children });
 };