@insforge/react 0.3.5 → 0.4.5
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 +476 -604
- package/dist/atoms.cjs +837 -0
- package/dist/atoms.cjs.map +1 -0
- package/dist/atoms.d.cts +253 -0
- package/dist/atoms.d.ts +111 -245
- package/dist/atoms.js +412 -468
- package/dist/atoms.js.map +1 -1
- package/dist/components.cjs +2000 -0
- package/dist/components.cjs.map +1 -0
- package/dist/components.d.cts +258 -0
- package/dist/components.d.ts +71 -123
- package/dist/components.js +1040 -1428
- package/dist/components.js.map +1 -1
- package/dist/forms.cjs +1194 -0
- package/dist/forms.cjs.map +1 -0
- package/dist/forms.d.cts +135 -0
- package/dist/forms.d.ts +113 -163
- package/dist/forms.js +657 -943
- package/dist/forms.js.map +1 -1
- package/dist/{hooks.mjs → hooks.cjs} +15 -13
- package/dist/hooks.cjs.map +1 -0
- package/dist/{hooks.d.mts → hooks.d.cts} +1 -1
- package/dist/hooks.js +9 -15
- package/dist/hooks.js.map +1 -1
- package/dist/index.cjs +2461 -0
- package/dist/index.cjs.map +1 -0
- package/dist/{index.d.mts → index.d.cts} +37 -22
- package/dist/index.d.ts +34 -19
- package/dist/index.js +1142 -1497
- package/dist/index.js.map +1 -1
- package/dist/{lib.mjs → lib.cjs} +13 -11
- package/dist/lib.cjs.map +1 -0
- package/dist/{lib.d.mts → lib.d.cts} +1 -8
- package/dist/lib.d.ts +1 -8
- package/dist/lib.js +4 -17
- package/dist/lib.js.map +1 -1
- package/dist/{router.mjs → router.cjs} +14 -16
- package/dist/router.cjs.map +1 -0
- package/dist/{router.d.mts → router.d.cts} +0 -11
- package/dist/router.d.ts +0 -11
- package/dist/router.js +10 -16
- package/dist/router.js.map +1 -1
- package/dist/styles.css +864 -2
- package/dist/types.cjs +4 -0
- package/dist/{types.mjs.map → types.cjs.map} +1 -1
- package/dist/types.d.cts +32 -0
- package/dist/types.d.ts +11 -613
- package/dist/types.js +0 -1
- package/package.json +111 -98
- package/dist/atoms.d.mts +0 -387
- package/dist/atoms.mjs +0 -861
- package/dist/atoms.mjs.map +0 -1
- package/dist/components.d.mts +0 -310
- package/dist/components.mjs +0 -2327
- package/dist/components.mjs.map +0 -1
- package/dist/forms.d.mts +0 -185
- package/dist/forms.mjs +0 -1468
- package/dist/forms.mjs.map +0 -1
- package/dist/hooks.mjs.map +0 -1
- package/dist/index.mjs +0 -2724
- package/dist/index.mjs.map +0 -1
- package/dist/lib.mjs.map +0 -1
- package/dist/router.mjs.map +0 -1
- package/dist/types.d.mts +0 -634
- package/dist/types.mjs +0 -3
- package/src/styles.css +0 -15
package/dist/components.js
CHANGED
|
@@ -1,18 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
import { createContext, useState, useRef, useEffect, useCallback, useContext } from 'react';
|
|
2
|
+
import { useSearchParams } from 'react-router-dom';
|
|
3
|
+
import '@insforge/sdk';
|
|
4
|
+
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
5
|
+
import { AlertTriangle, Check, EyeOff, Eye, Loader2, CircleCheck, LogOut } from 'lucide-react';
|
|
6
|
+
import { z } from 'zod';
|
|
2
7
|
|
|
3
|
-
var
|
|
4
|
-
var sdk = require('@insforge/sdk');
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var clsx = require('clsx');
|
|
7
|
-
var tailwindMerge = require('tailwind-merge');
|
|
8
|
-
var lucideReact = require('lucide-react');
|
|
9
|
-
var zod = require('zod');
|
|
10
|
-
|
|
11
|
-
var InsforgeContext = react.createContext(
|
|
12
|
-
void 0
|
|
13
|
-
);
|
|
8
|
+
var InsforgeContext = createContext(void 0);
|
|
14
9
|
function useInsforge() {
|
|
15
|
-
const context =
|
|
10
|
+
const context = useContext(InsforgeContext);
|
|
16
11
|
if (!context) {
|
|
17
12
|
throw new Error("useInsforge must be used within InsforgeProvider");
|
|
18
13
|
}
|
|
@@ -20,9 +15,9 @@ function useInsforge() {
|
|
|
20
15
|
}
|
|
21
16
|
function usePublicAuthConfig() {
|
|
22
17
|
const { getPublicAuthConfig } = useInsforge();
|
|
23
|
-
const [authConfig, setAuthConfig] =
|
|
24
|
-
const [isLoaded, setIsLoaded] =
|
|
25
|
-
|
|
18
|
+
const [authConfig, setAuthConfig] = useState(null);
|
|
19
|
+
const [isLoaded, setIsLoaded] = useState(false);
|
|
20
|
+
useEffect(() => {
|
|
26
21
|
async function fetchConfig() {
|
|
27
22
|
const result = await getPublicAuthConfig();
|
|
28
23
|
if (result) {
|
|
@@ -38,236 +33,170 @@ function usePublicAuthConfig() {
|
|
|
38
33
|
return { authConfig, isLoaded };
|
|
39
34
|
}
|
|
40
35
|
function AuthBranding() {
|
|
41
|
-
return /* @__PURE__ */
|
|
42
|
-
/* @__PURE__ */
|
|
43
|
-
/* @__PURE__ */
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
36
|
+
return /* @__PURE__ */ jsxs("div", { className: "if-authBranding if-internal-ab4k9w", children: [
|
|
37
|
+
/* @__PURE__ */ jsx("p", { className: "if-authBranding-text", children: "Secured by" }),
|
|
38
|
+
/* @__PURE__ */ jsx("a", { href: "https://insforge.dev", target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsxs(
|
|
39
|
+
"svg",
|
|
40
|
+
{
|
|
41
|
+
width: "83",
|
|
42
|
+
height: "20",
|
|
43
|
+
viewBox: "0 0 83 20",
|
|
44
|
+
fill: "none",
|
|
45
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
46
|
+
children: [
|
|
47
|
+
/* @__PURE__ */ jsx(
|
|
48
|
+
"path",
|
|
49
|
+
{
|
|
50
|
+
d: "M2.16783 8.46797C1.9334 8.23325 1.9334 7.85269 2.16783 7.61797L8.11049 1.66797L16.6 1.66797L6.41259 11.868C6.17815 12.1027 5.79807 12.1027 5.56363 11.868L2.16783 8.46797Z",
|
|
51
|
+
fill: "url(#paint0_linear_2976_9475)"
|
|
52
|
+
}
|
|
53
|
+
),
|
|
54
|
+
/* @__PURE__ */ jsx(
|
|
55
|
+
"path",
|
|
56
|
+
{
|
|
57
|
+
d: "M12.8858 6.44922L16.6 10.168V18.668L8.64108 10.6992L12.8858 6.44922Z",
|
|
58
|
+
fill: "url(#paint1_linear_2976_9475)"
|
|
59
|
+
}
|
|
60
|
+
),
|
|
61
|
+
/* @__PURE__ */ jsx(
|
|
62
|
+
"path",
|
|
63
|
+
{
|
|
64
|
+
d: "M67.5439 6.48828C68.2894 6.48828 68.9145 6.67064 69.418 7.03516C69.5229 7.10943 69.6214 7.1907 69.7158 7.27637V6.70703H71.248V14.959C71.248 15.1583 71.2381 15.3485 71.2188 15.5283C71.2042 15.7129 71.1774 15.8925 71.1387 16.0674C71.0225 16.5776 70.7998 16.9957 70.4707 17.3213C70.1415 17.6518 69.7321 17.8972 69.2432 18.0576C68.7592 18.2179 68.2222 18.2988 67.6318 18.2988C67.1962 18.2988 66.7768 18.2308 66.375 18.0947C65.9782 17.9587 65.6202 17.7614 65.3008 17.5039C64.9813 17.2512 64.7199 16.9446 64.5166 16.585L66.1289 15.7832C66.2789 16.0698 66.4888 16.2819 66.7598 16.418C67.0356 16.5589 67.3289 16.6289 67.6387 16.6289C68.0016 16.6289 68.3258 16.5628 68.6113 16.4316C68.8969 16.3053 69.1176 16.116 69.2725 15.8633C69.4321 15.6155 69.5077 15.3047 69.498 14.9307V14.1797C69.4665 14.2037 69.4359 14.229 69.4033 14.252C68.8855 14.6164 68.2441 14.7988 67.4795 14.7988C66.7582 14.7988 66.1281 14.6165 65.5908 14.252C65.0537 13.8875 64.637 13.3915 64.3418 12.7646C64.0467 12.1378 63.8994 11.4307 63.8994 10.6436C63.8994 9.84651 64.0465 9.13673 64.3418 8.51465C64.6419 7.88768 65.0663 7.39481 65.6133 7.03516C66.1601 6.67077 66.8036 6.48836 67.5439 6.48828ZM37.5 6.48828C38.1099 6.48828 38.6496 6.58294 39.1191 6.77246C39.5935 6.96201 39.9762 7.2321 40.2666 7.58203C40.5569 7.93184 40.7359 8.34227 40.8037 8.81348L39.0176 9.13477C38.974 8.79951 38.8218 8.53424 38.5605 8.33984C38.304 8.14547 37.96 8.03605 37.5293 8.01172C37.1178 7.98742 36.7859 8.05051 36.5342 8.20117C36.2825 8.34698 36.1562 8.55398 36.1562 8.82129C36.1563 8.97184 36.208 9.10017 36.3096 9.20703C36.4112 9.31394 36.614 9.42141 36.9189 9.52832C37.2288 9.63524 37.6889 9.76635 38.2988 9.92188C38.9232 10.0823 39.4222 10.2666 39.7949 10.4756C40.1722 10.6796 40.4428 10.9254 40.6074 11.2119C40.7768 11.4987 40.8623 11.8466 40.8623 12.2549C40.8623 13.047 40.574 13.6691 39.998 14.1211C39.4268 14.5731 38.6348 14.7988 37.623 14.7988C36.6551 14.7988 35.8687 14.5799 35.2637 14.1426C34.6587 13.7052 34.2909 13.0908 34.1602 12.2988L35.9463 12.0215C36.0383 12.4102 36.2411 12.7169 36.5557 12.9404C36.8703 13.164 37.2678 13.2754 37.7471 13.2754C38.1681 13.2754 38.4922 13.1926 38.7197 13.0273C38.9521 12.8572 39.0684 12.6266 39.0684 12.335C39.0684 12.1552 39.0245 12.0122 38.9375 11.9053C38.8552 11.7935 38.6713 11.686 38.3857 11.584C38.1001 11.4819 37.6618 11.3528 37.0713 11.1973C36.4131 11.0223 35.8901 10.8359 35.5029 10.6367C35.1158 10.4327 34.8374 10.192 34.668 9.91504C34.4985 9.63801 34.4141 9.30188 34.4141 8.9082C34.4141 8.41746 34.5423 7.98943 34.7988 7.625C35.0553 7.26073 35.4135 6.98146 35.873 6.78711C36.3329 6.58784 36.8755 6.48828 37.5 6.48828ZM53.3047 6.48828C54.0937 6.48828 54.7815 6.66572 55.3672 7.02051C55.9527 7.37528 56.4072 7.86634 56.7314 8.49316C57.0558 9.11525 57.2187 9.83193 57.2188 10.6436C57.2188 11.46 57.0537 12.1817 56.7246 12.8086C56.4003 13.4307 55.9451 13.9196 55.3594 14.2744C54.7737 14.6242 54.0888 14.7988 53.3047 14.7988C52.5205 14.7988 51.8357 14.6214 51.25 14.2666C50.6643 13.9118 50.2091 13.4238 49.8848 12.8018C49.5653 12.1748 49.4053 11.4552 49.4053 10.6436C49.4053 9.81735 49.5703 9.09279 49.8994 8.4707C50.2286 7.8488 50.6859 7.36255 51.2715 7.0127C51.8572 6.66281 52.5351 6.48828 53.3047 6.48828ZM76.7471 6.48828C77.5603 6.48828 78.25 6.68053 78.8164 7.06445C79.3876 7.44351 79.812 7.97991 80.0879 8.6748C80.3638 9.36976 80.4672 10.189 80.3994 11.1318H74.7256C74.7843 11.6972 74.949 12.1516 75.2227 12.4951C75.5711 12.9325 76.0792 13.1513 76.7471 13.1514C77.1779 13.1514 77.5486 13.0567 77.8584 12.8672C78.173 12.6728 78.4146 12.3928 78.584 12.0283L80.3125 12.5537C80.0124 13.2633 79.5473 13.8153 78.918 14.209C78.2936 14.6025 77.6036 14.7988 76.8486 14.7988C76.0549 14.7988 75.358 14.6263 74.7578 14.2812C74.1576 13.9362 73.6875 13.458 73.3486 12.8457C73.0147 12.2334 72.8477 11.5284 72.8477 10.7314C72.8477 9.87126 73.0127 9.12495 73.3418 8.49316C73.671 7.85651 74.1282 7.36263 74.7139 7.0127C75.2995 6.6628 75.9775 6.48832 76.7471 6.48828ZM23.3301 14.5801H21.5801V4.08203H23.3301V14.5801ZM29.6152 6.48047C30.1959 6.48052 30.6753 6.5781 31.0527 6.77246C31.4301 6.96681 31.7305 7.21443 31.9531 7.51562C32.1758 7.81695 32.3398 8.13831 32.4463 8.47852C32.5528 8.81873 32.6213 9.14205 32.6504 9.44824C32.6843 9.74946 32.7012 9.99508 32.7012 10.1846V14.5801H30.9287V10.7891C30.9287 10.5413 30.9118 10.2669 30.8779 9.96582C30.844 9.66449 30.7645 9.37469 30.6387 9.09766C30.5177 8.81592 30.3337 8.58503 30.0869 8.40527C29.8449 8.22551 29.5157 8.13579 29.0996 8.13574C28.8769 8.13574 28.6563 8.17221 28.4385 8.24512C28.2206 8.31802 28.0219 8.4442 27.8428 8.62402C27.6685 8.79899 27.5284 9.04249 27.4219 9.35352C27.3154 9.65965 27.2617 10.0532 27.2617 10.5342V14.5801H25.4902V6.70703H27.0518V7.58301C27.2521 7.34675 27.486 7.14172 27.7559 6.96973C28.2593 6.64409 28.8794 6.48047 29.6152 6.48047ZM48.748 5.83887H44.2021V8.45605H47.876V10.2061H44.2021V14.5801H42.4521V4.08203H48.748V5.83887ZM62.5137 6.67773C62.7606 6.65829 63.001 6.66815 63.2334 6.70703V8.34766C63.001 8.27961 62.7317 8.25695 62.4268 8.28125C62.1267 8.30557 61.8553 8.39134 61.6133 8.53711C61.3715 8.66829 61.1733 8.83606 61.0186 9.04004C60.8686 9.24404 60.7572 9.47701 60.6846 9.73926C60.612 9.99685 60.5752 10.2768 60.5752 10.5781V14.5801H58.8184V6.70703H60.3652V7.96582C60.4243 7.85986 60.4888 7.75824 60.5605 7.66211C60.7251 7.4434 60.9219 7.26302 61.1494 7.12207C61.3429 6.99098 61.5559 6.88926 61.7881 6.81641C62.0251 6.73869 62.267 6.69235 62.5137 6.67773ZM67.8057 8.0625C67.3362 8.06252 66.9485 8.17982 66.6436 8.41309C66.3389 8.64144 66.1139 8.95232 65.9688 9.3457C65.8235 9.7345 65.751 10.1673 65.751 10.6436C65.751 11.1247 65.8215 11.5624 65.9619 11.9561C66.1071 12.3447 66.3269 12.6535 66.6221 12.8818C66.9174 13.1103 67.293 13.2246 67.748 13.2246C68.2174 13.2246 68.5953 13.1171 68.8809 12.9033C69.1711 12.6846 69.3811 12.3808 69.5117 11.9922C69.6473 11.6034 69.7158 11.1539 69.7158 10.6436C69.7158 10.1284 69.6473 9.67886 69.5117 9.29492C69.381 8.90617 69.1753 8.60445 68.8945 8.39062C68.6138 8.17213 68.2508 8.0625 67.8057 8.0625ZM53.3047 8.13574C52.8351 8.13574 52.4475 8.24222 52.1426 8.45605C51.8425 8.66504 51.6198 8.95977 51.4746 9.33887C51.3295 9.71303 51.2568 10.148 51.2568 10.6436C51.2568 11.4066 51.4288 12.0168 51.7725 12.4736C52.121 12.9256 52.6318 13.1514 53.3047 13.1514C54.0017 13.1514 54.5196 12.9177 54.8584 12.4512C55.1971 11.9846 55.3672 11.3822 55.3672 10.6436C55.3672 9.8807 55.1951 9.27324 54.8516 8.82129C54.5079 8.36444 53.9921 8.13575 53.3047 8.13574ZM76.8203 8.02637C76.1039 8.02637 75.5712 8.25013 75.2227 8.69727C74.9987 8.98144 74.8476 9.35094 74.7676 9.80566H78.6221C78.5589 9.29301 78.4236 8.89686 78.2139 8.61719C77.9186 8.22359 77.4543 8.02645 76.8203 8.02637Z",
|
|
65
|
+
fill: "black"
|
|
66
|
+
}
|
|
67
|
+
),
|
|
68
|
+
/* @__PURE__ */ jsxs("defs", { children: [
|
|
69
|
+
/* @__PURE__ */ jsxs(
|
|
70
|
+
"linearGradient",
|
|
71
|
+
{
|
|
72
|
+
id: "paint0_linear_2976_9475",
|
|
73
|
+
x1: "1.85883",
|
|
74
|
+
y1: "1.92425",
|
|
75
|
+
x2: "24.3072",
|
|
76
|
+
y2: "9.64016",
|
|
77
|
+
gradientUnits: "userSpaceOnUse",
|
|
78
|
+
children: [
|
|
79
|
+
/* @__PURE__ */ jsx("stop", {}),
|
|
80
|
+
/* @__PURE__ */ jsx("stop", { offset: "1", stopOpacity: "0.4" })
|
|
81
|
+
]
|
|
82
|
+
}
|
|
83
|
+
),
|
|
84
|
+
/* @__PURE__ */ jsxs(
|
|
85
|
+
"linearGradient",
|
|
86
|
+
{
|
|
87
|
+
id: "paint1_linear_2976_9475",
|
|
88
|
+
x1: "25.6475",
|
|
89
|
+
y1: "8.65468",
|
|
90
|
+
x2: "10.7901",
|
|
91
|
+
y2: "8.65468",
|
|
92
|
+
gradientUnits: "userSpaceOnUse",
|
|
93
|
+
children: [
|
|
94
|
+
/* @__PURE__ */ jsx("stop", {}),
|
|
95
|
+
/* @__PURE__ */ jsx("stop", { offset: "1", stopOpacity: "0.4" })
|
|
96
|
+
]
|
|
97
|
+
}
|
|
98
|
+
)
|
|
99
|
+
] })
|
|
100
|
+
]
|
|
101
|
+
}
|
|
102
|
+
) })
|
|
98
103
|
] });
|
|
99
104
|
}
|
|
100
|
-
function
|
|
101
|
-
return
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
"div",
|
|
106
|
-
{
|
|
107
|
-
className: cn(
|
|
108
|
-
"w-full max-w-[400px] rounded-xl overflow-hidden shadow-lg",
|
|
109
|
-
appearance.containerClassName
|
|
110
|
-
),
|
|
111
|
-
children: [
|
|
112
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
|
|
113
|
-
"bg-white p-6 flex flex-col justify-center items-stretch gap-6",
|
|
114
|
-
appearance.cardClassName
|
|
115
|
-
), children }),
|
|
116
|
-
/* @__PURE__ */ jsxRuntime.jsx(AuthBranding, {})
|
|
117
|
-
]
|
|
118
|
-
}
|
|
119
|
-
);
|
|
105
|
+
function AuthContainer({ children }) {
|
|
106
|
+
return /* @__PURE__ */ jsxs("div", { className: "if-authContainer if-internal-a8f3d2", children: [
|
|
107
|
+
/* @__PURE__ */ jsx("div", { className: "if-authCard if-internal-b2k9x1", children }),
|
|
108
|
+
/* @__PURE__ */ jsx(AuthBranding, {})
|
|
109
|
+
] });
|
|
120
110
|
}
|
|
121
|
-
function AuthHeader({
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
}) {
|
|
126
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
|
|
127
|
-
"flex flex-col justify-start items-start gap-2",
|
|
128
|
-
appearance.containerClassName
|
|
129
|
-
), children: [
|
|
130
|
-
/* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(
|
|
131
|
-
"text-2xl font-semibold text-black leading-8",
|
|
132
|
-
appearance.titleClassName
|
|
133
|
-
), children: title }),
|
|
134
|
-
subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(
|
|
135
|
-
"text-sm font-normal text-[#828282] leading-6",
|
|
136
|
-
appearance.subtitleClassName
|
|
137
|
-
), children: subtitle })
|
|
111
|
+
function AuthHeader({ title, subtitle }) {
|
|
112
|
+
return /* @__PURE__ */ jsxs("div", { className: "if-authHeader if-internal-h3m7w5", children: [
|
|
113
|
+
/* @__PURE__ */ jsx("h1", { className: "if-authHeader-title if-internal-t4p1k9", children: title }),
|
|
114
|
+
subtitle && /* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle if-internal-s7q2m3", children: subtitle })
|
|
138
115
|
] });
|
|
139
116
|
}
|
|
140
|
-
function AuthErrorBanner({ error
|
|
141
|
-
if (!error)
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
),
|
|
149
|
-
children: [
|
|
150
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "w-6 h-6 text-red-500 shrink-0" }),
|
|
151
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-red-600 flex-1", children: error })
|
|
152
|
-
]
|
|
153
|
-
}
|
|
154
|
-
);
|
|
117
|
+
function AuthErrorBanner({ error }) {
|
|
118
|
+
if (!error) {
|
|
119
|
+
return null;
|
|
120
|
+
}
|
|
121
|
+
return /* @__PURE__ */ jsx("div", { className: "if-errorBanner if-internal-eb2m7k", children: /* @__PURE__ */ jsxs("div", { className: "if-errorBanner-content", children: [
|
|
122
|
+
/* @__PURE__ */ jsx(AlertTriangle, { className: "if-errorBanner-icon" }),
|
|
123
|
+
/* @__PURE__ */ jsx("span", { className: "if-errorBanner-text", children: error })
|
|
124
|
+
] }) });
|
|
155
125
|
}
|
|
156
|
-
function AuthFormField({
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
...props
|
|
161
|
-
}) {
|
|
162
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
|
|
163
|
-
"flex flex-col justify-center items-stretch gap-1",
|
|
164
|
-
appearance.containerClassName
|
|
165
|
-
), children: [
|
|
166
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
167
|
-
"label",
|
|
168
|
-
{
|
|
169
|
-
htmlFor: id,
|
|
170
|
-
className: cn(
|
|
171
|
-
"text-sm font-normal text-black leading-6",
|
|
172
|
-
appearance.labelClassName
|
|
173
|
-
),
|
|
174
|
-
children: label
|
|
175
|
-
}
|
|
176
|
-
),
|
|
177
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
178
|
-
"input",
|
|
179
|
-
{
|
|
180
|
-
id,
|
|
181
|
-
className: cn(
|
|
182
|
-
"w-full flex items-center gap-2 self-stretch",
|
|
183
|
-
"pl-3 pr-2 py-2 rounded-sm border border-[#D4D4D4] bg-white",
|
|
184
|
-
"text-sm font-normal leading-5",
|
|
185
|
-
"placeholder:text-[#A3A3A3] placeholder:font-sm placeholder:font-normal",
|
|
186
|
-
"focus:outline-none focus:border-black",
|
|
187
|
-
appearance.inputClassName
|
|
188
|
-
),
|
|
189
|
-
...props
|
|
190
|
-
}
|
|
191
|
-
)
|
|
126
|
+
function AuthFormField({ label, id, ...props }) {
|
|
127
|
+
return /* @__PURE__ */ jsxs("div", { className: "if-formField if-internal-f9n6p2", children: [
|
|
128
|
+
/* @__PURE__ */ jsx("label", { htmlFor: id, className: "if-formField-label if-internal-l3k8m1", children: label }),
|
|
129
|
+
/* @__PURE__ */ jsx("input", { id, className: "if-formField-input if-internal-i2v8k4", ...props })
|
|
192
130
|
] });
|
|
193
131
|
}
|
|
194
132
|
function AuthPasswordStrengthIndicator({
|
|
195
133
|
password,
|
|
196
|
-
config
|
|
197
|
-
appearance = {}
|
|
134
|
+
config
|
|
198
135
|
}) {
|
|
199
136
|
const requirements = createRequirements(config);
|
|
200
|
-
return /* @__PURE__ */
|
|
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(
|
|
201
138
|
"div",
|
|
202
139
|
{
|
|
203
|
-
className:
|
|
204
|
-
children:
|
|
205
|
-
/* @__PURE__ */
|
|
140
|
+
className: `if-passwordStrength-requirement ${req.test(password) ? "met" : "unmet"}`,
|
|
141
|
+
children: [
|
|
142
|
+
/* @__PURE__ */ jsx(
|
|
206
143
|
"div",
|
|
207
144
|
{
|
|
208
|
-
|
|
209
|
-
"flex
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
145
|
+
style: {
|
|
146
|
+
display: "flex",
|
|
147
|
+
alignItems: "center",
|
|
148
|
+
justifyContent: "center",
|
|
149
|
+
width: "1rem",
|
|
150
|
+
height: "1rem",
|
|
151
|
+
borderRadius: "50%",
|
|
152
|
+
border: "2px solid",
|
|
153
|
+
borderColor: req.test(password) ? "transparent" : "#9ca3af",
|
|
154
|
+
backgroundColor: req.test(password) ? "#059669" : "white",
|
|
155
|
+
transition: "all 0.2s"
|
|
156
|
+
},
|
|
157
|
+
children: req.test(password) && /* @__PURE__ */ jsx(Check, { style: { width: "0.75rem", height: "0.75rem", color: "white" } })
|
|
213
158
|
}
|
|
214
159
|
),
|
|
215
|
-
/* @__PURE__ */
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
appearance.requirementClassName
|
|
221
|
-
),
|
|
222
|
-
children: req.label
|
|
223
|
-
}
|
|
224
|
-
)
|
|
225
|
-
] }, req.label))
|
|
226
|
-
}
|
|
227
|
-
);
|
|
160
|
+
/* @__PURE__ */ jsx("span", { children: req.label })
|
|
161
|
+
]
|
|
162
|
+
},
|
|
163
|
+
req.label
|
|
164
|
+
)) }) });
|
|
228
165
|
}
|
|
229
166
|
function createRequirements(config) {
|
|
230
167
|
const requirements = [];
|
|
231
|
-
|
|
232
|
-
const requireUppercase = config.requireUppercase;
|
|
233
|
-
const requireLowercase = config.requireLowercase;
|
|
234
|
-
const requireNumber = config.requireNumber;
|
|
235
|
-
const requireSpecialChar = config.requireSpecialChar;
|
|
236
|
-
if (requireUppercase) {
|
|
168
|
+
if (config.passwordMinLength) {
|
|
237
169
|
requirements.push({
|
|
238
|
-
label:
|
|
239
|
-
test: (
|
|
170
|
+
label: `At least ${config.passwordMinLength} characters`,
|
|
171
|
+
test: (password) => password.length >= config.passwordMinLength
|
|
240
172
|
});
|
|
241
173
|
}
|
|
242
|
-
if (requireLowercase) {
|
|
174
|
+
if (config.requireLowercase) {
|
|
243
175
|
requirements.push({
|
|
244
|
-
label: "
|
|
245
|
-
test: (
|
|
176
|
+
label: "Contains lowercase letter",
|
|
177
|
+
test: (password) => /[a-z]/.test(password)
|
|
246
178
|
});
|
|
247
179
|
}
|
|
248
|
-
if (
|
|
180
|
+
if (config.requireUppercase) {
|
|
249
181
|
requirements.push({
|
|
250
|
-
label: "
|
|
251
|
-
test: (
|
|
182
|
+
label: "Contains uppercase letter",
|
|
183
|
+
test: (password) => /[A-Z]/.test(password)
|
|
252
184
|
});
|
|
253
185
|
}
|
|
254
|
-
if (
|
|
186
|
+
if (config.requireNumber) {
|
|
187
|
+
requirements.push({
|
|
188
|
+
label: "Contains number",
|
|
189
|
+
test: (password) => /\d/.test(password)
|
|
190
|
+
});
|
|
191
|
+
}
|
|
192
|
+
if (config.requireSpecialChar) {
|
|
255
193
|
requirements.push({
|
|
256
|
-
label: "
|
|
257
|
-
test: (
|
|
194
|
+
label: "Contains special character",
|
|
195
|
+
test: (password) => /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(password)
|
|
258
196
|
});
|
|
259
197
|
}
|
|
260
|
-
requirements.push({
|
|
261
|
-
label: `${minLength} characters or more`,
|
|
262
|
-
test: (pwd) => pwd.length >= minLength
|
|
263
|
-
});
|
|
264
198
|
return requirements;
|
|
265
199
|
}
|
|
266
|
-
function validatePasswordStrength(password, config) {
|
|
267
|
-
if (!password) return false;
|
|
268
|
-
const requirements = createRequirements(config);
|
|
269
|
-
return requirements.every((req) => req.test(password));
|
|
270
|
-
}
|
|
271
200
|
function AuthPasswordField({
|
|
272
201
|
label,
|
|
273
202
|
id,
|
|
@@ -275,187 +204,125 @@ function AuthPasswordField({
|
|
|
275
204
|
authConfig,
|
|
276
205
|
forgotPasswordLink,
|
|
277
206
|
value,
|
|
278
|
-
appearance = {},
|
|
279
207
|
onFocus,
|
|
280
208
|
...props
|
|
281
209
|
}) {
|
|
282
|
-
const [showPassword, setShowPassword] =
|
|
283
|
-
const [showStrength, setShowStrength] =
|
|
210
|
+
const [showPassword, setShowPassword] = useState(false);
|
|
211
|
+
const [showStrength, setShowStrength] = useState(false);
|
|
284
212
|
const handleFocus = (e) => {
|
|
285
213
|
if (showStrengthIndicator) {
|
|
286
214
|
setShowStrength(true);
|
|
287
215
|
}
|
|
288
216
|
onFocus?.(e);
|
|
289
217
|
};
|
|
290
|
-
return /* @__PURE__ */
|
|
291
|
-
"div",
|
|
292
|
-
|
|
293
|
-
className:
|
|
294
|
-
|
|
295
|
-
|
|
218
|
+
return /* @__PURE__ */ jsxs("div", { className: "if-passwordField if-internal-p5w9m7", children: [
|
|
219
|
+
(label || forgotPasswordLink) && /* @__PURE__ */ jsxs("div", { className: "if-passwordField-labelRow", children: [
|
|
220
|
+
/* @__PURE__ */ jsx("label", { htmlFor: id, className: "if-passwordField-label", children: label }),
|
|
221
|
+
forgotPasswordLink && /* @__PURE__ */ jsx("a", { href: forgotPasswordLink.href, className: "if-passwordField-forgotLink", children: forgotPasswordLink.text || "Forget Password?" })
|
|
222
|
+
] }),
|
|
223
|
+
/* @__PURE__ */ jsxs("div", { className: "if-passwordField-inputWrapper", children: [
|
|
224
|
+
/* @__PURE__ */ jsx(
|
|
225
|
+
"input",
|
|
226
|
+
{
|
|
227
|
+
id,
|
|
228
|
+
type: showPassword ? "text" : "password",
|
|
229
|
+
className: "if-passwordField-input",
|
|
230
|
+
value,
|
|
231
|
+
onFocus: handleFocus,
|
|
232
|
+
...props
|
|
233
|
+
}
|
|
296
234
|
),
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
forgotPasswordLink && /* @__PURE__ */ jsxRuntime.jsx(
|
|
311
|
-
"a",
|
|
312
|
-
{
|
|
313
|
-
href: forgotPasswordLink.href,
|
|
314
|
-
className: "text-right text-sm font-normal text-[#737373] leading-6",
|
|
315
|
-
children: forgotPasswordLink.text || "Forget Password?"
|
|
316
|
-
}
|
|
317
|
-
)
|
|
318
|
-
] }),
|
|
319
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
|
|
320
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
321
|
-
"input",
|
|
322
|
-
{
|
|
323
|
-
id,
|
|
324
|
-
type: showPassword ? "text" : "password",
|
|
325
|
-
className: cn(
|
|
326
|
-
"w-full flex items-center gap-2 self-stretch",
|
|
327
|
-
"pl-3 py-2 pr-8 rounded border border-[#D4D4D4] bg-white",
|
|
328
|
-
"text-sm font-normal leading-5",
|
|
329
|
-
"placeholder:text-[#A3A3A3] placeholder:font-sm placeholder:font-normal",
|
|
330
|
-
"focus:outline-none focus:border-black",
|
|
331
|
-
appearance.inputClassName
|
|
332
|
-
),
|
|
333
|
-
value,
|
|
334
|
-
onFocus: handleFocus,
|
|
335
|
-
...props
|
|
336
|
-
}
|
|
337
|
-
),
|
|
338
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
339
|
-
"button",
|
|
340
|
-
{
|
|
341
|
-
type: "button",
|
|
342
|
-
onClick: () => setShowPassword(!showPassword),
|
|
343
|
-
className: "absolute right-2 top-1/2 -translate-y-1/2 bg-transparent border-none text-[#A6A6A6] cursor-pointer transition-colors hover:text-gray-600 flex items-center justify-center",
|
|
344
|
-
"aria-label": showPassword ? "Hide password" : "Show password",
|
|
345
|
-
children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { size: 20 })
|
|
346
|
-
}
|
|
347
|
-
)
|
|
348
|
-
] }),
|
|
349
|
-
showStrengthIndicator && showStrength && /* @__PURE__ */ jsxRuntime.jsx(
|
|
350
|
-
AuthPasswordStrengthIndicator,
|
|
351
|
-
{
|
|
352
|
-
password: String(value || ""),
|
|
353
|
-
config: authConfig
|
|
354
|
-
}
|
|
355
|
-
)
|
|
356
|
-
]
|
|
357
|
-
}
|
|
358
|
-
);
|
|
235
|
+
/* @__PURE__ */ jsx(
|
|
236
|
+
"button",
|
|
237
|
+
{
|
|
238
|
+
type: "button",
|
|
239
|
+
onClick: () => setShowPassword(!showPassword),
|
|
240
|
+
className: "if-passwordField-toggleButton",
|
|
241
|
+
"aria-label": showPassword ? "Hide password" : "Show password",
|
|
242
|
+
children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { size: 20 }) : /* @__PURE__ */ jsx(Eye, { size: 20 })
|
|
243
|
+
}
|
|
244
|
+
)
|
|
245
|
+
] }),
|
|
246
|
+
showStrengthIndicator && showStrength && /* @__PURE__ */ jsx(AuthPasswordStrengthIndicator, { password: String(value || ""), config: authConfig })
|
|
247
|
+
] });
|
|
359
248
|
}
|
|
360
249
|
function AuthSubmitButton({
|
|
361
250
|
children,
|
|
362
251
|
isLoading = false,
|
|
363
252
|
confirmed = false,
|
|
364
253
|
disabled = false,
|
|
365
|
-
|
|
254
|
+
type = "submit",
|
|
255
|
+
onClick
|
|
366
256
|
}) {
|
|
367
|
-
return /* @__PURE__ */
|
|
257
|
+
return /* @__PURE__ */ jsxs(
|
|
368
258
|
"button",
|
|
369
259
|
{
|
|
370
|
-
type
|
|
371
|
-
className:
|
|
372
|
-
"rounded-sm bg-black w-full flex mt-4 px-4 py-2",
|
|
373
|
-
"justify-center items-center gap-2.5 self-stretch",
|
|
374
|
-
"text-white font-semibold font-manrope text-base leading-normal",
|
|
375
|
-
"border-none cursor-pointer transition-colors",
|
|
376
|
-
"hover:bg-gray-800",
|
|
377
|
-
"disabled:opacity-50 disabled:cursor-not-allowed",
|
|
378
|
-
className
|
|
379
|
-
),
|
|
260
|
+
type,
|
|
261
|
+
className: "if-submitButton if-internal-b8p3m4",
|
|
380
262
|
disabled: disabled || isLoading || confirmed,
|
|
263
|
+
onClick,
|
|
381
264
|
children: [
|
|
382
|
-
isLoading && /* @__PURE__ */
|
|
383
|
-
confirmed && /* @__PURE__ */
|
|
265
|
+
isLoading && /* @__PURE__ */ jsx(Loader2, { className: "if-submitButton-icon if-submitButton-spinner", size: 20 }),
|
|
266
|
+
confirmed && /* @__PURE__ */ jsx(CircleCheck, { className: "if-submitButton-icon", size: 20 }),
|
|
384
267
|
children
|
|
385
268
|
]
|
|
386
269
|
}
|
|
387
270
|
);
|
|
388
271
|
}
|
|
389
|
-
function AuthLink({ text, linkText, href
|
|
390
|
-
const
|
|
272
|
+
function AuthLink({ text, linkText, href }) {
|
|
273
|
+
const [searchParams] = useSearchParams();
|
|
274
|
+
const currentSearch = searchParams.toString();
|
|
391
275
|
const finalHref = (() => {
|
|
392
|
-
if (!currentSearch)
|
|
276
|
+
if (!currentSearch) {
|
|
277
|
+
return href;
|
|
278
|
+
}
|
|
393
279
|
try {
|
|
394
280
|
const url = new URL(href, window.location.origin);
|
|
395
|
-
|
|
396
|
-
currentParams.forEach((value, key) => {
|
|
397
|
-
if (!url.searchParams.has(key)) {
|
|
398
|
-
url.searchParams.set(key, value);
|
|
399
|
-
}
|
|
400
|
-
});
|
|
281
|
+
url.search = currentSearch;
|
|
401
282
|
return url.pathname + url.search;
|
|
402
283
|
} catch {
|
|
403
284
|
return href;
|
|
404
285
|
}
|
|
405
286
|
})();
|
|
406
|
-
return /* @__PURE__ */
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
text,
|
|
411
|
-
" ",
|
|
412
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
413
|
-
"a",
|
|
414
|
-
{
|
|
415
|
-
href: finalHref,
|
|
416
|
-
className: cn(
|
|
417
|
-
"text-sm font-medium text-black leading-6",
|
|
418
|
-
appearance.linkClassName
|
|
419
|
-
),
|
|
420
|
-
children: linkText
|
|
421
|
-
}
|
|
422
|
-
)
|
|
287
|
+
return /* @__PURE__ */ jsxs("p", { className: "if-authLink if-internal-al5w9p", children: [
|
|
288
|
+
text && /* @__PURE__ */ jsx("span", { className: "if-authLink-text", children: text }),
|
|
289
|
+
text && " ",
|
|
290
|
+
/* @__PURE__ */ jsx("a", { href: finalHref, className: "if-authLink-link", children: linkText })
|
|
423
291
|
] });
|
|
424
292
|
}
|
|
425
|
-
function AuthDivider({ text = "or"
|
|
426
|
-
return /* @__PURE__ */
|
|
427
|
-
"
|
|
428
|
-
"
|
|
429
|
-
"
|
|
430
|
-
|
|
431
|
-
), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold font-manrope text-[#A3A3A3] leading-normal", children: text }) });
|
|
293
|
+
function AuthDivider({ text = "or" }) {
|
|
294
|
+
return /* @__PURE__ */ jsxs("div", { className: "if-authDivider if-internal-ad7k3m", children: [
|
|
295
|
+
/* @__PURE__ */ jsx("div", { className: "if-authDivider-line" }),
|
|
296
|
+
/* @__PURE__ */ jsx("span", { className: "if-authDivider-text", children: text }),
|
|
297
|
+
/* @__PURE__ */ jsx("div", { className: "if-authDivider-line" })
|
|
298
|
+
] });
|
|
432
299
|
}
|
|
433
300
|
var OAUTH_PROVIDER_CONFIG = {
|
|
434
301
|
google: {
|
|
435
302
|
name: "Google",
|
|
436
|
-
svg: /* @__PURE__ */
|
|
437
|
-
/* @__PURE__ */
|
|
303
|
+
svg: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
|
|
304
|
+
/* @__PURE__ */ jsx(
|
|
438
305
|
"path",
|
|
439
306
|
{
|
|
440
307
|
d: "M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z",
|
|
441
308
|
fill: "#4285F4"
|
|
442
309
|
}
|
|
443
310
|
),
|
|
444
|
-
/* @__PURE__ */
|
|
311
|
+
/* @__PURE__ */ jsx(
|
|
445
312
|
"path",
|
|
446
313
|
{
|
|
447
314
|
d: "M9 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.258c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332C2.438 15.983 5.482 18 9 18z",
|
|
448
315
|
fill: "#34A853"
|
|
449
316
|
}
|
|
450
317
|
),
|
|
451
|
-
/* @__PURE__ */
|
|
318
|
+
/* @__PURE__ */ jsx(
|
|
452
319
|
"path",
|
|
453
320
|
{
|
|
454
321
|
d: "M3.964 10.707c-.18-.54-.282-1.117-.282-1.707 0-.593.102-1.17.282-1.709V4.958H.957C.347 6.173 0 7.548 0 9c0 1.452.348 2.827.957 4.042l3.007-2.335z",
|
|
455
322
|
fill: "#FBBC05"
|
|
456
323
|
}
|
|
457
324
|
),
|
|
458
|
-
/* @__PURE__ */
|
|
325
|
+
/* @__PURE__ */ jsx(
|
|
459
326
|
"path",
|
|
460
327
|
{
|
|
461
328
|
d: "M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0 5.482 0 2.438 2.017.957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z",
|
|
@@ -467,12 +334,12 @@ var OAUTH_PROVIDER_CONFIG = {
|
|
|
467
334
|
},
|
|
468
335
|
github: {
|
|
469
336
|
name: "GitHub",
|
|
470
|
-
svg: /* @__PURE__ */
|
|
337
|
+
svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" }) }),
|
|
471
338
|
className: "insforge-oauth-github"
|
|
472
339
|
},
|
|
473
340
|
discord: {
|
|
474
341
|
name: "Discord",
|
|
475
|
-
svg: /* @__PURE__ */
|
|
342
|
+
svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
|
|
476
343
|
"path",
|
|
477
344
|
{
|
|
478
345
|
d: "M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z",
|
|
@@ -483,7 +350,7 @@ var OAUTH_PROVIDER_CONFIG = {
|
|
|
483
350
|
},
|
|
484
351
|
facebook: {
|
|
485
352
|
name: "Facebook",
|
|
486
|
-
svg: /* @__PURE__ */
|
|
353
|
+
svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
|
|
487
354
|
"path",
|
|
488
355
|
{
|
|
489
356
|
d: "M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047v-2.66c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.236 2.686.236v2.971H15.83c-1.49 0-1.955.93-1.955 1.886v2.264h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z",
|
|
@@ -494,7 +361,7 @@ var OAUTH_PROVIDER_CONFIG = {
|
|
|
494
361
|
},
|
|
495
362
|
linkedin: {
|
|
496
363
|
name: "LinkedIn",
|
|
497
|
-
svg: /* @__PURE__ */
|
|
364
|
+
svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
|
|
498
365
|
"path",
|
|
499
366
|
{
|
|
500
367
|
d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z",
|
|
@@ -505,45 +372,45 @@ var OAUTH_PROVIDER_CONFIG = {
|
|
|
505
372
|
},
|
|
506
373
|
microsoft: {
|
|
507
374
|
name: "Microsoft",
|
|
508
|
-
svg: /* @__PURE__ */
|
|
509
|
-
/* @__PURE__ */
|
|
510
|
-
/* @__PURE__ */
|
|
511
|
-
/* @__PURE__ */
|
|
512
|
-
/* @__PURE__ */
|
|
375
|
+
svg: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 23 23", fill: "none", children: [
|
|
376
|
+
/* @__PURE__ */ jsx("path", { d: "M0 0h11v11H0z", fill: "#F25022" }),
|
|
377
|
+
/* @__PURE__ */ jsx("path", { d: "M12 0h11v11H12z", fill: "#7FBA00" }),
|
|
378
|
+
/* @__PURE__ */ jsx("path", { d: "M0 12h11v11H0z", fill: "#00A4EF" }),
|
|
379
|
+
/* @__PURE__ */ jsx("path", { d: "M12 12h11v11H12z", fill: "#FFB900" })
|
|
513
380
|
] }),
|
|
514
381
|
className: "insforge-oauth-microsoft"
|
|
515
382
|
},
|
|
516
383
|
apple: {
|
|
517
384
|
name: "Apple",
|
|
518
|
-
svg: /* @__PURE__ */
|
|
385
|
+
svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" }) }),
|
|
519
386
|
className: "insforge-oauth-apple"
|
|
520
387
|
},
|
|
521
388
|
x: {
|
|
522
389
|
name: "X",
|
|
523
|
-
svg: /* @__PURE__ */
|
|
390
|
+
svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) }),
|
|
524
391
|
className: "insforge-oauth-x"
|
|
525
392
|
},
|
|
526
393
|
instagram: {
|
|
527
394
|
name: "Instagram",
|
|
528
|
-
svg: /* @__PURE__ */
|
|
529
|
-
/* @__PURE__ */
|
|
395
|
+
svg: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: [
|
|
396
|
+
/* @__PURE__ */ jsx(
|
|
530
397
|
"path",
|
|
531
398
|
{
|
|
532
399
|
d: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z",
|
|
533
400
|
fill: "url(#instagram-gradient)"
|
|
534
401
|
}
|
|
535
402
|
),
|
|
536
|
-
/* @__PURE__ */
|
|
537
|
-
/* @__PURE__ */
|
|
538
|
-
/* @__PURE__ */
|
|
539
|
-
/* @__PURE__ */
|
|
403
|
+
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "instagram-gradient", x1: "0%", y1: "100%", x2: "100%", y2: "0%", children: [
|
|
404
|
+
/* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#FD5949" }),
|
|
405
|
+
/* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "#D6249F" }),
|
|
406
|
+
/* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#285AEB" })
|
|
540
407
|
] }) })
|
|
541
408
|
] }),
|
|
542
409
|
className: "insforge-oauth-instagram"
|
|
543
410
|
},
|
|
544
411
|
tiktok: {
|
|
545
412
|
name: "TikTok",
|
|
546
|
-
svg: /* @__PURE__ */
|
|
413
|
+
svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
|
|
547
414
|
"path",
|
|
548
415
|
{
|
|
549
416
|
d: "M19.589 6.686a4.793 4.793 0 01-3.77-4.245V2h-3.445v13.672a2.896 2.896 0 01-5.201 1.743l-.002-.001.002.001a2.895 2.895 0 013.183-4.51v-3.5a6.329 6.329 0 00-5.394 10.692 6.33 6.33 0 0010.857-4.424V8.687a8.182 8.182 0 004.773 1.526V6.79a4.831 4.831 0 01-1.003-.104z",
|
|
@@ -554,7 +421,7 @@ var OAUTH_PROVIDER_CONFIG = {
|
|
|
554
421
|
},
|
|
555
422
|
spotify: {
|
|
556
423
|
name: "Spotify",
|
|
557
|
-
svg: /* @__PURE__ */
|
|
424
|
+
svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
|
|
558
425
|
"path",
|
|
559
426
|
{
|
|
560
427
|
d: "M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z",
|
|
@@ -573,43 +440,39 @@ function AuthOAuthButton({
|
|
|
573
440
|
disabled,
|
|
574
441
|
loading,
|
|
575
442
|
displayMode = "full",
|
|
576
|
-
style
|
|
577
|
-
className
|
|
443
|
+
style
|
|
578
444
|
}) {
|
|
579
445
|
const config = getProviderConfig(provider);
|
|
580
446
|
if (!config) {
|
|
581
447
|
return null;
|
|
582
448
|
}
|
|
583
449
|
const getButtonText = () => {
|
|
584
|
-
if (
|
|
585
|
-
|
|
586
|
-
|
|
450
|
+
if (displayMode === "full") {
|
|
451
|
+
return `Continue with ${config.name}`;
|
|
452
|
+
}
|
|
453
|
+
if (displayMode === "short") {
|
|
454
|
+
return config.name;
|
|
455
|
+
}
|
|
587
456
|
return "";
|
|
588
457
|
};
|
|
589
|
-
|
|
458
|
+
const className = [
|
|
459
|
+
"if-oauthButton",
|
|
460
|
+
"if-internal-o4k7w2",
|
|
461
|
+
displayMode === "full" && "if-oauthButton-full",
|
|
462
|
+
displayMode === "short" && "if-oauthButton-short",
|
|
463
|
+
displayMode === "icon" && "if-oauthButton-icon-only"
|
|
464
|
+
].filter(Boolean).join(" ");
|
|
465
|
+
return /* @__PURE__ */ jsxs(
|
|
590
466
|
"button",
|
|
591
467
|
{
|
|
592
468
|
type: "button",
|
|
593
469
|
onClick: () => onClick(provider),
|
|
594
|
-
className
|
|
595
|
-
"flex w-full h-9 px-3 py-2",
|
|
596
|
-
"flex-row justify-center items-center gap-3",
|
|
597
|
-
"rounded-md border border-[#E4E4E7] bg-white",
|
|
598
|
-
"shadow-[0_1px_2px_0_rgba(0,0,0,0.10)]",
|
|
599
|
-
"text-[#09090B] text-center text-sm font-medium leading-5",
|
|
600
|
-
"cursor-pointer transition-all duration-200",
|
|
601
|
-
"hover:bg-[#f9fafb] hover:border-[#9ca3af]",
|
|
602
|
-
"disabled:opacity-60 disabled:cursor-not-allowed",
|
|
603
|
-
displayMode === "full" && "justify-center",
|
|
604
|
-
displayMode === "short" && "justify-center px-2 gap-2",
|
|
605
|
-
displayMode === "icon" && "justify-center gap-0",
|
|
606
|
-
className
|
|
607
|
-
),
|
|
470
|
+
className,
|
|
608
471
|
disabled: disabled || loading,
|
|
609
472
|
style,
|
|
610
473
|
children: [
|
|
611
|
-
loading ? /* @__PURE__ */
|
|
612
|
-
getButtonText() && /* @__PURE__ */
|
|
474
|
+
loading ? /* @__PURE__ */ jsx(Loader2, { className: "if-oauthButton-icon if-submitButton-spinner", size: 18 }) : /* @__PURE__ */ jsx("span", { className: "if-oauthButton-icon", children: config.svg }),
|
|
475
|
+
getButtonText() && /* @__PURE__ */ jsx("span", { children: getButtonText() })
|
|
613
476
|
]
|
|
614
477
|
}
|
|
615
478
|
);
|
|
@@ -618,16 +481,19 @@ function AuthOAuthProviders({
|
|
|
618
481
|
providers,
|
|
619
482
|
onClick,
|
|
620
483
|
disabled,
|
|
621
|
-
loading
|
|
622
|
-
appearance = {}
|
|
484
|
+
loading
|
|
623
485
|
}) {
|
|
624
486
|
if (!providers || providers.length === 0) {
|
|
625
487
|
return null;
|
|
626
488
|
}
|
|
627
489
|
const count = providers.length;
|
|
628
490
|
const getDisplayMode = () => {
|
|
629
|
-
if (count === 1)
|
|
630
|
-
|
|
491
|
+
if (count === 1) {
|
|
492
|
+
return "full";
|
|
493
|
+
}
|
|
494
|
+
if (count === 2 || count === 4) {
|
|
495
|
+
return "short";
|
|
496
|
+
}
|
|
631
497
|
return "icon";
|
|
632
498
|
};
|
|
633
499
|
const getGridColumnStyle = (index) => {
|
|
@@ -663,22 +529,30 @@ function AuthOAuthProviders({
|
|
|
663
529
|
return { gridColumn: "span 2 / span 2" };
|
|
664
530
|
}
|
|
665
531
|
};
|
|
666
|
-
return /* @__PURE__ */
|
|
667
|
-
"
|
|
668
|
-
appearance.containerClassName
|
|
669
|
-
), children: providers.map((provider, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
670
|
-
AuthOAuthButton,
|
|
532
|
+
return /* @__PURE__ */ jsx(
|
|
533
|
+
"div",
|
|
671
534
|
{
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
535
|
+
className: "if-oauthProviders if-internal-op3m8k",
|
|
536
|
+
style: {
|
|
537
|
+
display: "grid",
|
|
538
|
+
gridTemplateColumns: "repeat(6, 1fr)",
|
|
539
|
+
gap: "0.75rem",
|
|
540
|
+
width: "100%"
|
|
541
|
+
},
|
|
542
|
+
children: providers.map((provider, index) => /* @__PURE__ */ jsx(
|
|
543
|
+
AuthOAuthButton,
|
|
544
|
+
{
|
|
545
|
+
provider,
|
|
546
|
+
onClick,
|
|
547
|
+
disabled,
|
|
548
|
+
loading: loading === provider,
|
|
549
|
+
displayMode: getDisplayMode(),
|
|
550
|
+
style: getGridColumnStyle(index)
|
|
551
|
+
},
|
|
552
|
+
provider
|
|
553
|
+
))
|
|
554
|
+
}
|
|
555
|
+
);
|
|
682
556
|
}
|
|
683
557
|
function AuthVerificationCodeInput({
|
|
684
558
|
length = 6,
|
|
@@ -686,13 +560,16 @@ function AuthVerificationCodeInput({
|
|
|
686
560
|
email,
|
|
687
561
|
onChange,
|
|
688
562
|
disabled = false,
|
|
689
|
-
onComplete
|
|
690
|
-
appearance = {}
|
|
563
|
+
onComplete
|
|
691
564
|
}) {
|
|
692
|
-
const inputRefs =
|
|
565
|
+
const inputRefs = useRef([]);
|
|
693
566
|
const handleChange = (index, digit) => {
|
|
694
|
-
if (digit.length > 1)
|
|
695
|
-
|
|
567
|
+
if (digit.length > 1) {
|
|
568
|
+
return;
|
|
569
|
+
}
|
|
570
|
+
if (digit && !/^\d$/.test(digit)) {
|
|
571
|
+
return;
|
|
572
|
+
}
|
|
696
573
|
const newValue = value.split("");
|
|
697
574
|
newValue[index] = digit;
|
|
698
575
|
const updatedValue = newValue.join("");
|
|
@@ -728,17 +605,14 @@ function AuthVerificationCodeInput({
|
|
|
728
605
|
}
|
|
729
606
|
}
|
|
730
607
|
};
|
|
731
|
-
return /* @__PURE__ */
|
|
732
|
-
"
|
|
733
|
-
appearance.containerClassName
|
|
734
|
-
), children: [
|
|
735
|
-
/* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-normal text-[#525252] leading-5", children: [
|
|
608
|
+
return /* @__PURE__ */ jsxs("div", { className: "if-verificationCode if-internal-vc8m4p", children: [
|
|
609
|
+
/* @__PURE__ */ jsxs("p", { className: "if-verificationCode-description", children: [
|
|
736
610
|
"We've sent a verification code to your inbox at",
|
|
737
611
|
" ",
|
|
738
|
-
/* @__PURE__ */
|
|
612
|
+
/* @__PURE__ */ jsx("span", { className: "if-verificationCode-email", children: email }),
|
|
739
613
|
". Enter it below to proceed."
|
|
740
614
|
] }),
|
|
741
|
-
/* @__PURE__ */
|
|
615
|
+
/* @__PURE__ */ jsx("div", { className: "if-verificationCode-inputContainer", children: Array.from({ length }).map((_, index) => /* @__PURE__ */ jsx(
|
|
742
616
|
"input",
|
|
743
617
|
{
|
|
744
618
|
ref: (el) => {
|
|
@@ -752,14 +626,7 @@ function AuthVerificationCodeInput({
|
|
|
752
626
|
onKeyDown: (e) => handleKeyDown(index, e),
|
|
753
627
|
onPaste: handlePaste,
|
|
754
628
|
disabled,
|
|
755
|
-
className:
|
|
756
|
-
"w-full h-12 px-3 py-2 rounded border border-[#E0E0E0] bg-white",
|
|
757
|
-
"text-center text-base font-semibold leading-5 text-black",
|
|
758
|
-
"transition-all duration-200 outline-none",
|
|
759
|
-
"focus:border-black focus:shadow-[0_0_0_2px_rgba(0,0,0,0.1)]",
|
|
760
|
-
"disabled:bg-[#F5F5F5] disabled:cursor-not-allowed disabled:opacity-60",
|
|
761
|
-
appearance.inputClassName
|
|
762
|
-
),
|
|
629
|
+
className: "if-verificationCode-input",
|
|
763
630
|
autoComplete: "one-time-code"
|
|
764
631
|
},
|
|
765
632
|
index
|
|
@@ -768,29 +635,27 @@ function AuthVerificationCodeInput({
|
|
|
768
635
|
}
|
|
769
636
|
function AuthEmailVerificationStep({
|
|
770
637
|
email,
|
|
771
|
-
description,
|
|
772
638
|
method = "code",
|
|
773
639
|
onVerifyCode
|
|
774
640
|
}) {
|
|
775
|
-
const {
|
|
776
|
-
const [
|
|
777
|
-
const [
|
|
778
|
-
const [
|
|
779
|
-
const [
|
|
780
|
-
const [
|
|
781
|
-
const [isVerifying, setIsVerifying] = react.useState(false);
|
|
782
|
-
const [verificationError, setVerificationError] = react.useState("");
|
|
641
|
+
const { sendVerificationEmail } = useInsforge();
|
|
642
|
+
const [resendDisabled, setResendDisabled] = useState(true);
|
|
643
|
+
const [resendCountdown, setResendCountdown] = useState(60);
|
|
644
|
+
const [isSending, setIsSending] = useState(false);
|
|
645
|
+
const [verificationCode, setVerificationCode] = useState("");
|
|
646
|
+
const [isVerifying, setIsVerifying] = useState(false);
|
|
783
647
|
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.";
|
|
784
|
-
|
|
648
|
+
useEffect(() => {
|
|
785
649
|
const sendInitialEmail = async () => {
|
|
786
650
|
try {
|
|
787
|
-
await
|
|
788
|
-
} catch {
|
|
651
|
+
await sendVerificationEmail(email);
|
|
652
|
+
} catch (error) {
|
|
653
|
+
console.error("Failed to send verification email:", error);
|
|
789
654
|
}
|
|
790
655
|
};
|
|
791
656
|
void sendInitialEmail();
|
|
792
|
-
}, [email,
|
|
793
|
-
|
|
657
|
+
}, [email, sendVerificationEmail]);
|
|
658
|
+
useEffect(() => {
|
|
794
659
|
if (resendCountdown > 0) {
|
|
795
660
|
const timer = setInterval(() => {
|
|
796
661
|
setResendCountdown((prev) => {
|
|
@@ -808,9 +673,8 @@ function AuthEmailVerificationStep({
|
|
|
808
673
|
setResendDisabled(true);
|
|
809
674
|
setResendCountdown(60);
|
|
810
675
|
setIsSending(true);
|
|
811
|
-
setVerificationError("");
|
|
812
676
|
try {
|
|
813
|
-
await
|
|
677
|
+
await sendVerificationEmail(email);
|
|
814
678
|
} catch {
|
|
815
679
|
setResendDisabled(false);
|
|
816
680
|
setResendCountdown(0);
|
|
@@ -818,59 +682,153 @@ function AuthEmailVerificationStep({
|
|
|
818
682
|
setIsSending(false);
|
|
819
683
|
}
|
|
820
684
|
};
|
|
821
|
-
const
|
|
822
|
-
if (!onVerifyCode) {
|
|
685
|
+
const handleSubmit = async () => {
|
|
686
|
+
if (!onVerifyCode || verificationCode.length !== 6) {
|
|
823
687
|
return;
|
|
824
688
|
}
|
|
825
689
|
setIsVerifying(true);
|
|
826
|
-
setVerificationError("");
|
|
827
690
|
try {
|
|
828
|
-
await onVerifyCode(
|
|
829
|
-
} catch (error) {
|
|
830
|
-
setVerificationError(
|
|
831
|
-
error instanceof Error ? error.message : "Invalid verification code. Please try again."
|
|
832
|
-
);
|
|
833
|
-
setVerificationCode("");
|
|
691
|
+
await onVerifyCode(verificationCode);
|
|
834
692
|
} finally {
|
|
835
693
|
setIsVerifying(false);
|
|
694
|
+
setVerificationCode("");
|
|
836
695
|
}
|
|
837
696
|
};
|
|
838
|
-
const displayDescription =
|
|
839
|
-
|
|
840
|
-
|
|
697
|
+
const displayDescription = defaultDescription;
|
|
698
|
+
const isLinkMethod = method === "link";
|
|
699
|
+
return /* @__PURE__ */ jsxs("div", { className: "if-verificationStep", children: [
|
|
700
|
+
/* @__PURE__ */ jsx("p", { className: "if-verificationStep-description", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxs("span", { children: [
|
|
841
701
|
part,
|
|
842
|
-
index < array.length - 1 && /* @__PURE__ */
|
|
702
|
+
index < array.length - 1 && /* @__PURE__ */ jsx("span", { className: "if-verificationCode-email", children: email })
|
|
843
703
|
] }, index)) }),
|
|
844
|
-
|
|
845
|
-
/* @__PURE__ */
|
|
846
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-600 flex-1", children: verificationError })
|
|
847
|
-
] }) }),
|
|
848
|
-
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: [
|
|
849
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
704
|
+
!isLinkMethod && /* @__PURE__ */ jsxs("div", { className: "if-verificationStep-codeContainer", children: [
|
|
705
|
+
/* @__PURE__ */ jsx("div", { className: "if-verificationStep-codeInputWrapper", children: /* @__PURE__ */ jsx(
|
|
850
706
|
AuthVerificationCodeInput,
|
|
851
707
|
{
|
|
852
708
|
value: verificationCode,
|
|
853
709
|
onChange: setVerificationCode,
|
|
854
710
|
email,
|
|
855
|
-
disabled: isVerifying
|
|
856
|
-
|
|
857
|
-
|
|
711
|
+
disabled: isVerifying
|
|
712
|
+
}
|
|
713
|
+
) }),
|
|
714
|
+
/* @__PURE__ */ jsx(
|
|
715
|
+
AuthSubmitButton,
|
|
716
|
+
{
|
|
717
|
+
type: "button",
|
|
718
|
+
isLoading: isVerifying,
|
|
719
|
+
disabled: isVerifying || verificationCode.length !== 6,
|
|
720
|
+
onClick: () => {
|
|
721
|
+
void handleSubmit();
|
|
722
|
+
},
|
|
723
|
+
children: isVerifying ? "Verifying..." : "Verify Code"
|
|
724
|
+
}
|
|
725
|
+
)
|
|
726
|
+
] }),
|
|
727
|
+
/* @__PURE__ */ jsxs("div", { className: "if-verificationStep-resendContainer", children: [
|
|
728
|
+
"Didn't receive the email?",
|
|
729
|
+
" ",
|
|
730
|
+
/* @__PURE__ */ jsx(
|
|
731
|
+
"button",
|
|
732
|
+
{
|
|
733
|
+
onClick: () => {
|
|
734
|
+
void handleResend();
|
|
735
|
+
},
|
|
736
|
+
disabled: resendDisabled || isSending,
|
|
737
|
+
className: "if-verificationStep-resendButton",
|
|
738
|
+
children: isSending ? "Sending..." : resendDisabled ? `Retry in (${resendCountdown}s)` : "Click to resend"
|
|
739
|
+
}
|
|
740
|
+
)
|
|
741
|
+
] })
|
|
742
|
+
] });
|
|
743
|
+
}
|
|
744
|
+
function AuthResetPasswordVerificationStep({
|
|
745
|
+
email,
|
|
746
|
+
method,
|
|
747
|
+
onVerifyCode,
|
|
748
|
+
onResendEmail
|
|
749
|
+
}) {
|
|
750
|
+
const [resendDisabled, setResendDisabled] = useState(true);
|
|
751
|
+
const [resendCountdown, setResendCountdown] = useState(60);
|
|
752
|
+
const [isSending, setIsSending] = useState(false);
|
|
753
|
+
const [verificationCode, setVerificationCode] = useState("");
|
|
754
|
+
const [isVerifying, setIsVerifying] = useState(false);
|
|
755
|
+
useEffect(() => {
|
|
756
|
+
if (resendCountdown > 0) {
|
|
757
|
+
const timer = setInterval(() => {
|
|
758
|
+
setResendCountdown((prev) => {
|
|
759
|
+
if (prev <= 1) {
|
|
760
|
+
setResendDisabled(false);
|
|
761
|
+
return 0;
|
|
858
762
|
}
|
|
763
|
+
return prev - 1;
|
|
764
|
+
});
|
|
765
|
+
}, 1e3);
|
|
766
|
+
return () => clearInterval(timer);
|
|
767
|
+
}
|
|
768
|
+
}, [resendCountdown]);
|
|
769
|
+
const handleResend = useCallback(async () => {
|
|
770
|
+
setResendDisabled(true);
|
|
771
|
+
setResendCountdown(60);
|
|
772
|
+
setIsSending(true);
|
|
773
|
+
try {
|
|
774
|
+
await onResendEmail();
|
|
775
|
+
} catch {
|
|
776
|
+
setResendDisabled(false);
|
|
777
|
+
setResendCountdown(0);
|
|
778
|
+
} finally {
|
|
779
|
+
setIsSending(false);
|
|
780
|
+
}
|
|
781
|
+
}, [onResendEmail]);
|
|
782
|
+
const handleSubmit = async () => {
|
|
783
|
+
if (!onVerifyCode || verificationCode.length !== 6) {
|
|
784
|
+
return;
|
|
785
|
+
}
|
|
786
|
+
setIsVerifying(true);
|
|
787
|
+
try {
|
|
788
|
+
await onVerifyCode(verificationCode);
|
|
789
|
+
} finally {
|
|
790
|
+
setIsVerifying(false);
|
|
791
|
+
setVerificationCode("");
|
|
792
|
+
}
|
|
793
|
+
};
|
|
794
|
+
const isLinkMethod = method === "link";
|
|
795
|
+
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.`;
|
|
796
|
+
return /* @__PURE__ */ jsxs("div", { className: "if-verificationStep", children: [
|
|
797
|
+
/* @__PURE__ */ jsx("p", { className: "if-verificationStep-description", children: description }),
|
|
798
|
+
!isLinkMethod && /* @__PURE__ */ jsxs("div", { className: "if-verificationStep-codeContainer", children: [
|
|
799
|
+
/* @__PURE__ */ jsx("div", { className: "if-verificationStep-codeInputWrapper", children: /* @__PURE__ */ jsx(
|
|
800
|
+
AuthVerificationCodeInput,
|
|
801
|
+
{
|
|
802
|
+
value: verificationCode,
|
|
803
|
+
onChange: setVerificationCode,
|
|
804
|
+
email,
|
|
805
|
+
disabled: isVerifying
|
|
859
806
|
}
|
|
860
|
-
),
|
|
861
|
-
|
|
807
|
+
) }),
|
|
808
|
+
/* @__PURE__ */ jsx(
|
|
809
|
+
AuthSubmitButton,
|
|
810
|
+
{
|
|
811
|
+
type: "button",
|
|
812
|
+
isLoading: isVerifying,
|
|
813
|
+
disabled: isVerifying || verificationCode.length !== 6,
|
|
814
|
+
onClick: () => {
|
|
815
|
+
void handleSubmit();
|
|
816
|
+
},
|
|
817
|
+
children: isVerifying ? "Verifying..." : "Continue"
|
|
818
|
+
}
|
|
819
|
+
)
|
|
862
820
|
] }),
|
|
863
|
-
/* @__PURE__ */
|
|
821
|
+
/* @__PURE__ */ jsxs("div", { className: "if-verificationStep-resendContainer", children: [
|
|
864
822
|
"Didn't receive the email?",
|
|
865
823
|
" ",
|
|
866
|
-
/* @__PURE__ */
|
|
824
|
+
/* @__PURE__ */ jsx(
|
|
867
825
|
"button",
|
|
868
826
|
{
|
|
869
827
|
onClick: () => {
|
|
870
828
|
void handleResend();
|
|
871
829
|
},
|
|
872
830
|
disabled: resendDisabled || isSending,
|
|
873
|
-
className: "
|
|
831
|
+
className: "if-verificationStep-resendButton",
|
|
874
832
|
children: isSending ? "Sending..." : resendDisabled ? `Retry in (${resendCountdown}s)` : "Click to resend"
|
|
875
833
|
}
|
|
876
834
|
)
|
|
@@ -889,7 +847,6 @@ function SignInForm({
|
|
|
889
847
|
availableProviders = [],
|
|
890
848
|
onOAuthClick,
|
|
891
849
|
authConfig,
|
|
892
|
-
appearance = {},
|
|
893
850
|
title = "Welcome Back",
|
|
894
851
|
subtitle = "Login to your account",
|
|
895
852
|
emailLabel = "Email",
|
|
@@ -904,161 +861,79 @@ function SignInForm({
|
|
|
904
861
|
signUpLinkText = "Sign Up Now",
|
|
905
862
|
signUpUrl = "/sign-up",
|
|
906
863
|
dividerText = "or",
|
|
907
|
-
// Email verification step props
|
|
908
864
|
showVerificationStep = false,
|
|
909
|
-
onVerifyCode
|
|
910
|
-
verificationDescription
|
|
865
|
+
onVerifyCode
|
|
911
866
|
}) {
|
|
912
|
-
return /* @__PURE__ */
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
}
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
867
|
+
return /* @__PURE__ */ jsxs(AuthContainer, { children: [
|
|
868
|
+
/* @__PURE__ */ jsx(
|
|
869
|
+
AuthHeader,
|
|
870
|
+
{
|
|
871
|
+
title: showVerificationStep ? "Verify Your Email" : title,
|
|
872
|
+
subtitle: showVerificationStep ? "" : subtitle
|
|
873
|
+
}
|
|
874
|
+
),
|
|
875
|
+
/* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
|
|
876
|
+
showVerificationStep ? /* @__PURE__ */ jsx(AuthEmailVerificationStep, { email, onVerifyCode }) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
|
|
877
|
+
/* @__PURE__ */ jsx(
|
|
878
|
+
AuthFormField,
|
|
879
|
+
{
|
|
880
|
+
id: "email",
|
|
881
|
+
type: "email",
|
|
882
|
+
label: emailLabel,
|
|
883
|
+
placeholder: emailPlaceholder,
|
|
884
|
+
value: email,
|
|
885
|
+
onChange: (e) => onEmailChange(e.target.value),
|
|
886
|
+
required: true,
|
|
887
|
+
autoComplete: "email"
|
|
888
|
+
}
|
|
889
|
+
),
|
|
890
|
+
/* @__PURE__ */ jsx(
|
|
891
|
+
AuthPasswordField,
|
|
892
|
+
{
|
|
893
|
+
id: "password",
|
|
894
|
+
label: passwordLabel,
|
|
895
|
+
placeholder: passwordPlaceholder,
|
|
896
|
+
value: password,
|
|
897
|
+
onChange: (e) => onPasswordChange(e.target.value),
|
|
898
|
+
required: true,
|
|
899
|
+
autoComplete: "current-password",
|
|
900
|
+
authConfig,
|
|
901
|
+
forgotPasswordLink: forgotPasswordUrl ? {
|
|
902
|
+
href: forgotPasswordUrl,
|
|
903
|
+
text: forgotPasswordText
|
|
904
|
+
} : void 0
|
|
905
|
+
}
|
|
906
|
+
),
|
|
907
|
+
/* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading || oauthLoading !== null, children: loading ? loadingButtonText : submitButtonText })
|
|
908
|
+
] }),
|
|
909
|
+
!showVerificationStep && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
910
|
+
/* @__PURE__ */ jsx(AuthLink, { text: signUpText, linkText: signUpLinkText, href: signUpUrl }),
|
|
911
|
+
availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
912
|
+
/* @__PURE__ */ jsx(AuthDivider, { text: dividerText }),
|
|
913
|
+
/* @__PURE__ */ jsx(
|
|
914
|
+
AuthOAuthProviders,
|
|
948
915
|
{
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
954
|
-
AuthFormField,
|
|
955
|
-
{
|
|
956
|
-
id: "email",
|
|
957
|
-
type: "email",
|
|
958
|
-
label: emailLabel,
|
|
959
|
-
placeholder: emailPlaceholder,
|
|
960
|
-
value: email,
|
|
961
|
-
onChange: (e) => onEmailChange(e.target.value),
|
|
962
|
-
required: true,
|
|
963
|
-
autoComplete: "email",
|
|
964
|
-
appearance: {
|
|
965
|
-
containerClassName: appearance.form?.emailField?.container,
|
|
966
|
-
labelClassName: appearance.form?.emailField?.label,
|
|
967
|
-
inputClassName: appearance.form?.emailField?.input
|
|
968
|
-
}
|
|
969
|
-
}
|
|
970
|
-
),
|
|
971
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
972
|
-
AuthPasswordField,
|
|
973
|
-
{
|
|
974
|
-
id: "password",
|
|
975
|
-
label: passwordLabel,
|
|
976
|
-
placeholder: passwordPlaceholder,
|
|
977
|
-
value: password,
|
|
978
|
-
onChange: (e) => onPasswordChange(e.target.value),
|
|
979
|
-
required: true,
|
|
980
|
-
autoComplete: "current-password",
|
|
981
|
-
authConfig,
|
|
982
|
-
forgotPasswordLink: forgotPasswordUrl ? {
|
|
983
|
-
href: forgotPasswordUrl,
|
|
984
|
-
text: forgotPasswordText
|
|
985
|
-
} : void 0,
|
|
986
|
-
appearance: {
|
|
987
|
-
containerClassName: appearance.form?.passwordField?.container,
|
|
988
|
-
labelClassName: appearance.form?.passwordField?.label,
|
|
989
|
-
inputClassName: appearance.form?.passwordField?.input
|
|
990
|
-
}
|
|
991
|
-
}
|
|
992
|
-
),
|
|
993
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
994
|
-
AuthSubmitButton,
|
|
995
|
-
{
|
|
996
|
-
isLoading: loading,
|
|
997
|
-
disabled: loading || oauthLoading !== null,
|
|
998
|
-
className: appearance.button,
|
|
999
|
-
children: loading ? loadingButtonText : submitButtonText
|
|
1000
|
-
}
|
|
1001
|
-
)
|
|
1002
|
-
]
|
|
916
|
+
providers: availableProviders,
|
|
917
|
+
onClick: onOAuthClick,
|
|
918
|
+
disabled: loading || oauthLoading !== null,
|
|
919
|
+
loading: oauthLoading
|
|
1003
920
|
}
|
|
1004
|
-
)
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
{
|
|
1009
|
-
text: signUpText,
|
|
1010
|
-
linkText: signUpLinkText,
|
|
1011
|
-
href: signUpUrl,
|
|
1012
|
-
appearance: {
|
|
1013
|
-
containerClassName: appearance.link?.container,
|
|
1014
|
-
linkClassName: appearance.link?.link
|
|
1015
|
-
}
|
|
1016
|
-
}
|
|
1017
|
-
),
|
|
1018
|
-
availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1019
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1020
|
-
AuthDivider,
|
|
1021
|
-
{
|
|
1022
|
-
text: dividerText,
|
|
1023
|
-
className: appearance.divider
|
|
1024
|
-
}
|
|
1025
|
-
),
|
|
1026
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1027
|
-
AuthOAuthProviders,
|
|
1028
|
-
{
|
|
1029
|
-
providers: availableProviders,
|
|
1030
|
-
onClick: onOAuthClick,
|
|
1031
|
-
disabled: loading || oauthLoading !== null,
|
|
1032
|
-
loading: oauthLoading,
|
|
1033
|
-
appearance: {
|
|
1034
|
-
containerClassName: appearance.oauth?.container,
|
|
1035
|
-
buttonClassName: appearance.oauth?.button
|
|
1036
|
-
}
|
|
1037
|
-
}
|
|
1038
|
-
)
|
|
1039
|
-
] })
|
|
1040
|
-
] })
|
|
1041
|
-
]
|
|
1042
|
-
}
|
|
1043
|
-
);
|
|
921
|
+
)
|
|
922
|
+
] })
|
|
923
|
+
] })
|
|
924
|
+
] });
|
|
1044
925
|
}
|
|
1045
|
-
function SignIn({
|
|
1046
|
-
|
|
1047
|
-
onSuccess,
|
|
1048
|
-
onError,
|
|
1049
|
-
...uiProps
|
|
1050
|
-
}) {
|
|
1051
|
-
const { signIn, baseUrl } = useInsforge();
|
|
926
|
+
function SignIn({ onError, ...uiProps }) {
|
|
927
|
+
const { signIn, verifyEmail, loginWithOAuth } = useInsforge();
|
|
1052
928
|
const { authConfig } = usePublicAuthConfig();
|
|
1053
|
-
const [email, setEmail] =
|
|
1054
|
-
const [password, setPassword] =
|
|
1055
|
-
const [error, setError] =
|
|
1056
|
-
const [loading, setLoading] =
|
|
1057
|
-
const [step, setStep] =
|
|
1058
|
-
const [oauthLoading
|
|
1059
|
-
|
|
1060
|
-
);
|
|
1061
|
-
const [insforge] = react.useState(() => sdk.createClient({ baseUrl }));
|
|
929
|
+
const [email, setEmail] = useState("");
|
|
930
|
+
const [password, setPassword] = useState("");
|
|
931
|
+
const [error, setError] = useState("");
|
|
932
|
+
const [loading, setLoading] = useState(false);
|
|
933
|
+
const [step, setStep] = useState("form");
|
|
934
|
+
const [oauthLoading] = useState(null);
|
|
935
|
+
const [searchParams] = useSearchParams();
|
|
936
|
+
const redirectUrl = searchParams.get("redirect");
|
|
1062
937
|
async function handleSubmit(e) {
|
|
1063
938
|
e.preventDefault();
|
|
1064
939
|
setLoading(true);
|
|
@@ -1074,51 +949,51 @@ function SignIn({
|
|
|
1074
949
|
throw new Error(result.error);
|
|
1075
950
|
}
|
|
1076
951
|
const { user, accessToken, redirectTo } = result;
|
|
1077
|
-
if (
|
|
1078
|
-
|
|
952
|
+
if (user) {
|
|
953
|
+
const finalUrl = new URL(redirectTo || redirectUrl || "", window.location.origin);
|
|
954
|
+
finalUrl.searchParams.set("access_token", accessToken);
|
|
955
|
+
finalUrl.searchParams.set("user_id", user.id);
|
|
956
|
+
finalUrl.searchParams.set("email", user.email);
|
|
957
|
+
finalUrl.searchParams.set("name", user.name);
|
|
958
|
+
window.location.href = finalUrl.toString();
|
|
1079
959
|
}
|
|
1080
960
|
} catch (err) {
|
|
1081
|
-
const errorMessage = err.message
|
|
961
|
+
const errorMessage = err instanceof Error ? err.message : "Sign in failed";
|
|
1082
962
|
setError(errorMessage);
|
|
1083
|
-
if (onError)
|
|
963
|
+
if (onError) {
|
|
964
|
+
onError(new Error(errorMessage));
|
|
965
|
+
}
|
|
1084
966
|
} finally {
|
|
1085
967
|
setLoading(false);
|
|
1086
968
|
}
|
|
1087
969
|
}
|
|
1088
970
|
async function handleVerifyCode(code) {
|
|
971
|
+
setError("");
|
|
1089
972
|
try {
|
|
1090
|
-
const result = await
|
|
1091
|
-
if (result
|
|
973
|
+
const result = await verifyEmail(email, code);
|
|
974
|
+
if (result?.error) {
|
|
1092
975
|
throw new Error(result.error.message || "Verification failed");
|
|
1093
976
|
}
|
|
1094
|
-
if (result
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
977
|
+
if (result?.user) {
|
|
978
|
+
const finalUrl = new URL(result.redirectTo || redirectUrl || "", window.location.origin);
|
|
979
|
+
finalUrl.searchParams.set("access_token", result.accessToken);
|
|
980
|
+
finalUrl.searchParams.set("user_id", result.user.id);
|
|
981
|
+
finalUrl.searchParams.set("email", result.user.email);
|
|
982
|
+
finalUrl.searchParams.set("name", result.user.name);
|
|
983
|
+
window.location.href = finalUrl.toString();
|
|
1098
984
|
}
|
|
1099
985
|
} catch (err) {
|
|
1100
|
-
|
|
1101
|
-
}
|
|
1102
|
-
}
|
|
1103
|
-
async function handleOAuth(provider) {
|
|
1104
|
-
try {
|
|
1105
|
-
setOauthLoading(provider);
|
|
1106
|
-
setError("");
|
|
1107
|
-
await insforge.auth.signInWithOAuth({
|
|
1108
|
-
provider,
|
|
1109
|
-
redirectTo: afterSignInUrl
|
|
1110
|
-
});
|
|
1111
|
-
} catch (err) {
|
|
1112
|
-
const errorMessage = err.message || `${provider} sign in failed`;
|
|
986
|
+
const errorMessage = err instanceof Error ? err.message : "Invalid verification code";
|
|
1113
987
|
setError(errorMessage);
|
|
1114
|
-
if (onError) onError(new Error(errorMessage));
|
|
1115
|
-
setOauthLoading(null);
|
|
1116
988
|
}
|
|
1117
989
|
}
|
|
990
|
+
function handleOAuth(provider) {
|
|
991
|
+
loginWithOAuth(provider, redirectUrl || "");
|
|
992
|
+
}
|
|
1118
993
|
if (!authConfig) {
|
|
1119
994
|
return null;
|
|
1120
995
|
}
|
|
1121
|
-
return /* @__PURE__ */
|
|
996
|
+
return /* @__PURE__ */ jsx(
|
|
1122
997
|
SignInForm,
|
|
1123
998
|
{
|
|
1124
999
|
email,
|
|
@@ -1150,7 +1025,6 @@ function SignUpForm({
|
|
|
1150
1025
|
availableProviders = [],
|
|
1151
1026
|
onOAuthClick,
|
|
1152
1027
|
authConfig,
|
|
1153
|
-
appearance = {},
|
|
1154
1028
|
title = "Get Started",
|
|
1155
1029
|
subtitle = "Create your account",
|
|
1156
1030
|
emailLabel = "Email",
|
|
@@ -1163,143 +1037,67 @@ function SignUpForm({
|
|
|
1163
1037
|
signInLinkText = "Login Now",
|
|
1164
1038
|
signInUrl = "/sign-in",
|
|
1165
1039
|
dividerText = "or",
|
|
1166
|
-
// Email verification step props
|
|
1167
1040
|
showVerificationStep = false,
|
|
1168
|
-
onVerifyCode
|
|
1169
|
-
verificationDescription
|
|
1041
|
+
onVerifyCode
|
|
1170
1042
|
}) {
|
|
1171
|
-
return /* @__PURE__ */
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
}
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1043
|
+
return /* @__PURE__ */ jsxs(AuthContainer, { children: [
|
|
1044
|
+
/* @__PURE__ */ jsx(
|
|
1045
|
+
AuthHeader,
|
|
1046
|
+
{
|
|
1047
|
+
title: showVerificationStep ? "Verify Your Email" : title,
|
|
1048
|
+
subtitle: showVerificationStep ? "" : subtitle
|
|
1049
|
+
}
|
|
1050
|
+
),
|
|
1051
|
+
/* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
|
|
1052
|
+
showVerificationStep ? /* @__PURE__ */ jsx(AuthEmailVerificationStep, { email, onVerifyCode }) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
|
|
1053
|
+
/* @__PURE__ */ jsx(
|
|
1054
|
+
AuthFormField,
|
|
1055
|
+
{
|
|
1056
|
+
id: "email",
|
|
1057
|
+
type: "email",
|
|
1058
|
+
label: emailLabel,
|
|
1059
|
+
placeholder: emailPlaceholder,
|
|
1060
|
+
value: email,
|
|
1061
|
+
onChange: (e) => onEmailChange(e.target.value),
|
|
1062
|
+
required: true,
|
|
1063
|
+
autoComplete: "email"
|
|
1064
|
+
}
|
|
1065
|
+
),
|
|
1066
|
+
/* @__PURE__ */ jsx(
|
|
1067
|
+
AuthPasswordField,
|
|
1068
|
+
{
|
|
1069
|
+
id: "password",
|
|
1070
|
+
label: passwordLabel,
|
|
1071
|
+
placeholder: passwordPlaceholder,
|
|
1072
|
+
value: password,
|
|
1073
|
+
onChange: (e) => onPasswordChange(e.target.value),
|
|
1074
|
+
required: true,
|
|
1075
|
+
minLength: authConfig.passwordMinLength,
|
|
1076
|
+
autoComplete: "new-password",
|
|
1077
|
+
showStrengthIndicator: true,
|
|
1078
|
+
authConfig
|
|
1079
|
+
}
|
|
1080
|
+
),
|
|
1081
|
+
/* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading || oauthLoading !== null, children: loading ? loadingButtonText : submitButtonText })
|
|
1082
|
+
] }),
|
|
1083
|
+
!showVerificationStep && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1084
|
+
/* @__PURE__ */ jsx(AuthLink, { text: signInText, linkText: signInLinkText, href: signInUrl }),
|
|
1085
|
+
availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1086
|
+
/* @__PURE__ */ jsx(AuthDivider, { text: dividerText }),
|
|
1087
|
+
/* @__PURE__ */ jsx(
|
|
1088
|
+
AuthOAuthProviders,
|
|
1207
1089
|
{
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1213
|
-
AuthFormField,
|
|
1214
|
-
{
|
|
1215
|
-
id: "email",
|
|
1216
|
-
type: "email",
|
|
1217
|
-
label: emailLabel,
|
|
1218
|
-
placeholder: emailPlaceholder,
|
|
1219
|
-
value: email,
|
|
1220
|
-
onChange: (e) => onEmailChange(e.target.value),
|
|
1221
|
-
required: true,
|
|
1222
|
-
autoComplete: "email",
|
|
1223
|
-
appearance: {
|
|
1224
|
-
containerClassName: appearance.form?.emailField?.container,
|
|
1225
|
-
labelClassName: appearance.form?.emailField?.label,
|
|
1226
|
-
inputClassName: appearance.form?.emailField?.input
|
|
1227
|
-
}
|
|
1228
|
-
}
|
|
1229
|
-
),
|
|
1230
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1231
|
-
AuthPasswordField,
|
|
1232
|
-
{
|
|
1233
|
-
id: "password",
|
|
1234
|
-
label: passwordLabel,
|
|
1235
|
-
placeholder: passwordPlaceholder,
|
|
1236
|
-
value: password,
|
|
1237
|
-
onChange: (e) => onPasswordChange(e.target.value),
|
|
1238
|
-
required: true,
|
|
1239
|
-
minLength: authConfig.passwordMinLength,
|
|
1240
|
-
autoComplete: "new-password",
|
|
1241
|
-
showStrengthIndicator: true,
|
|
1242
|
-
authConfig,
|
|
1243
|
-
appearance: {
|
|
1244
|
-
containerClassName: appearance.form?.passwordField?.container,
|
|
1245
|
-
labelClassName: appearance.form?.passwordField?.label,
|
|
1246
|
-
inputClassName: appearance.form?.passwordField?.input
|
|
1247
|
-
}
|
|
1248
|
-
}
|
|
1249
|
-
),
|
|
1250
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1251
|
-
AuthSubmitButton,
|
|
1252
|
-
{
|
|
1253
|
-
isLoading: loading,
|
|
1254
|
-
disabled: loading || oauthLoading !== null,
|
|
1255
|
-
className: appearance.button,
|
|
1256
|
-
children: loading ? loadingButtonText : submitButtonText
|
|
1257
|
-
}
|
|
1258
|
-
)
|
|
1259
|
-
]
|
|
1090
|
+
providers: availableProviders,
|
|
1091
|
+
onClick: onOAuthClick,
|
|
1092
|
+
disabled: loading || oauthLoading !== null,
|
|
1093
|
+
loading: oauthLoading
|
|
1260
1094
|
}
|
|
1261
|
-
)
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
{
|
|
1266
|
-
text: signInText,
|
|
1267
|
-
linkText: signInLinkText,
|
|
1268
|
-
href: signInUrl,
|
|
1269
|
-
appearance: {
|
|
1270
|
-
containerClassName: appearance.link?.container,
|
|
1271
|
-
linkClassName: appearance.link?.link
|
|
1272
|
-
}
|
|
1273
|
-
}
|
|
1274
|
-
),
|
|
1275
|
-
availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1276
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1277
|
-
AuthDivider,
|
|
1278
|
-
{
|
|
1279
|
-
text: dividerText,
|
|
1280
|
-
className: appearance.divider
|
|
1281
|
-
}
|
|
1282
|
-
),
|
|
1283
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1284
|
-
AuthOAuthProviders,
|
|
1285
|
-
{
|
|
1286
|
-
providers: availableProviders,
|
|
1287
|
-
onClick: onOAuthClick,
|
|
1288
|
-
disabled: loading || oauthLoading !== null,
|
|
1289
|
-
loading: oauthLoading,
|
|
1290
|
-
appearance: {
|
|
1291
|
-
containerClassName: appearance.oauth?.container,
|
|
1292
|
-
buttonClassName: appearance.oauth?.button
|
|
1293
|
-
}
|
|
1294
|
-
}
|
|
1295
|
-
)
|
|
1296
|
-
] })
|
|
1297
|
-
] })
|
|
1298
|
-
]
|
|
1299
|
-
}
|
|
1300
|
-
);
|
|
1095
|
+
)
|
|
1096
|
+
] })
|
|
1097
|
+
] })
|
|
1098
|
+
] });
|
|
1301
1099
|
}
|
|
1302
|
-
var emailSchema =
|
|
1100
|
+
var emailSchema = z.string().min(1, "Email is required").email("Invalid email address");
|
|
1303
1101
|
function createPasswordSchema(options) {
|
|
1304
1102
|
const {
|
|
1305
1103
|
minLength = 6,
|
|
@@ -1308,7 +1106,7 @@ function createPasswordSchema(options) {
|
|
|
1308
1106
|
requireNumber = false,
|
|
1309
1107
|
requireSpecialChar = false
|
|
1310
1108
|
} = options || {};
|
|
1311
|
-
let schema =
|
|
1109
|
+
let schema = z.string().min(minLength, `Password must be at least ${minLength} characters`);
|
|
1312
1110
|
if (requireUppercase) {
|
|
1313
1111
|
schema = schema.regex(/[A-Z]/, "Password must contain at least one uppercase letter");
|
|
1314
1112
|
}
|
|
@@ -1327,23 +1125,17 @@ function createPasswordSchema(options) {
|
|
|
1327
1125
|
return schema;
|
|
1328
1126
|
}
|
|
1329
1127
|
createPasswordSchema();
|
|
1330
|
-
function SignUp({
|
|
1331
|
-
|
|
1332
|
-
onSuccess,
|
|
1333
|
-
onError,
|
|
1334
|
-
...uiProps
|
|
1335
|
-
}) {
|
|
1336
|
-
const { signUp, baseUrl } = useInsforge();
|
|
1128
|
+
function SignUp({ onError, ...uiProps }) {
|
|
1129
|
+
const { signUp, verifyEmail, loginWithOAuth } = useInsforge();
|
|
1337
1130
|
const { authConfig } = usePublicAuthConfig();
|
|
1338
|
-
const [email, setEmail] =
|
|
1339
|
-
const [password, setPassword] =
|
|
1340
|
-
const [error, setError] =
|
|
1341
|
-
const [loading, setLoading] =
|
|
1342
|
-
const [step, setStep] =
|
|
1343
|
-
const [oauthLoading
|
|
1344
|
-
|
|
1345
|
-
);
|
|
1346
|
-
const [insforge] = react.useState(() => sdk.createClient({ baseUrl }));
|
|
1131
|
+
const [email, setEmail] = useState("");
|
|
1132
|
+
const [password, setPassword] = useState("");
|
|
1133
|
+
const [error, setError] = useState("");
|
|
1134
|
+
const [loading, setLoading] = useState(false);
|
|
1135
|
+
const [step, setStep] = useState("form");
|
|
1136
|
+
const [oauthLoading] = useState(null);
|
|
1137
|
+
const [searchParams] = useSearchParams();
|
|
1138
|
+
const redirectUrl = searchParams.get("redirect");
|
|
1347
1139
|
async function handleSubmit(e) {
|
|
1348
1140
|
e.preventDefault();
|
|
1349
1141
|
setLoading(true);
|
|
@@ -1385,52 +1177,50 @@ function SignUp({
|
|
|
1385
1177
|
return;
|
|
1386
1178
|
}
|
|
1387
1179
|
if (result.accessToken && result.user) {
|
|
1388
|
-
|
|
1389
|
-
|
|
1390
|
-
|
|
1180
|
+
const finalUrl = new URL(result.redirectTo || redirectUrl || "", window.location.origin);
|
|
1181
|
+
finalUrl.searchParams.set("access_token", result.accessToken);
|
|
1182
|
+
finalUrl.searchParams.set("user_id", result.user.id);
|
|
1183
|
+
finalUrl.searchParams.set("email", result.user.email);
|
|
1184
|
+
finalUrl.searchParams.set("name", result.user.name);
|
|
1185
|
+
window.location.href = finalUrl.toString();
|
|
1391
1186
|
}
|
|
1392
1187
|
} catch (err) {
|
|
1393
|
-
const errorMessage = err.message
|
|
1188
|
+
const errorMessage = err instanceof Error ? err.message : "Sign up failed";
|
|
1394
1189
|
setError(errorMessage);
|
|
1395
|
-
if (onError)
|
|
1190
|
+
if (onError) {
|
|
1191
|
+
onError(new Error(errorMessage));
|
|
1192
|
+
}
|
|
1396
1193
|
} finally {
|
|
1397
1194
|
setLoading(false);
|
|
1398
1195
|
}
|
|
1399
1196
|
}
|
|
1400
1197
|
async function handleVerifyCode(code) {
|
|
1198
|
+
setError("");
|
|
1401
1199
|
try {
|
|
1402
|
-
const result = await
|
|
1403
|
-
if (result
|
|
1200
|
+
const result = await verifyEmail(email, code);
|
|
1201
|
+
if (result?.error) {
|
|
1404
1202
|
throw new Error(result.error.message || "Verification failed");
|
|
1405
1203
|
}
|
|
1406
|
-
if (result
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1204
|
+
if (result?.user) {
|
|
1205
|
+
const finalUrl = new URL(result.redirectTo || redirectUrl || "", window.location.origin);
|
|
1206
|
+
finalUrl.searchParams.set("access_token", result.accessToken);
|
|
1207
|
+
finalUrl.searchParams.set("user_id", result.user.id);
|
|
1208
|
+
finalUrl.searchParams.set("email", result.user.email);
|
|
1209
|
+
finalUrl.searchParams.set("name", result.user.name);
|
|
1210
|
+
window.location.href = finalUrl.toString();
|
|
1410
1211
|
}
|
|
1411
1212
|
} catch (err) {
|
|
1412
|
-
|
|
1413
|
-
}
|
|
1414
|
-
}
|
|
1415
|
-
async function handleOAuth(provider) {
|
|
1416
|
-
try {
|
|
1417
|
-
setOauthLoading(provider);
|
|
1418
|
-
setError("");
|
|
1419
|
-
await insforge.auth.signInWithOAuth({
|
|
1420
|
-
provider,
|
|
1421
|
-
redirectTo: afterSignUpUrl
|
|
1422
|
-
});
|
|
1423
|
-
} catch (err) {
|
|
1424
|
-
const errorMessage = err.message || `${provider} sign up failed`;
|
|
1213
|
+
const errorMessage = err instanceof Error ? err.message : "Invalid verification code";
|
|
1425
1214
|
setError(errorMessage);
|
|
1426
|
-
if (onError) onError(new Error(errorMessage));
|
|
1427
|
-
setOauthLoading(null);
|
|
1428
1215
|
}
|
|
1429
1216
|
}
|
|
1217
|
+
function handleOAuth(provider) {
|
|
1218
|
+
loginWithOAuth(provider, redirectUrl || "");
|
|
1219
|
+
}
|
|
1430
1220
|
if (!authConfig) {
|
|
1431
1221
|
return null;
|
|
1432
1222
|
}
|
|
1433
|
-
return /* @__PURE__ */
|
|
1223
|
+
return /* @__PURE__ */ jsx(
|
|
1434
1224
|
SignUpForm,
|
|
1435
1225
|
{
|
|
1436
1226
|
email,
|
|
@@ -1456,8 +1246,6 @@ function ForgotPasswordForm({
|
|
|
1456
1246
|
onSubmit,
|
|
1457
1247
|
error,
|
|
1458
1248
|
loading = false,
|
|
1459
|
-
success = false,
|
|
1460
|
-
appearance = {},
|
|
1461
1249
|
title = "Forgot Password?",
|
|
1462
1250
|
subtitle = "Enter your email address and we'll send you a code to reset your password.",
|
|
1463
1251
|
emailLabel = "Email",
|
|
@@ -1466,105 +1254,47 @@ function ForgotPasswordForm({
|
|
|
1466
1254
|
loadingButtonText = "Sending...",
|
|
1467
1255
|
backToSignInText = "Remember your password?",
|
|
1468
1256
|
backToSignInUrl = "/sign-in",
|
|
1469
|
-
|
|
1470
|
-
|
|
1257
|
+
showVerificationStep = false,
|
|
1258
|
+
resetPasswordMethod = "code",
|
|
1259
|
+
onVerifyCode,
|
|
1260
|
+
onResendEmail
|
|
1471
1261
|
}) {
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
|
|
1262
|
+
return /* @__PURE__ */ jsxs(AuthContainer, { children: [
|
|
1263
|
+
/* @__PURE__ */ jsx(
|
|
1264
|
+
AuthHeader,
|
|
1475
1265
|
{
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
cardClassName: appearance.card
|
|
1479
|
-
},
|
|
1480
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
|
|
1481
|
-
/* @__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" }) }) }),
|
|
1482
|
-
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold text-black dark:text-white text-center", children: successTitle }),
|
|
1483
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: successMessage || `We've sent a password reset link to ${email}. Please check your email and follow the instructions.` }),
|
|
1484
|
-
/* @__PURE__ */ jsxRuntime.jsx("a", { href: backToSignInUrl, className: "mt-4 text-black dark:text-white font-medium", children: "Back to Sign In" })
|
|
1485
|
-
] })
|
|
1266
|
+
title: showVerificationStep ? resetPasswordMethod === "link" ? "Check Your Email" : "Enter Reset Code" : title,
|
|
1267
|
+
subtitle: showVerificationStep ? "" : subtitle
|
|
1486
1268
|
}
|
|
1487
|
-
)
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1517
|
-
"form",
|
|
1518
|
-
{
|
|
1519
|
-
onSubmit,
|
|
1520
|
-
noValidate: true,
|
|
1521
|
-
className: appearance.form?.container || "flex flex-col items-stretch justify-center gap-6",
|
|
1522
|
-
children: [
|
|
1523
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1524
|
-
AuthFormField,
|
|
1525
|
-
{
|
|
1526
|
-
id: "email",
|
|
1527
|
-
type: "email",
|
|
1528
|
-
label: emailLabel,
|
|
1529
|
-
placeholder: emailPlaceholder,
|
|
1530
|
-
value: email,
|
|
1531
|
-
onChange: (e) => onEmailChange(e.target.value),
|
|
1532
|
-
required: true,
|
|
1533
|
-
autoComplete: "email",
|
|
1534
|
-
appearance: {
|
|
1535
|
-
containerClassName: appearance.form?.emailField?.container,
|
|
1536
|
-
labelClassName: appearance.form?.emailField?.label,
|
|
1537
|
-
inputClassName: appearance.form?.emailField?.input
|
|
1538
|
-
}
|
|
1539
|
-
}
|
|
1540
|
-
),
|
|
1541
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1542
|
-
AuthSubmitButton,
|
|
1543
|
-
{
|
|
1544
|
-
isLoading: loading,
|
|
1545
|
-
disabled: loading,
|
|
1546
|
-
className: appearance.button,
|
|
1547
|
-
children: loading ? loadingButtonText : submitButtonText
|
|
1548
|
-
}
|
|
1549
|
-
)
|
|
1550
|
-
]
|
|
1551
|
-
}
|
|
1552
|
-
),
|
|
1553
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1554
|
-
AuthLink,
|
|
1555
|
-
{
|
|
1556
|
-
text: backToSignInText,
|
|
1557
|
-
linkText: "Back to Sign In",
|
|
1558
|
-
href: backToSignInUrl,
|
|
1559
|
-
appearance: {
|
|
1560
|
-
containerClassName: appearance.link?.container,
|
|
1561
|
-
linkClassName: appearance.link?.link
|
|
1562
|
-
}
|
|
1563
|
-
}
|
|
1564
|
-
)
|
|
1565
|
-
]
|
|
1566
|
-
}
|
|
1567
|
-
);
|
|
1269
|
+
),
|
|
1270
|
+
/* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
|
|
1271
|
+
showVerificationStep ? /* @__PURE__ */ jsx(
|
|
1272
|
+
AuthResetPasswordVerificationStep,
|
|
1273
|
+
{
|
|
1274
|
+
email,
|
|
1275
|
+
method: resetPasswordMethod,
|
|
1276
|
+
onVerifyCode,
|
|
1277
|
+
onResendEmail: onResendEmail || (async () => {
|
|
1278
|
+
})
|
|
1279
|
+
}
|
|
1280
|
+
) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
|
|
1281
|
+
/* @__PURE__ */ jsx(
|
|
1282
|
+
AuthFormField,
|
|
1283
|
+
{
|
|
1284
|
+
id: "email",
|
|
1285
|
+
type: "email",
|
|
1286
|
+
label: emailLabel,
|
|
1287
|
+
placeholder: emailPlaceholder,
|
|
1288
|
+
value: email,
|
|
1289
|
+
onChange: (e) => onEmailChange(e.target.value),
|
|
1290
|
+
required: true,
|
|
1291
|
+
autoComplete: "email"
|
|
1292
|
+
}
|
|
1293
|
+
),
|
|
1294
|
+
/* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading, children: loading ? loadingButtonText : submitButtonText })
|
|
1295
|
+
] }),
|
|
1296
|
+
!showVerificationStep && /* @__PURE__ */ jsx(AuthLink, { text: backToSignInText, linkText: "Back to Sign In", href: backToSignInUrl })
|
|
1297
|
+
] });
|
|
1568
1298
|
}
|
|
1569
1299
|
function ResetPasswordForm({
|
|
1570
1300
|
newPassword,
|
|
@@ -1576,7 +1306,6 @@ function ResetPasswordForm({
|
|
|
1576
1306
|
loading = false,
|
|
1577
1307
|
success = false,
|
|
1578
1308
|
authConfig,
|
|
1579
|
-
appearance = {},
|
|
1580
1309
|
title = "Reset Password",
|
|
1581
1310
|
subtitle = "Enter your new password below.",
|
|
1582
1311
|
newPasswordLabel = "New Password",
|
|
@@ -1585,157 +1314,164 @@ function ResetPasswordForm({
|
|
|
1585
1314
|
confirmPasswordPlaceholder = "\u2022\u2022\u2022\u2022\u2022\u2022",
|
|
1586
1315
|
submitButtonText = "Reset Password",
|
|
1587
1316
|
loadingButtonText = "Resetting...",
|
|
1588
|
-
|
|
1589
|
-
backToSignInUrl = "/sign-in",
|
|
1590
|
-
successTitle = "Password Reset Successful!",
|
|
1591
|
-
successMessage = "Your password has been successfully reset. You can now sign in with your new password."
|
|
1317
|
+
successTitle = "Password Reset Successful!"
|
|
1592
1318
|
}) {
|
|
1319
|
+
let successMessage = "Your password has been successfully reset. You can close this page and sign in with your new password.";
|
|
1320
|
+
if (authConfig && authConfig.verifyEmailMethod === "code") {
|
|
1321
|
+
successMessage = "Your password has been successfully reset. You can wait for redirect to sign in with your new password.";
|
|
1322
|
+
}
|
|
1593
1323
|
if (success) {
|
|
1594
|
-
return /* @__PURE__ */
|
|
1595
|
-
|
|
1324
|
+
return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsxs(
|
|
1325
|
+
"div",
|
|
1596
1326
|
{
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
|
|
1605
|
-
|
|
1606
|
-
|
|
1607
|
-
|
|
1608
|
-
|
|
1609
|
-
|
|
1610
|
-
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
appearance: {
|
|
1614
|
-
containerClassName: appearance.container,
|
|
1615
|
-
cardClassName: appearance.card
|
|
1616
|
-
},
|
|
1617
|
-
children: [
|
|
1618
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1619
|
-
AuthHeader,
|
|
1620
|
-
{
|
|
1621
|
-
title,
|
|
1622
|
-
subtitle,
|
|
1623
|
-
appearance: {
|
|
1624
|
-
containerClassName: appearance.header?.container,
|
|
1625
|
-
titleClassName: appearance.header?.title,
|
|
1626
|
-
subtitleClassName: appearance.header?.subtitle
|
|
1627
|
-
}
|
|
1628
|
-
}
|
|
1629
|
-
),
|
|
1630
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1631
|
-
AuthErrorBanner,
|
|
1632
|
-
{
|
|
1633
|
-
error: error || "",
|
|
1634
|
-
className: appearance.errorBanner
|
|
1635
|
-
}
|
|
1636
|
-
),
|
|
1637
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1638
|
-
"form",
|
|
1639
|
-
{
|
|
1640
|
-
onSubmit,
|
|
1641
|
-
noValidate: true,
|
|
1642
|
-
className: appearance.form?.container || "flex flex-col items-stretch justify-center gap-6",
|
|
1643
|
-
children: [
|
|
1644
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1645
|
-
AuthPasswordField,
|
|
1646
|
-
{
|
|
1647
|
-
id: "newPassword",
|
|
1648
|
-
label: newPasswordLabel,
|
|
1649
|
-
placeholder: newPasswordPlaceholder,
|
|
1650
|
-
value: newPassword,
|
|
1651
|
-
onChange: (e) => onNewPasswordChange(e.target.value),
|
|
1652
|
-
required: true,
|
|
1653
|
-
autoComplete: "new-password",
|
|
1654
|
-
showStrengthIndicator: true,
|
|
1655
|
-
authConfig,
|
|
1656
|
-
appearance: {
|
|
1657
|
-
containerClassName: appearance.form?.newPasswordField?.container,
|
|
1658
|
-
labelClassName: appearance.form?.newPasswordField?.label,
|
|
1659
|
-
inputClassName: appearance.form?.newPasswordField?.input
|
|
1660
|
-
}
|
|
1661
|
-
}
|
|
1662
|
-
),
|
|
1663
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1664
|
-
AuthPasswordField,
|
|
1665
|
-
{
|
|
1666
|
-
id: "confirmPassword",
|
|
1667
|
-
label: confirmPasswordLabel,
|
|
1668
|
-
placeholder: confirmPasswordPlaceholder,
|
|
1669
|
-
value: confirmPassword,
|
|
1670
|
-
onChange: (e) => onConfirmPasswordChange(e.target.value),
|
|
1671
|
-
required: true,
|
|
1672
|
-
autoComplete: "new-password",
|
|
1673
|
-
authConfig,
|
|
1674
|
-
appearance: {
|
|
1675
|
-
containerClassName: appearance.form?.confirmPasswordField?.container,
|
|
1676
|
-
labelClassName: appearance.form?.confirmPasswordField?.label,
|
|
1677
|
-
inputClassName: appearance.form?.confirmPasswordField?.input
|
|
1678
|
-
}
|
|
1679
|
-
}
|
|
1680
|
-
),
|
|
1681
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1682
|
-
AuthSubmitButton,
|
|
1327
|
+
style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" },
|
|
1328
|
+
children: [
|
|
1329
|
+
/* @__PURE__ */ jsx(
|
|
1330
|
+
"div",
|
|
1331
|
+
{
|
|
1332
|
+
style: {
|
|
1333
|
+
width: "4rem",
|
|
1334
|
+
height: "4rem",
|
|
1335
|
+
borderRadius: "50%",
|
|
1336
|
+
backgroundColor: "#D1FAE5",
|
|
1337
|
+
display: "flex",
|
|
1338
|
+
alignItems: "center",
|
|
1339
|
+
justifyContent: "center"
|
|
1340
|
+
},
|
|
1341
|
+
children: /* @__PURE__ */ jsx(
|
|
1342
|
+
"svg",
|
|
1683
1343
|
{
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
|
|
1344
|
+
style: { width: "2rem", height: "2rem", color: "#059669" },
|
|
1345
|
+
fill: "none",
|
|
1346
|
+
strokeLinecap: "round",
|
|
1347
|
+
strokeLinejoin: "round",
|
|
1348
|
+
strokeWidth: "2",
|
|
1349
|
+
viewBox: "0 0 24 24",
|
|
1350
|
+
stroke: "currentColor",
|
|
1351
|
+
children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" })
|
|
1688
1352
|
}
|
|
1689
1353
|
)
|
|
1690
|
-
]
|
|
1691
|
-
}
|
|
1692
|
-
),
|
|
1693
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1694
|
-
AuthLink,
|
|
1695
|
-
{
|
|
1696
|
-
text: backToSignInText,
|
|
1697
|
-
linkText: "Back to Sign In",
|
|
1698
|
-
href: backToSignInUrl,
|
|
1699
|
-
appearance: {
|
|
1700
|
-
containerClassName: appearance.link?.container,
|
|
1701
|
-
linkClassName: appearance.link?.link
|
|
1702
1354
|
}
|
|
1703
|
-
|
|
1704
|
-
|
|
1705
|
-
|
|
1706
|
-
|
|
1707
|
-
|
|
1355
|
+
),
|
|
1356
|
+
/* @__PURE__ */ jsx("h2", { className: "if-authHeader-title", style: { textAlign: "center" }, children: successTitle }),
|
|
1357
|
+
/* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle", style: { textAlign: "center" }, children: successMessage })
|
|
1358
|
+
]
|
|
1359
|
+
}
|
|
1360
|
+
) });
|
|
1361
|
+
}
|
|
1362
|
+
return /* @__PURE__ */ jsxs(AuthContainer, { children: [
|
|
1363
|
+
/* @__PURE__ */ jsx(AuthHeader, { title, subtitle }),
|
|
1364
|
+
/* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
|
|
1365
|
+
/* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
|
|
1366
|
+
/* @__PURE__ */ jsx(
|
|
1367
|
+
AuthPasswordField,
|
|
1368
|
+
{
|
|
1369
|
+
id: "newPassword",
|
|
1370
|
+
label: newPasswordLabel,
|
|
1371
|
+
placeholder: newPasswordPlaceholder,
|
|
1372
|
+
value: newPassword,
|
|
1373
|
+
onChange: (e) => onNewPasswordChange(e.target.value),
|
|
1374
|
+
required: true,
|
|
1375
|
+
autoComplete: "new-password",
|
|
1376
|
+
showStrengthIndicator: true,
|
|
1377
|
+
authConfig
|
|
1378
|
+
}
|
|
1379
|
+
),
|
|
1380
|
+
/* @__PURE__ */ jsx(
|
|
1381
|
+
AuthPasswordField,
|
|
1382
|
+
{
|
|
1383
|
+
id: "confirmPassword",
|
|
1384
|
+
label: confirmPasswordLabel,
|
|
1385
|
+
placeholder: confirmPasswordPlaceholder,
|
|
1386
|
+
value: confirmPassword,
|
|
1387
|
+
onChange: (e) => onConfirmPasswordChange(e.target.value),
|
|
1388
|
+
required: true,
|
|
1389
|
+
autoComplete: "new-password",
|
|
1390
|
+
authConfig
|
|
1391
|
+
}
|
|
1392
|
+
),
|
|
1393
|
+
/* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading, children: loading ? loadingButtonText : submitButtonText })
|
|
1394
|
+
] })
|
|
1395
|
+
] });
|
|
1708
1396
|
}
|
|
1709
|
-
function
|
|
1710
|
-
|
|
1711
|
-
backToSignInUrl = "/sign-in",
|
|
1712
|
-
onSuccess,
|
|
1713
|
-
onError,
|
|
1714
|
-
...uiProps
|
|
1715
|
-
}) {
|
|
1716
|
-
const { resetPassword } = useInsforge();
|
|
1397
|
+
function ForgotPassword({ onError, ...uiProps }) {
|
|
1398
|
+
const { sendResetPasswordEmail, exchangeResetPasswordToken, resetPassword } = useInsforge();
|
|
1717
1399
|
const { authConfig } = usePublicAuthConfig();
|
|
1718
|
-
const [
|
|
1719
|
-
const [
|
|
1720
|
-
const [
|
|
1721
|
-
const [
|
|
1722
|
-
const [
|
|
1723
|
-
|
|
1400
|
+
const [searchParams] = useSearchParams();
|
|
1401
|
+
const [step, setStep] = useState("email");
|
|
1402
|
+
const [email, setEmail] = useState("");
|
|
1403
|
+
const [resetToken, setResetToken] = useState("");
|
|
1404
|
+
const [newPassword, setNewPassword] = useState("");
|
|
1405
|
+
const [confirmPassword, setConfirmPassword] = useState("");
|
|
1406
|
+
const [error, setError] = useState("");
|
|
1407
|
+
const [loading, setLoading] = useState(false);
|
|
1408
|
+
const [success, setSuccess] = useState(false);
|
|
1409
|
+
const [showVerificationStep, setShowVerificationStep] = useState(false);
|
|
1410
|
+
async function handleEmailSubmit(e) {
|
|
1724
1411
|
e.preventDefault();
|
|
1725
1412
|
setLoading(true);
|
|
1726
1413
|
setError("");
|
|
1727
|
-
|
|
1728
|
-
|
|
1414
|
+
const emailValidation = emailSchema.safeParse(email);
|
|
1415
|
+
if (!emailValidation.success) {
|
|
1416
|
+
const firstError = emailValidation.error.issues[0];
|
|
1417
|
+
setError(firstError.message);
|
|
1729
1418
|
setLoading(false);
|
|
1730
1419
|
return;
|
|
1731
1420
|
}
|
|
1421
|
+
try {
|
|
1422
|
+
const result = await sendResetPasswordEmail(emailValidation.data);
|
|
1423
|
+
if (result?.success) {
|
|
1424
|
+
setShowVerificationStep(true);
|
|
1425
|
+
} else {
|
|
1426
|
+
const errorMessage = result?.message || "Failed to send reset email";
|
|
1427
|
+
setError(errorMessage);
|
|
1428
|
+
if (onError) {
|
|
1429
|
+
onError(new Error(errorMessage));
|
|
1430
|
+
}
|
|
1431
|
+
}
|
|
1432
|
+
} catch (err) {
|
|
1433
|
+
const errorMessage = err instanceof Error ? err.message : "Failed to send reset email";
|
|
1434
|
+
setError(errorMessage);
|
|
1435
|
+
if (onError) {
|
|
1436
|
+
onError(new Error(errorMessage));
|
|
1437
|
+
}
|
|
1438
|
+
} finally {
|
|
1439
|
+
setLoading(false);
|
|
1440
|
+
}
|
|
1441
|
+
}
|
|
1442
|
+
async function handleVerifyCode(code) {
|
|
1443
|
+
setError("");
|
|
1444
|
+
try {
|
|
1445
|
+
const result = await exchangeResetPasswordToken(email, code);
|
|
1446
|
+
if ("error" in result) {
|
|
1447
|
+
throw new Error(result.error.message || "Failed to verify code");
|
|
1448
|
+
}
|
|
1449
|
+
if (result.token) {
|
|
1450
|
+
setResetToken(result.token);
|
|
1451
|
+
setStep("password");
|
|
1452
|
+
}
|
|
1453
|
+
} catch (err) {
|
|
1454
|
+
const errorMessage = err instanceof Error ? err.message : "Invalid verification code";
|
|
1455
|
+
setError(errorMessage);
|
|
1456
|
+
if (onError) {
|
|
1457
|
+
onError(new Error(errorMessage));
|
|
1458
|
+
}
|
|
1459
|
+
}
|
|
1460
|
+
}
|
|
1461
|
+
async function handleResendEmail() {
|
|
1462
|
+
await sendResetPasswordEmail(email);
|
|
1463
|
+
}
|
|
1464
|
+
async function handleResetPasswordSubmit(e) {
|
|
1465
|
+
e.preventDefault();
|
|
1466
|
+
setLoading(true);
|
|
1467
|
+
setError("");
|
|
1732
1468
|
if (newPassword !== confirmPassword) {
|
|
1733
1469
|
setError("Passwords do not match");
|
|
1734
1470
|
setLoading(false);
|
|
1735
1471
|
return;
|
|
1736
1472
|
}
|
|
1737
|
-
if (!
|
|
1738
|
-
setError("
|
|
1473
|
+
if (!authConfig) {
|
|
1474
|
+
setError("Configuration not loaded");
|
|
1739
1475
|
setLoading(false);
|
|
1740
1476
|
return;
|
|
1741
1477
|
}
|
|
@@ -1754,12 +1490,16 @@ function ResetPassword({
|
|
|
1754
1490
|
return;
|
|
1755
1491
|
}
|
|
1756
1492
|
try {
|
|
1757
|
-
const result = await resetPassword(
|
|
1493
|
+
const result = await resetPassword(resetToken, newPassword);
|
|
1758
1494
|
if (result?.message) {
|
|
1759
1495
|
setSuccess(true);
|
|
1760
|
-
|
|
1761
|
-
|
|
1762
|
-
|
|
1496
|
+
const signInUrl = new URL("/sign-in", window.location.origin);
|
|
1497
|
+
searchParams.forEach((value, key) => {
|
|
1498
|
+
signInUrl.searchParams.set(key, value);
|
|
1499
|
+
});
|
|
1500
|
+
setTimeout(() => {
|
|
1501
|
+
window.location.href = signInUrl.toString();
|
|
1502
|
+
}, 2e3);
|
|
1763
1503
|
} else {
|
|
1764
1504
|
const errorMessage = "Failed to reset password";
|
|
1765
1505
|
setError(errorMessage);
|
|
@@ -1768,7 +1508,7 @@ function ResetPassword({
|
|
|
1768
1508
|
}
|
|
1769
1509
|
}
|
|
1770
1510
|
} catch (err) {
|
|
1771
|
-
const errorMessage = err.message
|
|
1511
|
+
const errorMessage = err instanceof Error ? err.message : "Failed to reset password";
|
|
1772
1512
|
setError(errorMessage);
|
|
1773
1513
|
if (onError) {
|
|
1774
1514
|
onError(new Error(errorMessage));
|
|
@@ -1780,90 +1520,97 @@ function ResetPassword({
|
|
|
1780
1520
|
if (!authConfig) {
|
|
1781
1521
|
return null;
|
|
1782
1522
|
}
|
|
1783
|
-
|
|
1523
|
+
if (step === "email") {
|
|
1524
|
+
return /* @__PURE__ */ jsx(
|
|
1525
|
+
ForgotPasswordForm,
|
|
1526
|
+
{
|
|
1527
|
+
email,
|
|
1528
|
+
onEmailChange: setEmail,
|
|
1529
|
+
onSubmit: (e) => {
|
|
1530
|
+
void handleEmailSubmit(e);
|
|
1531
|
+
},
|
|
1532
|
+
error,
|
|
1533
|
+
loading,
|
|
1534
|
+
showVerificationStep,
|
|
1535
|
+
resetPasswordMethod: authConfig.resetPasswordMethod,
|
|
1536
|
+
onVerifyCode: handleVerifyCode,
|
|
1537
|
+
onResendEmail: handleResendEmail,
|
|
1538
|
+
...uiProps
|
|
1539
|
+
}
|
|
1540
|
+
);
|
|
1541
|
+
}
|
|
1542
|
+
return /* @__PURE__ */ jsx(
|
|
1784
1543
|
ResetPasswordForm,
|
|
1785
1544
|
{
|
|
1786
1545
|
newPassword,
|
|
1787
1546
|
confirmPassword,
|
|
1788
1547
|
onNewPasswordChange: setNewPassword,
|
|
1789
1548
|
onConfirmPasswordChange: setConfirmPassword,
|
|
1790
|
-
onSubmit:
|
|
1549
|
+
onSubmit: handleResetPasswordSubmit,
|
|
1791
1550
|
error,
|
|
1792
1551
|
loading,
|
|
1793
1552
|
success,
|
|
1794
1553
|
authConfig,
|
|
1795
|
-
backToSignInUrl,
|
|
1796
1554
|
...uiProps
|
|
1797
1555
|
}
|
|
1798
1556
|
);
|
|
1799
1557
|
}
|
|
1800
|
-
function
|
|
1801
|
-
|
|
1802
|
-
|
|
1803
|
-
|
|
1804
|
-
...uiProps
|
|
1805
|
-
}) {
|
|
1806
|
-
const { sendResetPasswordEmail, baseUrl } = useInsforge();
|
|
1558
|
+
function ResetPassword({ onError, ...uiProps }) {
|
|
1559
|
+
const [searchParams] = useSearchParams();
|
|
1560
|
+
const token = searchParams.get("token");
|
|
1561
|
+
const { resetPassword } = useInsforge();
|
|
1807
1562
|
const { authConfig } = usePublicAuthConfig();
|
|
1808
|
-
const [
|
|
1809
|
-
const [
|
|
1810
|
-
const [
|
|
1811
|
-
const [
|
|
1812
|
-
const [
|
|
1813
|
-
|
|
1814
|
-
const [loading, setLoading] = react.useState(false);
|
|
1815
|
-
const [success, setSuccess] = react.useState(false);
|
|
1816
|
-
const [resendDisabled, setResendDisabled] = react.useState(true);
|
|
1817
|
-
const [resendCountdown, setResendCountdown] = react.useState(60);
|
|
1818
|
-
const [isSendingCode, setIsSendingCode] = react.useState(false);
|
|
1819
|
-
const [isVerifyingCode, setIsVerifyingCode] = react.useState(false);
|
|
1820
|
-
react.useEffect(() => {
|
|
1821
|
-
if (resendCountdown > 0 && step === "code") {
|
|
1822
|
-
const timer = setInterval(() => {
|
|
1823
|
-
setResendCountdown((prev) => {
|
|
1824
|
-
if (prev <= 1) {
|
|
1825
|
-
setResendDisabled(false);
|
|
1826
|
-
return 0;
|
|
1827
|
-
}
|
|
1828
|
-
return prev - 1;
|
|
1829
|
-
});
|
|
1830
|
-
}, 1e3);
|
|
1831
|
-
return () => clearInterval(timer);
|
|
1832
|
-
}
|
|
1833
|
-
}, [resendCountdown, step]);
|
|
1834
|
-
async function handleEmailSubmit(e) {
|
|
1563
|
+
const [newPassword, setNewPassword] = useState("");
|
|
1564
|
+
const [confirmPassword, setConfirmPassword] = useState("");
|
|
1565
|
+
const [error, setError] = useState("");
|
|
1566
|
+
const [loading, setLoading] = useState(false);
|
|
1567
|
+
const [success, setSuccess] = useState(false);
|
|
1568
|
+
async function handleSubmit(e) {
|
|
1835
1569
|
e.preventDefault();
|
|
1836
1570
|
setLoading(true);
|
|
1837
1571
|
setError("");
|
|
1838
|
-
|
|
1839
|
-
|
|
1840
|
-
|
|
1572
|
+
if (!authConfig) {
|
|
1573
|
+
setError("Configuration not loaded. Please refresh the page.");
|
|
1574
|
+
setLoading(false);
|
|
1575
|
+
return;
|
|
1576
|
+
}
|
|
1577
|
+
if (newPassword !== confirmPassword) {
|
|
1578
|
+
setError("Passwords do not match");
|
|
1579
|
+
setLoading(false);
|
|
1580
|
+
return;
|
|
1581
|
+
}
|
|
1582
|
+
if (!token) {
|
|
1583
|
+
setError("Reset token is missing");
|
|
1584
|
+
setLoading(false);
|
|
1585
|
+
return;
|
|
1586
|
+
}
|
|
1587
|
+
const passwordZodSchema = createPasswordSchema({
|
|
1588
|
+
minLength: authConfig.passwordMinLength,
|
|
1589
|
+
requireUppercase: authConfig.requireUppercase,
|
|
1590
|
+
requireLowercase: authConfig.requireLowercase,
|
|
1591
|
+
requireNumber: authConfig.requireNumber,
|
|
1592
|
+
requireSpecialChar: authConfig.requireSpecialChar
|
|
1593
|
+
});
|
|
1594
|
+
const passwordValidation = passwordZodSchema.safeParse(newPassword);
|
|
1595
|
+
if (!passwordValidation.success) {
|
|
1596
|
+
const firstError = passwordValidation.error.issues[0];
|
|
1841
1597
|
setError(firstError.message);
|
|
1842
1598
|
setLoading(false);
|
|
1843
1599
|
return;
|
|
1844
1600
|
}
|
|
1845
1601
|
try {
|
|
1846
|
-
const result = await
|
|
1847
|
-
if (result?.
|
|
1848
|
-
|
|
1849
|
-
setSuccess(true);
|
|
1850
|
-
if (onSuccess) {
|
|
1851
|
-
onSuccess();
|
|
1852
|
-
}
|
|
1853
|
-
} else {
|
|
1854
|
-
setStep("code");
|
|
1855
|
-
setResendDisabled(true);
|
|
1856
|
-
setResendCountdown(60);
|
|
1857
|
-
}
|
|
1602
|
+
const result = await resetPassword(token, newPassword);
|
|
1603
|
+
if (result?.message) {
|
|
1604
|
+
setSuccess(true);
|
|
1858
1605
|
} else {
|
|
1859
|
-
const errorMessage =
|
|
1606
|
+
const errorMessage = "Failed to reset password";
|
|
1860
1607
|
setError(errorMessage);
|
|
1861
1608
|
if (onError) {
|
|
1862
1609
|
onError(new Error(errorMessage));
|
|
1863
1610
|
}
|
|
1864
1611
|
}
|
|
1865
1612
|
} catch (err) {
|
|
1866
|
-
const errorMessage = err.message
|
|
1613
|
+
const errorMessage = err instanceof Error ? err.message : "Failed to reset password";
|
|
1867
1614
|
setError(errorMessage);
|
|
1868
1615
|
if (onError) {
|
|
1869
1616
|
onError(new Error(errorMessage));
|
|
@@ -1872,178 +1619,163 @@ function ForgotPassword({
|
|
|
1872
1619
|
setLoading(false);
|
|
1873
1620
|
}
|
|
1874
1621
|
}
|
|
1875
|
-
async function handleVerifyCode(code) {
|
|
1876
|
-
setIsVerifyingCode(true);
|
|
1877
|
-
setError("");
|
|
1878
|
-
setVerificationCode(code);
|
|
1879
|
-
try {
|
|
1880
|
-
const result = await insforge.auth.exchangeResetPasswordToken({ email, code });
|
|
1881
|
-
if (result.error) {
|
|
1882
|
-
throw new Error(result.error.message || "Failed to verify code");
|
|
1883
|
-
}
|
|
1884
|
-
if (result.data) {
|
|
1885
|
-
setResetToken(result.data.token);
|
|
1886
|
-
setStep("password");
|
|
1887
|
-
}
|
|
1888
|
-
} catch (err) {
|
|
1889
|
-
setError(err.message || "Invalid verification code");
|
|
1890
|
-
setVerificationCode("");
|
|
1891
|
-
} finally {
|
|
1892
|
-
setIsVerifyingCode(false);
|
|
1893
|
-
}
|
|
1894
|
-
}
|
|
1895
|
-
const handleResendCode = react.useCallback(async () => {
|
|
1896
|
-
setResendDisabled(true);
|
|
1897
|
-
setResendCountdown(60);
|
|
1898
|
-
setIsSendingCode(true);
|
|
1899
|
-
setError("");
|
|
1900
|
-
try {
|
|
1901
|
-
await sendResetPasswordEmail(email);
|
|
1902
|
-
} catch (err) {
|
|
1903
|
-
setError(err.message || "Failed to resend code");
|
|
1904
|
-
setResendDisabled(false);
|
|
1905
|
-
setResendCountdown(0);
|
|
1906
|
-
} finally {
|
|
1907
|
-
setIsSendingCode(false);
|
|
1908
|
-
}
|
|
1909
|
-
}, [email, sendResetPasswordEmail]);
|
|
1910
|
-
function handlePasswordResetSuccess(redirectTo) {
|
|
1911
|
-
const targetUrl = redirectTo || backToSignInUrl;
|
|
1912
|
-
if (onSuccess) {
|
|
1913
|
-
onSuccess();
|
|
1914
|
-
}
|
|
1915
|
-
setTimeout(() => {
|
|
1916
|
-
window.location.href = targetUrl;
|
|
1917
|
-
}, 1500);
|
|
1918
|
-
}
|
|
1919
1622
|
if (!authConfig) {
|
|
1920
1623
|
return null;
|
|
1921
1624
|
}
|
|
1922
|
-
if (
|
|
1923
|
-
return /* @__PURE__ */
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1625
|
+
if (!token) {
|
|
1626
|
+
return /* @__PURE__ */ jsxs(AuthContainer, { children: [
|
|
1627
|
+
/* @__PURE__ */ jsx(AuthHeader, { title: "Invalid Reset Link", subtitle: "" }),
|
|
1628
|
+
/* @__PURE__ */ jsx(
|
|
1629
|
+
"div",
|
|
1630
|
+
{
|
|
1631
|
+
style: {
|
|
1632
|
+
padding: "1.5rem",
|
|
1633
|
+
backgroundColor: "#FEE2E2",
|
|
1634
|
+
borderRadius: "0.5rem",
|
|
1635
|
+
border: "1px solid #DC2626"
|
|
1636
|
+
},
|
|
1637
|
+
children: /* @__PURE__ */ jsx(
|
|
1638
|
+
"p",
|
|
1639
|
+
{
|
|
1640
|
+
style: {
|
|
1641
|
+
fontSize: "0.875rem",
|
|
1642
|
+
color: "#DC2626",
|
|
1643
|
+
margin: 0,
|
|
1644
|
+
fontFamily: "var(--if-font-family)"
|
|
1645
|
+
},
|
|
1646
|
+
children: "The password reset link is missing or invalid. Please request a new password reset link."
|
|
1647
|
+
}
|
|
1648
|
+
)
|
|
1649
|
+
}
|
|
1650
|
+
)
|
|
1651
|
+
] });
|
|
1936
1652
|
}
|
|
1937
|
-
if (
|
|
1938
|
-
return /* @__PURE__ */
|
|
1939
|
-
|
|
1653
|
+
if (success) {
|
|
1654
|
+
return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsxs(
|
|
1655
|
+
"div",
|
|
1940
1656
|
{
|
|
1941
|
-
|
|
1942
|
-
containerClassName: uiProps.appearance?.container,
|
|
1943
|
-
cardClassName: uiProps.appearance?.card
|
|
1944
|
-
},
|
|
1657
|
+
style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" },
|
|
1945
1658
|
children: [
|
|
1946
|
-
/* @__PURE__ */
|
|
1947
|
-
|
|
1659
|
+
/* @__PURE__ */ jsx(
|
|
1660
|
+
"div",
|
|
1948
1661
|
{
|
|
1949
|
-
|
|
1950
|
-
|
|
1951
|
-
|
|
1952
|
-
|
|
1953
|
-
|
|
1954
|
-
|
|
1955
|
-
|
|
1956
|
-
|
|
1957
|
-
|
|
1958
|
-
|
|
1959
|
-
|
|
1960
|
-
/* @__PURE__ */ jsxRuntime.jsx("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.jsxs("div", { className: "flex flex-col gap-3 mt-2", children: [
|
|
1961
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1962
|
-
AuthVerificationCodeInput,
|
|
1662
|
+
style: {
|
|
1663
|
+
width: "4rem",
|
|
1664
|
+
height: "4rem",
|
|
1665
|
+
borderRadius: "50%",
|
|
1666
|
+
backgroundColor: "#D1FAE5",
|
|
1667
|
+
display: "flex",
|
|
1668
|
+
alignItems: "center",
|
|
1669
|
+
justifyContent: "center"
|
|
1670
|
+
},
|
|
1671
|
+
children: /* @__PURE__ */ jsx(
|
|
1672
|
+
"svg",
|
|
1963
1673
|
{
|
|
1964
|
-
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
|
|
1970
|
-
|
|
1971
|
-
|
|
1972
|
-
),
|
|
1973
|
-
isVerifyingCode && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: "Verifying..." })
|
|
1974
|
-
] }) }),
|
|
1975
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full text-sm text-center text-neutral-600 dark:text-neutral-400", children: [
|
|
1976
|
-
"Didn't receive the email?",
|
|
1977
|
-
" ",
|
|
1978
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1979
|
-
"button",
|
|
1980
|
-
{
|
|
1981
|
-
onClick: () => {
|
|
1982
|
-
void handleResendCode();
|
|
1983
|
-
},
|
|
1984
|
-
disabled: resendDisabled || isSendingCode,
|
|
1985
|
-
className: "text-black dark:text-white font-medium transition-colors disabled:cursor-not-allowed cursor-pointer hover:underline disabled:no-underline disabled:opacity-50",
|
|
1986
|
-
children: isSendingCode ? "Sending..." : resendDisabled ? `Retry in (${resendCountdown}s)` : "Click to resend"
|
|
1674
|
+
style: { width: "2rem", height: "2rem", color: "#059669" },
|
|
1675
|
+
fill: "none",
|
|
1676
|
+
strokeLinecap: "round",
|
|
1677
|
+
strokeLinejoin: "round",
|
|
1678
|
+
strokeWidth: "2",
|
|
1679
|
+
viewBox: "0 0 24 24",
|
|
1680
|
+
stroke: "currentColor",
|
|
1681
|
+
children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" })
|
|
1987
1682
|
}
|
|
1988
1683
|
)
|
|
1989
|
-
|
|
1990
|
-
|
|
1991
|
-
/* @__PURE__ */
|
|
1684
|
+
}
|
|
1685
|
+
),
|
|
1686
|
+
/* @__PURE__ */ jsx(
|
|
1687
|
+
"h2",
|
|
1688
|
+
{
|
|
1689
|
+
style: {
|
|
1690
|
+
fontSize: "1.5rem",
|
|
1691
|
+
fontWeight: 600,
|
|
1692
|
+
color: "#000",
|
|
1693
|
+
margin: 0,
|
|
1694
|
+
textAlign: "center",
|
|
1695
|
+
fontFamily: "var(--if-font-family)"
|
|
1696
|
+
},
|
|
1697
|
+
children: "Password Reset Successfully"
|
|
1698
|
+
}
|
|
1699
|
+
),
|
|
1700
|
+
/* @__PURE__ */ jsx(
|
|
1701
|
+
"p",
|
|
1702
|
+
{
|
|
1703
|
+
style: {
|
|
1704
|
+
fontSize: "0.875rem",
|
|
1705
|
+
color: "#828282",
|
|
1706
|
+
textAlign: "center",
|
|
1707
|
+
margin: 0,
|
|
1708
|
+
fontFamily: "var(--if-font-family)"
|
|
1709
|
+
},
|
|
1710
|
+
children: "Your password has been reset successfully. You can now close this page and return to the login page in your original tab."
|
|
1711
|
+
}
|
|
1712
|
+
)
|
|
1992
1713
|
]
|
|
1993
1714
|
}
|
|
1994
|
-
);
|
|
1715
|
+
) });
|
|
1995
1716
|
}
|
|
1996
|
-
return /* @__PURE__ */
|
|
1997
|
-
|
|
1717
|
+
return /* @__PURE__ */ jsx(
|
|
1718
|
+
ResetPasswordForm,
|
|
1998
1719
|
{
|
|
1999
|
-
|
|
2000
|
-
|
|
2001
|
-
|
|
2002
|
-
|
|
2003
|
-
|
|
1720
|
+
newPassword,
|
|
1721
|
+
confirmPassword,
|
|
1722
|
+
onNewPasswordChange: setNewPassword,
|
|
1723
|
+
onConfirmPasswordChange: setConfirmPassword,
|
|
1724
|
+
onSubmit: handleSubmit,
|
|
1725
|
+
error,
|
|
1726
|
+
loading,
|
|
1727
|
+
success: false,
|
|
1728
|
+
authConfig,
|
|
1729
|
+
...uiProps
|
|
2004
1730
|
}
|
|
2005
1731
|
);
|
|
2006
1732
|
}
|
|
2007
1733
|
function VerifyEmailStatus({
|
|
2008
1734
|
status,
|
|
2009
1735
|
error,
|
|
2010
|
-
appearance = {},
|
|
2011
1736
|
verifyingTitle = "Verifying your email...",
|
|
2012
1737
|
successTitle = "Email Verified!",
|
|
2013
|
-
successMessage = "Your email has been verified successfully. You can close this page and
|
|
1738
|
+
successMessage = "Your email has been verified successfully. You can close this page and sign in to your app.",
|
|
2014
1739
|
errorTitle = "Verification Failed"
|
|
2015
1740
|
}) {
|
|
2016
1741
|
if (status === "verifying") {
|
|
2017
|
-
return /* @__PURE__ */
|
|
2018
|
-
/* @__PURE__ */
|
|
2019
|
-
/* @__PURE__ */
|
|
1742
|
+
return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsxs("div", { className: "if-verifyStatus-container", children: [
|
|
1743
|
+
/* @__PURE__ */ jsx("h2", { className: "if-authHeader-title", children: verifyingTitle }),
|
|
1744
|
+
/* @__PURE__ */ jsx("div", { className: "if-submitButton-spinner if-verifyStatus-spinner" })
|
|
2020
1745
|
] }) });
|
|
2021
1746
|
}
|
|
2022
1747
|
if (status === "error") {
|
|
2023
|
-
return /* @__PURE__ */
|
|
2024
|
-
/* @__PURE__ */
|
|
2025
|
-
/* @__PURE__ */
|
|
1748
|
+
return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsx("div", { className: "if-verifyStatus-container-stretch", children: /* @__PURE__ */ jsxs("div", { className: "if-authHeader if-internal-h3m7w5", children: [
|
|
1749
|
+
/* @__PURE__ */ jsx("h1", { className: "if-authHeader-title if-internal-t4p1k9", children: errorTitle }),
|
|
1750
|
+
/* @__PURE__ */ jsxs("p", { className: "if-authHeader-subtitle if-internal-s7q2m3", children: [
|
|
2026
1751
|
error || "The verification link is invalid or has expired.",
|
|
2027
1752
|
" Please try again or contact support if the problem persists. You can close this page and return to your app."
|
|
2028
1753
|
] })
|
|
2029
1754
|
] }) }) });
|
|
2030
1755
|
}
|
|
2031
|
-
return /* @__PURE__ */
|
|
2032
|
-
/* @__PURE__ */
|
|
2033
|
-
|
|
2034
|
-
|
|
1756
|
+
return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsx("div", { className: "if-verifyStatus-container-stretch", children: /* @__PURE__ */ jsxs("div", { className: "if-verifyStatus-successContent", children: [
|
|
1757
|
+
/* @__PURE__ */ jsx("div", { className: "if-verifyStatus-successIcon", children: /* @__PURE__ */ jsx(
|
|
1758
|
+
"svg",
|
|
1759
|
+
{
|
|
1760
|
+
className: "if-verifyStatus-successIconSvg",
|
|
1761
|
+
fill: "none",
|
|
1762
|
+
strokeLinecap: "round",
|
|
1763
|
+
strokeLinejoin: "round",
|
|
1764
|
+
strokeWidth: "2",
|
|
1765
|
+
viewBox: "0 0 24 24",
|
|
1766
|
+
stroke: "currentColor",
|
|
1767
|
+
children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" })
|
|
1768
|
+
}
|
|
1769
|
+
) }),
|
|
1770
|
+
/* @__PURE__ */ jsx("h2", { className: "if-authHeader-title if-verifyStatus-textCenter", children: successTitle }),
|
|
1771
|
+
/* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle if-verifyStatus-textCenter", children: successMessage })
|
|
2035
1772
|
] }) }) });
|
|
2036
1773
|
}
|
|
2037
|
-
function VerifyEmail({
|
|
2038
|
-
token,
|
|
2039
|
-
onSuccess,
|
|
2040
|
-
onError,
|
|
2041
|
-
...uiProps
|
|
2042
|
-
}) {
|
|
1774
|
+
function VerifyEmail({ token, onSuccess, onError, ...uiProps }) {
|
|
2043
1775
|
const { verifyEmail } = useInsforge();
|
|
2044
|
-
const [status, setStatus] =
|
|
2045
|
-
const [error, setError] =
|
|
2046
|
-
|
|
1776
|
+
const [status, setStatus] = useState("verifying");
|
|
1777
|
+
const [error, setError] = useState("");
|
|
1778
|
+
useEffect(() => {
|
|
2047
1779
|
const verifyEmailFn = async () => {
|
|
2048
1780
|
if (!token) {
|
|
2049
1781
|
const errorMessage = "Invalid verification link. Missing required token.";
|
|
@@ -2074,7 +1806,7 @@ function VerifyEmail({
|
|
|
2074
1806
|
});
|
|
2075
1807
|
}
|
|
2076
1808
|
} catch (err) {
|
|
2077
|
-
const errorMessage = err.message
|
|
1809
|
+
const errorMessage = err instanceof Error ? err.message : "Email verification failed";
|
|
2078
1810
|
setError(errorMessage);
|
|
2079
1811
|
setStatus("error");
|
|
2080
1812
|
if (onError) {
|
|
@@ -2084,21 +1816,19 @@ function VerifyEmail({
|
|
|
2084
1816
|
};
|
|
2085
1817
|
void verifyEmailFn();
|
|
2086
1818
|
}, [token, verifyEmail, onSuccess, onError]);
|
|
2087
|
-
return /* @__PURE__ */
|
|
1819
|
+
return /* @__PURE__ */ jsx(VerifyEmailStatus, { status, error, ...uiProps });
|
|
2088
1820
|
}
|
|
2089
|
-
function UserButton({
|
|
2090
|
-
afterSignOutUrl = "/",
|
|
2091
|
-
mode = "detailed",
|
|
2092
|
-
appearance = {}
|
|
2093
|
-
}) {
|
|
1821
|
+
function UserButton({ afterSignOutUrl = "/", mode = "detailed" }) {
|
|
2094
1822
|
const { user, signOut } = useInsforge();
|
|
2095
|
-
const [isOpen, setIsOpen] =
|
|
2096
|
-
const [imageError, setImageError] =
|
|
2097
|
-
const dropdownRef =
|
|
2098
|
-
|
|
1823
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
1824
|
+
const [imageError, setImageError] = useState(false);
|
|
1825
|
+
const dropdownRef = useRef(null);
|
|
1826
|
+
useEffect(() => {
|
|
2099
1827
|
setImageError(false);
|
|
2100
1828
|
const avatarUrl = user?.avatarUrl;
|
|
2101
|
-
if (!avatarUrl)
|
|
1829
|
+
if (!avatarUrl) {
|
|
1830
|
+
return;
|
|
1831
|
+
}
|
|
2102
1832
|
const checkImageUrl = async () => {
|
|
2103
1833
|
try {
|
|
2104
1834
|
const response = await fetch(avatarUrl, {
|
|
@@ -2109,12 +1839,15 @@ function UserButton({
|
|
|
2109
1839
|
setImageError(true);
|
|
2110
1840
|
}
|
|
2111
1841
|
} catch (error) {
|
|
1842
|
+
if (error instanceof Error) {
|
|
1843
|
+
console.error("Error checking image URL:", error.message);
|
|
1844
|
+
}
|
|
2112
1845
|
setImageError(true);
|
|
2113
1846
|
}
|
|
2114
1847
|
};
|
|
2115
1848
|
checkImageUrl();
|
|
2116
1849
|
}, [user?.avatarUrl]);
|
|
2117
|
-
|
|
1850
|
+
useEffect(() => {
|
|
2118
1851
|
function handleClickOutside(event) {
|
|
2119
1852
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
|
2120
1853
|
setIsOpen(false);
|
|
@@ -2132,87 +1865,48 @@ function UserButton({
|
|
|
2132
1865
|
setIsOpen(false);
|
|
2133
1866
|
window.location.href = afterSignOutUrl;
|
|
2134
1867
|
}
|
|
2135
|
-
if (!user)
|
|
1868
|
+
if (!user) {
|
|
1869
|
+
return null;
|
|
1870
|
+
}
|
|
2136
1871
|
const initials = user.name ? user.name.charAt(0).toUpperCase() : user.email.split("@")[0].slice(0, 2).toUpperCase();
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
|
|
2142
|
-
|
|
2143
|
-
|
|
2144
|
-
|
|
2145
|
-
|
|
2146
|
-
|
|
2147
|
-
|
|
2148
|
-
|
|
2149
|
-
|
|
2150
|
-
|
|
2151
|
-
|
|
2152
|
-
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
|
|
2159
|
-
|
|
2160
|
-
|
|
2161
|
-
|
|
2162
|
-
|
|
2163
|
-
|
|
2164
|
-
|
|
2165
|
-
|
|
2166
|
-
|
|
2167
|
-
|
|
2168
|
-
|
|
2169
|
-
|
|
2170
|
-
|
|
2171
|
-
|
|
2172
|
-
|
|
2173
|
-
|
|
2174
|
-
|
|
2175
|
-
}
|
|
2176
|
-
),
|
|
2177
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2178
|
-
"div",
|
|
2179
|
-
{
|
|
2180
|
-
className: cn(
|
|
2181
|
-
"text-xs text-gray-500 leading-4 text-left",
|
|
2182
|
-
appearance.emailClassName
|
|
2183
|
-
),
|
|
2184
|
-
children: user.email
|
|
2185
|
-
}
|
|
2186
|
-
)
|
|
2187
|
-
] })
|
|
2188
|
-
]
|
|
2189
|
-
}
|
|
2190
|
-
),
|
|
2191
|
-
isOpen && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2192
|
-
"div",
|
|
2193
|
-
{
|
|
2194
|
-
className: cn(
|
|
2195
|
-
"absolute top-full right-0 mt-2 min-w-40",
|
|
2196
|
-
"bg-white border border-gray-200 rounded-lg",
|
|
2197
|
-
"shadow-lg z-50 overflow-hidden p-1",
|
|
2198
|
-
appearance.dropdownClassName
|
|
2199
|
-
),
|
|
2200
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2201
|
-
"button",
|
|
2202
|
-
{
|
|
2203
|
-
onClick: handleSignOut,
|
|
2204
|
-
className: "flex items-center justify-start gap-2 w-full px-3 py-2 text-sm font-normal text-red-600 bg-transparent border-0 rounded-md cursor-pointer transition-colors hover:bg-red-50 text-left",
|
|
2205
|
-
children: [
|
|
2206
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { className: "w-5 h-5" }),
|
|
2207
|
-
"Sign out"
|
|
2208
|
-
]
|
|
2209
|
-
}
|
|
2210
|
-
)
|
|
2211
|
-
}
|
|
2212
|
-
)
|
|
2213
|
-
]
|
|
2214
|
-
}
|
|
2215
|
-
);
|
|
1872
|
+
const buttonClassName = mode === "detailed" ? "if-userButton if-userButton-detailed" : "if-userButton";
|
|
1873
|
+
return /* @__PURE__ */ jsxs("div", { className: "if-userButton-container if-internal-ub3k8p", ref: dropdownRef, children: [
|
|
1874
|
+
/* @__PURE__ */ jsxs(
|
|
1875
|
+
"button",
|
|
1876
|
+
{
|
|
1877
|
+
className: buttonClassName,
|
|
1878
|
+
onClick: () => setIsOpen(!isOpen),
|
|
1879
|
+
"aria-expanded": isOpen,
|
|
1880
|
+
"aria-haspopup": "true",
|
|
1881
|
+
children: [
|
|
1882
|
+
/* @__PURE__ */ jsx("div", { className: "if-userButton-avatar", children: user.avatarUrl && !imageError ? /* @__PURE__ */ jsx(
|
|
1883
|
+
"img",
|
|
1884
|
+
{
|
|
1885
|
+
src: user.avatarUrl,
|
|
1886
|
+
alt: user.email,
|
|
1887
|
+
onError: () => setImageError(true),
|
|
1888
|
+
className: "if-userButton-avatarImage"
|
|
1889
|
+
}
|
|
1890
|
+
) : /* @__PURE__ */ jsx("span", { className: "if-userButton-avatarInitials", children: initials }) }),
|
|
1891
|
+
mode === "detailed" && /* @__PURE__ */ jsxs("div", { className: "if-userButton-info", children: [
|
|
1892
|
+
user.name && /* @__PURE__ */ jsx("div", { className: "if-userButton-name", children: user.name }),
|
|
1893
|
+
/* @__PURE__ */ jsx("div", { className: "if-userButton-email", children: user.email })
|
|
1894
|
+
] })
|
|
1895
|
+
]
|
|
1896
|
+
}
|
|
1897
|
+
),
|
|
1898
|
+
isOpen && /* @__PURE__ */ jsx("div", { className: "if-userButton-menu", children: /* @__PURE__ */ jsxs(
|
|
1899
|
+
"button",
|
|
1900
|
+
{
|
|
1901
|
+
onClick: handleSignOut,
|
|
1902
|
+
className: "if-userButton-menuItem if-userButton-menuItem-signout",
|
|
1903
|
+
children: [
|
|
1904
|
+
/* @__PURE__ */ jsx(LogOut, { className: "if-userButton-menuItem-icon" }),
|
|
1905
|
+
"Sign out"
|
|
1906
|
+
]
|
|
1907
|
+
}
|
|
1908
|
+
) })
|
|
1909
|
+
] });
|
|
2216
1910
|
}
|
|
2217
1911
|
function Protect({
|
|
2218
1912
|
children,
|
|
@@ -2222,7 +1916,7 @@ function Protect({
|
|
|
2222
1916
|
onRedirect
|
|
2223
1917
|
}) {
|
|
2224
1918
|
const { isSignedIn, isLoaded, user } = useInsforge();
|
|
2225
|
-
|
|
1919
|
+
useEffect(() => {
|
|
2226
1920
|
if (isLoaded && !isSignedIn) {
|
|
2227
1921
|
if (onRedirect) {
|
|
2228
1922
|
onRedirect(redirectTo);
|
|
@@ -2240,7 +1934,7 @@ function Protect({
|
|
|
2240
1934
|
}
|
|
2241
1935
|
}, [isLoaded, isSignedIn, redirectTo, condition, user, onRedirect]);
|
|
2242
1936
|
if (!isLoaded) {
|
|
2243
|
-
return fallback || /* @__PURE__ */
|
|
1937
|
+
return fallback || /* @__PURE__ */ jsx("div", { className: "insforge-loading", children: "Loading..." });
|
|
2244
1938
|
}
|
|
2245
1939
|
if (!isSignedIn) {
|
|
2246
1940
|
return fallback || null;
|
|
@@ -2248,111 +1942,29 @@ function Protect({
|
|
|
2248
1942
|
if (condition && user && !condition(user)) {
|
|
2249
1943
|
return fallback || null;
|
|
2250
1944
|
}
|
|
2251
|
-
return /* @__PURE__ */
|
|
1945
|
+
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
2252
1946
|
}
|
|
2253
1947
|
function SignedIn({ children }) {
|
|
2254
1948
|
const { isSignedIn, isLoaded } = useInsforge();
|
|
2255
|
-
if (!isLoaded)
|
|
2256
|
-
|
|
2257
|
-
|
|
1949
|
+
if (!isLoaded) {
|
|
1950
|
+
return null;
|
|
1951
|
+
}
|
|
1952
|
+
if (!isSignedIn) {
|
|
1953
|
+
return null;
|
|
1954
|
+
}
|
|
1955
|
+
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
2258
1956
|
}
|
|
2259
1957
|
function SignedOut({ children }) {
|
|
2260
1958
|
const { isSignedIn, isLoaded } = useInsforge();
|
|
2261
|
-
if (!isLoaded)
|
|
2262
|
-
|
|
2263
|
-
|
|
2264
|
-
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
onError,
|
|
2269
|
-
loadingComponent,
|
|
2270
|
-
onRedirect
|
|
2271
|
-
}) {
|
|
2272
|
-
const isProcessingRef = react.useRef(false);
|
|
2273
|
-
const { isLoaded, isSignedIn } = useInsforge();
|
|
2274
|
-
react.useEffect(() => {
|
|
2275
|
-
if (!isLoaded) return;
|
|
2276
|
-
if (isProcessingRef.current) return;
|
|
2277
|
-
isProcessingRef.current = true;
|
|
2278
|
-
const processCallback = async () => {
|
|
2279
|
-
const searchParams = new URLSearchParams(window.location.search);
|
|
2280
|
-
const error = searchParams.get("error");
|
|
2281
|
-
if (error) {
|
|
2282
|
-
if (onError) {
|
|
2283
|
-
onError(error);
|
|
2284
|
-
} else {
|
|
2285
|
-
const errorUrl = "/?error=" + encodeURIComponent(error);
|
|
2286
|
-
if (onRedirect) {
|
|
2287
|
-
onRedirect(errorUrl);
|
|
2288
|
-
} else {
|
|
2289
|
-
window.location.href = errorUrl;
|
|
2290
|
-
}
|
|
2291
|
-
}
|
|
2292
|
-
return;
|
|
2293
|
-
}
|
|
2294
|
-
if (!isSignedIn) {
|
|
2295
|
-
const errorMsg = "authentication_failed";
|
|
2296
|
-
if (onError) {
|
|
2297
|
-
onError(errorMsg);
|
|
2298
|
-
} else {
|
|
2299
|
-
const errorUrl = "/?error=" + encodeURIComponent(errorMsg);
|
|
2300
|
-
if (onRedirect) {
|
|
2301
|
-
onRedirect(errorUrl);
|
|
2302
|
-
} else {
|
|
2303
|
-
window.location.href = errorUrl;
|
|
2304
|
-
}
|
|
2305
|
-
}
|
|
2306
|
-
return;
|
|
2307
|
-
}
|
|
2308
|
-
window.history.replaceState({}, "", window.location.pathname);
|
|
2309
|
-
if (onSuccess) {
|
|
2310
|
-
onSuccess();
|
|
2311
|
-
}
|
|
2312
|
-
if (onRedirect) {
|
|
2313
|
-
onRedirect(redirectTo);
|
|
2314
|
-
} else {
|
|
2315
|
-
window.location.href = redirectTo;
|
|
2316
|
-
}
|
|
2317
|
-
};
|
|
2318
|
-
processCallback();
|
|
2319
|
-
}, [isLoaded, isSignedIn, redirectTo, onSuccess, onError, onRedirect]);
|
|
2320
|
-
const defaultLoading = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
|
|
2321
|
-
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold mb-4", children: "Completing authentication..." }),
|
|
2322
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto" })
|
|
2323
|
-
] }) });
|
|
2324
|
-
return loadingComponent || defaultLoading;
|
|
1959
|
+
if (!isLoaded) {
|
|
1960
|
+
return null;
|
|
1961
|
+
}
|
|
1962
|
+
if (isSignedIn) {
|
|
1963
|
+
return null;
|
|
1964
|
+
}
|
|
1965
|
+
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
2325
1966
|
}
|
|
2326
1967
|
|
|
2327
|
-
|
|
2328
|
-
exports.AuthContainer = AuthContainer;
|
|
2329
|
-
exports.AuthDivider = AuthDivider;
|
|
2330
|
-
exports.AuthEmailVerificationStep = AuthEmailVerificationStep;
|
|
2331
|
-
exports.AuthErrorBanner = AuthErrorBanner;
|
|
2332
|
-
exports.AuthFormField = AuthFormField;
|
|
2333
|
-
exports.AuthHeader = AuthHeader;
|
|
2334
|
-
exports.AuthLink = AuthLink;
|
|
2335
|
-
exports.AuthOAuthButton = AuthOAuthButton;
|
|
2336
|
-
exports.AuthOAuthProviders = AuthOAuthProviders;
|
|
2337
|
-
exports.AuthPasswordField = AuthPasswordField;
|
|
2338
|
-
exports.AuthPasswordStrengthIndicator = AuthPasswordStrengthIndicator;
|
|
2339
|
-
exports.AuthSubmitButton = AuthSubmitButton;
|
|
2340
|
-
exports.AuthVerificationCodeInput = AuthVerificationCodeInput;
|
|
2341
|
-
exports.ForgotPassword = ForgotPassword;
|
|
2342
|
-
exports.ForgotPasswordForm = ForgotPasswordForm;
|
|
2343
|
-
exports.InsforgeCallback = InsforgeCallback;
|
|
2344
|
-
exports.Protect = Protect;
|
|
2345
|
-
exports.ResetPassword = ResetPassword;
|
|
2346
|
-
exports.ResetPasswordForm = ResetPasswordForm;
|
|
2347
|
-
exports.SignIn = SignIn;
|
|
2348
|
-
exports.SignInForm = SignInForm;
|
|
2349
|
-
exports.SignUp = SignUp;
|
|
2350
|
-
exports.SignUpForm = SignUpForm;
|
|
2351
|
-
exports.SignedIn = SignedIn;
|
|
2352
|
-
exports.SignedOut = SignedOut;
|
|
2353
|
-
exports.UserButton = UserButton;
|
|
2354
|
-
exports.VerifyEmail = VerifyEmail;
|
|
2355
|
-
exports.VerifyEmailStatus = VerifyEmailStatus;
|
|
2356
|
-
exports.validatePasswordStrength = validatePasswordStrength;
|
|
1968
|
+
export { AuthBranding, AuthContainer, AuthDivider, AuthEmailVerificationStep, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthResetPasswordVerificationStep, AuthSubmitButton, AuthVerificationCodeInput, ForgotPassword, ForgotPasswordForm, Protect, ResetPassword, ResetPasswordForm, SignIn, SignInForm, SignUp, SignUpForm, SignedIn, SignedOut, UserButton, VerifyEmail, VerifyEmailStatus };
|
|
2357
1969
|
//# sourceMappingURL=components.js.map
|
|
2358
1970
|
//# sourceMappingURL=components.js.map
|