@insforge/react 0.3.0 → 0.3.2

package/dist/components.js

@@ -768,7 +768,6 @@ function AuthVerificationCodeInput({
 }
 function AuthEmailVerificationStep({
   email,
-  title = "Verify Your Email",
   description,
   method = "code",
   onVerifyCode
@@ -845,29 +844,29 @@ function AuthEmailVerificationStep({
     }
   };
   const displayDescription = description || defaultDescription;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col gap-6 items-center", children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-black dark:text-white", children: title }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-neutral-600 dark:text-neutral-400 text-sm leading-relaxed", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-        part,
-        index < array.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-black dark:text-white", children: email })
-      ] }, index)) }),
-      method === "code" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 mt-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AuthVerificationCodeInput,
-          {
-            value: verificationCode,
-            onChange: setVerificationCode,
-            email,
-            disabled: isVerifying,
-            onComplete: (code) => {
-              void handleVerifyCode(code);
-            }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 items-stretch", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+      part,
+      index < array.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-black dark:text-white", children: email })
+    ] }, index)) }),
+    verificationError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-3 py-2 pr-2 bg-red-50 border-2 border-red-600 rounded", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-600 flex-1", children: verificationError })
+    ] }) }),
+    method === "code" && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        AuthVerificationCodeInput,
+        {
+          value: verificationCode,
+          onChange: setVerificationCode,
+          email,
+          disabled: isVerifying,
+          onComplete: (code) => {
+            void handleVerifyCode(code);
           }
-        ),
-        verificationError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-600 dark:text-red-400 text-center", children: verificationError }),
-        isVerifying && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: "Verifying..." })
-      ] })
+        }
+      ),
+      isVerifying && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: "Verifying..." })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full text-sm text-center text-neutral-600 dark:text-neutral-400", children: [
       "Didn't receive the email?",
@@ -912,7 +911,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__ */ jsxRuntime.jsxs(
     AuthContainer,
@@ -925,8 +928,8 @@ function SignInForm({
         /* @__PURE__ */ jsxRuntime.jsx(
           AuthHeader,
           {
-            title,
-            subtitle,
+            title: showVerificationStep ? "Verify Your Email" : title,
+            subtitle: showVerificationStep ? "" : subtitle,
             appearance: {
               containerClassName: appearance.header?.container,
               titleClassName: appearance.header?.title,
@@ -941,7 +944,14 @@ function SignInForm({
             className: appearance.errorBanner
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        showVerificationStep ? /* @__PURE__ */ jsxRuntime.jsx(
+          AuthEmailVerificationStep,
+          {
+            email,
+            description: verificationDescription,
+            onVerifyCode
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(
           "form",
           {
             onSubmit,
@@ -1000,39 +1010,41 @@ function SignInForm({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AuthLink,
-          {
-            text: signUpText,
-            linkText: signUpLinkText,
-            href: signUpUrl,
-            appearance: {
-              containerClassName: appearance.link?.container,
-              linkClassName: appearance.link?.link
-            }
-          }
-        ),
-        availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            AuthDivider,
-            {
-              text: dividerText,
-              className: appearance.divider
-            }
-          ),
+        !showVerificationStep && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              AuthDivider,
+              {
+                text: dividerText,
+                className: appearance.divider
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              AuthOAuthProviders,
+              {
+                providers: availableProviders,
+                onClick: onOAuthClick,
+                disabled: loading || oauthLoading !== null,
+                loading: oauthLoading,
+                appearance: {
+                  containerClassName: appearance.oauth?.container,
+                  buttonClassName: appearance.oauth?.button
+                }
+              }
+            )
+          ] })
         ] })
       ]
     }
@@ -1114,7 +1126,7 @@ function SignIn({
   if (!emailConfig) {
     return null;
   }
-  return step === "form" ? /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     SignInForm,
     {
       email,
@@ -1128,14 +1140,10 @@ function SignIn({
       availableProviders: emailConfig?.oAuthProviders || [],
       onOAuthClick: handleOAuth,
       emailAuthConfig: emailConfig,
+      showVerificationStep: step === "awaiting-verification",
+      onVerifyCode: handleVerifyCode,
       ...uiProps
     }
-  ) : /* @__PURE__ */ jsxRuntime.jsx(
-    AuthEmailVerificationStep,
-    {
-      email,
-      onVerifyCode: handleVerifyCode
-    }
   );
 }
 function SignUpForm({
@@ -1162,7 +1170,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__ */ jsxRuntime.jsxs(
     AuthContainer,
@@ -1175,8 +1187,8 @@ function SignUpForm({
         /* @__PURE__ */ jsxRuntime.jsx(
           AuthHeader,
           {
-            title,
-            subtitle,
+            title: showVerificationStep ? "Verify Your Email" : title,
+            subtitle: showVerificationStep ? "" : subtitle,
             appearance: {
               containerClassName: appearance.header?.container,
               titleClassName: appearance.header?.title,
@@ -1191,7 +1203,14 @@ function SignUpForm({
             className: appearance.errorBanner
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        showVerificationStep ? /* @__PURE__ */ jsxRuntime.jsx(
+          AuthEmailVerificationStep,
+          {
+            email,
+            description: verificationDescription,
+            onVerifyCode
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(
           "form",
           {
             onSubmit,
@@ -1248,39 +1267,41 @@ function SignUpForm({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AuthLink,
-          {
-            text: signInText,
-            linkText: signInLinkText,
-            href: signInUrl,
-            appearance: {
-              containerClassName: appearance.link?.container,
-              linkClassName: appearance.link?.link
-            }
-          }
-        ),
-        availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            AuthDivider,
-            {
-              text: dividerText,
-              className: appearance.divider
-            }
-          ),
+        !showVerificationStep && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            AuthOAuthProviders,
+            AuthLink,
             {
-              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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              AuthDivider,
+              {
+                text: dividerText,
+                className: appearance.divider
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              AuthOAuthProviders,
+              {
+                providers: availableProviders,
+                onClick: onOAuthClick,
+                disabled: loading || oauthLoading !== null,
+                loading: oauthLoading,
+                appearance: {
+                  containerClassName: appearance.oauth?.container,
+                  buttonClassName: appearance.oauth?.button
+                }
+              }
+            )
+          ] })
         ] })
       ]
     }
@@ -1417,7 +1438,7 @@ function SignUp({
   if (!emailConfig) {
     return null;
   }
-  return step === "form" ? /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     SignUpForm,
     {
       email,
@@ -1431,14 +1452,10 @@ function SignUp({
       availableProviders: emailConfig?.oAuthProviders || [],
       onOAuthClick: handleOAuth,
       emailAuthConfig: emailConfig,
+      showVerificationStep: step === "awaiting-verification",
+      onVerifyCode: handleVerifyCode,
       ...uiProps
     }
-  ) : /* @__PURE__ */ jsxRuntime.jsx(
-    AuthEmailVerificationStep,
-    {
-      email,
-      onVerifyCode: handleVerifyCode
-    }
   );
 }
 function ForgotPasswordForm({
@@ -1565,6 +1582,7 @@ function ResetPasswordForm({
   onSubmit,
   error,
   loading = false,
+  success = false,
   emailAuthConfig,
   appearance = {},
   title = "Reset Password",
@@ -1576,8 +1594,27 @@ function ResetPasswordForm({
   submitButtonText = "Reset Password",
   loadingButtonText = "Resetting...",
   backToSignInText = "",
-  backToSignInUrl = "/sign-in"
+  backToSignInUrl = "/sign-in",
+  successTitle = "Password Reset Successful!",
+  successMessage = "Your password has been successfully reset. You can now sign in with your new password."
 }) {
+  if (success) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      AuthContainer,
+      {
+        appearance: {
+          containerClassName: appearance.container,
+          cardClassName: appearance.card
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-8 h-8 text-green-600 dark:text-green-400", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 13l4 4L19 7" }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold text-black dark:text-white text-center", children: successTitle }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: successMessage }),
+          /* @__PURE__ */ jsxRuntime.jsx("a", { href: backToSignInUrl, className: "mt-4 text-black dark:text-white font-medium", children: "Back to Sign In" })
+        ] })
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     AuthContainer,
     {
@@ -1661,13 +1698,18 @@ function ResetPasswordForm({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: appearance.backToSignIn || "text-center text-sm text-gray-600 dark:text-gray-400", children: [
-          backToSignInText && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-            backToSignInText,
-            " "
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("a", { href: backToSignInUrl, className: "text-black dark:text-white font-medium", children: "Back to Sign In" })
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AuthLink,
+          {
+            text: backToSignInText,
+            linkText: "Back to Sign In",
+            href: backToSignInUrl,
+            appearance: {
+              containerClassName: appearance.link?.container,
+              linkClassName: appearance.link?.link
+            }
+          }
+        )
       ]
     }
   );
@@ -1685,6 +1727,7 @@ function ResetPassword({
   const [confirmPassword, setConfirmPassword] = react.useState("");
   const [error, setError] = react.useState("");
   const [loading, setLoading] = react.useState(false);
+  const [success, setSuccess] = react.useState(false);
   async function handleSubmit(e) {
     e.preventDefault();
     setLoading(true);
@@ -1721,6 +1764,7 @@ function ResetPassword({
     try {
       const result = await resetPassword(token, newPassword);
       if (result?.message) {
+        setSuccess(true);
         if (onSuccess) {
           onSuccess(result.redirectTo);
         }
@@ -1754,6 +1798,7 @@ function ResetPassword({
       onSubmit: handleSubmit,
       error,
       loading,
+      success,
       emailAuthConfig: emailConfig,
       backToSignInUrl,
       ...uiProps
@@ -1870,10 +1915,14 @@ function ForgotPassword({
       setIsSendingCode(false);
     }
   }, [email, sendPasswordResetCode]);
-  function handlePasswordResetSuccess() {
+  function handlePasswordResetSuccess(redirectTo) {
+    const targetUrl = redirectTo || backToSignInUrl;
     if (onSuccess) {
       onSuccess();
     }
+    setTimeout(() => {
+      window.location.href = targetUrl;
+    }, 1500);
   }
   if (!emailConfig) {
     return null;