@stackshift-ui/signin-signup 6.0.5-beta.7 → 6.0.6
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/dist/chunk-4YOZ4R43.mjs +266 -0
- package/dist/chunk-NGYQAQA4.mjs +30 -0
- package/dist/chunk-NJKLN5F4.mjs +30 -0
- package/dist/chunk-ZP54DEPE.mjs +291 -0
- package/dist/helper/index.js +55 -1
- package/dist/helper/index.mjs +8 -1
- package/dist/index.js +674 -1
- package/dist/index.mjs +16 -1
- package/dist/signin-signup.js +664 -1
- package/dist/signin-signup.mjs +6 -1
- package/dist/signin_signup_a.js +349 -1
- package/dist/signin_signup_a.mjs +8 -1
- package/dist/signin_signup_b.js +324 -1
- package/dist/signin_signup_b.mjs +8 -1
- package/dist/types.js +18 -1
- package/package.json +8 -8
|
@@ -0,0 +1,266 @@
|
|
|
1
|
+
import {
|
|
2
|
+
logoLink,
|
|
3
|
+
thankYouPageLink
|
|
4
|
+
} from "./chunk-NGYQAQA4.mjs";
|
|
5
|
+
|
|
6
|
+
// src/signin_signup_b.tsx
|
|
7
|
+
import { Button } from "@stackshift-ui/button";
|
|
8
|
+
import { Card } from "@stackshift-ui/card";
|
|
9
|
+
import { Container } from "@stackshift-ui/container";
|
|
10
|
+
import { Flex } from "@stackshift-ui/flex";
|
|
11
|
+
import { Form } from "@stackshift-ui/form";
|
|
12
|
+
import { FormField } from "@stackshift-ui/form-field";
|
|
13
|
+
import { Heading } from "@stackshift-ui/heading";
|
|
14
|
+
import { Image } from "@stackshift-ui/image";
|
|
15
|
+
import { Input } from "@stackshift-ui/input";
|
|
16
|
+
import { Link } from "@stackshift-ui/link";
|
|
17
|
+
import { Section } from "@stackshift-ui/section";
|
|
18
|
+
import { Text } from "@stackshift-ui/text";
|
|
19
|
+
import React from "react";
|
|
20
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
21
|
+
function SigninSignup_B({ logo, form, formLinks, signInLink }) {
|
|
22
|
+
return /* @__PURE__ */ jsx(Section, { className: "py-10 bg-primary lg:py-20", children: /* @__PURE__ */ jsx(Container, { maxWidth: 1280, children: /* @__PURE__ */ jsxs(Container, { maxWidth: 576, children: [
|
|
23
|
+
/* @__PURE__ */ jsx(LogoSection, { logo }),
|
|
24
|
+
/* @__PURE__ */ jsxs(Card, { borderRadius: "md", className: "p-6 mb-6 bg-white lg:mb-10 lg:p-12", children: [
|
|
25
|
+
/* @__PURE__ */ jsx(SubtitleAndHeadingText, { form }),
|
|
26
|
+
/* @__PURE__ */ jsx(SignupForm, { form, signInLink })
|
|
27
|
+
] }),
|
|
28
|
+
/* @__PURE__ */ jsx(FormLinks, { formLinks })
|
|
29
|
+
] }) }) });
|
|
30
|
+
}
|
|
31
|
+
function LogoSection({ logo }) {
|
|
32
|
+
var _a;
|
|
33
|
+
if (!logo) return null;
|
|
34
|
+
return /* @__PURE__ */ jsx("div", { className: "mb-10", children: /* @__PURE__ */ jsx(
|
|
35
|
+
Link,
|
|
36
|
+
{
|
|
37
|
+
"aria-label": `Go to ${logoLink(logo) === "/" ? "home page" : logoLink(logo)}`,
|
|
38
|
+
className: "flex justify-center mx-auto text-3xl font-bold leading-none",
|
|
39
|
+
href: logoLink(logo),
|
|
40
|
+
target: logo == null ? void 0 : logo.linkTarget,
|
|
41
|
+
rel: (logo == null ? void 0 : logo.linkTarget) === "_blank" ? "noopener noreferrer" : "",
|
|
42
|
+
children: /* @__PURE__ */ jsx(
|
|
43
|
+
Image,
|
|
44
|
+
{
|
|
45
|
+
src: logo == null ? void 0 : logo.image,
|
|
46
|
+
alt: (_a = logo == null ? void 0 : logo.alt) != null ? _a : "signup-logo",
|
|
47
|
+
width: 100,
|
|
48
|
+
height: 100,
|
|
49
|
+
className: "flex justify-center text-3xl font-bold leading-none text-white"
|
|
50
|
+
}
|
|
51
|
+
)
|
|
52
|
+
}
|
|
53
|
+
) });
|
|
54
|
+
}
|
|
55
|
+
function SubtitleAndHeadingText({ form }) {
|
|
56
|
+
return /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
|
|
57
|
+
/* @__PURE__ */ jsx(Text, { muted: true, children: form == null ? void 0 : form.subtitle }),
|
|
58
|
+
/* @__PURE__ */ jsx(Heading, { className: "text-2xl lg:text-2xl", children: form == null ? void 0 : form.name })
|
|
59
|
+
] });
|
|
60
|
+
}
|
|
61
|
+
function SignupForm({ form, signInLink }) {
|
|
62
|
+
var _a;
|
|
63
|
+
if (!(form == null ? void 0 : form.fields)) return null;
|
|
64
|
+
const [showPasswords, setShowPasswords] = React.useState({});
|
|
65
|
+
const togglePasswordVisibility = (fieldName) => {
|
|
66
|
+
setShowPasswords((prev) => ({
|
|
67
|
+
...prev,
|
|
68
|
+
[fieldName]: !prev[fieldName]
|
|
69
|
+
}));
|
|
70
|
+
};
|
|
71
|
+
return /* @__PURE__ */ jsxs(
|
|
72
|
+
Form,
|
|
73
|
+
{
|
|
74
|
+
id: (_a = form == null ? void 0 : form.id) != null ? _a : void 0,
|
|
75
|
+
name: "SignUp-VariantB-Form",
|
|
76
|
+
className: "form-signup",
|
|
77
|
+
thankyouPage: thankYouPageLink(form == null ? void 0 : form.thankYouPage),
|
|
78
|
+
children: [
|
|
79
|
+
/* @__PURE__ */ jsx(
|
|
80
|
+
FormFields,
|
|
81
|
+
{
|
|
82
|
+
form,
|
|
83
|
+
showPassword: showPasswords,
|
|
84
|
+
togglePasswordVisibility
|
|
85
|
+
}
|
|
86
|
+
),
|
|
87
|
+
/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: "webriq-recaptcha" }) }),
|
|
88
|
+
/* @__PURE__ */ jsxs("div", { className: "text-center", children: [
|
|
89
|
+
/* @__PURE__ */ jsx(FormButtonLabel, { form }),
|
|
90
|
+
/* @__PURE__ */ jsx(SigninLink, { signInLink })
|
|
91
|
+
] })
|
|
92
|
+
]
|
|
93
|
+
}
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
function FormFields({
|
|
97
|
+
form,
|
|
98
|
+
showPassword,
|
|
99
|
+
togglePasswordVisibility
|
|
100
|
+
}) {
|
|
101
|
+
var _a, _b, _c, _d;
|
|
102
|
+
return /* @__PURE__ */ jsxs(React.Fragment, { children: [
|
|
103
|
+
/* @__PURE__ */ jsx(Flex, { className: "flex-col lg:flex-row gap-3", children: (_b = (_a = form == null ? void 0 : form.fields) == null ? void 0 : _a.slice(0, 2)) == null ? void 0 : _b.map((formFields, index) => {
|
|
104
|
+
var _a2;
|
|
105
|
+
return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
|
|
106
|
+
FormField,
|
|
107
|
+
{
|
|
108
|
+
noLabel: true,
|
|
109
|
+
variant: "secondary",
|
|
110
|
+
placeholder: formFields == null ? void 0 : formFields.placeholder,
|
|
111
|
+
required: formFields == null ? void 0 : formFields.isRequired,
|
|
112
|
+
name: (_a2 = formFields == null ? void 0 : formFields.name) != null ? _a2 : "",
|
|
113
|
+
items: formFields == null ? void 0 : formFields.items,
|
|
114
|
+
type: formFields == null ? void 0 : formFields.type,
|
|
115
|
+
...formFields
|
|
116
|
+
}
|
|
117
|
+
) }, index);
|
|
118
|
+
}) }),
|
|
119
|
+
(_d = (_c = form == null ? void 0 : form.fields) == null ? void 0 : _c.slice(2)) == null ? void 0 : _d.map((formFields, index) => {
|
|
120
|
+
var _a2;
|
|
121
|
+
return /* @__PURE__ */ jsx("div", { className: "my-3", children: (formFields == null ? void 0 : formFields.type) === "inputPassword" && formFields.name ? /* @__PURE__ */ jsx(
|
|
122
|
+
PasswordField,
|
|
123
|
+
{
|
|
124
|
+
formFields,
|
|
125
|
+
showPassword: showPassword[formFields.name] || false,
|
|
126
|
+
togglePassword: () => togglePasswordVisibility(formFields.name)
|
|
127
|
+
}
|
|
128
|
+
) : /* @__PURE__ */ jsx(
|
|
129
|
+
FormField,
|
|
130
|
+
{
|
|
131
|
+
noLabel: true,
|
|
132
|
+
variant: "secondary",
|
|
133
|
+
name: (_a2 = formFields == null ? void 0 : formFields.name) != null ? _a2 : "",
|
|
134
|
+
placeholder: formFields == null ? void 0 : formFields.placeholder,
|
|
135
|
+
required: formFields == null ? void 0 : formFields.isRequired,
|
|
136
|
+
items: formFields == null ? void 0 : formFields.items,
|
|
137
|
+
type: formFields == null ? void 0 : formFields.type,
|
|
138
|
+
...formFields
|
|
139
|
+
}
|
|
140
|
+
) }, index);
|
|
141
|
+
})
|
|
142
|
+
] });
|
|
143
|
+
}
|
|
144
|
+
function PasswordField({
|
|
145
|
+
formFields,
|
|
146
|
+
showPassword,
|
|
147
|
+
togglePassword
|
|
148
|
+
}) {
|
|
149
|
+
var _a;
|
|
150
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex", children: [
|
|
151
|
+
/* @__PURE__ */ jsx(
|
|
152
|
+
Input,
|
|
153
|
+
{
|
|
154
|
+
noLabel: true,
|
|
155
|
+
ariaLabel: (_a = formFields == null ? void 0 : formFields.placeholder) != null ? _a : formFields == null ? void 0 : formFields.name,
|
|
156
|
+
variant: "secondary",
|
|
157
|
+
type: showPassword ? "text" : "password",
|
|
158
|
+
placeholder: formFields == null ? void 0 : formFields.placeholder,
|
|
159
|
+
name: formFields == null ? void 0 : formFields.name,
|
|
160
|
+
required: formFields == null ? void 0 : formFields.isRequired
|
|
161
|
+
}
|
|
162
|
+
),
|
|
163
|
+
/* @__PURE__ */ jsx(
|
|
164
|
+
Button,
|
|
165
|
+
{
|
|
166
|
+
variant: "unstyled",
|
|
167
|
+
as: "button",
|
|
168
|
+
ariaLabel: showPassword ? "Show password" : "Hide password",
|
|
169
|
+
className: "focus:outline-none mr-4",
|
|
170
|
+
type: "button",
|
|
171
|
+
onClick: togglePassword,
|
|
172
|
+
children: /* @__PURE__ */ jsx(PasswordIcon, { showPassword })
|
|
173
|
+
}
|
|
174
|
+
)
|
|
175
|
+
] });
|
|
176
|
+
}
|
|
177
|
+
function FormButtonLabel({ form }) {
|
|
178
|
+
var _a;
|
|
179
|
+
if (!(form == null ? void 0 : form.buttonLabel)) return null;
|
|
180
|
+
return /* @__PURE__ */ jsx(
|
|
181
|
+
Button,
|
|
182
|
+
{
|
|
183
|
+
as: "button",
|
|
184
|
+
className: "w-full py-4 mb-3",
|
|
185
|
+
ariaLabel: (_a = form == null ? void 0 : form.buttonLabel) != null ? _a : "Sign Up form submit button",
|
|
186
|
+
variant: "custom",
|
|
187
|
+
type: "submit",
|
|
188
|
+
children: form == null ? void 0 : form.buttonLabel
|
|
189
|
+
}
|
|
190
|
+
);
|
|
191
|
+
}
|
|
192
|
+
function SigninLink({ signInLink }) {
|
|
193
|
+
if (!(signInLink == null ? void 0 : signInLink.label)) return null;
|
|
194
|
+
return /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-900", children: [
|
|
195
|
+
/* @__PURE__ */ jsx("span", { children: "Already have an account?" }),
|
|
196
|
+
" ",
|
|
197
|
+
/* @__PURE__ */ jsx(
|
|
198
|
+
Button,
|
|
199
|
+
{
|
|
200
|
+
as: "link",
|
|
201
|
+
variant: "link",
|
|
202
|
+
link: signInLink,
|
|
203
|
+
className: "text-xs text-primary hover:underline",
|
|
204
|
+
ariaLabel: signInLink == null ? void 0 : signInLink.label,
|
|
205
|
+
children: signInLink == null ? void 0 : signInLink.label
|
|
206
|
+
}
|
|
207
|
+
)
|
|
208
|
+
] });
|
|
209
|
+
}
|
|
210
|
+
function FormLinks({ formLinks }) {
|
|
211
|
+
if (!formLinks) return null;
|
|
212
|
+
return /* @__PURE__ */ jsx("p", { className: "text-xs text-center text-secondary-foreground", children: formLinks == null ? void 0 : formLinks.map((link, index, { length }) => /* @__PURE__ */ jsxs("span", { children: [
|
|
213
|
+
/* @__PURE__ */ jsx(
|
|
214
|
+
Button,
|
|
215
|
+
{
|
|
216
|
+
as: "link",
|
|
217
|
+
variant: "link",
|
|
218
|
+
link,
|
|
219
|
+
className: "text-xs underline text-secondary-foreground hover:text-gray-50",
|
|
220
|
+
ariaLabel: link == null ? void 0 : link.label,
|
|
221
|
+
children: link == null ? void 0 : link.label
|
|
222
|
+
}
|
|
223
|
+
),
|
|
224
|
+
index === length - 1 ? null : index === length - 2 ? /* @__PURE__ */ jsx("span", { children: "\xA0and\xA0" }) : /* @__PURE__ */ jsx("span", { children: "\xA0,\xA0" })
|
|
225
|
+
] }, index)) });
|
|
226
|
+
}
|
|
227
|
+
function PasswordIcon({ showPassword }) {
|
|
228
|
+
return /* @__PURE__ */ jsx(React.Fragment, { children: showPassword ? /* @__PURE__ */ jsx(
|
|
229
|
+
"svg",
|
|
230
|
+
{
|
|
231
|
+
className: "w-5 h-5 my-auto ml-4 text-gray-500",
|
|
232
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
233
|
+
"aria-hidden": "true",
|
|
234
|
+
role: "img",
|
|
235
|
+
width: "1em",
|
|
236
|
+
height: "1em",
|
|
237
|
+
preserveAspectRatio: "xMidYMid meet",
|
|
238
|
+
viewBox: "0 0 16 16",
|
|
239
|
+
children: /* @__PURE__ */ jsxs("g", { fill: "currentColor", children: [
|
|
240
|
+
/* @__PURE__ */ jsx("path", { d: "M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288c-.335.48-.83 1.12-1.465 1.755c-.165.165-.337.328-.517.486l.708.709z" }),
|
|
241
|
+
/* @__PURE__ */ jsx("path", { d: "M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z" }),
|
|
242
|
+
/* @__PURE__ */ jsx("path", { d: "M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884l-12-12l.708-.708l12 12l-.708.708z" })
|
|
243
|
+
] })
|
|
244
|
+
}
|
|
245
|
+
) : /* @__PURE__ */ jsx(
|
|
246
|
+
"svg",
|
|
247
|
+
{
|
|
248
|
+
className: "w-5 h-5 my-auto ml-4 text-gray-500",
|
|
249
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
250
|
+
"aria-hidden": "true",
|
|
251
|
+
role: "img",
|
|
252
|
+
width: "1em",
|
|
253
|
+
height: "1em",
|
|
254
|
+
preserveAspectRatio: "xMidYMid meet",
|
|
255
|
+
viewBox: "0 0 16 16",
|
|
256
|
+
children: /* @__PURE__ */ jsxs("g", { fill: "currentColor", children: [
|
|
257
|
+
/* @__PURE__ */ jsx("path", { d: "M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" }),
|
|
258
|
+
/* @__PURE__ */ jsx("path", { d: "M8 5.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0a3.5 3.5 0 0 1-7 0z" })
|
|
259
|
+
] })
|
|
260
|
+
}
|
|
261
|
+
) });
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
export {
|
|
265
|
+
SigninSignup_B
|
|
266
|
+
};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
// src/helper/index.ts
|
|
2
|
+
var logoLink = (logo) => {
|
|
3
|
+
var _a, _b, _c;
|
|
4
|
+
if ((logo == null ? void 0 : logo.internalLink) && (logo == null ? void 0 : logo.type) === "linkInternal") {
|
|
5
|
+
if ((_b = (_a = logo == null ? void 0 : logo.internalLink) == null ? void 0 : _a.toLowerCase()) == null ? void 0 : _b.includes("home")) {
|
|
6
|
+
return "/";
|
|
7
|
+
}
|
|
8
|
+
return `/${logo.internalLink}`;
|
|
9
|
+
} else if ((logo == null ? void 0 : logo.externalLink) && (logo == null ? void 0 : logo.type) === "linkExternal") {
|
|
10
|
+
return (_c = logo == null ? void 0 : logo.externalLink) != null ? _c : "/";
|
|
11
|
+
} else {
|
|
12
|
+
return "/";
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
var thankYouPageLink = (link) => {
|
|
16
|
+
if (!link) {
|
|
17
|
+
return "/thank-you";
|
|
18
|
+
} else {
|
|
19
|
+
if ((link == null ? void 0 : link.linkType) === "linkInternal") {
|
|
20
|
+
return `/${link == null ? void 0 : link.internalLink}`;
|
|
21
|
+
} else {
|
|
22
|
+
return link == null ? void 0 : link.externalLink;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export {
|
|
28
|
+
logoLink,
|
|
29
|
+
thankYouPageLink
|
|
30
|
+
};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
// src/signin-signup.tsx
|
|
2
|
+
import { lazy } from "react";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
var Variants = {
|
|
5
|
+
variant_a: lazy(() => import("./signin_signup_a.mjs")),
|
|
6
|
+
variant_b: lazy(() => import("./signin_signup_b.mjs"))
|
|
7
|
+
};
|
|
8
|
+
var displayName = "SigninSignup";
|
|
9
|
+
var SigninSignup = ({ data }) => {
|
|
10
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
|
|
11
|
+
const variant = data == null ? void 0 : data.variant;
|
|
12
|
+
const Variant = variant && (Variants == null ? void 0 : Variants[variant]);
|
|
13
|
+
const props = {
|
|
14
|
+
logo: (_b = (_a = data == null ? void 0 : data.variants) == null ? void 0 : _a.logo) != null ? _b : void 0,
|
|
15
|
+
title: (_d = (_c = data == null ? void 0 : data.variants) == null ? void 0 : _c.title) != null ? _d : void 0,
|
|
16
|
+
subtitle: (_f = (_e = data == null ? void 0 : data.variants) == null ? void 0 : _e.subtitle) != null ? _f : void 0,
|
|
17
|
+
text: (_h = (_g = data == null ? void 0 : data.variants) == null ? void 0 : _g.plainText) != null ? _h : void 0,
|
|
18
|
+
firstButton: (_j = (_i = data == null ? void 0 : data.variants) == null ? void 0 : _i.primaryButton) != null ? _j : void 0,
|
|
19
|
+
secondButton: (_l = (_k = data == null ? void 0 : data.variants) == null ? void 0 : _k.secondaryButton) != null ? _l : void 0,
|
|
20
|
+
formLinks: (_n = (_m = data == null ? void 0 : data.variants) == null ? void 0 : _m.formLinks) != null ? _n : void 0,
|
|
21
|
+
signInLink: (_p = (_o = data == null ? void 0 : data.variants) == null ? void 0 : _o.signinLink) != null ? _p : void 0,
|
|
22
|
+
form: (_r = (_q = data == null ? void 0 : data.variants) == null ? void 0 : _q.form) != null ? _r : void 0
|
|
23
|
+
};
|
|
24
|
+
return Variant ? /* @__PURE__ */ jsx(Variant, { ...props }) : null;
|
|
25
|
+
};
|
|
26
|
+
SigninSignup.displayName = displayName;
|
|
27
|
+
|
|
28
|
+
export {
|
|
29
|
+
SigninSignup
|
|
30
|
+
};
|
|
@@ -0,0 +1,291 @@
|
|
|
1
|
+
import {
|
|
2
|
+
logoLink,
|
|
3
|
+
thankYouPageLink
|
|
4
|
+
} from "./chunk-NGYQAQA4.mjs";
|
|
5
|
+
|
|
6
|
+
// src/signin_signup_a.tsx
|
|
7
|
+
import { Button } from "@stackshift-ui/button";
|
|
8
|
+
import { Container } from "@stackshift-ui/container";
|
|
9
|
+
import { Flex } from "@stackshift-ui/flex";
|
|
10
|
+
import { Form } from "@stackshift-ui/form";
|
|
11
|
+
import { FormField } from "@stackshift-ui/form-field";
|
|
12
|
+
import { Heading } from "@stackshift-ui/heading";
|
|
13
|
+
import { Image } from "@stackshift-ui/image";
|
|
14
|
+
import { Input } from "@stackshift-ui/input";
|
|
15
|
+
import { Link } from "@stackshift-ui/link";
|
|
16
|
+
import { Section } from "@stackshift-ui/section";
|
|
17
|
+
import { Text } from "@stackshift-ui/text";
|
|
18
|
+
import React from "react";
|
|
19
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
20
|
+
function SigninSignup_A({ logo, form, formLinks, signInLink }) {
|
|
21
|
+
return /* @__PURE__ */ jsx(Section, { className: "py-10 rounded-md bg-gray-50 lg:py-20", children: /* @__PURE__ */ jsxs(Container, { maxWidth: 576, children: [
|
|
22
|
+
/* @__PURE__ */ jsx(LogoSection, { logo }),
|
|
23
|
+
/* @__PURE__ */ jsxs(Container, { className: "mb-6 text-center lg:mb-10", children: [
|
|
24
|
+
/* @__PURE__ */ jsx(SubtitleAndHeadingText, { form }),
|
|
25
|
+
/* @__PURE__ */ jsx(
|
|
26
|
+
SignupForm,
|
|
27
|
+
{
|
|
28
|
+
form,
|
|
29
|
+
signInLink,
|
|
30
|
+
thankYouPage: thankYouPageLink(form == null ? void 0 : form.thankYouPage)
|
|
31
|
+
}
|
|
32
|
+
)
|
|
33
|
+
] }),
|
|
34
|
+
/* @__PURE__ */ jsx(FormLinks, { formLinks })
|
|
35
|
+
] }) });
|
|
36
|
+
}
|
|
37
|
+
function LogoSection({ logo }) {
|
|
38
|
+
var _a;
|
|
39
|
+
if (!logo) return null;
|
|
40
|
+
return /* @__PURE__ */ jsx("div", { className: "mb-10", children: /* @__PURE__ */ jsx(
|
|
41
|
+
Link,
|
|
42
|
+
{
|
|
43
|
+
"aria-label": `Go to ${logoLink(logo) === "/" ? "home page" : logoLink(logo)}`,
|
|
44
|
+
className: "flex justify-center mx-auto text-3xl font-bold leading-none",
|
|
45
|
+
href: logoLink(logo),
|
|
46
|
+
target: logo == null ? void 0 : logo.linkTarget,
|
|
47
|
+
rel: (logo == null ? void 0 : logo.linkTarget) === "_blank" ? "noopener noreferrer" : "",
|
|
48
|
+
children: /* @__PURE__ */ jsx(
|
|
49
|
+
Image,
|
|
50
|
+
{
|
|
51
|
+
src: logo == null ? void 0 : logo.image,
|
|
52
|
+
alt: (_a = logo == null ? void 0 : logo.alt) != null ? _a : "signup-logo",
|
|
53
|
+
width: 100,
|
|
54
|
+
height: 100,
|
|
55
|
+
className: "flex justify-center mx-auto text-3xl font-bold leading-none"
|
|
56
|
+
}
|
|
57
|
+
)
|
|
58
|
+
}
|
|
59
|
+
) });
|
|
60
|
+
}
|
|
61
|
+
function SubtitleAndHeadingText({ form }) {
|
|
62
|
+
return /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
|
|
63
|
+
(form == null ? void 0 : form.subtitle) ? /* @__PURE__ */ jsx(Text, { muted: true, children: form == null ? void 0 : form.subtitle }) : null,
|
|
64
|
+
(form == null ? void 0 : form.name) ? /* @__PURE__ */ jsx(Heading, { className: "text-2xl lg:text-2xl", children: form == null ? void 0 : form.name }) : null
|
|
65
|
+
] });
|
|
66
|
+
}
|
|
67
|
+
function SignupForm({
|
|
68
|
+
form,
|
|
69
|
+
signInLink,
|
|
70
|
+
thankYouPage
|
|
71
|
+
}) {
|
|
72
|
+
var _a, _b;
|
|
73
|
+
if (!(form == null ? void 0 : form.fields)) return null;
|
|
74
|
+
const [showPasswords, setShowPasswords] = React.useState({});
|
|
75
|
+
const togglePasswordVisibility = (fieldName) => {
|
|
76
|
+
setShowPasswords((prev) => ({
|
|
77
|
+
...prev,
|
|
78
|
+
[fieldName]: !prev[fieldName]
|
|
79
|
+
}));
|
|
80
|
+
};
|
|
81
|
+
return /* @__PURE__ */ jsxs(
|
|
82
|
+
Form,
|
|
83
|
+
{
|
|
84
|
+
id: (_a = form == null ? void 0 : form.id) != null ? _a : void 0,
|
|
85
|
+
name: "SignUp-VariantA-Form",
|
|
86
|
+
className: "form-signup",
|
|
87
|
+
thankyouPage: thankYouPage,
|
|
88
|
+
children: [
|
|
89
|
+
/* @__PURE__ */ jsx(
|
|
90
|
+
FormFields,
|
|
91
|
+
{
|
|
92
|
+
form,
|
|
93
|
+
showPasswords,
|
|
94
|
+
togglePasswordVisibility
|
|
95
|
+
}
|
|
96
|
+
),
|
|
97
|
+
/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: "webriq-recaptcha" }) }),
|
|
98
|
+
/* @__PURE__ */ jsx("div", { className: "text-center", children: (form == null ? void 0 : form.buttonLabel) && /* @__PURE__ */ jsx(
|
|
99
|
+
Button,
|
|
100
|
+
{
|
|
101
|
+
as: "button",
|
|
102
|
+
variant: "custom",
|
|
103
|
+
ariaLabel: (_b = form == null ? void 0 : form.buttonLabel) != null ? _b : "Sign Up form submit button",
|
|
104
|
+
className: "w-full py-4 text-sm font-bold tex-gray-50",
|
|
105
|
+
type: "submit",
|
|
106
|
+
children: form == null ? void 0 : form.buttonLabel
|
|
107
|
+
}
|
|
108
|
+
) }),
|
|
109
|
+
signInLink && /* @__PURE__ */ jsx(SignInLink, { signInLink })
|
|
110
|
+
]
|
|
111
|
+
}
|
|
112
|
+
);
|
|
113
|
+
}
|
|
114
|
+
function FormFields({
|
|
115
|
+
form,
|
|
116
|
+
showPasswords,
|
|
117
|
+
togglePasswordVisibility
|
|
118
|
+
}) {
|
|
119
|
+
var _a, _b;
|
|
120
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
121
|
+
/* @__PURE__ */ jsx(Flex, { wrap: true, className: "-mx-2", children: (_a = form == null ? void 0 : form.fields) == null ? void 0 : _a.slice(0, 2).map((formFields, index) => {
|
|
122
|
+
var _a2;
|
|
123
|
+
return /* @__PURE__ */ jsx("div", { className: "w-full px-2 mb-3 lg:w-1/2", children: formFields.type === "inputText" ? /* @__PURE__ */ jsx(
|
|
124
|
+
Input,
|
|
125
|
+
{
|
|
126
|
+
textSize: "sm",
|
|
127
|
+
variant: "primary",
|
|
128
|
+
noLabel: true,
|
|
129
|
+
placeholder: formFields == null ? void 0 : formFields.placeholder,
|
|
130
|
+
required: formFields == null ? void 0 : formFields.isRequired,
|
|
131
|
+
className: "w-full py-4 text-xs bg-white",
|
|
132
|
+
name: formFields == null ? void 0 : formFields.name,
|
|
133
|
+
ariaLabel: formFields == null ? void 0 : formFields.label,
|
|
134
|
+
...formFields,
|
|
135
|
+
type: "text"
|
|
136
|
+
}
|
|
137
|
+
) : /* @__PURE__ */ jsx(
|
|
138
|
+
FormField,
|
|
139
|
+
{
|
|
140
|
+
className: "py-4",
|
|
141
|
+
textSize: "sm",
|
|
142
|
+
noLabel: true,
|
|
143
|
+
variant: "primary",
|
|
144
|
+
name: (_a2 = formFields == null ? void 0 : formFields.name) != null ? _a2 : "",
|
|
145
|
+
placeholder: formFields == null ? void 0 : formFields.placeholder,
|
|
146
|
+
required: formFields == null ? void 0 : formFields.isRequired,
|
|
147
|
+
items: formFields == null ? void 0 : formFields.items,
|
|
148
|
+
type: formFields == null ? void 0 : formFields.type,
|
|
149
|
+
...formFields
|
|
150
|
+
}
|
|
151
|
+
) }, index);
|
|
152
|
+
}) }),
|
|
153
|
+
(_b = form == null ? void 0 : form.fields) == null ? void 0 : _b.slice(2).map((formFields, index) => {
|
|
154
|
+
var _a2;
|
|
155
|
+
return /* @__PURE__ */ jsx("div", { className: "my-3", children: formFields.type === "inputPassword" && formFields.name ? (
|
|
156
|
+
// Check if name exists
|
|
157
|
+
/* @__PURE__ */ jsx(
|
|
158
|
+
PasswordField,
|
|
159
|
+
{
|
|
160
|
+
formFields,
|
|
161
|
+
showPassword: showPasswords[formFields.name] || false,
|
|
162
|
+
togglePassword: () => togglePasswordVisibility(formFields.name)
|
|
163
|
+
}
|
|
164
|
+
)
|
|
165
|
+
) : /* @__PURE__ */ jsx(
|
|
166
|
+
FormField,
|
|
167
|
+
{
|
|
168
|
+
className: "py-4",
|
|
169
|
+
textSize: "sm",
|
|
170
|
+
noLabel: true,
|
|
171
|
+
variant: "primary",
|
|
172
|
+
placeholder: formFields == null ? void 0 : formFields.placeholder,
|
|
173
|
+
required: formFields == null ? void 0 : formFields.isRequired,
|
|
174
|
+
name: (_a2 = formFields == null ? void 0 : formFields.name) != null ? _a2 : "",
|
|
175
|
+
items: formFields == null ? void 0 : formFields.items,
|
|
176
|
+
type: formFields == null ? void 0 : formFields.type,
|
|
177
|
+
...formFields
|
|
178
|
+
}
|
|
179
|
+
) }, index);
|
|
180
|
+
})
|
|
181
|
+
] });
|
|
182
|
+
}
|
|
183
|
+
function SignInLink({ signInLink }) {
|
|
184
|
+
if (!(signInLink == null ? void 0 : signInLink.label)) return null;
|
|
185
|
+
return /* @__PURE__ */ jsxs("div", { className: "w-full text-center mt-3", children: [
|
|
186
|
+
/* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500", children: "Already have an account? " }),
|
|
187
|
+
/* @__PURE__ */ jsx(
|
|
188
|
+
Button,
|
|
189
|
+
{
|
|
190
|
+
as: "link",
|
|
191
|
+
variant: "link",
|
|
192
|
+
link: signInLink,
|
|
193
|
+
className: "text-xs text-primary cursor-pointer hover:underline",
|
|
194
|
+
ariaLabel: signInLink == null ? void 0 : signInLink.label,
|
|
195
|
+
children: signInLink == null ? void 0 : signInLink.label
|
|
196
|
+
}
|
|
197
|
+
)
|
|
198
|
+
] });
|
|
199
|
+
}
|
|
200
|
+
function PasswordField({
|
|
201
|
+
formFields,
|
|
202
|
+
showPassword,
|
|
203
|
+
togglePassword
|
|
204
|
+
}) {
|
|
205
|
+
var _a;
|
|
206
|
+
return /* @__PURE__ */ jsxs(Flex, { className: "relative", children: [
|
|
207
|
+
/* @__PURE__ */ jsx(
|
|
208
|
+
Input,
|
|
209
|
+
{
|
|
210
|
+
className: "py-4",
|
|
211
|
+
textSize: "sm",
|
|
212
|
+
noLabel: true,
|
|
213
|
+
"aria-label": (_a = formFields == null ? void 0 : formFields.placeholder) != null ? _a : formFields == null ? void 0 : formFields.name,
|
|
214
|
+
variant: "primary",
|
|
215
|
+
type: showPassword ? "text" : "password",
|
|
216
|
+
placeholder: formFields == null ? void 0 : formFields.placeholder,
|
|
217
|
+
name: formFields == null ? void 0 : formFields.name,
|
|
218
|
+
required: formFields == null ? void 0 : formFields.isRequired
|
|
219
|
+
}
|
|
220
|
+
),
|
|
221
|
+
/* @__PURE__ */ jsx(
|
|
222
|
+
Button,
|
|
223
|
+
{
|
|
224
|
+
as: "button",
|
|
225
|
+
variant: "unstyled",
|
|
226
|
+
ariaLabel: showPassword ? "Show password" : "Hide password",
|
|
227
|
+
className: "absolute top-0 right-0 h-full p-2",
|
|
228
|
+
type: "button",
|
|
229
|
+
onClick: togglePassword,
|
|
230
|
+
children: /* @__PURE__ */ jsx(PasswordIcon, { showPassword })
|
|
231
|
+
}
|
|
232
|
+
)
|
|
233
|
+
] });
|
|
234
|
+
}
|
|
235
|
+
function FormLinks({ formLinks }) {
|
|
236
|
+
if (!formLinks) return null;
|
|
237
|
+
return /* @__PURE__ */ jsx("p", { className: "mt-10 text-xs text-center text-gray-700", children: formLinks == null ? void 0 : formLinks.map((link, index, { length }) => /* @__PURE__ */ jsxs("span", { children: [
|
|
238
|
+
/* @__PURE__ */ jsx(
|
|
239
|
+
Button,
|
|
240
|
+
{
|
|
241
|
+
as: "link",
|
|
242
|
+
variant: "link",
|
|
243
|
+
link,
|
|
244
|
+
className: "text-xs text-primary cursor-pointer hover:underline",
|
|
245
|
+
ariaLabel: link == null ? void 0 : link.label,
|
|
246
|
+
children: link == null ? void 0 : link.label
|
|
247
|
+
}
|
|
248
|
+
),
|
|
249
|
+
index === length - 1 ? null : index === length - 2 ? /* @__PURE__ */ jsx("span", { children: "\xA0and\xA0" }) : /* @__PURE__ */ jsx("span", { children: "\xA0,\xA0" })
|
|
250
|
+
] }, index)) });
|
|
251
|
+
}
|
|
252
|
+
function PasswordIcon({ showPassword }) {
|
|
253
|
+
return /* @__PURE__ */ jsx(Fragment, { children: showPassword ? /* @__PURE__ */ jsx(
|
|
254
|
+
"svg",
|
|
255
|
+
{
|
|
256
|
+
className: "w-5 h-5 my-auto ml-4 text-gray-500",
|
|
257
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
258
|
+
"aria-hidden": "true",
|
|
259
|
+
role: "img",
|
|
260
|
+
width: "1em",
|
|
261
|
+
height: "1em",
|
|
262
|
+
preserveAspectRatio: "xMidYMid meet",
|
|
263
|
+
viewBox: "0 0 16 16",
|
|
264
|
+
children: /* @__PURE__ */ jsxs("g", { fill: "currentColor", children: [
|
|
265
|
+
/* @__PURE__ */ jsx("path", { d: "M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288c-.335.48-.83 1.12-1.465 1.755c-.165.165-.337.328-.517.486l.708.709z" }),
|
|
266
|
+
/* @__PURE__ */ jsx("path", { d: "M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z" }),
|
|
267
|
+
/* @__PURE__ */ jsx("path", { d: "M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884l-12-12l.708-.708l12 12l-.708.708z" })
|
|
268
|
+
] })
|
|
269
|
+
}
|
|
270
|
+
) : /* @__PURE__ */ jsx(
|
|
271
|
+
"svg",
|
|
272
|
+
{
|
|
273
|
+
className: "w-5 h-5 my-auto ml-4 text-gray-500",
|
|
274
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
275
|
+
"aria-hidden": "true",
|
|
276
|
+
role: "img",
|
|
277
|
+
width: "1em",
|
|
278
|
+
height: "1em",
|
|
279
|
+
preserveAspectRatio: "xMidYMid meet",
|
|
280
|
+
viewBox: "0 0 16 16",
|
|
281
|
+
children: /* @__PURE__ */ jsxs("g", { fill: "currentColor", children: [
|
|
282
|
+
/* @__PURE__ */ jsx("path", { d: "M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" }),
|
|
283
|
+
/* @__PURE__ */ jsx("path", { d: "M8 5.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0a3.5 3.5 0 0 1-7 0z" })
|
|
284
|
+
] })
|
|
285
|
+
}
|
|
286
|
+
) });
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
export {
|
|
290
|
+
SigninSignup_A
|
|
291
|
+
};
|
package/dist/helper/index.js
CHANGED
|
@@ -1 +1,55 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/helper/index.ts
|
|
21
|
+
var helper_exports = {};
|
|
22
|
+
__export(helper_exports, {
|
|
23
|
+
logoLink: () => logoLink,
|
|
24
|
+
thankYouPageLink: () => thankYouPageLink
|
|
25
|
+
});
|
|
26
|
+
module.exports = __toCommonJS(helper_exports);
|
|
27
|
+
var logoLink = (logo) => {
|
|
28
|
+
var _a, _b, _c;
|
|
29
|
+
if ((logo == null ? void 0 : logo.internalLink) && (logo == null ? void 0 : logo.type) === "linkInternal") {
|
|
30
|
+
if ((_b = (_a = logo == null ? void 0 : logo.internalLink) == null ? void 0 : _a.toLowerCase()) == null ? void 0 : _b.includes("home")) {
|
|
31
|
+
return "/";
|
|
32
|
+
}
|
|
33
|
+
return `/${logo.internalLink}`;
|
|
34
|
+
} else if ((logo == null ? void 0 : logo.externalLink) && (logo == null ? void 0 : logo.type) === "linkExternal") {
|
|
35
|
+
return (_c = logo == null ? void 0 : logo.externalLink) != null ? _c : "/";
|
|
36
|
+
} else {
|
|
37
|
+
return "/";
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
var thankYouPageLink = (link) => {
|
|
41
|
+
if (!link) {
|
|
42
|
+
return "/thank-you";
|
|
43
|
+
} else {
|
|
44
|
+
if ((link == null ? void 0 : link.linkType) === "linkInternal") {
|
|
45
|
+
return `/${link == null ? void 0 : link.internalLink}`;
|
|
46
|
+
} else {
|
|
47
|
+
return link == null ? void 0 : link.externalLink;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
52
|
+
0 && (module.exports = {
|
|
53
|
+
logoLink,
|
|
54
|
+
thankYouPageLink
|
|
55
|
+
});
|