nucleus-core-ts 0.8.7 → 0.8.8

package/dist/fe/components/SetPasswordPage/components/PasswordStrengthIndicator.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn";
+import { setPasswordPageTheme } from "../theme";
+const CheckIcon = ()=>/*#__PURE__*/ _jsx("svg", {
+        className: "w-3 h-3",
+        fill: "currentColor",
+        viewBox: "0 0 20 20",
+        "aria-hidden": "true",
+        children: /*#__PURE__*/ _jsx("path", {
+            fillRule: "evenodd",
+            d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+            clipRule: "evenodd"
+        })
+    });
+const CrossIcon = ()=>/*#__PURE__*/ _jsx("svg", {
+        className: "w-3 h-3",
+        fill: "currentColor",
+        viewBox: "0 0 20 20",
+        "aria-hidden": "true",
+        children: /*#__PURE__*/ _jsx("path", {
+            fillRule: "evenodd",
+            d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+            clipRule: "evenodd"
+        })
+    });
+export function PasswordStrengthIndicator({ strength, showRequirements = true, passwordMinLength = 8, requireUppercase = true, requireLowercase = true, requireNumber = true, requireSpecialChar = false }) {
+    const theme = setPasswordPageTheme.passwordStrength;
+    const getStrengthColor = (index)=>{
+        if (index >= strength.score) return theme.bar.inactive;
+        if (strength.score === 1) return theme.bar.active.weak;
+        if (strength.score === 2) return theme.bar.active.fair;
+        if (strength.score === 3) return theme.bar.active.good;
+        if (strength.score === 4) return theme.bar.active.strong;
+        return theme.bar.active.veryStrong;
+    };
+    const requirements = [
+        {
+            key: "minLength",
+            label: `At least ${passwordMinLength} characters`,
+            met: strength.hasMinLength,
+            show: true
+        },
+        {
+            key: "uppercase",
+            label: "One uppercase letter",
+            met: strength.hasUppercase,
+            show: requireUppercase
+        },
+        {
+            key: "lowercase",
+            label: "One lowercase letter",
+            met: strength.hasLowercase,
+            show: requireLowercase
+        },
+        {
+            key: "number",
+            label: "One number",
+            met: strength.hasNumber,
+            show: requireNumber
+        },
+        {
+            key: "special",
+            label: "One special character",
+            met: strength.hasSpecialChar,
+            show: requireSpecialChar
+        }
+    ].filter((req)=>req.show);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: theme.container,
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: theme.bar.wrapper,
+                role: "progressbar",
+                "aria-valuenow": strength.score,
+                "aria-valuemin": 0,
+                "aria-valuemax": 5,
+                "aria-label": "Password strength",
+                children: [
+                    0,
+                    1,
+                    2,
+                    3,
+                    4
+                ].map((index)=>/*#__PURE__*/ _jsx("div", {
+                        className: cn(theme.bar.segment, getStrengthColor(index))
+                    }, index))
+            }),
+            showRequirements && /*#__PURE__*/ _jsx("ul", {
+                className: theme.requirements.container,
+                "aria-label": "Password requirements",
+                children: requirements.map((req)=>/*#__PURE__*/ _jsxs("li", {
+                        className: cn(theme.requirements.item, req.met ? theme.requirements.met : theme.requirements.unmet),
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: req.met ? theme.requirements.icon.met : theme.requirements.icon.unmet,
+                                children: req.met ? /*#__PURE__*/ _jsx(CheckIcon, {}) : /*#__PURE__*/ _jsx(CrossIcon, {})
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                children: req.label
+                            })
+                        ]
+                    }, req.key))
+            })
+        ]
+    });
+}

package/dist/fe/components/SetPasswordPage/components/SetPasswordForm.js

@@ -0,0 +1,142 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NucleusTextInput } from "../../NucleusTextInput";
+import { useSetPasswordStore } from "../store";
+import { setPasswordPageTheme } from "../theme";
+import { DEFAULT_PASSWORD_POLICY } from "../types";
+export function SetPasswordForm({ passwordChangeAction, passwordSetAction, isInvite = false, onSuccess, onBackToLogin, backToLoginHref, passwordPolicy = {} }) {
+    const theme = setPasswordPageTheme;
+    const store = useSetPasswordStore();
+    const policy = {
+        ...DEFAULT_PASSWORD_POLICY,
+        ...passwordPolicy
+    };
+    const activeAction = isInvite && passwordSetAction ? passwordSetAction : passwordChangeAction;
+    const validateForm = ()=>{
+        if (!store.newPassword) {
+            return "Password is required";
+        }
+        if (store.newPassword.length < policy.minLength) {
+            return `Password must be at least ${policy.minLength} characters`;
+        }
+        if (policy.maxLength && store.newPassword.length > policy.maxLength) {
+            return `Password must be at most ${policy.maxLength} characters`;
+        }
+        if (policy.requireUppercase && !/[A-Z]/.test(store.newPassword)) {
+            return "Password must contain at least one uppercase letter";
+        }
+        if (policy.requireLowercase && !/[a-z]/.test(store.newPassword)) {
+            return "Password must contain at least one lowercase letter";
+        }
+        if (policy.requireNumber && !/[0-9]/.test(store.newPassword)) {
+            return "Password must contain at least one number";
+        }
+        if (policy.requireSpecialChar) {
+            const specialCharsRegex = new RegExp(`[${policy.specialChars.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&")}]`);
+            if (!specialCharsRegex.test(store.newPassword)) {
+                return "Password must contain at least one special character";
+            }
+        }
+        if (!store.confirmPassword) {
+            return "Please confirm your password";
+        }
+        if (store.newPassword !== store.confirmPassword) {
+            return "Passwords do not match";
+        }
+        return null;
+    };
+    const handleSubmit = (e)=>{
+        e.preventDefault();
+        const validationError = validateForm();
+        if (validationError) {
+            store.setError(validationError);
+            return;
+        }
+        store.setError(null);
+        if (!activeAction) {
+            store.setError("No action configured");
+            return;
+        }
+        const onAfterHandle = ()=>{
+            store.setStep("success");
+            if (onSuccess) {
+                setTimeout(onSuccess, 2000);
+            } else if (onBackToLogin) {
+                setTimeout(onBackToLogin, 2000);
+            }
+        };
+        const onErrorHandle = (error)=>{
+            store.setError(error?.message || "Failed to set password");
+        };
+        if (isInvite && passwordSetAction && store.userId) {
+            passwordSetAction.start({
+                payload: {
+                    newPassword: store.newPassword,
+                    userId: store.userId
+                },
+                onAfterHandle,
+                onErrorHandle
+            });
+        } else if (passwordChangeAction) {
+            passwordChangeAction.start({
+                payload: {
+                    currentPassword: "",
+                    newPassword: store.newPassword
+                },
+                onAfterHandle,
+                onErrorHandle
+            });
+        }
+    };
+    return /*#__PURE__*/ _jsxs("form", {
+        onSubmit: handleSubmit,
+        className: theme.form.wrapper,
+        children: [
+            store.error && /*#__PURE__*/ _jsx("div", {
+                className: theme.alert.error,
+                role: "alert",
+                children: store.error
+            }),
+            /*#__PURE__*/ _jsx(NucleusTextInput, {
+                type: "password",
+                label: "New Password",
+                value: store.newPassword,
+                onChange: (val)=>store.setNewPassword(val, policy.minLength),
+                placeholder: "Enter your new password",
+                isNewPassword: true,
+                showPasswordStrength: policy.showStrengthIndicator,
+                maxInputLength: policy.maxLength,
+                enableValidation: false
+            }),
+            /*#__PURE__*/ _jsx(NucleusTextInput, {
+                type: "password",
+                label: "Confirm Password",
+                value: store.confirmPassword,
+                onChange: store.setConfirmPassword,
+                placeholder: "Confirm your new password",
+                isNewPassword: true,
+                confirmValue: store.newPassword,
+                enableValidation: false
+            }),
+            /*#__PURE__*/ _jsx("button", {
+                type: "submit",
+                disabled: activeAction?.state.isPending,
+                className: theme.form.submitButton,
+                children: activeAction?.state.isPending ? "Setting Password..." : "Set Password"
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: theme.form.backLink,
+                children: backToLoginHref ? /*#__PURE__*/ _jsx("a", {
+                    href: backToLoginHref,
+                    className: theme.form.backLinkText,
+                    children: "Back to login"
+                }) : onBackToLogin ? /*#__PURE__*/ _jsx("button", {
+                    type: "button",
+                    onClick: onBackToLogin,
+                    className: theme.form.backLinkText,
+                    children: "Back to login"
+                }) : null
+            })
+        ]
+    });
+}

package/dist/fe/components/SetPasswordPage/components/SetPasswordHeader.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { setPasswordPageTheme } from "../theme";
+export function SetPasswordHeader({ logo, title, subtitle }) {
+    const theme = setPasswordPageTheme;
+    return /*#__PURE__*/ _jsxs("header", {
+        className: theme.header.wrapper,
+        children: [
+            logo && /*#__PURE__*/ _jsx("div", {
+                className: theme.header.logo,
+                children: logo
+            }),
+            /*#__PURE__*/ _jsx("h1", {
+                className: theme.header.title,
+                children: title
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                className: theme.header.subtitle,
+                children: subtitle
+            })
+        ]
+    });
+}

package/dist/fe/components/SetPasswordPage/components/SetPasswordPage.js

@@ -0,0 +1,263 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useEffect, useEffectEvent, useRef } from "react";
+import { cn } from "../../../utils/cn";
+import { AbstractAnimatedBackground } from "../../AbstractAnimatedBackground";
+import { useSetPasswordStore } from "../store";
+import { setPasswordPageTheme } from "../theme";
+import { SetPasswordForm } from "./SetPasswordForm";
+import { SetPasswordHeader } from "./SetPasswordHeader";
+gsap.registerPlugin(useGSAP);
+export function SetPasswordPage({ logo, title = "Set Password", subtitle = "Enter your new password below.", inviteTitle = "Set Your Password", inviteSubtitle = "Welcome! Please set your password to complete your account setup.", token, isInvite = false, magicLinkVerifyAction, passwordChangeAction, passwordSetAction, onBackToLogin, onSuccess, backToLoginHref, showBackground = true, className, passwordPolicy }) {
+    const theme = setPasswordPageTheme;
+    const containerRef = useRef(null);
+    const cardRef = useRef(null);
+    const store = useSetPasswordStore();
+    const verifyToken = useEffectEvent((tokenValue)=>{
+        if (!tokenValue) {
+            store.setStep("error");
+            store.setError("Invalid or missing token");
+            return;
+        }
+        magicLinkVerifyAction.start({
+            payload: {
+                token: tokenValue
+            },
+            onAfterHandle: (data)=>{
+                const response = data;
+                const userId = response?.data?.user?.id;
+                if (userId) {
+                    store.setUserId(userId);
+                }
+                store.setStep("form");
+            },
+            onErrorHandle: (error)=>{
+                store.setStep("error");
+                store.setError(error?.message || "Token verification failed");
+            }
+        });
+    });
+    useEffect(()=>{
+        verifyToken(token);
+        return ()=>{
+            store.reset();
+        };
+    }, [
+        token
+    ]);
+    useGSAP(()=>{
+        if (!cardRef.current) return;
+        gsap.fromTo(cardRef.current, {
+            opacity: 0,
+            y: 30,
+            scale: 0.95
+        }, {
+            opacity: 1,
+            y: 0,
+            scale: 1,
+            duration: 0.6,
+            ease: "power3.out"
+        });
+    }, {
+        scope: containerRef
+    });
+    const displayTitle = isInvite ? inviteTitle : title;
+    const displaySubtitle = isInvite ? inviteSubtitle : subtitle;
+    if (store.step === "verifying") {
+        return /*#__PURE__*/ _jsxs("main", {
+            ref: containerRef,
+            className: cn(theme.container.base, className),
+            children: [
+                showBackground && /*#__PURE__*/ _jsx(AbstractAnimatedBackground, {}),
+                /*#__PURE__*/ _jsx("div", {
+                    className: theme.container.wrapper,
+                    children: /*#__PURE__*/ _jsx("article", {
+                        ref: cardRef,
+                        className: cn(theme.card.base, theme.card.padding, theme.card.background, theme.card.border, theme.card.shadow, theme.card.rounded),
+                        children: /*#__PURE__*/ _jsxs("div", {
+                            className: theme.states.verifying.wrapper,
+                            children: [
+                                /*#__PURE__*/ _jsx("div", {
+                                    className: theme.states.verifying.iconWrapper,
+                                    children: /*#__PURE__*/ _jsx("div", {
+                                        className: theme.states.verifying.spinner
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx("h1", {
+                                    className: theme.states.verifying.title,
+                                    children: "Verifying Invitation"
+                                }),
+                                /*#__PURE__*/ _jsx("p", {
+                                    className: theme.states.verifying.subtitle,
+                                    children: "Please wait while we verify your invitation link..."
+                                })
+                            ]
+                        })
+                    })
+                })
+            ]
+        });
+    }
+    if (store.step === "error") {
+        return /*#__PURE__*/ _jsxs("main", {
+            ref: containerRef,
+            className: cn(theme.container.base, className),
+            children: [
+                showBackground && /*#__PURE__*/ _jsx(AbstractAnimatedBackground, {}),
+                /*#__PURE__*/ _jsx("div", {
+                    className: theme.container.wrapper,
+                    children: /*#__PURE__*/ _jsxs("article", {
+                        ref: cardRef,
+                        className: cn(theme.card.base, theme.card.padding, theme.card.background, theme.card.border, theme.card.shadow, theme.card.rounded),
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: theme.layout.textCenter,
+                                children: [
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: theme.states.error.iconWrapper,
+                                        children: /*#__PURE__*/ _jsx("svg", {
+                                            className: theme.states.error.icon,
+                                            fill: "none",
+                                            stroke: "currentColor",
+                                            viewBox: "0 0 24 24",
+                                            "aria-hidden": "true",
+                                            children: /*#__PURE__*/ _jsx("path", {
+                                                strokeLinecap: "round",
+                                                strokeLinejoin: "round",
+                                                strokeWidth: 2,
+                                                d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx("h1", {
+                                        className: theme.states.error.title,
+                                        children: "Invalid Link"
+                                    }),
+                                    /*#__PURE__*/ _jsx("p", {
+                                        className: theme.states.error.subtitle,
+                                        children: isInvite ? "This invitation link is invalid or has expired." : "This link is invalid or has expired."
+                                    }),
+                                    store.error && store.error !== "Token verification failed" && /*#__PURE__*/ _jsx("p", {
+                                        className: theme.states.error.errorMessage,
+                                        children: store.error
+                                    }),
+                                    /*#__PURE__*/ _jsx("p", {
+                                        className: theme.states.error.helpText,
+                                        children: isInvite ? "Please contact your administrator to request a new invitation." : "Please request a new link or contact support."
+                                    }),
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: theme.layout.buttonGroup,
+                                        children: backToLoginHref ? /*#__PURE__*/ _jsx("a", {
+                                            href: backToLoginHref,
+                                            className: theme.states.error.buttonPrimary,
+                                            children: "Go to Login"
+                                        }) : /*#__PURE__*/ _jsx("button", {
+                                            type: "button",
+                                            onClick: onBackToLogin,
+                                            className: theme.states.error.buttonPrimary,
+                                            children: "Go to Login"
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                className: theme.footer,
+                                children: "Need help? Contact your system administrator."
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    }
+    if (store.step === "success") {
+        return /*#__PURE__*/ _jsxs("main", {
+            ref: containerRef,
+            className: cn(theme.container.base, className),
+            children: [
+                showBackground && /*#__PURE__*/ _jsx(AbstractAnimatedBackground, {}),
+                /*#__PURE__*/ _jsx("div", {
+                    className: theme.container.wrapper,
+                    children: /*#__PURE__*/ _jsx("article", {
+                        ref: cardRef,
+                        className: cn(theme.card.base, theme.card.padding, theme.card.background, theme.card.border, theme.card.shadow, theme.card.rounded),
+                        children: /*#__PURE__*/ _jsxs("div", {
+                            className: theme.layout.textCenter,
+                            children: [
+                                /*#__PURE__*/ _jsx("div", {
+                                    className: theme.states.success.iconWrapper,
+                                    children: /*#__PURE__*/ _jsx("svg", {
+                                        className: theme.states.success.icon,
+                                        fill: "none",
+                                        stroke: "currentColor",
+                                        viewBox: "0 0 24 24",
+                                        "aria-hidden": "true",
+                                        children: /*#__PURE__*/ _jsx("path", {
+                                            strokeLinecap: "round",
+                                            strokeLinejoin: "round",
+                                            strokeWidth: 2,
+                                            d: "M5 13l4 4L19 7"
+                                        })
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx("h1", {
+                                    className: theme.states.success.title,
+                                    children: "Password Set Successfully!"
+                                }),
+                                /*#__PURE__*/ _jsx("p", {
+                                    className: theme.states.success.subtitle,
+                                    children: "Your account is now ready. Redirecting you to login..."
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: theme.layout.redirectWrapper,
+                                    children: [
+                                        /*#__PURE__*/ _jsx("div", {
+                                            className: theme.states.success.redirectSpinner
+                                        }),
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: theme.states.success.redirectText,
+                                            children: "Redirecting..."
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    })
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ _jsxs("main", {
+        ref: containerRef,
+        className: cn(theme.container.base, className),
+        "aria-label": "Set password page",
+        children: [
+            showBackground && /*#__PURE__*/ _jsx(AbstractAnimatedBackground, {}),
+            /*#__PURE__*/ _jsx("div", {
+                className: theme.container.wrapper,
+                children: /*#__PURE__*/ _jsxs("article", {
+                    ref: cardRef,
+                    className: cn(theme.card.base, theme.card.padding, theme.card.background, theme.card.border, theme.card.shadow, theme.card.rounded),
+                    children: [
+                        /*#__PURE__*/ _jsx(SetPasswordHeader, {
+                            logo: logo,
+                            title: displayTitle,
+                            subtitle: displaySubtitle
+                        }),
+                        /*#__PURE__*/ _jsx(SetPasswordForm, {
+                            passwordChangeAction: passwordChangeAction,
+                            passwordSetAction: passwordSetAction,
+                            isInvite: isInvite,
+                            onSuccess: onSuccess,
+                            onBackToLogin: onBackToLogin,
+                            backToLoginHref: backToLoginHref,
+                            passwordPolicy: passwordPolicy
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}

package/dist/fe/components/SetPasswordPage/index.js

@@ -0,0 +1,7 @@
+export { PasswordStrengthIndicator } from "./components/PasswordStrengthIndicator";
+export { SetPasswordForm } from "./components/SetPasswordForm";
+export { SetPasswordHeader } from "./components/SetPasswordHeader";
+export { SetPasswordPage } from "./components/SetPasswordPage";
+export { useSetPasswordStore } from "./store";
+export { extendSetPasswordPageTheme, setPasswordPageTheme } from "./theme";
+export { DEFAULT_PASSWORD_POLICY } from "./types";

package/dist/fe/components/SetPasswordPage/store/index.js

@@ -0,0 +1,79 @@
+"use client";
+import { batch, createStore } from "h-state";
+const calculatePasswordStrength = (password, minLength = 8)=>{
+    const hasMinLength = password.length >= minLength;
+    const hasUppercase = /[A-Z]/.test(password);
+    const hasLowercase = /[a-z]/.test(password);
+    const hasNumber = /[0-9]/.test(password);
+    const hasSpecialChar = /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(password);
+    let score = 0;
+    if (hasMinLength) score += 1;
+    if (hasUppercase) score += 1;
+    if (hasLowercase) score += 1;
+    if (hasNumber) score += 1;
+    if (hasSpecialChar) score += 1;
+    return {
+        score,
+        hasMinLength,
+        hasUppercase,
+        hasLowercase,
+        hasNumber,
+        hasSpecialChar
+    };
+};
+const initialState = {
+    newPassword: "",
+    confirmPassword: "",
+    step: "verifying",
+    error: null,
+    userId: null,
+    passwordStrength: {
+        score: 0,
+        hasMinLength: false,
+        hasUppercase: false,
+        hasLowercase: false,
+        hasNumber: false,
+        hasSpecialChar: false
+    }
+};
+export const { useStore: useSetPasswordStore } = createStore(initialState, {
+    setNewPassword: (store)=>(password, minLength = 8)=>{
+            store.newPassword = password;
+            store.passwordStrength = calculatePasswordStrength(password, minLength);
+            if (store.error) {
+                store.error = null;
+            }
+        },
+    setConfirmPassword: (store)=>(password)=>{
+            store.confirmPassword = password;
+            if (store.error) {
+                store.error = null;
+            }
+        },
+    setStep: (store)=>(step)=>{
+            store.step = step;
+        },
+    setError: (store)=>(error)=>{
+            store.error = error;
+        },
+    setUserId: (store)=>(userId)=>{
+            store.userId = userId;
+        },
+    reset: (store)=>()=>{
+            batch(()=>{
+                store.newPassword = "";
+                store.confirmPassword = "";
+                store.step = "verifying";
+                store.error = null;
+                store.userId = null;
+                store.passwordStrength = {
+                    score: 0,
+                    hasMinLength: false,
+                    hasUppercase: false,
+                    hasLowercase: false,
+                    hasNumber: false,
+                    hasSpecialChar: false
+                };
+            });
+        }
+});