nucleus-core-ts 0.8.47 → 0.8.48

package/dist/fe/components/MagicLinkVerifyPage/components/MagicLinkVerifyPage.d.ts

@@ -1,4 +1,4 @@
 import type { ReactElement } from "react";
 import type { MagicLinkVerifyPageConfig } from "../types";
-export declare function MagicLinkVerifyPage({ token, verifyAction, onSuccess, onError, onBackToLogin, backToLoginHref, redirectDelay, className, texts, }: MagicLinkVerifyPageConfig): ReactElement;
+export declare function MagicLinkVerifyPage({ token, verifyAction, onSuccess, onError, onBackToLogin, backToLoginHref, redirectDelay, requireConfirmation, className, texts, }: MagicLinkVerifyPageConfig): ReactElement;
 //# sourceMappingURL=MagicLinkVerifyPage.d.ts.map

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

@@ -23,13 +23,13 @@ function parseErrorMessage(error, defaultMsg) {
         return error.message;
     }
 }
-export function MagicLinkVerifyPage({ token, verifyAction, onSuccess, onError, onBackToLogin, backToLoginHref, redirectDelay = 2000, className, texts }) {
+export function MagicLinkVerifyPage({ token, verifyAction, onSuccess, onError, onBackToLogin, backToLoginHref, redirectDelay = 2000, requireConfirmation = false, className, texts }) {
     const theme = magicLinkVerifyPageTheme;
     const containerRef = useRef(null);
     const cardRef = useRef(null);
     const hasVerified = useRef(false);
     const store = useMagicLinkVerifyStore();
-    const verifyToken = useEffectEvent((tokenValue)=>{
+    const doVerify = useEffectEvent((tokenValue)=>{
         if (!tokenValue) {
             store.setStep("error");
             store.setMessage("Invalid magic link. No token provided.");
@@ -37,6 +37,7 @@ export function MagicLinkVerifyPage({ token, verifyAction, onSuccess, onError, o
         }
         if (hasVerified.current) return;
         hasVerified.current = true;
+        store.setStep("verifying");
         verifyAction.start({
             payload: {
                 token: tokenValue
@@ -67,12 +68,20 @@ export function MagicLinkVerifyPage({ token, verifyAction, onSuccess, onError, o
             }
         });
     });
-    useEffect(()=>{
+    const handleConfirmClick = useEffectEvent(()=>{
         if (token) {
-            verifyToken(token);
-        } else {
+            doVerify(token);
+        }
+    });
+    useEffect(()=>{
+        if (!token) {
             store.setStep("error");
             store.setMessage("Invalid magic link. No token provided.");
+        } else if (requireConfirmation) {
+            store.setStep("ready");
+            store.setMessage(texts?.confirmSubtitle || "Click below to verify and sign in securely.");
+        } else {
+            doVerify(token);
         }
         return ()=>{
             store.reset();
@@ -112,6 +121,40 @@ export function MagicLinkVerifyPage({ token, verifyAction, onSuccess, onError, o
             children: /*#__PURE__*/ _jsxs("div", {
                 className: theme.content.wrapper,
                 children: [
+                    store.step === "ready" && /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: theme.states.ready.iconWrapper,
+                                children: /*#__PURE__*/ _jsx("svg", {
+                                    className: theme.states.ready.icon,
+                                    fill: "none",
+                                    stroke: "currentColor",
+                                    viewBox: "0 0 24 24",
+                                    "aria-hidden": "true",
+                                    children: /*#__PURE__*/ _jsx("path", {
+                                        strokeLinecap: "round",
+                                        strokeLinejoin: "round",
+                                        strokeWidth: 2,
+                                        d: "M13 10V3L4 14h7v7l9-11h-7z"
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("h1", {
+                                className: theme.states.ready.title,
+                                children: texts?.confirmTitle || "Magic Link Verification"
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                className: theme.states.ready.subtitle,
+                                children: store.message
+                            }),
+                            /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                onClick: handleConfirmClick,
+                                className: theme.states.ready.button,
+                                children: texts?.confirmButton || "Verify & Sign In"
+                            })
+                        ]
+                    }),
                     store.step === "verifying" && /*#__PURE__*/ _jsxs(_Fragment, {
                         children: [
                             /*#__PURE__*/ _jsx("div", {

package/dist/fe/components/MagicLinkVerifyPage/store.d.ts

@@ -1,4 +1,4 @@
-type MagicLinkVerifyStep = "verifying" | "success" | "error";
+type MagicLinkVerifyStep = "ready" | "verifying" | "success" | "error";
 type MagicLinkVerifyState = {
     [key: string]: unknown;
     step: MagicLinkVerifyStep;

package/dist/fe/components/MagicLinkVerifyPage/theme.d.ts

@@ -31,6 +31,13 @@ export declare const magicLinkVerifyPageTheme: {
             title: string;
             subtitle: string;
         };
+        ready: {
+            iconWrapper: string;
+            icon: string;
+            title: string;
+            subtitle: string;
+            button: string;
+        };
     };
     backButton: string;
 };

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

@@ -30,6 +30,13 @@ export const magicLinkVerifyPageTheme = {
             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"
+        },
+        ready: {
+            iconWrapper: "w-16 h-16 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center",
+            icon: "w-8 h-8 text-blue-600 dark:text-blue-400",
+            title: "text-xl font-semibold text-zinc-900 dark:text-zinc-100",
+            subtitle: "text-sm text-zinc-500 dark:text-zinc-400",
+            button: "mt-6 w-full px-6 py-3 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 dark:text-black rounded-xl transition-all duration-200 active:scale-[0.98] shadow-lg shadow-blue-600/20 dark:shadow-blue-500/20"
         }
     },
     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.d.ts

@@ -22,6 +22,7 @@ export interface MagicLinkVerifyPageConfig {
     onBackToLogin?: () => void;
     backToLoginHref?: string;
     redirectDelay?: number;
+    requireConfirmation?: boolean;
     className?: string;
     texts?: {
         verifyingTitle?: string;
@@ -30,6 +31,9 @@ export interface MagicLinkVerifyPageConfig {
         successSubtitle?: string;
         errorTitle?: string;
         backToLogin?: string;
+        confirmTitle?: string;
+        confirmSubtitle?: string;
+        confirmButton?: string;
     };
 }
 //# sourceMappingURL=types.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nucleus-core-ts",
-	"version": "0.8.47",
+	"version": "0.8.48",
 	"description": "Production-ready, enterprise-grade TypeScript framework for building multi-tenant APIs",
 	"author": "Hidayet Can Özcan <hidayetcan@gmail.com>",
 	"license": "SEE LICENSE IN LICENSE",