@nibssplc/cams-sdk-react 0.0.1-beta.78 → 0.0.1-beta.79

package/dist/index.esm.js

@@ -6,13 +6,13 @@ import { MsalProvider, useMsal, useAccount } from '@azure/msal-react';
 import { PublicClientApplication, InteractionStatus } from '@azure/msal-browser';
 import z$1, { z } from 'zod';
 import { OTPInput, OTPInputContext, REGEXP_ONLY_DIGITS } from 'input-otp';
-import { RectangleEllipsis, XIcon, CheckCircle, Mail, Shield, ShieldCheck, ShieldClose } from 'lucide-react';
+import { RectangleEllipsis, XIcon, CheckCircle, Mail, Shield, ShieldCheck, ShieldClose, KeyIcon, Loader2 } from 'lucide-react';
 import { appendErrors, FormProvider, Controller, useFormContext, useFormState, useForm } from 'react-hook-form';
 import { validateFieldsNatively, toNestErrors } from '@hookform/resolvers';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Slot } from '@radix-ui/react-slot';
-import '@radix-ui/react-label';
+import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva } from 'class-variance-authority';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { toast } from 'sonner';
@@ -114,15 +114,17 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 
 function useCAMSAuth(options) {
     var _this = this;
+    var _a;
     if (options === void 0) { options = {
         appCode: "",
+        loginExpiry: 1,
         storageKey: "CAMS-AUTH-SDK",
     }; }
-    var _a = useState(false), isAuthenticated = _a[0], setIsAuthenticated = _a[1];
-    var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
-    var _c = useState(null), error = _c[0], setError = _c[1];
-    var _d = useState(""), token = _d[0], setToken = _d[1];
-    var _e = useState(null), profile = _e[0], setProfile = _e[1];
+    var _b = useState(false), isAuthenticated = _b[0], setIsAuthenticated = _b[1];
+    var _c = useState(false), isLoading = _c[0], setIsLoading = _c[1];
+    var _d = useState(null), error = _d[0], setError = _d[1];
+    var _e = useState(""), token = _e[0], setToken = _e[1];
+    var _f = useState(null), profile = _f[0], setProfile = _f[1];
     var sessionManagerRef = useRef(null);
     useEffect(function () {
         var _a, _b;
@@ -133,7 +135,7 @@ function useCAMSAuth(options) {
         if (isPopupWindow()) {
             initializePopupAuth();
         }
-        (_a = sessionManagerRef.current) !== null && _a !== void 0 ? _a : (sessionManagerRef.current = new CAMSSessionManager(localStorage, options.storageKey || "CAMS-SDK", {
+        (_a = sessionManagerRef.current) !== null && _a !== void 0 ? _a : (sessionManagerRef.current = new CAMSSessionManager(localStorage, options.storageKey || "CAMS-AUTH-SDK", {
             onAuthSuccess: function (res) {
                 var _a;
                 setToken(res.userProfile.tokens.Bearer);
@@ -169,40 +171,53 @@ function useCAMSAuth(options) {
         }
     }, [options.storageKey]);
     var login = useCallback(function (config) { return __awaiter(_this, void 0, void 0, function () {
-        var loginConfig, userProfile, err_1;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var loginConfig, userProfile, err_1, e, isPopupClosedError, restoredToken, userProfile;
+        var _a, _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
                 case 0:
                     if (!sessionManagerRef.current)
                         return [2 /*return*/];
                     setIsLoading(true);
                     setError(null);
-                    _b.label = 1;
+                    _d.label = 1;
                 case 1:
-                    _b.trys.push([1, 4, 5, 6]);
-                    loginConfig = __assign(__assign({}, config), { 
-                        // autoClose: options.autoClose ?? config.autoClose,
-                        idleTimeout: (_a = options.idleTimeout) !== null && _a !== void 0 ? _a : config.idleTimeout });
+                    _d.trys.push([1, 4, 8, 9]);
+                    loginConfig = __assign(__assign({}, config), { idleTimeout: options.idleTimeout });
                     return [4 /*yield*/, sessionManagerRef.current.login(loginConfig)];
                 case 2:
-                    _b.sent();
+                    _d.sent();
                     return [4 /*yield*/, sessionManagerRef.current.getProfile()];
                 case 3:
-                    userProfile = _b.sent();
+                    userProfile = _d.sent();
                     setProfile(userProfile);
-                    return [3 /*break*/, 6];
+                    return [3 /*break*/, 9];
                 case 4:
-                    err_1 = _b.sent();
+                    err_1 = _d.sent();
+                    e = err_1;
+                    isPopupClosedError = ((_a = e === null || e === void 0 ? void 0 : e.message) === null || _a === void 0 ? void 0 : _a.includes("Authentication window was closed")) ||
+                        (e === null || e === void 0 ? void 0 : e.error) === "Authentication window was closed";
+                    if (!(isPopupClosedError && sessionManagerRef.current.isAuthenticated())) return [3 /*break*/, 6];
+                    restoredToken = (_b = sessionManagerRef.current.getAccessToken()) !== null && _b !== void 0 ? _b : "";
+                    setToken(restoredToken);
+                    setIsAuthenticated(true);
+                    return [4 /*yield*/, sessionManagerRef.current.getProfile()];
+                case 5:
+                    userProfile = _d.sent();
+                    setProfile(userProfile);
+                    (_c = options.onAuthSuccess) === null || _c === void 0 ? void 0 : _c.call(options, restoredToken);
+                    return [3 /*break*/, 7];
+                case 6:
                     setError(err_1);
                     setIsAuthenticated(false);
                     setToken("");
                     setProfile(null);
-                    return [3 /*break*/, 6];
-                case 5:
+                    _d.label = 7;
+                case 7: return [3 /*break*/, 9];
+                case 8:
                     setIsLoading(false);
                     return [7 /*endfinally*/];
-                case 6: return [2 /*return*/];
+                case 9: return [2 /*return*/];
             }
         });
     }); }, [options.idleTimeout]);
@@ -231,8 +246,9 @@ function useCAMSAuth(options) {
         error: error,
         token: token,
         profile: profile,
+        loginExpiry: (_a = options.loginExpiry) !== null && _a !== void 0 ? _a : 1,
         appCode: options.appCode,
-        storageKey: options.storageKey || "CAMS-SDK",
+        storageKey: options.storageKey || "CAMS-AUTH-SDK",
     };
 }
 
@@ -1398,6 +1414,11 @@ function InputOTPSlot(_a) {
     return (jsxRuntimeExports.jsxs("div", __assign({ "data-slot": "input-otp-slot", "data-active": isActive, className: cn("data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-12 w-12 items-center justify-center border-y border-r text-lg font-semibold shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]", className) }, props, { children: [char, hasFakeCaret && (jsxRuntimeExports.jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: jsxRuntimeExports.jsx("div", { className: "animate-caret-blink bg-foreground h-4 w-px duration-1000" }) }))] })));
 }
 
+function Label(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (jsxRuntimeExports.jsx(LabelPrimitive.Root, __assign({ "data-slot": "label", className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className) }, props)));
+}
+
 var Form = FormProvider;
 var FormFieldContext = React.createContext({});
 var FormField = function (_a) {
@@ -1422,6 +1443,11 @@ function FormItem(_a) {
     var id = React.useId();
     return (jsxRuntimeExports.jsx(FormItemContext.Provider, { value: { id: id }, children: jsxRuntimeExports.jsx("div", __assign({ "data-slot": "form-item", className: cn("grid gap-2", className) }, props)) }));
 }
+function FormLabel(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    var _b = useFormField(), error = _b.error, formItemId = _b.formItemId;
+    return (jsxRuntimeExports.jsx(Label, __assign({ "data-slot": "form-label", "data-error": !!error, className: cn("data-[error=true]:text-destructive", className), htmlFor: formItemId }, props)));
+}
 function FormControl(_a) {
     var props = __rest(_a, []);
     var _b = useFormField(), error = _b.error, formItemId = _b.formItemId, formDescriptionId = _b.formDescriptionId, formMessageId = _b.formMessageId;
@@ -1841,9 +1867,80 @@ var AuthLogo = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2
 
 var MicrosoftLogo = "data:image/svg+xml,%3Csvg%20width%3D%2225%22%20height%3D%2225%22%20viewBox%3D%220%200%2025%2025%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22microsoft_svgrepo.com%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M20.75%2013.25H13.25V20.75H20.75V13.25Z%22%20fill%3D%22%23FEBA08%22%2F%3E%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M11.75%2013.25H4.25V20.75H11.75V13.25Z%22%20fill%3D%22%2305A6F0%22%2F%3E%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M20.75%204.25H13.25V11.75H20.75V4.25Z%22%20fill%3D%22%2380BC06%22%2F%3E%3Cpath%20id%3D%22Vector_4%22%20d%3D%22M11.75%204.25H4.25V11.75H11.75V4.25Z%22%20fill%3D%22%23F25325%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
 
+var Input = React.forwardRef(function (_a, ref) {
+    var className = _a.className, type = _a.type, props = __rest(_a, ["className", "type"]);
+    return (jsxRuntimeExports.jsx("input", __assign({ type: type, className: cn("flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className), ref: ref }, props)));
+});
+Input.displayName = "Input";
+
+var credentialsSchema = z.object({
+    username: z.string().min(1, "Username is required"),
+    password: z.string().min(1, "Password is required"),
+});
+var ADLoginModal = function (_a) {
+    var open = _a.open, onOpenChange = _a.onOpenChange, onLogin = _a.onLogin;
+    var _b = useState("credentials"), step = _b[0], setStep = _b[1];
+    var _c = useState({ username: "", password: "" }), credentials = _c[0], setCredentials = _c[1];
+    var _d = useState(""), mfaCode = _d[0], setMfaCode = _d[1];
+    var _e = useState(false), isLoading = _e[0], setIsLoading = _e[1];
+    var form = useForm({
+        resolver: a$1(credentialsSchema),
+        defaultValues: { username: "", password: "" },
+    });
+    var handleCredentialsSubmit = function (values) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            setCredentials(values);
+            setStep("mfa");
+            return [2 /*return*/];
+        });
+    }); };
+    var handleMFASubmit = function (code) { return __awaiter(void 0, void 0, void 0, function () {
+        var error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsLoading(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, 4, 5]);
+                    return [4 /*yield*/, onLogin(credentials.username, credentials.password, code)];
+                case 2:
+                    _a.sent();
+                    onOpenChange(false);
+                    setStep("credentials");
+                    form.reset();
+                    setMfaCode("");
+                    return [3 /*break*/, 5];
+                case 3:
+                    error_1 = _a.sent();
+                    console.error("AD login failed:", error_1);
+                    return [3 /*break*/, 5];
+                case 4:
+                    setIsLoading(false);
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleClose = function () {
+        onOpenChange(false);
+        setStep("credentials");
+        form.reset();
+        setMfaCode("");
+    };
+    return (jsxRuntimeExports.jsx(Dialog, { open: open, onOpenChange: handleClose, children: jsxRuntimeExports.jsxs(DialogContent, { className: "sm:max-w-md", children: [jsxRuntimeExports.jsx(DialogHeader, { children: jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(KeyIcon, { className: "w-5 h-5 text-[#506f4a]" }), jsxRuntimeExports.jsx(DialogTitle, { 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, {})] }));
+                                } }), 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, {})] }));
+                                } }), 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(Loader2, { className: "w-4 h-4 animate-spin" }), jsxRuntimeExports.jsx("span", { children: "Verifying..." })] }))] }))] }) }));
+};
+
 var DefaultLoginPage = function () {
     var context = useCAMSContext$1();
     var login = context.login, isLoading = context.isLoading, authMode = context.authMode;
+    var _a = useState(false), showADModal = _a[0], setShowADModal = _a[1];
     var handleLogin = function () {
         if (authMode === "MSAL") {
             login();
@@ -1863,11 +1960,21 @@ var DefaultLoginPage = function () {
         },
         exit: { opacity: 0, scale: 0.8, y: -50, transition: { duration: 0.3 } },
     };
-    return (jsxRuntimeExports.jsx("main", { className: "min-h-screen bg-gray-50", children: jsxRuntimeExports.jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.5 }, children: jsxRuntimeExports.jsx("div", { className: "flex h-screen items-center justify-center", children: jsxRuntimeExports.jsxs(motion.div, { variants: cardVariants, initial: "hidden", animate: "visible", exit: "exit", className: "w-full max-w-md p-6 space-y-4 bg-gray-50 rounded-2xl shadow-2xl --dark:bg-gray-800", children: [jsxRuntimeExports.jsxs(CardHeader, { className: "text-center space-y-3", children: [jsxRuntimeExports.jsx("div", { className: "w-full flex items-center justify-center", children: jsxRuntimeExports.jsx("img", { src: NIBSSLogo, alt: "NIBSS Logo", width: 265, height: 265 }) }), jsxRuntimeExports.jsx(CardTitle, { className: "text-3xl font-bold --text-gray-900 --dark:text-white", children: "NIBSS CAMS" }), jsxRuntimeExports.jsx(CardTitle, { className: "text-gray-500 dark:text-gray-400 font-bold text-lg", children: "Centralized Authentication" })] }), jsxRuntimeExports.jsxs(CardAction, { className: "w-full flex flex-col items-center justify-center text-center text-gray-500 dark:text-gray-400 mb-4", children: [jsxRuntimeExports.jsx("img", { src: AuthLogo, alt: "Auth Logo", width: 365, height: 365 }), "Kindly use the below identity providers to authenticate"] }), jsxRuntimeExports.jsx("div", { className: "space-y-4", children: jsxRuntimeExports.jsxs(Button
-                            // 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: handleLogin, disabled: isLoading, children: [jsxRuntimeExports.jsx("img", { src: MicrosoftLogo, alt: "Microsoft Logo", width: 35, height: 35 }), jsxRuntimeExports.jsx("span", { children: isLoading ? 'Logging in...' : "Sign in with Microsoft" })] }) }), jsxRuntimeExports.jsxs(CardFooter, { className: "flex items-center justify-center mt-6 space-x-2 text-gray-400 text-sm", children: [jsxRuntimeExports.jsx(ShieldCheck, { className: "w-4 h-4 text-[#506f4a] pulse-glow" }), jsxRuntimeExports.jsx("span", { children: "Powered By NIBSS" })] })] }) }) }, "landing") }));
+    return (jsxRuntimeExports.jsxs("main", { className: "min-h-screen bg-gray-50", children: [jsxRuntimeExports.jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.5 }, children: jsxRuntimeExports.jsx("div", { className: "flex h-screen items-center justify-center", children: jsxRuntimeExports.jsxs(motion.div, { variants: cardVariants, initial: "hidden", animate: "visible", exit: "exit", className: "w-full max-w-md p-6 space-y-4 bg-gray-50 rounded-2xl shadow-2xl --dark:bg-gray-800", children: [jsxRuntimeExports.jsxs(CardHeader, { className: "text-center space-y-3", children: [jsxRuntimeExports.jsx("div", { className: "w-full flex items-center justify-center", children: jsxRuntimeExports.jsx("img", { src: NIBSSLogo, alt: "NIBSS Logo", width: 265, height: 265 }) }), jsxRuntimeExports.jsx(CardTitle, { className: "text-3xl font-bold --text-gray-900 --dark:text-white", children: "NIBSS CAMS" }), jsxRuntimeExports.jsx(CardTitle, { className: "text-gray-500 dark:text-gray-400 font-bold text-lg", children: "Centralized Authentication" })] }), jsxRuntimeExports.jsxs(CardAction, { className: "w-full flex flex-col items-center justify-center text-center text-gray-500 dark:text-gray-400 mb-4", children: [jsxRuntimeExports.jsx("img", { src: AuthLogo, alt: "Auth Logo", width: 365, height: 365 }), "Kindly use the below identity providers to authenticate"] }), jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsxs(Button
+                                    // 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: handleLogin, disabled: isLoading, children: [jsxRuntimeExports.jsx("img", { src: MicrosoftLogo, alt: "Microsoft Logo", width: 35, height: 35 }), jsxRuntimeExports.jsx("span", { children: isLoading ? "Logging in..." : "Sign in with Microsoft" })] }), jsxRuntimeExports.jsxs(Button
+                                    // 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: function () { return setShowADModal(true); }, disabled: isLoading, children: [jsxRuntimeExports.jsx(KeyIcon, {}), jsxRuntimeExports.jsx("span", { children: isLoading ? "Logging in..." : "Sign in with AD" })] })] }), jsxRuntimeExports.jsxs(CardFooter, { className: "flex items-center justify-center mt-6 space-x-2 text-gray-400 text-sm", children: [jsxRuntimeExports.jsx(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 (username, password, mfaCode) { return __awaiter(void 0, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        // Implement your AD login logic here
+                        console.log("AD Login:", { username: username, password: password, mfaCode: mfaCode });
+                        return [2 /*return*/];
+                    });
+                }); } })] }));
 };
 
 var ErrorFallback = function (_a) {