@insforge/react 0.4.7 → 0.4.9

package/dist/atoms.js

@@ -106,34 +106,27 @@ function AuthPasswordStrengthIndicator({
   config
 }) {
   const requirements = createRequirements(config);
-  return /* @__PURE__ */ jsx("div", { className: "if-passwordStrength if-internal-ps6w3k", children: /* @__PURE__ */ jsx("div", { className: "if-passwordStrength-requirements", children: requirements.map((req) => /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `if-passwordStrength-requirement ${req.test(password) ? "met" : "unmet"}`,
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: "1rem",
-              height: "1rem",
-              borderRadius: "50%",
-              border: "2px solid",
-              borderColor: req.test(password) ? "transparent" : "#9ca3af",
-              backgroundColor: req.test(password) ? "#059669" : "white",
-              transition: "all 0.2s"
-            },
-            children: req.test(password) && /* @__PURE__ */ jsx(Check, { style: { width: "0.75rem", height: "0.75rem", color: "white" } })
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { children: req.label })
-      ]
-    },
-    req.label
-  )) }) });
+  return /* @__PURE__ */ jsx("div", { className: "if-passwordStrength if-internal-ps6w3k", children: /* @__PURE__ */ jsx("div", { className: "if-passwordStrength-requirements", children: requirements.map((req) => /* @__PURE__ */ jsxs("div", { className: "if-passwordStrength-requirement", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "1rem",
+          height: "1rem",
+          borderRadius: "50%",
+          border: "2px solid",
+          borderColor: req.test(password) ? "transparent" : "#9ca3af",
+          backgroundColor: req.test(password) ? "#059669" : "white",
+          transition: "all 0.2s"
+        },
+        children: req.test(password) && /* @__PURE__ */ jsx(Check, { style: { width: "0.75rem", height: "0.75rem", color: "white" } })
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { children: req.label })
+  ] }, req.label)) }) });
 }
 function createRequirements(config) {
   const requirements = [];
@@ -201,11 +194,12 @@ function AuthPasswordField({
   onFocus,
   ...props
 }) {
+  const [searchParams] = useSearchParams();
   const [showPassword, setShowPassword] = useState(false);
   const [showStrength, setShowStrength] = useState(false);
   const resolvedForgotPasswordHref = useMemo(
-    () => forgotPasswordLink ? resolveAuthPath(forgotPasswordLink.href) : void 0,
-    [forgotPasswordLink]
+    () => forgotPasswordLink ? resolveAuthUrl(forgotPasswordLink.href, searchParams) : void 0,
+    [forgotPasswordLink, searchParams]
   );
   const handleFocus = (e) => {
     if (showStrengthIndicator) {
@@ -543,7 +537,6 @@ function AuthOAuthProviders({
 function AuthVerificationCodeInput({
   length = 6,
   value,
-  email,
   onChange,
   disabled = false,
   onComplete
@@ -591,33 +584,25 @@ function AuthVerificationCodeInput({
       }
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: "if-verificationCode if-internal-vc8m4p", children: [
-    /* @__PURE__ */ jsxs("p", { className: "if-verificationCode-description", children: [
-      "We've sent a verification code to your inbox at",
-      " ",
-      /* @__PURE__ */ jsx("span", { className: "if-verificationCode-email", children: email }),
-      ". Enter it below to proceed."
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "if-verificationCode-inputContainer", 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: "if-verificationCode-input",
-        autoComplete: "one-time-code"
+  return /* @__PURE__ */ jsx("div", { className: "if-verificationCode-inputContainer", children: Array.from({ length }).map((_, index) => /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: (el) => {
+        inputRefs.current[index] = el;
       },
-      index
-    )) })
-  ] });
+      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: "if-verificationCode-input",
+      autoComplete: "one-time-code"
+    },
+    index
+  )) });
 }
 var InsforgeContext = createContext(void 0);
 function useInsforge() {
@@ -629,28 +614,20 @@ function useInsforge() {
 }
 function AuthEmailVerificationStep({
   email,
-  method = "code",
-  onVerifyCode
+  method,
+  onVerifyCode,
+  emailSent = false
 }) {
   const { sendVerificationEmail } = useInsforge();
   const [resendDisabled, setResendDisabled] = useState(true);
-  const [resendCountdown, setResendCountdown] = useState(60);
+  const [resendCountdown, setResendCountdown] = useState(emailSent ? 60 : 0);
   const [isSending, setIsSending] = useState(false);
   const [verificationCode, setVerificationCode] = useState("");
   const [isVerifying, setIsVerifying] = useState(false);
-  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 {
-        await sendVerificationEmail(email);
-      } catch (error) {
-        console.error("Failed to send verification email:", error);
-      }
-    };
-    void sendInitialEmail();
-  }, [email, sendVerificationEmail]);
+  const isLinkMethod = method === "link";
+  const displayDescription = isLinkMethod ? "We've sent an email to {email}. Please check your email to confirm your account before signing in. The confirmation link expires in 10 minutes." : "We've sent a verification code to your inbox at {email}. Enter it below to proceed.";
   useEffect(() => {
-    if (resendCountdown > 0) {
+    if (emailSent && resendCountdown > 0) {
       const timer = setInterval(() => {
         setResendCountdown((prev) => {
           if (prev <= 1) {
@@ -662,7 +639,7 @@ function AuthEmailVerificationStep({
       }, 1e3);
       return () => clearInterval(timer);
     }
-  }, [resendCountdown]);
+  }, [emailSent, resendCountdown]);
   const handleResend = async () => {
     setResendDisabled(true);
     setResendCountdown(60);
@@ -688,23 +665,29 @@ function AuthEmailVerificationStep({
       setVerificationCode("");
     }
   };
-  const displayDescription = defaultDescription;
-  const isLinkMethod = method === "link";
   return /* @__PURE__ */ jsxs("div", { className: "if-verificationStep", children: [
-    /* @__PURE__ */ jsx("p", { className: "if-verificationStep-description", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxs("span", { children: [
-      part,
-      index < array.length - 1 && /* @__PURE__ */ jsx("span", { className: "if-verificationCode-email", children: email })
-    ] }, index)) }),
+    isLinkMethod && /* @__PURE__ */ jsxs("div", { className: "if-verificationStep-descriptionContainer", children: [
+      /* @__PURE__ */ jsx("p", { className: "if-verificationStep-descriptionTitle", children: "Verify Your Email" }),
+      /* @__PURE__ */ jsx("p", { className: "if-verificationStep-description", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxs("span", { children: [
+        part,
+        index < array.length - 1 && /* @__PURE__ */ jsx("span", { className: "if-verificationLink-email", children: email })
+      ] }, index)) })
+    ] }),
     !isLinkMethod && /* @__PURE__ */ jsxs("div", { className: "if-verificationStep-codeContainer", children: [
-      /* @__PURE__ */ jsx("div", { className: "if-verificationStep-codeInputWrapper", children: /* @__PURE__ */ jsx(
-        AuthVerificationCodeInput,
-        {
-          value: verificationCode,
-          onChange: setVerificationCode,
-          email,
-          disabled: isVerifying
-        }
-      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "if-verificationStep-codeInputWrapper", children: [
+        /* @__PURE__ */ jsx("p", { className: "if-verificationStep-codeDescription", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxs("span", { children: [
+          part,
+          index < array.length - 1 && /* @__PURE__ */ jsx("span", { className: "if-verificationCode-email", children: email })
+        ] }, index)) }),
+        /* @__PURE__ */ jsx(
+          AuthVerificationCodeInput,
+          {
+            value: verificationCode,
+            onChange: setVerificationCode,
+            disabled: isVerifying
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsx(
         AuthSubmitButton,
         {
@@ -714,7 +697,7 @@ function AuthEmailVerificationStep({
           onClick: () => {
             void handleSubmit();
           },
-          children: isVerifying ? "Verifying..." : "Verify Code"
+          children: isVerifying ? "Verifying..." : "Continue"
         }
       )
     ] }),
@@ -746,6 +729,8 @@ function AuthResetPasswordVerificationStep({
   const [isSending, setIsSending] = useState(false);
   const [verificationCode, setVerificationCode] = useState("");
   const [isVerifying, setIsVerifying] = useState(false);
+  const isLinkMethod = method === "link";
+  const displayDescription = isLinkMethod ? "We have sent an email to {email}. Please check your email to reset your password. The link expires in 10 minutes." : "We've sent a reset password code to your inbox at {email}. Enter it below to proceed.";
   useEffect(() => {
     if (resendCountdown > 0) {
       const timer = setInterval(() => {
@@ -785,17 +770,20 @@ function AuthResetPasswordVerificationStep({
       setVerificationCode("");
     }
   };
-  const isLinkMethod = method === "link";
-  const description = isLinkMethod ? `We've sent a password reset link to ${email}. Please check your email and click the link to reset your password. The link will expire in 10 minutes.` : `We've sent a 6-digit verification code to ${email}. Please enter it below to reset your password. The code will expire in 10 minutes.`;
   return /* @__PURE__ */ jsxs("div", { className: "if-verificationStep", children: [
-    /* @__PURE__ */ jsx("p", { className: "if-verificationStep-description", children: description }),
+    isLinkMethod && /* @__PURE__ */ jsxs("div", { className: "if-verificationStep-descriptionContainer", children: [
+      /* @__PURE__ */ jsx("p", { className: "if-verificationStep-descriptionTitle", children: "Check Your Email" }),
+      /* @__PURE__ */ jsx("p", { className: "if-verificationStep-description", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxs("span", { children: [
+        part,
+        index < array.length - 1 && /* @__PURE__ */ jsx("span", { className: "if-verificationLink-email", children: email })
+      ] }, index)) })
+    ] }),
     !isLinkMethod && /* @__PURE__ */ jsxs("div", { className: "if-verificationStep-codeContainer", children: [
       /* @__PURE__ */ jsx("div", { className: "if-verificationStep-codeInputWrapper", children: /* @__PURE__ */ jsx(
         AuthVerificationCodeInput,
         {
           value: verificationCode,
           onChange: setVerificationCode,
-          email,
           disabled: isVerifying
         }
       ) }),