@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.
- package/README.md +55 -95
- package/dist/atoms.cjs +31 -46
- package/dist/atoms.cjs.map +1 -1
- package/dist/atoms.d.cts +3 -2
- package/dist/atoms.d.ts +3 -2
- package/dist/atoms.js +31 -46
- package/dist/atoms.js.map +1 -1
- package/dist/components.cjs +71 -59
- package/dist/components.cjs.map +1 -1
- package/dist/components.js +71 -59
- package/dist/components.js.map +1 -1
- package/dist/forms.cjs +53 -55
- package/dist/forms.cjs.map +1 -1
- package/dist/forms.d.cts +2 -4
- package/dist/forms.d.ts +2 -4
- package/dist/forms.js +53 -55
- package/dist/forms.js.map +1 -1
- package/dist/hooks.cjs.map +1 -1
- package/dist/hooks.js.map +1 -1
- package/dist/index.cjs +80 -63
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -4
- package/dist/index.d.ts +1 -4
- package/dist/index.js +80 -63
- package/dist/index.js.map +1 -1
- package/dist/styles.css +0 -8
- package/package.json +2 -2
package/dist/components.js
CHANGED
|
@@ -134,34 +134,27 @@ function AuthPasswordStrengthIndicator({
|
|
|
134
134
|
config
|
|
135
135
|
}) {
|
|
136
136
|
const requirements = createRequirements(config);
|
|
137
|
-
return /* @__PURE__ */ jsx("div", { className: "if-passwordStrength if-internal-ps6w3k", children: /* @__PURE__ */ jsx("div", { className: "if-passwordStrength-requirements", children: requirements.map((req) => /* @__PURE__ */ jsxs(
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
"
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
}
|
|
159
|
-
),
|
|
160
|
-
/* @__PURE__ */ jsx("span", { children: req.label })
|
|
161
|
-
]
|
|
162
|
-
},
|
|
163
|
-
req.label
|
|
164
|
-
)) }) });
|
|
137
|
+
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: [
|
|
138
|
+
/* @__PURE__ */ jsx(
|
|
139
|
+
"div",
|
|
140
|
+
{
|
|
141
|
+
style: {
|
|
142
|
+
display: "flex",
|
|
143
|
+
alignItems: "center",
|
|
144
|
+
justifyContent: "center",
|
|
145
|
+
width: "1rem",
|
|
146
|
+
height: "1rem",
|
|
147
|
+
borderRadius: "50%",
|
|
148
|
+
border: "2px solid",
|
|
149
|
+
borderColor: req.test(password) ? "transparent" : "#9ca3af",
|
|
150
|
+
backgroundColor: req.test(password) ? "#059669" : "white",
|
|
151
|
+
transition: "all 0.2s"
|
|
152
|
+
},
|
|
153
|
+
children: req.test(password) && /* @__PURE__ */ jsx(Check, { style: { width: "0.75rem", height: "0.75rem", color: "white" } })
|
|
154
|
+
}
|
|
155
|
+
),
|
|
156
|
+
/* @__PURE__ */ jsx("span", { children: req.label })
|
|
157
|
+
] }, req.label)) }) });
|
|
165
158
|
}
|
|
166
159
|
function createRequirements(config) {
|
|
167
160
|
const requirements = [];
|
|
@@ -229,11 +222,12 @@ function AuthPasswordField({
|
|
|
229
222
|
onFocus,
|
|
230
223
|
...props
|
|
231
224
|
}) {
|
|
225
|
+
const [searchParams] = useSearchParams();
|
|
232
226
|
const [showPassword, setShowPassword] = useState(false);
|
|
233
227
|
const [showStrength, setShowStrength] = useState(false);
|
|
234
228
|
const resolvedForgotPasswordHref = useMemo(
|
|
235
|
-
() => forgotPasswordLink ?
|
|
236
|
-
[forgotPasswordLink]
|
|
229
|
+
() => forgotPasswordLink ? resolveAuthUrl(forgotPasswordLink.href, searchParams) : void 0,
|
|
230
|
+
[forgotPasswordLink, searchParams]
|
|
237
231
|
);
|
|
238
232
|
const handleFocus = (e) => {
|
|
239
233
|
if (showStrengthIndicator) {
|
|
@@ -640,29 +634,20 @@ function AuthVerificationCodeInput({
|
|
|
640
634
|
}
|
|
641
635
|
function AuthEmailVerificationStep({
|
|
642
636
|
email,
|
|
643
|
-
method
|
|
644
|
-
onVerifyCode
|
|
637
|
+
method,
|
|
638
|
+
onVerifyCode,
|
|
639
|
+
emailSent = false
|
|
645
640
|
}) {
|
|
646
641
|
const { sendVerificationEmail } = useInsforge();
|
|
647
642
|
const [resendDisabled, setResendDisabled] = useState(true);
|
|
648
|
-
const [resendCountdown, setResendCountdown] = useState(60);
|
|
643
|
+
const [resendCountdown, setResendCountdown] = useState(emailSent ? 60 : 0);
|
|
649
644
|
const [isSending, setIsSending] = useState(false);
|
|
650
645
|
const [verificationCode, setVerificationCode] = useState("");
|
|
651
646
|
const [isVerifying, setIsVerifying] = useState(false);
|
|
652
647
|
const isLinkMethod = method === "link";
|
|
653
|
-
const displayDescription = isLinkMethod ? "We
|
|
648
|
+
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.";
|
|
654
649
|
useEffect(() => {
|
|
655
|
-
|
|
656
|
-
try {
|
|
657
|
-
await sendVerificationEmail(email);
|
|
658
|
-
} catch (error) {
|
|
659
|
-
console.error("Failed to send verification email:", error);
|
|
660
|
-
}
|
|
661
|
-
};
|
|
662
|
-
void sendInitialEmail();
|
|
663
|
-
}, [email, sendVerificationEmail]);
|
|
664
|
-
useEffect(() => {
|
|
665
|
-
if (resendCountdown > 0) {
|
|
650
|
+
if (emailSent && resendCountdown > 0) {
|
|
666
651
|
const timer = setInterval(() => {
|
|
667
652
|
setResendCountdown((prev) => {
|
|
668
653
|
if (prev <= 1) {
|
|
@@ -674,7 +659,7 @@ function AuthEmailVerificationStep({
|
|
|
674
659
|
}, 1e3);
|
|
675
660
|
return () => clearInterval(timer);
|
|
676
661
|
}
|
|
677
|
-
}, [resendCountdown]);
|
|
662
|
+
}, [emailSent, resendCountdown]);
|
|
678
663
|
const handleResend = async () => {
|
|
679
664
|
setResendDisabled(true);
|
|
680
665
|
setResendCountdown(60);
|
|
@@ -861,7 +846,6 @@ function SignInForm({
|
|
|
861
846
|
error,
|
|
862
847
|
loading = false,
|
|
863
848
|
oauthLoading = null,
|
|
864
|
-
availableProviders = [],
|
|
865
849
|
onOAuthClick,
|
|
866
850
|
authConfig,
|
|
867
851
|
title = "Welcome Back",
|
|
@@ -884,7 +868,15 @@ function SignInForm({
|
|
|
884
868
|
return /* @__PURE__ */ jsxs(AuthContainer, { children: [
|
|
885
869
|
/* @__PURE__ */ jsx(AuthHeader, { title, subtitle }),
|
|
886
870
|
/* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
|
|
887
|
-
showVerificationStep ? /* @__PURE__ */ jsx(
|
|
871
|
+
showVerificationStep ? /* @__PURE__ */ jsx(
|
|
872
|
+
AuthEmailVerificationStep,
|
|
873
|
+
{
|
|
874
|
+
email,
|
|
875
|
+
method: authConfig.verifyEmailMethod,
|
|
876
|
+
onVerifyCode,
|
|
877
|
+
emailSent: false
|
|
878
|
+
}
|
|
879
|
+
) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
|
|
888
880
|
/* @__PURE__ */ jsx(
|
|
889
881
|
AuthFormField,
|
|
890
882
|
{
|
|
@@ -919,12 +911,12 @@ function SignInForm({
|
|
|
919
911
|
] }),
|
|
920
912
|
!showVerificationStep && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
921
913
|
/* @__PURE__ */ jsx(AuthLink, { text: signUpText, linkText: signUpLinkText, href: signUpUrl }),
|
|
922
|
-
|
|
914
|
+
authConfig.oAuthProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
923
915
|
/* @__PURE__ */ jsx(AuthDivider, { text: dividerText }),
|
|
924
916
|
/* @__PURE__ */ jsx(
|
|
925
917
|
AuthOAuthProviders,
|
|
926
918
|
{
|
|
927
|
-
providers:
|
|
919
|
+
providers: authConfig.oAuthProviders,
|
|
928
920
|
onClick: onOAuthClick,
|
|
929
921
|
disabled: loading || oauthLoading !== null,
|
|
930
922
|
loading: oauthLoading
|
|
@@ -999,7 +991,15 @@ function SignIn({ onError, ...uiProps }) {
|
|
|
999
991
|
}
|
|
1000
992
|
}
|
|
1001
993
|
function handleOAuth(provider) {
|
|
1002
|
-
|
|
994
|
+
try {
|
|
995
|
+
loginWithOAuth(provider, redirectUrl || "");
|
|
996
|
+
} catch (err) {
|
|
997
|
+
const errorMessage = err instanceof Error ? err.message : "OAuth login failed";
|
|
998
|
+
setError(errorMessage);
|
|
999
|
+
if (onError) {
|
|
1000
|
+
onError(new Error(errorMessage));
|
|
1001
|
+
}
|
|
1002
|
+
}
|
|
1003
1003
|
}
|
|
1004
1004
|
if (!authConfig) {
|
|
1005
1005
|
return null;
|
|
@@ -1015,7 +1015,6 @@ function SignIn({ onError, ...uiProps }) {
|
|
|
1015
1015
|
error,
|
|
1016
1016
|
loading,
|
|
1017
1017
|
oauthLoading,
|
|
1018
|
-
availableProviders: authConfig?.oAuthProviders || [],
|
|
1019
1018
|
onOAuthClick: handleOAuth,
|
|
1020
1019
|
authConfig,
|
|
1021
1020
|
showVerificationStep: step === "awaiting-verification",
|
|
@@ -1033,7 +1032,6 @@ function SignUpForm({
|
|
|
1033
1032
|
error,
|
|
1034
1033
|
loading = false,
|
|
1035
1034
|
oauthLoading = null,
|
|
1036
|
-
availableProviders = [],
|
|
1037
1035
|
onOAuthClick,
|
|
1038
1036
|
authConfig,
|
|
1039
1037
|
title = "Get Started",
|
|
@@ -1054,7 +1052,15 @@ function SignUpForm({
|
|
|
1054
1052
|
return /* @__PURE__ */ jsxs(AuthContainer, { children: [
|
|
1055
1053
|
/* @__PURE__ */ jsx(AuthHeader, { title, subtitle }),
|
|
1056
1054
|
/* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
|
|
1057
|
-
showVerificationStep ? /* @__PURE__ */ jsx(
|
|
1055
|
+
showVerificationStep ? /* @__PURE__ */ jsx(
|
|
1056
|
+
AuthEmailVerificationStep,
|
|
1057
|
+
{
|
|
1058
|
+
email,
|
|
1059
|
+
method: authConfig.verifyEmailMethod,
|
|
1060
|
+
onVerifyCode,
|
|
1061
|
+
emailSent: true
|
|
1062
|
+
}
|
|
1063
|
+
) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
|
|
1058
1064
|
/* @__PURE__ */ jsx(
|
|
1059
1065
|
AuthFormField,
|
|
1060
1066
|
{
|
|
@@ -1077,7 +1083,6 @@ function SignUpForm({
|
|
|
1077
1083
|
value: password,
|
|
1078
1084
|
onChange: (e) => onPasswordChange(e.target.value),
|
|
1079
1085
|
required: true,
|
|
1080
|
-
minLength: authConfig.passwordMinLength,
|
|
1081
1086
|
autoComplete: "new-password",
|
|
1082
1087
|
showStrengthIndicator: true,
|
|
1083
1088
|
authConfig
|
|
@@ -1087,12 +1092,12 @@ function SignUpForm({
|
|
|
1087
1092
|
] }),
|
|
1088
1093
|
!showVerificationStep && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1089
1094
|
/* @__PURE__ */ jsx(AuthLink, { text: signInText, linkText: signInLinkText, href: signInUrl }),
|
|
1090
|
-
|
|
1095
|
+
authConfig.oAuthProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1091
1096
|
/* @__PURE__ */ jsx(AuthDivider, { text: dividerText }),
|
|
1092
1097
|
/* @__PURE__ */ jsx(
|
|
1093
1098
|
AuthOAuthProviders,
|
|
1094
1099
|
{
|
|
1095
|
-
providers:
|
|
1100
|
+
providers: authConfig.oAuthProviders,
|
|
1096
1101
|
onClick: onOAuthClick,
|
|
1097
1102
|
disabled: loading || oauthLoading !== null,
|
|
1098
1103
|
loading: oauthLoading
|
|
@@ -1220,7 +1225,15 @@ function SignUp({ onError, ...uiProps }) {
|
|
|
1220
1225
|
}
|
|
1221
1226
|
}
|
|
1222
1227
|
function handleOAuth(provider) {
|
|
1223
|
-
|
|
1228
|
+
try {
|
|
1229
|
+
loginWithOAuth(provider, redirectUrl || "");
|
|
1230
|
+
} catch (err) {
|
|
1231
|
+
const errorMessage = err instanceof Error ? err.message : "OAuth login failed";
|
|
1232
|
+
setError(errorMessage);
|
|
1233
|
+
if (onError) {
|
|
1234
|
+
onError(new Error(errorMessage));
|
|
1235
|
+
}
|
|
1236
|
+
}
|
|
1224
1237
|
}
|
|
1225
1238
|
if (!authConfig) {
|
|
1226
1239
|
return null;
|
|
@@ -1236,7 +1249,6 @@ function SignUp({ onError, ...uiProps }) {
|
|
|
1236
1249
|
error,
|
|
1237
1250
|
loading,
|
|
1238
1251
|
oauthLoading,
|
|
1239
|
-
availableProviders: authConfig?.oAuthProviders || [],
|
|
1240
1252
|
onOAuthClick: handleOAuth,
|
|
1241
1253
|
authConfig,
|
|
1242
1254
|
showVerificationStep: step === "awaiting-verification",
|