@sikka/hawa 0.0.155 → 0.0.157
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/styles.css +3 -6
- package/es/blocks/AuthForms/SignUpForm.d.ts +2 -1
- package/es/index.es.js +1 -1
- package/lib/blocks/AuthForms/SignUpForm.d.ts +2 -1
- package/lib/index.js +1 -1
- package/package.json +1 -1
- package/src/blocks/AuthForms/SignUpForm.tsx +83 -64
- package/src/styles.css +3 -6
- package/storybook-static/870.6284ce82.iframe.bundle.js +2 -0
- package/storybook-static/{870.c002064e.iframe.bundle.js.LICENSE.txt → 870.6284ce82.iframe.bundle.js.LICENSE.txt} +0 -0
- package/storybook-static/iframe.html +1 -1
- package/storybook-static/main.72e575dd.iframe.bundle.js +1 -0
- package/storybook-static/project.json +1 -1
- package/tailwind.config.js +2 -2
- package/storybook-static/870.c002064e.iframe.bundle.js +0 -2
- package/storybook-static/main.f926f5e7.iframe.bundle.js +0 -1
package/package.json
CHANGED
|
@@ -42,7 +42,6 @@ type SignUpFormTypes = {
|
|
|
42
42
|
twitterButtonLabel: string
|
|
43
43
|
}
|
|
44
44
|
showUserSource: any
|
|
45
|
-
signUpType: any
|
|
46
45
|
viaGoogle: boolean
|
|
47
46
|
viaGithub: boolean
|
|
48
47
|
viaTwitter: boolean
|
|
@@ -58,6 +57,8 @@ type SignUpFormTypes = {
|
|
|
58
57
|
showError: any
|
|
59
58
|
errorTitle: any
|
|
60
59
|
errorText: any
|
|
60
|
+
signUpFields: any[]
|
|
61
|
+
isLoading?: boolean
|
|
61
62
|
}
|
|
62
63
|
|
|
63
64
|
export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
|
|
@@ -80,68 +81,81 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
|
|
|
80
81
|
)}
|
|
81
82
|
<FormProvider {...methods}>
|
|
82
83
|
<form onSubmit={handleSubmit((e) => props.handleSignUp(e))}>
|
|
83
|
-
<
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
84
|
+
<div>
|
|
85
|
+
{props.signUpFields.map((fld) => {
|
|
86
|
+
if (fld === "fullname") {
|
|
87
|
+
return (
|
|
88
|
+
<Controller
|
|
89
|
+
control={control}
|
|
90
|
+
name="fullName"
|
|
91
|
+
render={({ field }) => (
|
|
92
|
+
<HawaTextField
|
|
93
|
+
width="full"
|
|
94
|
+
type="text"
|
|
95
|
+
label={props.texts.fullNameLabel}
|
|
96
|
+
placeholder={props.texts.fullNamePlaceholder}
|
|
97
|
+
helperText={errors.fullName?.message}
|
|
98
|
+
onChange={field.onChange}
|
|
99
|
+
value={field.value ?? ""}
|
|
100
|
+
/>
|
|
101
|
+
)}
|
|
102
|
+
rules={{
|
|
103
|
+
required: props.texts.fullNameRequiredText,
|
|
104
|
+
}}
|
|
105
|
+
/>
|
|
106
|
+
)
|
|
107
|
+
}
|
|
108
|
+
if (fld === "email") {
|
|
109
|
+
return (
|
|
110
|
+
<Controller
|
|
111
|
+
control={control}
|
|
112
|
+
name="email"
|
|
113
|
+
render={({ field }) => (
|
|
114
|
+
<HawaTextField
|
|
115
|
+
width="full"
|
|
116
|
+
type="text"
|
|
117
|
+
label={props.texts.emailLabel}
|
|
118
|
+
helperText={errors.email?.message}
|
|
119
|
+
placeholder={props.texts.emailPlaceholder}
|
|
120
|
+
onChange={field.onChange}
|
|
121
|
+
value={field.value ?? ""}
|
|
122
|
+
/>
|
|
123
|
+
)}
|
|
124
|
+
rules={{
|
|
125
|
+
required: props.texts.emailRequiredText,
|
|
126
|
+
pattern: {
|
|
127
|
+
value:
|
|
128
|
+
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
|
|
129
|
+
message: props.texts.emailInvalidText,
|
|
130
|
+
},
|
|
131
|
+
}}
|
|
132
|
+
/>
|
|
133
|
+
)
|
|
134
|
+
}
|
|
135
|
+
if (fld === "username") {
|
|
136
|
+
return (
|
|
137
|
+
<Controller
|
|
138
|
+
control={control}
|
|
139
|
+
name="username"
|
|
140
|
+
render={({ field }) => (
|
|
141
|
+
<HawaTextField
|
|
142
|
+
width="full"
|
|
143
|
+
type="text"
|
|
144
|
+
label={props.texts.usernameLabel}
|
|
145
|
+
helperText={errors.username?.message}
|
|
146
|
+
placeholder={props.texts.usernamePlaceholder}
|
|
147
|
+
onChange={field.onChange}
|
|
148
|
+
value={field.value ?? ""}
|
|
149
|
+
/>
|
|
150
|
+
)}
|
|
151
|
+
rules={{
|
|
152
|
+
required: props.texts.usernameRequired,
|
|
153
|
+
}}
|
|
154
|
+
/>
|
|
155
|
+
)
|
|
156
|
+
}
|
|
157
|
+
})}
|
|
158
|
+
</div>
|
|
145
159
|
<Controller
|
|
146
160
|
control={control}
|
|
147
161
|
name="password"
|
|
@@ -261,7 +275,12 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
|
|
|
261
275
|
/>
|
|
262
276
|
</div>
|
|
263
277
|
)}
|
|
264
|
-
<HawaButton
|
|
278
|
+
<HawaButton
|
|
279
|
+
isLoading={props.isLoading}
|
|
280
|
+
color="primary"
|
|
281
|
+
width="full"
|
|
282
|
+
type="submit"
|
|
283
|
+
>
|
|
265
284
|
{props.texts.signUpText}
|
|
266
285
|
</HawaButton>
|
|
267
286
|
</form>
|
package/src/styles.css
CHANGED
|
@@ -1276,8 +1276,7 @@ video {
|
|
|
1276
1276
|
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
|
|
1277
1277
|
}
|
|
1278
1278
|
.bg-layoutPrimary-default {
|
|
1279
|
-
|
|
1280
|
-
background-color: rgb(210 205 250 / var(--tw-bg-opacity));
|
|
1279
|
+
background-color: var(--layout-primary);
|
|
1281
1280
|
}
|
|
1282
1281
|
.bg-white {
|
|
1283
1282
|
--tw-bg-opacity: 1;
|
|
@@ -1307,8 +1306,7 @@ video {
|
|
|
1307
1306
|
background-color: transparent;
|
|
1308
1307
|
}
|
|
1309
1308
|
.bg-buttonPrimary-default {
|
|
1310
|
-
|
|
1311
|
-
background-color: rgb(76 55 235 / var(--tw-bg-opacity));
|
|
1309
|
+
background-color: var(--button-primary);
|
|
1312
1310
|
}
|
|
1313
1311
|
.bg-red-200 {
|
|
1314
1312
|
--tw-bg-opacity: 1;
|
|
@@ -1932,8 +1930,7 @@ body {
|
|
|
1932
1930
|
}
|
|
1933
1931
|
|
|
1934
1932
|
.hover\:ring-buttonPrimary-default:hover {
|
|
1935
|
-
--tw-ring-
|
|
1936
|
-
--tw-ring-color: rgb(76 55 235 / var(--tw-ring-opacity));
|
|
1933
|
+
--tw-ring-color: var(--button-primary);
|
|
1937
1934
|
}
|
|
1938
1935
|
|
|
1939
1936
|
.hover\:brightness-90:hover {
|