@insforge/react 0.3.0 → 0.3.1

package/dist/forms.mjs

@@ -2,8 +2,8 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { AlertTriangle, EyeOff, Eye, Loader2, CircleCheck, Check } from 'lucide-react';
-import { createContext, useState } from 'react';
-import '@insforge/sdk';
+import { createContext, useState, useEffect, useContext, useRef } from 'react';
+import { createClient } from '@insforge/sdk';
 
 function AuthBranding() {
   return /* @__PURE__ */ jsxs("div", { className: "bg-[#FAFAFA] px-2 py-4 flex flex-row justify-center items-center gap-1", children: [
@@ -643,9 +643,221 @@ function AuthOAuthProviders({
     provider
   )) });
 }
-createContext(
+function AuthVerificationCodeInput({
+  length = 6,
+  value,
+  email,
+  onChange,
+  disabled = false,
+  onComplete,
+  appearance = {}
+}) {
+  const inputRefs = useRef([]);
+  const handleChange = (index, digit) => {
+    if (digit.length > 1) return;
+    if (digit && !/^\d$/.test(digit)) return;
+    const newValue = value.split("");
+    newValue[index] = digit;
+    const updatedValue = newValue.join("");
+    onChange(updatedValue);
+    if (digit && index < length - 1) {
+      inputRefs.current[index + 1]?.focus();
+    }
+    if (digit && index === length - 1 && updatedValue.length === length && onComplete) {
+      onComplete(updatedValue);
+    }
+  };
+  const handleKeyDown = (index, e) => {
+    if (e.key === "Backspace") {
+      if (!value[index] && index > 0) {
+        inputRefs.current[index - 1]?.focus();
+      } else {
+        handleChange(index, "");
+      }
+    } else if (e.key === "ArrowLeft" && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    } else if (e.key === "ArrowRight" && index < length - 1) {
+      inputRefs.current[index + 1]?.focus();
+    }
+  };
+  const handlePaste = (e) => {
+    e.preventDefault();
+    const pastedData = e.clipboardData.getData("text/plain").trim();
+    if (/^\d+$/.test(pastedData) && pastedData.length === length) {
+      onChange(pastedData);
+      inputRefs.current[length - 1]?.focus();
+      if (onComplete) {
+        onComplete(pastedData);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn(
+    "flex flex-col justify-center items-center gap-6",
+    appearance.containerClassName
+  ), children: [
+    /* @__PURE__ */ jsxs("p", { className: "text-sm font-normal text-[#525252] leading-5", children: [
+      "We've sent a verification code to your inbox at",
+      " ",
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-black leading-5", children: email }),
+      ". Enter it below to proceed."
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-3 justify-center items-center", children: Array.from({ length }).map((_, index) => /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: (el) => {
+          inputRefs.current[index] = el;
+        },
+        type: "text",
+        inputMode: "numeric",
+        maxLength: 1,
+        value: value[index] || "",
+        onChange: (e) => handleChange(index, e.target.value),
+        onKeyDown: (e) => handleKeyDown(index, e),
+        onPaste: handlePaste,
+        disabled,
+        className: cn(
+          "w-full h-12 px-3 py-2 rounded border border-[#E0E0E0] bg-white",
+          "text-center text-base font-semibold leading-5 text-black",
+          "transition-all duration-200 outline-none",
+          "focus:border-black focus:shadow-[0_0_0_2px_rgba(0,0,0,0.1)]",
+          "disabled:bg-[#F5F5F5] disabled:cursor-not-allowed disabled:opacity-60",
+          appearance.inputClassName
+        ),
+        autoComplete: "one-time-code"
+      },
+      index
+    )) })
+  ] });
+}
+var InsforgeContext = createContext(
   void 0
 );
+function useInsforge() {
+  const context = useContext(InsforgeContext);
+  if (!context) {
+    throw new Error("useInsforge must be used within InsforgeProvider");
+  }
+  return context;
+}
+function AuthEmailVerificationStep({
+  email,
+  description,
+  method = "code",
+  onVerifyCode
+}) {
+  const { baseUrl } = useInsforge();
+  const [insforge] = useState(() => createClient({ baseUrl }));
+  const [resendDisabled, setResendDisabled] = useState(true);
+  const [resendCountdown, setResendCountdown] = useState(60);
+  const [isSending, setIsSending] = useState(false);
+  const [verificationCode, setVerificationCode] = useState("");
+  const [isVerifying, setIsVerifying] = useState(false);
+  const [verificationError, setVerificationError] = useState("");
+  const defaultDescription = method === "code" ? "We've sent a 6-digit verification code to {email}. Please enter it below to verify your account. The code will expire in 10 minutes." : "We've sent a verification link to {email}. Please check your email and click the link to verify your account. The link will expire in 10 minutes.";
+  useEffect(() => {
+    const sendInitialEmail = async () => {
+      try {
+        if (method === "code") {
+          await insforge.auth.sendVerificationCode({ email });
+        } else {
+          await insforge.auth.sendVerificationLink({ email });
+        }
+      } catch {
+      }
+    };
+    void sendInitialEmail();
+  }, [email, method, insforge.auth]);
+  useEffect(() => {
+    if (resendCountdown > 0) {
+      const timer = setInterval(() => {
+        setResendCountdown((prev) => {
+          if (prev <= 1) {
+            setResendDisabled(false);
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1e3);
+      return () => clearInterval(timer);
+    }
+  }, [resendCountdown]);
+  const handleResend = async () => {
+    setResendDisabled(true);
+    setResendCountdown(60);
+    setIsSending(true);
+    setVerificationError("");
+    try {
+      if (method === "code") {
+        await insforge.auth.sendVerificationCode({ email });
+      } else {
+        await insforge.auth.sendVerificationLink({ email });
+      }
+    } catch {
+      setResendDisabled(false);
+      setResendCountdown(0);
+    } finally {
+      setIsSending(false);
+    }
+  };
+  const handleVerifyCode = async (code) => {
+    if (!onVerifyCode) {
+      return;
+    }
+    setIsVerifying(true);
+    setVerificationError("");
+    try {
+      await onVerifyCode(code);
+    } catch (error) {
+      setVerificationError(
+        error instanceof Error ? error.message : "Invalid verification code. Please try again."
+      );
+      setVerificationCode("");
+    } finally {
+      setIsVerifying(false);
+    }
+  };
+  const displayDescription = description || defaultDescription;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 items-stretch", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxs("span", { children: [
+      part,
+      index < array.length - 1 && /* @__PURE__ */ jsx("span", { className: "font-medium text-black dark:text-white", children: email })
+    ] }, index)) }),
+    verificationError && /* @__PURE__ */ jsx("div", { className: "pl-3 py-2 pr-2 bg-red-50 border-2 border-red-600 rounded", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("svg", { className: "w-6 h-6 text-red-500 shrink-0", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { 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("p", { className: "text-sm text-red-600 flex-1", children: verificationError })
+    ] }) }),
+    method === "code" && /* @__PURE__ */ jsxs("div", { className: "w-full bg-neutral-100 dark:bg-neutral-800 rounded-lg px-4 pt-4 pb-6 flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsx(
+        AuthVerificationCodeInput,
+        {
+          value: verificationCode,
+          onChange: setVerificationCode,
+          email,
+          disabled: isVerifying,
+          onComplete: (code) => {
+            void handleVerifyCode(code);
+          }
+        }
+      ),
+      isVerifying && /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: "Verifying..." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "w-full text-sm text-center text-neutral-600 dark:text-neutral-400", children: [
+      "Didn't receive the email?",
+      " ",
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => {
+            void handleResend();
+          },
+          disabled: resendDisabled || isSending,
+          className: "text-black dark:text-white font-medium transition-colors disabled:cursor-not-allowed cursor-pointer hover:underline disabled:no-underline disabled:opacity-50",
+          children: isSending ? "Sending..." : resendDisabled ? `Retry in (${resendCountdown}s)` : "Click to resend"
+        }
+      )
+    ] })
+  ] });
+}
 function SignInForm({
   email,
   password,
@@ -672,7 +884,11 @@ function SignInForm({
   signUpText = "Don't have an account?",
   signUpLinkText = "Sign Up Now",
   signUpUrl = "/sign-up",
-  dividerText = "or"
+  dividerText = "or",
+  // Email verification step props
+  showVerificationStep = false,
+  onVerifyCode,
+  verificationDescription
 }) {
   return /* @__PURE__ */ jsxs(
     AuthContainer,
@@ -685,8 +901,8 @@ function SignInForm({
         /* @__PURE__ */ jsx(
           AuthHeader,
           {
-            title,
-            subtitle,
+            title: showVerificationStep ? "Verify Your Email" : title,
+            subtitle: showVerificationStep ? "" : subtitle,
             appearance: {
               containerClassName: appearance.header?.container,
               titleClassName: appearance.header?.title,
@@ -701,7 +917,14 @@ function SignInForm({
             className: appearance.errorBanner
           }
         ),
-        /* @__PURE__ */ jsxs(
+        showVerificationStep ? /* @__PURE__ */ jsx(
+          AuthEmailVerificationStep,
+          {
+            email,
+            description: verificationDescription,
+            onVerifyCode
+          }
+        ) : /* @__PURE__ */ jsxs(
           "form",
           {
             onSubmit,
@@ -760,39 +983,41 @@ function SignInForm({
             ]
           }
         ),
-        /* @__PURE__ */ jsx(
-          AuthLink,
-          {
-            text: signUpText,
-            linkText: signUpLinkText,
-            href: signUpUrl,
-            appearance: {
-              containerClassName: appearance.link?.container,
-              linkClassName: appearance.link?.link
-            }
-          }
-        ),
-        availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            AuthDivider,
-            {
-              text: dividerText,
-              className: appearance.divider
-            }
-          ),
+        !showVerificationStep && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
-            AuthOAuthProviders,
+            AuthLink,
             {
-              providers: availableProviders,
-              onClick: onOAuthClick,
-              disabled: loading || oauthLoading !== null,
-              loading: oauthLoading,
+              text: signUpText,
+              linkText: signUpLinkText,
+              href: signUpUrl,
               appearance: {
-                containerClassName: appearance.oauth?.container,
-                buttonClassName: appearance.oauth?.button
+                containerClassName: appearance.link?.container,
+                linkClassName: appearance.link?.link
               }
             }
-          )
+          ),
+          availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              AuthDivider,
+              {
+                text: dividerText,
+                className: appearance.divider
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              AuthOAuthProviders,
+              {
+                providers: availableProviders,
+                onClick: onOAuthClick,
+                disabled: loading || oauthLoading !== null,
+                loading: oauthLoading,
+                appearance: {
+                  containerClassName: appearance.oauth?.container,
+                  buttonClassName: appearance.oauth?.button
+                }
+              }
+            )
+          ] })
         ] })
       ]
     }
@@ -822,7 +1047,11 @@ function SignUpForm({
   signInText = "Already have an account?",
   signInLinkText = "Login Now",
   signInUrl = "/sign-in",
-  dividerText = "or"
+  dividerText = "or",
+  // Email verification step props
+  showVerificationStep = false,
+  onVerifyCode,
+  verificationDescription
 }) {
   return /* @__PURE__ */ jsxs(
     AuthContainer,
@@ -835,8 +1064,8 @@ function SignUpForm({
         /* @__PURE__ */ jsx(
           AuthHeader,
           {
-            title,
-            subtitle,
+            title: showVerificationStep ? "Verify Your Email" : title,
+            subtitle: showVerificationStep ? "" : subtitle,
             appearance: {
               containerClassName: appearance.header?.container,
               titleClassName: appearance.header?.title,
@@ -851,7 +1080,14 @@ function SignUpForm({
             className: appearance.errorBanner
           }
         ),
-        /* @__PURE__ */ jsxs(
+        showVerificationStep ? /* @__PURE__ */ jsx(
+          AuthEmailVerificationStep,
+          {
+            email,
+            description: verificationDescription,
+            onVerifyCode
+          }
+        ) : /* @__PURE__ */ jsxs(
           "form",
           {
             onSubmit,
@@ -908,39 +1144,41 @@ function SignUpForm({
             ]
           }
         ),
-        /* @__PURE__ */ jsx(
-          AuthLink,
-          {
-            text: signInText,
-            linkText: signInLinkText,
-            href: signInUrl,
-            appearance: {
-              containerClassName: appearance.link?.container,
-              linkClassName: appearance.link?.link
-            }
-          }
-        ),
-        availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
+        !showVerificationStep && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
-            AuthDivider,
+            AuthLink,
             {
-              text: dividerText,
-              className: appearance.divider
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            AuthOAuthProviders,
-            {
-              providers: availableProviders,
-              onClick: onOAuthClick,
-              disabled: loading || oauthLoading !== null,
-              loading: oauthLoading,
+              text: signInText,
+              linkText: signInLinkText,
+              href: signInUrl,
               appearance: {
-                containerClassName: appearance.oauth?.container,
-                buttonClassName: appearance.oauth?.button
+                containerClassName: appearance.link?.container,
+                linkClassName: appearance.link?.link
               }
             }
-          )
+          ),
+          availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              AuthDivider,
+              {
+                text: dividerText,
+                className: appearance.divider
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              AuthOAuthProviders,
+              {
+                providers: availableProviders,
+                onClick: onOAuthClick,
+                disabled: loading || oauthLoading !== null,
+                loading: oauthLoading,
+                appearance: {
+                  containerClassName: appearance.oauth?.container,
+                  buttonClassName: appearance.oauth?.button
+                }
+              }
+            )
+          ] })
         ] })
       ]
     }
@@ -1166,13 +1404,18 @@ function ResetPasswordForm({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs("p", { className: appearance.backToSignIn || "text-center text-sm text-gray-600 dark:text-gray-400", children: [
-          backToSignInText && /* @__PURE__ */ jsxs("span", { children: [
-            backToSignInText,
-            " "
-          ] }),
-          /* @__PURE__ */ jsx("a", { href: backToSignInUrl, className: "text-black dark:text-white font-medium", children: "Back to Sign In" })
-        ] })
+        /* @__PURE__ */ jsx(
+          AuthLink,
+          {
+            text: backToSignInText,
+            linkText: "Back to Sign In",
+            href: backToSignInUrl,
+            appearance: {
+              containerClassName: appearance.link?.container,
+              linkClassName: appearance.link?.link
+            }
+          }
+        )
       ]
     }
   );