nucleus-core-ts 0.8.7 → 0.8.9

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

@@ -0,0 +1,59 @@
+"use client";
+import { batch, createStore } from "h-state";
+const initialState = {
+    email: "",
+    password: "",
+    rememberMe: false,
+    isLoading: false,
+    error: null,
+    captchaId: null,
+    captchaAnswer: "",
+    isAuthenticated: false,
+    user: null
+};
+export const { useStore: useLoginStore } = createStore(initialState, {
+    setEmail: (store)=>(email)=>{
+            store.email = email;
+            if (store.error) {
+                store.error = null;
+            }
+        },
+    setPassword: (store)=>(password)=>{
+            store.password = password;
+            if (store.error) {
+                store.error = null;
+            }
+        },
+    setRememberMe: (store)=>(value)=>{
+            store.rememberMe = value;
+        },
+    setLoading: (store)=>(value)=>{
+            store.isLoading = value;
+        },
+    setError: (store)=>(error)=>{
+            store.error = error;
+        },
+    setCaptchaId: (store)=>(id)=>{
+            store.captchaId = id;
+        },
+    setCaptchaAnswer: (store)=>(answer)=>{
+            store.captchaAnswer = answer;
+        },
+    setAuthenticated: (store)=>(isAuthenticated, user)=>{
+            batch(()=>{
+                store.isAuthenticated = isAuthenticated;
+                store.user = user ?? null;
+            });
+        },
+    reset: (store)=>()=>{
+            batch(()=>{
+                store.email = "";
+                store.password = "";
+                store.rememberMe = false;
+                store.isLoading = false;
+                store.error = null;
+                store.captchaId = null;
+                store.captchaAnswer = "";
+            });
+        }
+});

package/dist/fe/components/LoginPage/theme/index.js

@@ -0,0 +1,98 @@
+export const loginPageTheme = {
+    container: {
+        base: "relative min-h-screen w-full flex items-center justify-center",
+        wrapper: "relative z-10 w-full max-w-md px-4 sm:px-0"
+    },
+    card: {
+        base: "w-full",
+        padding: "p-6 sm:p-8",
+        background: "bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl",
+        border: "border border-white/20 dark:border-zinc-800/50",
+        shadow: "shadow-2xl shadow-black/10 dark:shadow-black/30",
+        rounded: "rounded-2xl sm:rounded-3xl"
+    },
+    header: {
+        container: "flex flex-col items-center mb-8",
+        logoWrapper: "mb-4",
+        title: "text-2xl sm:text-3xl font-bold text-zinc-900 dark:text-white text-center",
+        subtitle: "mt-2 text-sm sm:text-base text-zinc-600 dark:text-zinc-400 text-center"
+    },
+    form: {
+        container: "w-full",
+        spacing: "space-y-4"
+    },
+    input: {
+        wrapper: "w-full"
+    },
+    checkbox: {
+        wrapper: "flex items-center",
+        label: "ml-2 text-sm text-zinc-600 dark:text-zinc-400 select-none cursor-pointer"
+    },
+    links: {
+        container: "flex items-center justify-between mt-1",
+        forgotPassword: "text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors cursor-pointer",
+        signUp: {
+            wrapper: "mt-6 text-center",
+            text: "text-sm text-zinc-600 dark:text-zinc-400",
+            link: "text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium transition-colors cursor-pointer"
+        }
+    },
+    button: {
+        wrapper: "mt-6"
+    },
+    error: {
+        container: "mb-4 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800",
+        text: "text-sm text-red-600 dark:text-red-400 text-center"
+    },
+    divider: {
+        container: "relative my-6",
+        line: "absolute inset-0 flex items-center",
+        text: "relative flex justify-center text-sm"
+    }
+};
+export function extendLoginPageTheme(overrides) {
+    return {
+        ...loginPageTheme,
+        ...overrides,
+        container: {
+            ...loginPageTheme.container,
+            ...overrides.container
+        },
+        card: {
+            ...loginPageTheme.card,
+            ...overrides.card
+        },
+        header: {
+            ...loginPageTheme.header,
+            ...overrides.header
+        },
+        form: {
+            ...loginPageTheme.form,
+            ...overrides.form
+        },
+        input: {
+            ...loginPageTheme.input,
+            ...overrides.input
+        },
+        checkbox: {
+            ...loginPageTheme.checkbox,
+            ...overrides.checkbox
+        },
+        links: {
+            ...loginPageTheme.links,
+            ...overrides.links
+        },
+        button: {
+            ...loginPageTheme.button,
+            ...overrides.button
+        },
+        error: {
+            ...loginPageTheme.error,
+            ...overrides.error
+        },
+        divider: {
+            ...loginPageTheme.divider,
+            ...overrides.divider
+        }
+    };
+}

package/dist/fe/components/LoginPage/types/index.js

@@ -0,0 +1 @@
+export { };

package/dist/fe/components/MagicLinkVerifyPage/components/MagicLinkVerifyPage.js

@@ -0,0 +1,200 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { useMagicLinkVerifyStore } from "../store";
+import { magicLinkVerifyPageTheme } from "../theme";
+gsap.registerPlugin(useGSAP);
+function parseErrorMessage(error, defaultMsg) {
+    if (!error?.message) return defaultMsg;
+    try {
+        const parsed = JSON.parse(error.message);
+        const msg = parsed.message || "";
+        if (msg.includes("Failed query") || msg.includes("select") || msg.includes("params:")) {
+            return "An error occurred. Please try again later.";
+        }
+        return msg || defaultMsg;
+    } catch  {
+        if (error.message.includes("Failed query") || error.message.includes("select")) {
+            return "An error occurred. Please try again later.";
+        }
+        return error.message;
+    }
+}
+export function MagicLinkVerifyPage({ token, verifyAction, onSuccess, onError, onBackToLogin, backToLoginHref, redirectDelay = 2000, className, texts }) {
+    const theme = magicLinkVerifyPageTheme;
+    const containerRef = useRef(null);
+    const cardRef = useRef(null);
+    const hasVerified = useRef(false);
+    const store = useMagicLinkVerifyStore();
+    const verifyToken = useEffectEvent((tokenValue)=>{
+        if (!tokenValue) {
+            store.setStep("error");
+            store.setMessage("Invalid magic link. No token provided.");
+            return;
+        }
+        if (hasVerified.current) return;
+        hasVerified.current = true;
+        verifyAction.start({
+            payload: {
+                token: tokenValue
+            },
+            onAfterHandle: (response)=>{
+                if (!response) {
+                    store.setStep("error");
+                    store.setMessage("Verification failed. Please try again.");
+                    onError?.();
+                    return;
+                }
+                if (response.success && response.data) {
+                    store.setStep("success");
+                    store.setMessage(texts?.successSubtitle || "You have been logged in successfully!");
+                    setTimeout(()=>{
+                        onSuccess?.(response);
+                    }, redirectDelay);
+                } else {
+                    store.setStep("error");
+                    store.setMessage("Verification failed. The link may be expired or invalid.");
+                    onError?.();
+                }
+            },
+            onErrorHandle: (error)=>{
+                store.setStep("error");
+                store.setMessage(parseErrorMessage(error, "Verification failed. The link may be expired or invalid."));
+                onError?.();
+            }
+        });
+    });
+    useEffect(()=>{
+        if (token) {
+            verifyToken(token);
+        } else {
+            store.setStep("error");
+            store.setMessage("Invalid magic link. No token provided.");
+        }
+        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 handleBackToLogin = ()=>{
+        if (onBackToLogin) {
+            onBackToLogin();
+        } else if (backToLoginHref) {
+            window.location.href = backToLoginHref;
+        }
+    };
+    return /*#__PURE__*/ _jsx("main", {
+        ref: containerRef,
+        className: cn(theme.container.base, className),
+        children: /*#__PURE__*/ _jsx("article", {
+            ref: cardRef,
+            className: cn(theme.card.base, theme.card.background, theme.card.border, theme.card.shadow, theme.card.rounded),
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: theme.content.wrapper,
+                children: [
+                    store.step === "verifying" && /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: theme.states.verifying.spinner
+                            }),
+                            /*#__PURE__*/ _jsx("h1", {
+                                className: theme.states.verifying.title,
+                                children: texts?.verifyingTitle || "Verifying Magic Link"
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                className: theme.states.verifying.subtitle,
+                                children: texts?.verifyingSubtitle || store.message
+                            })
+                        ]
+                    }),
+                    store.step === "success" && /*#__PURE__*/ _jsxs(_Fragment, {
+                        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: texts?.successTitle || "Login Successful!"
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                className: theme.states.success.subtitle,
+                                children: store.message
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                className: theme.states.success.redirectText,
+                                children: "Redirecting..."
+                            })
+                        ]
+                    }),
+                    store.step === "error" && /*#__PURE__*/ _jsxs(_Fragment, {
+                        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: "M6 18L18 6M6 6l12 12"
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("h1", {
+                                className: theme.states.error.title,
+                                children: texts?.errorTitle || "Verification Failed"
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                className: theme.states.error.subtitle,
+                                children: store.message
+                            }),
+                            (onBackToLogin || backToLoginHref) && /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                onClick: handleBackToLogin,
+                                className: theme.backButton,
+                                children: texts?.backToLogin || "Back to Login"
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+    });
+}

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

@@ -0,0 +1,3 @@
+export { MagicLinkVerifyPage } from "./components/MagicLinkVerifyPage";
+export { useMagicLinkVerifyStore } from "./store";
+export { magicLinkVerifyPageTheme } from "./theme";

package/dist/fe/components/MagicLinkVerifyPage/store.js

@@ -0,0 +1,20 @@
+"use client";
+import { batch, createStore } from "h-state";
+const initialState = {
+    step: "verifying",
+    message: "Please wait while we verify your magic link..."
+};
+export const { useStore: useMagicLinkVerifyStore } = createStore(initialState, {
+    setStep: (store)=>(step)=>{
+            store.step = step;
+        },
+    setMessage: (store)=>(message)=>{
+            store.message = message;
+        },
+    reset: (store)=>()=>{
+            batch(()=>{
+                store.step = "verifying";
+                store.message = "Please wait while we verify your magic link...";
+            });
+        }
+});

package/dist/fe/components/MagicLinkVerifyPage/theme.js

@@ -0,0 +1,36 @@
+export const magicLinkVerifyPageTheme = {
+    container: {
+        base: "min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-zinc-50 via-white to-zinc-100 dark:from-zinc-950 dark:via-zinc-900 dark:to-zinc-950"
+    },
+    card: {
+        base: "w-full max-w-md p-8",
+        background: "bg-white dark:bg-zinc-900",
+        border: "border border-zinc-200 dark:border-zinc-800",
+        shadow: "shadow-xl shadow-zinc-200/50 dark:shadow-zinc-950/50",
+        rounded: "rounded-2xl"
+    },
+    content: {
+        wrapper: "flex flex-col items-center text-center space-y-4"
+    },
+    states: {
+        verifying: {
+            spinner: "w-12 h-12 border-4 border-zinc-200 dark:border-zinc-700 border-t-blue-500 rounded-full animate-spin",
+            title: "text-xl font-semibold text-zinc-900 dark:text-zinc-100",
+            subtitle: "text-sm text-zinc-500 dark:text-zinc-400"
+        },
+        success: {
+            iconWrapper: "w-16 h-16 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center",
+            icon: "w-8 h-8 text-green-600 dark:text-green-400",
+            title: "text-xl font-semibold text-zinc-900 dark:text-zinc-100",
+            subtitle: "text-sm text-green-600 dark:text-green-400",
+            redirectText: "text-xs text-zinc-400 dark:text-zinc-500 animate-pulse"
+        },
+        error: {
+            iconWrapper: "w-16 h-16 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center",
+            icon: "w-8 h-8 text-red-600 dark:text-red-400",
+            title: "text-xl font-semibold text-zinc-900 dark:text-zinc-100",
+            subtitle: "text-sm text-red-600 dark:text-red-400"
+        }
+    },
+    backButton: "mt-6 px-6 py-2.5 text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors duration-200"
+};

package/dist/fe/components/MagicLinkVerifyPage/types.js

@@ -0,0 +1 @@
+export { };