@insforge/react 0.4.8 → 0.4.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/README.md +55 -95
  2. package/dist/atoms.cjs +31 -46
  3. package/dist/atoms.cjs.map +1 -1
  4. package/dist/atoms.d.cts +3 -2
  5. package/dist/atoms.d.ts +3 -2
  6. package/dist/atoms.js +31 -46
  7. package/dist/atoms.js.map +1 -1
  8. package/dist/components.cjs +71 -59
  9. package/dist/components.cjs.map +1 -1
  10. package/dist/components.js +71 -59
  11. package/dist/components.js.map +1 -1
  12. package/dist/forms.cjs +53 -55
  13. package/dist/forms.cjs.map +1 -1
  14. package/dist/forms.d.cts +2 -4
  15. package/dist/forms.d.ts +2 -4
  16. package/dist/forms.js +53 -55
  17. package/dist/forms.js.map +1 -1
  18. package/dist/hooks.cjs.map +1 -1
  19. package/dist/hooks.js.map +1 -1
  20. package/dist/index.cjs +80 -63
  21. package/dist/index.cjs.map +1 -1
  22. package/dist/index.d.cts +1 -4
  23. package/dist/index.d.ts +1 -4
  24. package/dist/index.js +80 -63
  25. package/dist/index.js.map +1 -1
  26. package/dist/styles.css +0 -8
  27. package/package.json +2 -2
package/dist/forms.d.cts CHANGED
@@ -12,7 +12,6 @@ interface SignInFormProps {
12
12
  error?: string;
13
13
  loading?: boolean;
14
14
  oauthLoading?: OAuthProvidersSchema | null;
15
- availableProviders?: OAuthProvidersSchema[];
16
15
  onOAuthClick?: (provider: OAuthProvidersSchema) => void;
17
16
  authConfig: AuthConfig;
18
17
  title?: string;
@@ -35,7 +34,7 @@ interface SignInFormProps {
35
34
  /**
36
35
  * Pre-built sign-in form component (UI only, no business logic).
37
36
  */
38
- declare function SignInForm({ email, password, onEmailChange, onPasswordChange, onSubmit, error, loading, oauthLoading, availableProviders, onOAuthClick, authConfig, title, subtitle, emailLabel, emailPlaceholder, passwordLabel, passwordPlaceholder, forgotPasswordText, forgotPasswordUrl, submitButtonText, loadingButtonText, signUpText, signUpLinkText, signUpUrl, dividerText, showVerificationStep, onVerifyCode, }: SignInFormProps): react_jsx_runtime.JSX.Element;
37
+ declare function SignInForm({ email, password, onEmailChange, onPasswordChange, onSubmit, error, loading, oauthLoading, onOAuthClick, authConfig, title, subtitle, emailLabel, emailPlaceholder, passwordLabel, passwordPlaceholder, forgotPasswordText, forgotPasswordUrl, submitButtonText, loadingButtonText, signUpText, signUpLinkText, signUpUrl, dividerText, showVerificationStep, onVerifyCode, }: SignInFormProps): react_jsx_runtime.JSX.Element;
39
38
 
40
39
  interface SignUpFormProps {
41
40
  email: string;
@@ -46,7 +45,6 @@ interface SignUpFormProps {
46
45
  error?: string;
47
46
  loading?: boolean;
48
47
  oauthLoading?: OAuthProvidersSchema | null;
49
- availableProviders?: OAuthProvidersSchema[];
50
48
  onOAuthClick?: (provider: OAuthProvidersSchema) => void;
51
49
  authConfig: AuthConfig;
52
50
  title?: string;
@@ -67,7 +65,7 @@ interface SignUpFormProps {
67
65
  /**
68
66
  * Pre-built sign-up form component (UI only, no business logic).
69
67
  */
70
- declare function SignUpForm({ email, password, onEmailChange, onPasswordChange, onSubmit, error, loading, oauthLoading, availableProviders, onOAuthClick, authConfig, title, subtitle, emailLabel, emailPlaceholder, passwordLabel, passwordPlaceholder, submitButtonText, loadingButtonText, signInText, signInLinkText, signInUrl, dividerText, showVerificationStep, onVerifyCode, }: SignUpFormProps): react_jsx_runtime.JSX.Element;
68
+ declare function SignUpForm({ email, password, onEmailChange, onPasswordChange, onSubmit, error, loading, oauthLoading, onOAuthClick, authConfig, title, subtitle, emailLabel, emailPlaceholder, passwordLabel, passwordPlaceholder, submitButtonText, loadingButtonText, signInText, signInLinkText, signInUrl, dividerText, showVerificationStep, onVerifyCode, }: SignUpFormProps): react_jsx_runtime.JSX.Element;
71
69
 
72
70
  type ResetPasswordMethod = 'code' | 'link';
73
71
  interface ForgotPasswordFormProps {
package/dist/forms.d.ts CHANGED
@@ -12,7 +12,6 @@ interface SignInFormProps {
12
12
  error?: string;
13
13
  loading?: boolean;
14
14
  oauthLoading?: OAuthProvidersSchema | null;
15
- availableProviders?: OAuthProvidersSchema[];
16
15
  onOAuthClick?: (provider: OAuthProvidersSchema) => void;
17
16
  authConfig: AuthConfig;
18
17
  title?: string;
@@ -35,7 +34,7 @@ interface SignInFormProps {
35
34
  /**
36
35
  * Pre-built sign-in form component (UI only, no business logic).
37
36
  */
38
- declare function SignInForm({ email, password, onEmailChange, onPasswordChange, onSubmit, error, loading, oauthLoading, availableProviders, onOAuthClick, authConfig, title, subtitle, emailLabel, emailPlaceholder, passwordLabel, passwordPlaceholder, forgotPasswordText, forgotPasswordUrl, submitButtonText, loadingButtonText, signUpText, signUpLinkText, signUpUrl, dividerText, showVerificationStep, onVerifyCode, }: SignInFormProps): react_jsx_runtime.JSX.Element;
37
+ declare function SignInForm({ email, password, onEmailChange, onPasswordChange, onSubmit, error, loading, oauthLoading, onOAuthClick, authConfig, title, subtitle, emailLabel, emailPlaceholder, passwordLabel, passwordPlaceholder, forgotPasswordText, forgotPasswordUrl, submitButtonText, loadingButtonText, signUpText, signUpLinkText, signUpUrl, dividerText, showVerificationStep, onVerifyCode, }: SignInFormProps): react_jsx_runtime.JSX.Element;
39
38
 
40
39
  interface SignUpFormProps {
41
40
  email: string;
@@ -46,7 +45,6 @@ interface SignUpFormProps {
46
45
  error?: string;
47
46
  loading?: boolean;
48
47
  oauthLoading?: OAuthProvidersSchema | null;
49
- availableProviders?: OAuthProvidersSchema[];
50
48
  onOAuthClick?: (provider: OAuthProvidersSchema) => void;
51
49
  authConfig: AuthConfig;
52
50
  title?: string;
@@ -67,7 +65,7 @@ interface SignUpFormProps {
67
65
  /**
68
66
  * Pre-built sign-up form component (UI only, no business logic).
69
67
  */
70
- declare function SignUpForm({ email, password, onEmailChange, onPasswordChange, onSubmit, error, loading, oauthLoading, availableProviders, onOAuthClick, authConfig, title, subtitle, emailLabel, emailPlaceholder, passwordLabel, passwordPlaceholder, submitButtonText, loadingButtonText, signInText, signInLinkText, signInUrl, dividerText, showVerificationStep, onVerifyCode, }: SignUpFormProps): react_jsx_runtime.JSX.Element;
68
+ declare function SignUpForm({ email, password, onEmailChange, onPasswordChange, onSubmit, error, loading, oauthLoading, onOAuthClick, authConfig, title, subtitle, emailLabel, emailPlaceholder, passwordLabel, passwordPlaceholder, submitButtonText, loadingButtonText, signInText, signInLinkText, signInUrl, dividerText, showVerificationStep, onVerifyCode, }: SignUpFormProps): react_jsx_runtime.JSX.Element;
71
69
 
72
70
  type ResetPasswordMethod = 'code' | 'link';
73
71
  interface ForgotPasswordFormProps {
package/dist/forms.js CHANGED
@@ -106,34 +106,27 @@ function AuthPasswordStrengthIndicator({
106
106
  config
107
107
  }) {
108
108
  const requirements = createRequirements(config);
109
- return /* @__PURE__ */ jsx("div", { className: "if-passwordStrength if-internal-ps6w3k", children: /* @__PURE__ */ jsx("div", { className: "if-passwordStrength-requirements", children: requirements.map((req) => /* @__PURE__ */ jsxs(
110
- "div",
111
- {
112
- className: `if-passwordStrength-requirement ${req.test(password) ? "met" : "unmet"}`,
113
- children: [
114
- /* @__PURE__ */ jsx(
115
- "div",
116
- {
117
- style: {
118
- display: "flex",
119
- alignItems: "center",
120
- justifyContent: "center",
121
- width: "1rem",
122
- height: "1rem",
123
- borderRadius: "50%",
124
- border: "2px solid",
125
- borderColor: req.test(password) ? "transparent" : "#9ca3af",
126
- backgroundColor: req.test(password) ? "#059669" : "white",
127
- transition: "all 0.2s"
128
- },
129
- children: req.test(password) && /* @__PURE__ */ jsx(Check, { style: { width: "0.75rem", height: "0.75rem", color: "white" } })
130
- }
131
- ),
132
- /* @__PURE__ */ jsx("span", { children: req.label })
133
- ]
134
- },
135
- req.label
136
- )) }) });
109
+ 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: [
110
+ /* @__PURE__ */ jsx(
111
+ "div",
112
+ {
113
+ style: {
114
+ display: "flex",
115
+ alignItems: "center",
116
+ justifyContent: "center",
117
+ width: "1rem",
118
+ height: "1rem",
119
+ borderRadius: "50%",
120
+ border: "2px solid",
121
+ borderColor: req.test(password) ? "transparent" : "#9ca3af",
122
+ backgroundColor: req.test(password) ? "#059669" : "white",
123
+ transition: "all 0.2s"
124
+ },
125
+ children: req.test(password) && /* @__PURE__ */ jsx(Check, { style: { width: "0.75rem", height: "0.75rem", color: "white" } })
126
+ }
127
+ ),
128
+ /* @__PURE__ */ jsx("span", { children: req.label })
129
+ ] }, req.label)) }) });
137
130
  }
138
131
  function createRequirements(config) {
139
132
  const requirements = [];
@@ -201,11 +194,12 @@ function AuthPasswordField({
201
194
  onFocus,
202
195
  ...props
203
196
  }) {
197
+ const [searchParams] = useSearchParams();
204
198
  const [showPassword, setShowPassword] = useState(false);
205
199
  const [showStrength, setShowStrength] = useState(false);
206
200
  const resolvedForgotPasswordHref = useMemo(
207
- () => forgotPasswordLink ? resolveAuthPath(forgotPasswordLink.href) : void 0,
208
- [forgotPasswordLink]
201
+ () => forgotPasswordLink ? resolveAuthUrl(forgotPasswordLink.href, searchParams) : void 0,
202
+ [forgotPasswordLink, searchParams]
209
203
  );
210
204
  const handleFocus = (e) => {
211
205
  if (showStrengthIndicator) {
@@ -620,29 +614,20 @@ function useInsforge() {
620
614
  }
621
615
  function AuthEmailVerificationStep({
622
616
  email,
623
- method = "code",
624
- onVerifyCode
617
+ method,
618
+ onVerifyCode,
619
+ emailSent = false
625
620
  }) {
626
621
  const { sendVerificationEmail } = useInsforge();
627
622
  const [resendDisabled, setResendDisabled] = useState(true);
628
- const [resendCountdown, setResendCountdown] = useState(60);
623
+ const [resendCountdown, setResendCountdown] = useState(emailSent ? 60 : 0);
629
624
  const [isSending, setIsSending] = useState(false);
630
625
  const [verificationCode, setVerificationCode] = useState("");
631
626
  const [isVerifying, setIsVerifying] = useState(false);
632
627
  const isLinkMethod = method === "link";
633
- const displayDescription = isLinkMethod ? "We have 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.";
628
+ 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.";
634
629
  useEffect(() => {
635
- const sendInitialEmail = async () => {
636
- try {
637
- await sendVerificationEmail(email);
638
- } catch (error) {
639
- console.error("Failed to send verification email:", error);
640
- }
641
- };
642
- void sendInitialEmail();
643
- }, [email, sendVerificationEmail]);
644
- useEffect(() => {
645
- if (resendCountdown > 0) {
630
+ if (emailSent && resendCountdown > 0) {
646
631
  const timer = setInterval(() => {
647
632
  setResendCountdown((prev) => {
648
633
  if (prev <= 1) {
@@ -654,7 +639,7 @@ function AuthEmailVerificationStep({
654
639
  }, 1e3);
655
640
  return () => clearInterval(timer);
656
641
  }
657
- }, [resendCountdown]);
642
+ }, [emailSent, resendCountdown]);
658
643
  const handleResend = async () => {
659
644
  setResendDisabled(true);
660
645
  setResendCountdown(60);
@@ -841,7 +826,6 @@ function SignInForm({
841
826
  error,
842
827
  loading = false,
843
828
  oauthLoading = null,
844
- availableProviders = [],
845
829
  onOAuthClick,
846
830
  authConfig,
847
831
  title = "Welcome Back",
@@ -864,7 +848,15 @@ function SignInForm({
864
848
  return /* @__PURE__ */ jsxs(AuthContainer, { children: [
865
849
  /* @__PURE__ */ jsx(AuthHeader, { title, subtitle }),
866
850
  /* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
867
- showVerificationStep ? /* @__PURE__ */ jsx(AuthEmailVerificationStep, { email, onVerifyCode }) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
851
+ showVerificationStep ? /* @__PURE__ */ jsx(
852
+ AuthEmailVerificationStep,
853
+ {
854
+ email,
855
+ method: authConfig.verifyEmailMethod,
856
+ onVerifyCode,
857
+ emailSent: false
858
+ }
859
+ ) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
868
860
  /* @__PURE__ */ jsx(
869
861
  AuthFormField,
870
862
  {
@@ -899,12 +891,12 @@ function SignInForm({
899
891
  ] }),
900
892
  !showVerificationStep && /* @__PURE__ */ jsxs(Fragment, { children: [
901
893
  /* @__PURE__ */ jsx(AuthLink, { text: signUpText, linkText: signUpLinkText, href: signUpUrl }),
902
- availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
894
+ authConfig.oAuthProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
903
895
  /* @__PURE__ */ jsx(AuthDivider, { text: dividerText }),
904
896
  /* @__PURE__ */ jsx(
905
897
  AuthOAuthProviders,
906
898
  {
907
- providers: availableProviders,
899
+ providers: authConfig.oAuthProviders,
908
900
  onClick: onOAuthClick,
909
901
  disabled: loading || oauthLoading !== null,
910
902
  loading: oauthLoading
@@ -923,7 +915,6 @@ function SignUpForm({
923
915
  error,
924
916
  loading = false,
925
917
  oauthLoading = null,
926
- availableProviders = [],
927
918
  onOAuthClick,
928
919
  authConfig,
929
920
  title = "Get Started",
@@ -944,7 +935,15 @@ function SignUpForm({
944
935
  return /* @__PURE__ */ jsxs(AuthContainer, { children: [
945
936
  /* @__PURE__ */ jsx(AuthHeader, { title, subtitle }),
946
937
  /* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
947
- showVerificationStep ? /* @__PURE__ */ jsx(AuthEmailVerificationStep, { email, onVerifyCode }) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
938
+ showVerificationStep ? /* @__PURE__ */ jsx(
939
+ AuthEmailVerificationStep,
940
+ {
941
+ email,
942
+ method: authConfig.verifyEmailMethod,
943
+ onVerifyCode,
944
+ emailSent: true
945
+ }
946
+ ) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
948
947
  /* @__PURE__ */ jsx(
949
948
  AuthFormField,
950
949
  {
@@ -967,7 +966,6 @@ function SignUpForm({
967
966
  value: password,
968
967
  onChange: (e) => onPasswordChange(e.target.value),
969
968
  required: true,
970
- minLength: authConfig.passwordMinLength,
971
969
  autoComplete: "new-password",
972
970
  showStrengthIndicator: true,
973
971
  authConfig
@@ -977,12 +975,12 @@ function SignUpForm({
977
975
  ] }),
978
976
  !showVerificationStep && /* @__PURE__ */ jsxs(Fragment, { children: [
979
977
  /* @__PURE__ */ jsx(AuthLink, { text: signInText, linkText: signInLinkText, href: signInUrl }),
980
- availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
978
+ authConfig.oAuthProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
981
979
  /* @__PURE__ */ jsx(AuthDivider, { text: dividerText }),
982
980
  /* @__PURE__ */ jsx(
983
981
  AuthOAuthProviders,
984
982
  {
985
- providers: availableProviders,
983
+ providers: authConfig.oAuthProviders,
986
984
  onClick: onOAuthClick,
987
985
  disabled: loading || oauthLoading !== null,
988
986
  loading: oauthLoading