@ttoss/react-auth-core 0.2.0
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/LICENSE +21 -0
- package/README.md +177 -0
- package/dist/esm/index.js +1091 -0
- package/dist/index.d.cts +175 -0
- package/dist/index.d.ts +175 -0
- package/dist/index.js +1158 -0
- package/i18n/compiled/en.json +272 -0
- package/i18n/lang/en.json +155 -0
- package/package.json +70 -0
|
@@ -0,0 +1,1091 @@
|
|
|
1
|
+
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
+
|
|
3
|
+
// src/Auth.tsx
|
|
4
|
+
import { useNotifications as useNotifications2 } from "@ttoss/react-notifications";
|
|
5
|
+
import { Flex as Flex5 } from "@ttoss/ui";
|
|
6
|
+
import * as React3 from "react";
|
|
7
|
+
|
|
8
|
+
// src/AuthCard.tsx
|
|
9
|
+
import { useNotifications } from "@ttoss/react-notifications";
|
|
10
|
+
import { Box, Button, Flex, Heading } from "@ttoss/ui";
|
|
11
|
+
import * as React from "react";
|
|
12
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
13
|
+
var LogoContext = React.createContext({});
|
|
14
|
+
var LogoProvider = ({
|
|
15
|
+
children,
|
|
16
|
+
...values
|
|
17
|
+
}) => {
|
|
18
|
+
return /* @__PURE__ */jsx(LogoContext.Provider, {
|
|
19
|
+
value: values,
|
|
20
|
+
children
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
var AuthCard = ({
|
|
24
|
+
children,
|
|
25
|
+
title,
|
|
26
|
+
buttonLabel,
|
|
27
|
+
extraButton,
|
|
28
|
+
isValidForm
|
|
29
|
+
}) => {
|
|
30
|
+
const {
|
|
31
|
+
logo
|
|
32
|
+
} = React.useContext(LogoContext);
|
|
33
|
+
const {
|
|
34
|
+
isLoading
|
|
35
|
+
} = useNotifications();
|
|
36
|
+
return /* @__PURE__ */jsxs(Box, {
|
|
37
|
+
sx: {
|
|
38
|
+
maxWidth: "400px",
|
|
39
|
+
width: "full",
|
|
40
|
+
border: "md",
|
|
41
|
+
borderColor: "display.border.muted.default",
|
|
42
|
+
paddingX: "8",
|
|
43
|
+
paddingY: "9",
|
|
44
|
+
backgroundColor: "surface"
|
|
45
|
+
},
|
|
46
|
+
children: [logo && /* @__PURE__ */jsx(Flex, {
|
|
47
|
+
sx: {
|
|
48
|
+
width: "full",
|
|
49
|
+
maxHeight: "90px",
|
|
50
|
+
justifyContent: "center",
|
|
51
|
+
marginBottom: "8"
|
|
52
|
+
},
|
|
53
|
+
children: logo
|
|
54
|
+
}), /* @__PURE__ */jsxs(Flex, {
|
|
55
|
+
sx: {
|
|
56
|
+
flexDirection: "column"
|
|
57
|
+
},
|
|
58
|
+
children: [/* @__PURE__ */jsx(Heading, {
|
|
59
|
+
as: "h2",
|
|
60
|
+
variant: "h2",
|
|
61
|
+
sx: {
|
|
62
|
+
marginBottom: "8"
|
|
63
|
+
},
|
|
64
|
+
children: title
|
|
65
|
+
}), children, /* @__PURE__ */jsxs(Flex, {
|
|
66
|
+
sx: {
|
|
67
|
+
flexDirection: "column",
|
|
68
|
+
width: "100%",
|
|
69
|
+
gap: "7",
|
|
70
|
+
marginTop: "8"
|
|
71
|
+
},
|
|
72
|
+
children: [/* @__PURE__ */jsx(Button, {
|
|
73
|
+
type: "submit",
|
|
74
|
+
variant: "accent",
|
|
75
|
+
disabled: isLoading || !isValidForm,
|
|
76
|
+
sx: {
|
|
77
|
+
textAlign: "center",
|
|
78
|
+
display: "initial"
|
|
79
|
+
},
|
|
80
|
+
loading: isLoading,
|
|
81
|
+
children: buttonLabel
|
|
82
|
+
}), extraButton]
|
|
83
|
+
})]
|
|
84
|
+
})]
|
|
85
|
+
});
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
// src/AuthConfirmSignUpCheckEmail.tsx
|
|
89
|
+
import { NotificationCard } from "@ttoss/components/NotificationCard";
|
|
90
|
+
import { useI18n } from "@ttoss/react-i18n";
|
|
91
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
92
|
+
var AuthConfirmSignUpCheckEmail = ({
|
|
93
|
+
onConfirmSignUpCheckEmail
|
|
94
|
+
}) => {
|
|
95
|
+
const {
|
|
96
|
+
intl
|
|
97
|
+
} = useI18n();
|
|
98
|
+
return /* @__PURE__ */jsx2("form", {
|
|
99
|
+
onSubmit: e => {
|
|
100
|
+
e.preventDefault();
|
|
101
|
+
onConfirmSignUpCheckEmail();
|
|
102
|
+
},
|
|
103
|
+
children: /* @__PURE__ */jsx2(AuthCard, {
|
|
104
|
+
isValidForm: true,
|
|
105
|
+
buttonLabel: intl.formatMessage({
|
|
106
|
+
id: "38HSjr",
|
|
107
|
+
defaultMessage: [{
|
|
108
|
+
"type": 0,
|
|
109
|
+
"value": "Sign In"
|
|
110
|
+
}]
|
|
111
|
+
}),
|
|
112
|
+
title: intl.formatMessage({
|
|
113
|
+
id: "cGR2eI",
|
|
114
|
+
defaultMessage: [{
|
|
115
|
+
"type": 0,
|
|
116
|
+
"value": "Confirmation"
|
|
117
|
+
}]
|
|
118
|
+
}),
|
|
119
|
+
children: /* @__PURE__ */jsx2(NotificationCard, {
|
|
120
|
+
type: "info",
|
|
121
|
+
message: intl.formatMessage({
|
|
122
|
+
id: "qTQ4hP",
|
|
123
|
+
defaultMessage: [{
|
|
124
|
+
"type": 0,
|
|
125
|
+
"value": "An email has been sent to your address. Please check your inbox and follow the instructions to confirm your sign up."
|
|
126
|
+
}]
|
|
127
|
+
})
|
|
128
|
+
})
|
|
129
|
+
})
|
|
130
|
+
});
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
// src/AuthConfirmSignUpWithCode.tsx
|
|
134
|
+
import { NotificationCard as NotificationCard2 } from "@ttoss/components/NotificationCard";
|
|
135
|
+
import { Form, FormFieldInput, useForm, yup, yupResolver } from "@ttoss/forms";
|
|
136
|
+
import { useI18n as useI18n2 } from "@ttoss/react-i18n";
|
|
137
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
138
|
+
var AuthConfirmSignUpWithCode = ({
|
|
139
|
+
email,
|
|
140
|
+
onConfirmSignUpWithCode
|
|
141
|
+
}) => {
|
|
142
|
+
const {
|
|
143
|
+
intl
|
|
144
|
+
} = useI18n2();
|
|
145
|
+
const schema = yup.object().shape({
|
|
146
|
+
code: yup.string().required(intl.formatMessage({
|
|
147
|
+
id: "0XOzcH",
|
|
148
|
+
defaultMessage: [{
|
|
149
|
+
"type": 0,
|
|
150
|
+
"value": "Required field"
|
|
151
|
+
}]
|
|
152
|
+
})).max(6, intl.formatMessage({
|
|
153
|
+
id: "S3pjKw",
|
|
154
|
+
defaultMessage: [{
|
|
155
|
+
"type": 0,
|
|
156
|
+
"value": "Minimum "
|
|
157
|
+
}, {
|
|
158
|
+
"type": 1,
|
|
159
|
+
"value": "value"
|
|
160
|
+
}, {
|
|
161
|
+
"type": 0,
|
|
162
|
+
"value": " characters"
|
|
163
|
+
}]
|
|
164
|
+
}, {
|
|
165
|
+
value: 6
|
|
166
|
+
}))
|
|
167
|
+
}).required();
|
|
168
|
+
const formMethods = useForm({
|
|
169
|
+
resolver: yupResolver(schema)
|
|
170
|
+
});
|
|
171
|
+
return /* @__PURE__ */jsx3(Form, {
|
|
172
|
+
...formMethods,
|
|
173
|
+
onSubmit: ({
|
|
174
|
+
code
|
|
175
|
+
}) => {
|
|
176
|
+
return onConfirmSignUpWithCode({
|
|
177
|
+
code,
|
|
178
|
+
email
|
|
179
|
+
});
|
|
180
|
+
},
|
|
181
|
+
children: /* @__PURE__ */jsxs2(AuthCard, {
|
|
182
|
+
buttonLabel: intl.formatMessage({
|
|
183
|
+
id: "UNttd+",
|
|
184
|
+
defaultMessage: [{
|
|
185
|
+
"type": 0,
|
|
186
|
+
"value": "Confirm"
|
|
187
|
+
}]
|
|
188
|
+
}),
|
|
189
|
+
isValidForm: formMethods.formState.isValid,
|
|
190
|
+
title: intl.formatMessage({
|
|
191
|
+
id: "cGR2eI",
|
|
192
|
+
defaultMessage: [{
|
|
193
|
+
"type": 0,
|
|
194
|
+
"value": "Confirmation"
|
|
195
|
+
}]
|
|
196
|
+
}),
|
|
197
|
+
children: [/* @__PURE__ */jsx3(NotificationCard2, {
|
|
198
|
+
type: "info",
|
|
199
|
+
message: intl.formatMessage({
|
|
200
|
+
id: "pwv2cR",
|
|
201
|
+
defaultMessage: [{
|
|
202
|
+
"type": 0,
|
|
203
|
+
"value": "We have sent a confirmation code to your email address. Please enter the code below."
|
|
204
|
+
}]
|
|
205
|
+
})
|
|
206
|
+
}), /* @__PURE__ */jsx3(FormFieldInput, {
|
|
207
|
+
sx: {
|
|
208
|
+
marginTop: "6"
|
|
209
|
+
},
|
|
210
|
+
name: "code",
|
|
211
|
+
label: intl.formatMessage({
|
|
212
|
+
id: "KY2T6J",
|
|
213
|
+
defaultMessage: [{
|
|
214
|
+
"type": 0,
|
|
215
|
+
"value": "Code"
|
|
216
|
+
}]
|
|
217
|
+
})
|
|
218
|
+
})]
|
|
219
|
+
})
|
|
220
|
+
});
|
|
221
|
+
};
|
|
222
|
+
|
|
223
|
+
// src/AuthForgotPassword.tsx
|
|
224
|
+
import { Form as Form2, FormFieldInput as FormFieldInput2, useForm as useForm2, yup as yup2, yupResolver as yupResolver2 } from "@ttoss/forms";
|
|
225
|
+
import { useI18n as useI18n3 } from "@ttoss/react-i18n";
|
|
226
|
+
import { NotificationsBox } from "@ttoss/react-notifications";
|
|
227
|
+
import { Button as Button2, Link, Text } from "@ttoss/ui";
|
|
228
|
+
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
229
|
+
var AuthForgotPassword = props => {
|
|
230
|
+
const {
|
|
231
|
+
intl
|
|
232
|
+
} = useI18n3();
|
|
233
|
+
const schema = yup2.object().shape({
|
|
234
|
+
email: yup2.string().email(intl.formatMessage({
|
|
235
|
+
id: "9cApwd",
|
|
236
|
+
defaultMessage: [{
|
|
237
|
+
"type": 0,
|
|
238
|
+
"value": "Please, insert a valid e-mail"
|
|
239
|
+
}]
|
|
240
|
+
})).required()
|
|
241
|
+
}).required();
|
|
242
|
+
const formMethods = useForm2({
|
|
243
|
+
resolver: yupResolver2(schema),
|
|
244
|
+
mode: "onBlur"
|
|
245
|
+
});
|
|
246
|
+
return /* @__PURE__ */jsx4(Form2, {
|
|
247
|
+
...formMethods,
|
|
248
|
+
sx: {
|
|
249
|
+
maxWidth: "390px"
|
|
250
|
+
},
|
|
251
|
+
onSubmit: ({
|
|
252
|
+
email
|
|
253
|
+
}) => {
|
|
254
|
+
return props.onForgotPassword({
|
|
255
|
+
email
|
|
256
|
+
});
|
|
257
|
+
},
|
|
258
|
+
children: /* @__PURE__ */jsxs3(AuthCard, {
|
|
259
|
+
buttonLabel: intl.formatMessage({
|
|
260
|
+
id: "mZzmNV",
|
|
261
|
+
defaultMessage: [{
|
|
262
|
+
"type": 0,
|
|
263
|
+
"value": "Recover Password"
|
|
264
|
+
}]
|
|
265
|
+
}),
|
|
266
|
+
isValidForm: formMethods.formState.isValid,
|
|
267
|
+
title: intl.formatMessage({
|
|
268
|
+
id: "S4bbEj",
|
|
269
|
+
defaultMessage: [{
|
|
270
|
+
"type": 0,
|
|
271
|
+
"value": "Recovering Password"
|
|
272
|
+
}]
|
|
273
|
+
}),
|
|
274
|
+
extraButton: /* @__PURE__ */jsx4(Button2, {
|
|
275
|
+
sx: {
|
|
276
|
+
textAlign: "center",
|
|
277
|
+
display: "initial"
|
|
278
|
+
},
|
|
279
|
+
variant: "secondary",
|
|
280
|
+
onClick: props.onGoToSignIn,
|
|
281
|
+
children: intl.formatMessage({
|
|
282
|
+
id: "6PdOcy",
|
|
283
|
+
defaultMessage: [{
|
|
284
|
+
"type": 0,
|
|
285
|
+
"value": "Cancel"
|
|
286
|
+
}]
|
|
287
|
+
})
|
|
288
|
+
}),
|
|
289
|
+
children: [/* @__PURE__ */jsx4(FormFieldInput2, {
|
|
290
|
+
name: "email",
|
|
291
|
+
label: intl.formatMessage({
|
|
292
|
+
id: "XreZg+",
|
|
293
|
+
defaultMessage: [{
|
|
294
|
+
"type": 0,
|
|
295
|
+
"value": "Registered Email"
|
|
296
|
+
}]
|
|
297
|
+
})
|
|
298
|
+
}), /* @__PURE__ */jsx4(NotificationsBox, {}), props.onGoToSignUp && /* @__PURE__ */jsx4(Text, {
|
|
299
|
+
sx: {
|
|
300
|
+
marginTop: "xl",
|
|
301
|
+
cursor: "pointer"
|
|
302
|
+
},
|
|
303
|
+
as: Link,
|
|
304
|
+
onClick: props.onGoToSignUp,
|
|
305
|
+
children: intl.formatMessage({
|
|
306
|
+
id: "lZvoYL",
|
|
307
|
+
defaultMessage: [{
|
|
308
|
+
"type": 0,
|
|
309
|
+
"value": "Sign up now"
|
|
310
|
+
}]
|
|
311
|
+
})
|
|
312
|
+
})]
|
|
313
|
+
})
|
|
314
|
+
});
|
|
315
|
+
};
|
|
316
|
+
|
|
317
|
+
// src/AuthForgotPasswordResetPassword.tsx
|
|
318
|
+
import { Form as Form3, FormFieldInput as FormFieldInput3, FormFieldPassword, useForm as useForm3, yup as yup3, yupResolver as yupResolver3 } from "@ttoss/forms";
|
|
319
|
+
import { useI18n as useI18n4 } from "@ttoss/react-i18n";
|
|
320
|
+
import { NotificationsBox as NotificationsBox2 } from "@ttoss/react-notifications";
|
|
321
|
+
import { Button as Button3 } from "@ttoss/ui";
|
|
322
|
+
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
323
|
+
var AuthForgotPasswordResetPassword = props => {
|
|
324
|
+
const {
|
|
325
|
+
intl
|
|
326
|
+
} = useI18n4();
|
|
327
|
+
const schema = yup3.object().shape({
|
|
328
|
+
code: yup3.string().required(intl.formatMessage({
|
|
329
|
+
id: "0XOzcH",
|
|
330
|
+
defaultMessage: [{
|
|
331
|
+
"type": 0,
|
|
332
|
+
"value": "Required field"
|
|
333
|
+
}]
|
|
334
|
+
})).max(6, intl.formatMessage({
|
|
335
|
+
id: "SfWKyS",
|
|
336
|
+
defaultMessage: [{
|
|
337
|
+
"type": 0,
|
|
338
|
+
"value": "Maximum "
|
|
339
|
+
}, {
|
|
340
|
+
"type": 1,
|
|
341
|
+
"value": "value"
|
|
342
|
+
}, {
|
|
343
|
+
"type": 0,
|
|
344
|
+
"value": " characters"
|
|
345
|
+
}]
|
|
346
|
+
}, {
|
|
347
|
+
value: 6
|
|
348
|
+
})),
|
|
349
|
+
newPassword: yup3.string().required(intl.formatMessage({
|
|
350
|
+
id: "kdFYba",
|
|
351
|
+
defaultMessage: [{
|
|
352
|
+
"type": 0,
|
|
353
|
+
"value": "Password field is required"
|
|
354
|
+
}]
|
|
355
|
+
})).min(props.passwordMinimumLength || 8, intl.formatMessage({
|
|
356
|
+
id: "TZ4WUk",
|
|
357
|
+
defaultMessage: [{
|
|
358
|
+
"type": 0,
|
|
359
|
+
"value": "Password requires "
|
|
360
|
+
}, {
|
|
361
|
+
"type": 1,
|
|
362
|
+
"value": "value"
|
|
363
|
+
}, {
|
|
364
|
+
"type": 0,
|
|
365
|
+
"value": " characters"
|
|
366
|
+
}]
|
|
367
|
+
}, {
|
|
368
|
+
value: props.passwordMinimumLength || 8
|
|
369
|
+
})).trim()
|
|
370
|
+
});
|
|
371
|
+
const formMethods = useForm3({
|
|
372
|
+
resolver: yupResolver3(schema),
|
|
373
|
+
mode: "onBlur"
|
|
374
|
+
});
|
|
375
|
+
return /* @__PURE__ */jsx5(Form3, {
|
|
376
|
+
...formMethods,
|
|
377
|
+
sx: {
|
|
378
|
+
maxWidth: "390px"
|
|
379
|
+
},
|
|
380
|
+
onSubmit: ({
|
|
381
|
+
code,
|
|
382
|
+
newPassword
|
|
383
|
+
}) => {
|
|
384
|
+
return props.onForgotPasswordResetPassword({
|
|
385
|
+
email: props.email,
|
|
386
|
+
code,
|
|
387
|
+
newPassword
|
|
388
|
+
});
|
|
389
|
+
},
|
|
390
|
+
children: /* @__PURE__ */jsxs4(AuthCard, {
|
|
391
|
+
buttonLabel: intl.formatMessage({
|
|
392
|
+
id: "HT4tSM",
|
|
393
|
+
defaultMessage: [{
|
|
394
|
+
"type": 0,
|
|
395
|
+
"value": "Reset Password"
|
|
396
|
+
}]
|
|
397
|
+
}),
|
|
398
|
+
isValidForm: formMethods.formState.isValid,
|
|
399
|
+
title: intl.formatMessage({
|
|
400
|
+
id: "HT4tSM",
|
|
401
|
+
defaultMessage: [{
|
|
402
|
+
"type": 0,
|
|
403
|
+
"value": "Reset Password"
|
|
404
|
+
}]
|
|
405
|
+
}),
|
|
406
|
+
extraButton: props.onGoToSignIn ? /* @__PURE__ */jsx5(Button3, {
|
|
407
|
+
type: "button",
|
|
408
|
+
sx: {
|
|
409
|
+
textAlign: "center",
|
|
410
|
+
display: "initial"
|
|
411
|
+
},
|
|
412
|
+
variant: "secondary",
|
|
413
|
+
onClick: props.onGoToSignIn,
|
|
414
|
+
children: intl.formatMessage({
|
|
415
|
+
id: "6PdOcy",
|
|
416
|
+
defaultMessage: [{
|
|
417
|
+
"type": 0,
|
|
418
|
+
"value": "Cancel"
|
|
419
|
+
}]
|
|
420
|
+
})
|
|
421
|
+
}) : null,
|
|
422
|
+
children: [/* @__PURE__ */jsx5(FormFieldInput3, {
|
|
423
|
+
name: "code",
|
|
424
|
+
label: intl.formatMessage({
|
|
425
|
+
id: "s1OmP0",
|
|
426
|
+
defaultMessage: [{
|
|
427
|
+
"type": 0,
|
|
428
|
+
"value": "Confirmation code"
|
|
429
|
+
}]
|
|
430
|
+
})
|
|
431
|
+
}), /* @__PURE__ */jsx5(FormFieldPassword, {
|
|
432
|
+
name: "newPassword",
|
|
433
|
+
label: intl.formatMessage({
|
|
434
|
+
id: "e3IQoc",
|
|
435
|
+
defaultMessage: [{
|
|
436
|
+
"type": 0,
|
|
437
|
+
"value": "New Password"
|
|
438
|
+
}]
|
|
439
|
+
})
|
|
440
|
+
}), /* @__PURE__ */jsx5(NotificationsBox2, {})]
|
|
441
|
+
})
|
|
442
|
+
});
|
|
443
|
+
};
|
|
444
|
+
|
|
445
|
+
// src/AuthFullScreen.tsx
|
|
446
|
+
import { Flex as Flex2 } from "@ttoss/ui";
|
|
447
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
448
|
+
var AuthFullScreen = ({
|
|
449
|
+
children
|
|
450
|
+
}) => {
|
|
451
|
+
return /* @__PURE__ */jsx6(Flex2, {
|
|
452
|
+
sx: {
|
|
453
|
+
height: "100vh",
|
|
454
|
+
width: "100vw",
|
|
455
|
+
justifyContent: "center",
|
|
456
|
+
alignItems: "center",
|
|
457
|
+
margin: 0,
|
|
458
|
+
backgroundPosition: "center",
|
|
459
|
+
backgroundRepeat: "no-repeat",
|
|
460
|
+
backgroundSize: "cover"
|
|
461
|
+
},
|
|
462
|
+
children
|
|
463
|
+
});
|
|
464
|
+
};
|
|
465
|
+
|
|
466
|
+
// src/AuthSignIn.tsx
|
|
467
|
+
import { Form as Form4, FormFieldInput as FormFieldInput4, FormFieldPassword as FormFieldPassword2, useForm as useForm4, yup as yup4, yupResolver as yupResolver4 } from "@ttoss/forms";
|
|
468
|
+
import { useI18n as useI18n5 } from "@ttoss/react-i18n";
|
|
469
|
+
import { NotificationsBox as NotificationsBox3 } from "@ttoss/react-notifications";
|
|
470
|
+
import { Button as Button4, Flex as Flex3, Link as Link2, Text as Text2 } from "@ttoss/ui";
|
|
471
|
+
import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
472
|
+
var AuthSignIn = ({
|
|
473
|
+
onSignIn,
|
|
474
|
+
onGoToSignUp,
|
|
475
|
+
defaultValues,
|
|
476
|
+
onGoToForgotPassword,
|
|
477
|
+
passwordMinimumLength = 8
|
|
478
|
+
}) => {
|
|
479
|
+
const {
|
|
480
|
+
intl
|
|
481
|
+
} = useI18n5();
|
|
482
|
+
const schema = yup4.object().shape({
|
|
483
|
+
email: yup4.string().required(intl.formatMessage({
|
|
484
|
+
id: "d1YCuH",
|
|
485
|
+
defaultMessage: [{
|
|
486
|
+
"type": 0,
|
|
487
|
+
"value": "Enter your email address"
|
|
488
|
+
}]
|
|
489
|
+
})).email(intl.formatMessage({
|
|
490
|
+
id: "9cApwd",
|
|
491
|
+
defaultMessage: [{
|
|
492
|
+
"type": 0,
|
|
493
|
+
"value": "Please, insert a valid e-mail"
|
|
494
|
+
}]
|
|
495
|
+
})),
|
|
496
|
+
password: yup4.string().required(intl.formatMessage({
|
|
497
|
+
id: "kdFYba",
|
|
498
|
+
defaultMessage: [{
|
|
499
|
+
"type": 0,
|
|
500
|
+
"value": "Password field is required"
|
|
501
|
+
}]
|
|
502
|
+
})).min(passwordMinimumLength, intl.formatMessage({
|
|
503
|
+
id: "TZ4WUk",
|
|
504
|
+
defaultMessage: [{
|
|
505
|
+
"type": 0,
|
|
506
|
+
"value": "Password requires "
|
|
507
|
+
}, {
|
|
508
|
+
"type": 1,
|
|
509
|
+
"value": "value"
|
|
510
|
+
}, {
|
|
511
|
+
"type": 0,
|
|
512
|
+
"value": " characters"
|
|
513
|
+
}]
|
|
514
|
+
}, {
|
|
515
|
+
value: passwordMinimumLength
|
|
516
|
+
})).trim()
|
|
517
|
+
});
|
|
518
|
+
const formMethods = useForm4({
|
|
519
|
+
defaultValues,
|
|
520
|
+
mode: "onBlur",
|
|
521
|
+
resolver: yupResolver4(schema)
|
|
522
|
+
});
|
|
523
|
+
const onSubmitForm = data => {
|
|
524
|
+
return onSignIn(data);
|
|
525
|
+
};
|
|
526
|
+
return /* @__PURE__ */jsx7(Form4, {
|
|
527
|
+
sx: {
|
|
528
|
+
maxWidth: "390px",
|
|
529
|
+
width: "100%"
|
|
530
|
+
},
|
|
531
|
+
...formMethods,
|
|
532
|
+
onSubmit: onSubmitForm,
|
|
533
|
+
children: /* @__PURE__ */jsxs5(AuthCard, {
|
|
534
|
+
title: intl.formatMessage({
|
|
535
|
+
id: "SQJto2",
|
|
536
|
+
defaultMessage: [{
|
|
537
|
+
"type": 0,
|
|
538
|
+
"value": "Sign in"
|
|
539
|
+
}]
|
|
540
|
+
}),
|
|
541
|
+
buttonLabel: intl.formatMessage({
|
|
542
|
+
id: "SQJto2",
|
|
543
|
+
defaultMessage: [{
|
|
544
|
+
"type": 0,
|
|
545
|
+
"value": "Sign in"
|
|
546
|
+
}]
|
|
547
|
+
}),
|
|
548
|
+
isValidForm: formMethods.formState.isValid,
|
|
549
|
+
extraButton: onGoToSignUp ? /* @__PURE__ */jsx7(Button4, {
|
|
550
|
+
type: "button",
|
|
551
|
+
variant: "secondary",
|
|
552
|
+
sx: {
|
|
553
|
+
textAlign: "center",
|
|
554
|
+
display: "initial"
|
|
555
|
+
},
|
|
556
|
+
onClick: onGoToSignUp,
|
|
557
|
+
children: intl.formatMessage({
|
|
558
|
+
id: "EZ3YF2",
|
|
559
|
+
defaultMessage: [{
|
|
560
|
+
"type": 0,
|
|
561
|
+
"value": "Sign up"
|
|
562
|
+
}]
|
|
563
|
+
})
|
|
564
|
+
}) : null,
|
|
565
|
+
children: [/* @__PURE__ */jsxs5(Flex3, {
|
|
566
|
+
sx: {
|
|
567
|
+
flexDirection: "column",
|
|
568
|
+
gap: "xl"
|
|
569
|
+
},
|
|
570
|
+
children: [/* @__PURE__ */jsx7(FormFieldInput4, {
|
|
571
|
+
name: "email",
|
|
572
|
+
label: intl.formatMessage({
|
|
573
|
+
id: "5E12mO",
|
|
574
|
+
defaultMessage: [{
|
|
575
|
+
"type": 0,
|
|
576
|
+
"value": "Email"
|
|
577
|
+
}]
|
|
578
|
+
})
|
|
579
|
+
}), /* @__PURE__ */jsx7(FormFieldPassword2, {
|
|
580
|
+
name: "password",
|
|
581
|
+
label: intl.formatMessage({
|
|
582
|
+
id: "PylVqx",
|
|
583
|
+
defaultMessage: [{
|
|
584
|
+
"type": 0,
|
|
585
|
+
"value": "Password"
|
|
586
|
+
}]
|
|
587
|
+
})
|
|
588
|
+
})]
|
|
589
|
+
}), onGoToForgotPassword && /* @__PURE__ */jsx7(Flex3, {
|
|
590
|
+
sx: {
|
|
591
|
+
justifyContent: "space-between",
|
|
592
|
+
marginTop: "lg"
|
|
593
|
+
},
|
|
594
|
+
children: /* @__PURE__ */jsx7(Text2, {
|
|
595
|
+
sx: {
|
|
596
|
+
marginLeft: "auto",
|
|
597
|
+
cursor: "pointer"
|
|
598
|
+
},
|
|
599
|
+
as: Link2,
|
|
600
|
+
onClick: onGoToForgotPassword,
|
|
601
|
+
children: intl.formatMessage({
|
|
602
|
+
id: "BtK6KR",
|
|
603
|
+
defaultMessage: [{
|
|
604
|
+
"type": 0,
|
|
605
|
+
"value": "Forgot password?"
|
|
606
|
+
}]
|
|
607
|
+
})
|
|
608
|
+
})
|
|
609
|
+
}), /* @__PURE__ */jsx7(NotificationsBox3, {})]
|
|
610
|
+
})
|
|
611
|
+
});
|
|
612
|
+
};
|
|
613
|
+
|
|
614
|
+
// src/AuthSignUp.tsx
|
|
615
|
+
import { Form as Form5, FormFieldCheckbox, FormFieldInput as FormFieldInput5, FormFieldPassword as FormFieldPassword3, useForm as useForm5, yup as yup5, yupResolver as yupResolver5 } from "@ttoss/forms";
|
|
616
|
+
import { useI18n as useI18n6 } from "@ttoss/react-i18n";
|
|
617
|
+
import { NotificationsBox as NotificationsBox4 } from "@ttoss/react-notifications";
|
|
618
|
+
import { Flex as Flex4, Link as Link3, Text as Text3 } from "@ttoss/ui";
|
|
619
|
+
import * as React2 from "react";
|
|
620
|
+
import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
621
|
+
var AuthSignUp = props => {
|
|
622
|
+
const {
|
|
623
|
+
intl
|
|
624
|
+
} = useI18n6();
|
|
625
|
+
const {
|
|
626
|
+
passwordMinimumLength = 8
|
|
627
|
+
} = props;
|
|
628
|
+
const schema = React2.useMemo(() => {
|
|
629
|
+
return yup5.object().shape({
|
|
630
|
+
email: yup5.string().required(intl.formatMessage({
|
|
631
|
+
id: "d1YCuH",
|
|
632
|
+
defaultMessage: [{
|
|
633
|
+
"type": 0,
|
|
634
|
+
"value": "Enter your email address"
|
|
635
|
+
}]
|
|
636
|
+
})).email(intl.formatMessage({
|
|
637
|
+
id: "OhDL0i",
|
|
638
|
+
defaultMessage: [{
|
|
639
|
+
"type": 0,
|
|
640
|
+
"value": "Invalid email"
|
|
641
|
+
}]
|
|
642
|
+
})),
|
|
643
|
+
password: yup5.string().required(intl.formatMessage({
|
|
644
|
+
id: "kdFYba",
|
|
645
|
+
defaultMessage: [{
|
|
646
|
+
"type": 0,
|
|
647
|
+
"value": "Password field is required"
|
|
648
|
+
}]
|
|
649
|
+
})).min(passwordMinimumLength, intl.formatMessage({
|
|
650
|
+
id: "TZ4WUk",
|
|
651
|
+
defaultMessage: [{
|
|
652
|
+
"type": 0,
|
|
653
|
+
"value": "Password requires "
|
|
654
|
+
}, {
|
|
655
|
+
"type": 1,
|
|
656
|
+
"value": "value"
|
|
657
|
+
}, {
|
|
658
|
+
"type": 0,
|
|
659
|
+
"value": " characters"
|
|
660
|
+
}]
|
|
661
|
+
}, {
|
|
662
|
+
value: passwordMinimumLength
|
|
663
|
+
})).trim(),
|
|
664
|
+
confirmPassword: yup5.string().required(intl.formatMessage({
|
|
665
|
+
id: "NJ57Qj",
|
|
666
|
+
defaultMessage: [{
|
|
667
|
+
"type": 0,
|
|
668
|
+
"value": "Confirm password field is required"
|
|
669
|
+
}]
|
|
670
|
+
})).oneOf([yup5.ref("password")], intl.formatMessage({
|
|
671
|
+
id: "WU/CqP",
|
|
672
|
+
defaultMessage: [{
|
|
673
|
+
"type": 0,
|
|
674
|
+
"value": "Passwords are not the same"
|
|
675
|
+
}]
|
|
676
|
+
})),
|
|
677
|
+
signUpTerms: props.signUpTerms?.isRequired ? yup5.boolean().required(intl.formatMessage({
|
|
678
|
+
id: "qnQYqN",
|
|
679
|
+
defaultMessage: [{
|
|
680
|
+
"type": 0,
|
|
681
|
+
"value": "You must accept the terms and conditions"
|
|
682
|
+
}]
|
|
683
|
+
})) : yup5.boolean()
|
|
684
|
+
});
|
|
685
|
+
}, [intl, props.signUpTerms?.isRequired, passwordMinimumLength]);
|
|
686
|
+
const signUpTermsLabel = React2.useMemo(() => {
|
|
687
|
+
if (!props.signUpTerms) {
|
|
688
|
+
return null;
|
|
689
|
+
}
|
|
690
|
+
const signUpTermsFirstMessage = intl.formatMessage({
|
|
691
|
+
id: "Co3exe",
|
|
692
|
+
defaultMessage: [{
|
|
693
|
+
"type": 0,
|
|
694
|
+
"value": "By signing up, you agree to the following Terms and Conditions."
|
|
695
|
+
}]
|
|
696
|
+
});
|
|
697
|
+
const termsLinks = props.signUpTerms.terms.map((term, index, terms) => {
|
|
698
|
+
const finalPunctuation = index === terms.length - 1 ? "." : ", ";
|
|
699
|
+
return /* @__PURE__ */jsxs6(React2.Fragment, {
|
|
700
|
+
children: [/* @__PURE__ */jsx8(Link3, {
|
|
701
|
+
href: term.url,
|
|
702
|
+
target: "_blank",
|
|
703
|
+
rel: "noreferrer",
|
|
704
|
+
children: term.label
|
|
705
|
+
}, index), finalPunctuation]
|
|
706
|
+
}, index);
|
|
707
|
+
});
|
|
708
|
+
const label = /* @__PURE__ */jsxs6(Text3, {
|
|
709
|
+
children: [signUpTermsFirstMessage, " ", termsLinks]
|
|
710
|
+
});
|
|
711
|
+
return label;
|
|
712
|
+
}, [intl, props.signUpTerms]);
|
|
713
|
+
const signUpTermsNode = React2.useMemo(() => {
|
|
714
|
+
if (!props.signUpTerms) {
|
|
715
|
+
return null;
|
|
716
|
+
}
|
|
717
|
+
if (props.signUpTerms.isRequired) {
|
|
718
|
+
return /* @__PURE__ */jsx8(FormFieldCheckbox, {
|
|
719
|
+
name: "signUpTerms",
|
|
720
|
+
label: signUpTermsLabel
|
|
721
|
+
});
|
|
722
|
+
} else {
|
|
723
|
+
return /* @__PURE__ */jsx8(Fragment2, {
|
|
724
|
+
children: signUpTermsLabel
|
|
725
|
+
});
|
|
726
|
+
}
|
|
727
|
+
}, [props.signUpTerms, signUpTermsLabel]);
|
|
728
|
+
const formMethods = useForm5({
|
|
729
|
+
mode: "onBlur",
|
|
730
|
+
resolver: yupResolver5(schema)
|
|
731
|
+
});
|
|
732
|
+
const onSubmitForm = data => {
|
|
733
|
+
return props.onSignUp(data);
|
|
734
|
+
};
|
|
735
|
+
return /* @__PURE__ */jsx8(Form5, {
|
|
736
|
+
sx: {
|
|
737
|
+
maxWidth: "390px",
|
|
738
|
+
width: "100%"
|
|
739
|
+
},
|
|
740
|
+
...formMethods,
|
|
741
|
+
onSubmit: onSubmitForm,
|
|
742
|
+
children: /* @__PURE__ */jsxs6(AuthCard, {
|
|
743
|
+
buttonLabel: intl.formatMessage({
|
|
744
|
+
id: "URJDrG",
|
|
745
|
+
defaultMessage: [{
|
|
746
|
+
"type": 0,
|
|
747
|
+
"value": "Sign up"
|
|
748
|
+
}]
|
|
749
|
+
}),
|
|
750
|
+
title: intl.formatMessage({
|
|
751
|
+
id: "oayEC3",
|
|
752
|
+
defaultMessage: [{
|
|
753
|
+
"type": 0,
|
|
754
|
+
"value": "Sign up"
|
|
755
|
+
}]
|
|
756
|
+
}),
|
|
757
|
+
isValidForm: formMethods.formState.isValid,
|
|
758
|
+
extraButton: /* @__PURE__ */jsx8(Text3, {
|
|
759
|
+
sx: {
|
|
760
|
+
cursor: "pointer"
|
|
761
|
+
},
|
|
762
|
+
onClick: props.onGoToSignIn,
|
|
763
|
+
as: Link3,
|
|
764
|
+
children: intl.formatMessage({
|
|
765
|
+
id: "8GMUPk",
|
|
766
|
+
defaultMessage: [{
|
|
767
|
+
"type": 0,
|
|
768
|
+
"value": "I'm already registered"
|
|
769
|
+
}]
|
|
770
|
+
})
|
|
771
|
+
}),
|
|
772
|
+
children: [/* @__PURE__ */jsxs6(Flex4, {
|
|
773
|
+
sx: {
|
|
774
|
+
flexDirection: "column",
|
|
775
|
+
gap: "xl"
|
|
776
|
+
},
|
|
777
|
+
children: [/* @__PURE__ */jsx8(FormFieldInput5, {
|
|
778
|
+
name: "email",
|
|
779
|
+
label: intl.formatMessage({
|
|
780
|
+
id: "5E12mO",
|
|
781
|
+
defaultMessage: [{
|
|
782
|
+
"type": 0,
|
|
783
|
+
"value": "Email"
|
|
784
|
+
}]
|
|
785
|
+
})
|
|
786
|
+
}), /* @__PURE__ */jsx8(FormFieldPassword3, {
|
|
787
|
+
name: "password",
|
|
788
|
+
label: intl.formatMessage({
|
|
789
|
+
id: "PylVqx",
|
|
790
|
+
defaultMessage: [{
|
|
791
|
+
"type": 0,
|
|
792
|
+
"value": "Password"
|
|
793
|
+
}]
|
|
794
|
+
})
|
|
795
|
+
}), /* @__PURE__ */jsx8(FormFieldPassword3, {
|
|
796
|
+
name: "confirmPassword",
|
|
797
|
+
label: intl.formatMessage({
|
|
798
|
+
id: "lY+cuM",
|
|
799
|
+
defaultMessage: [{
|
|
800
|
+
"type": 0,
|
|
801
|
+
"value": "Confirm password"
|
|
802
|
+
}]
|
|
803
|
+
})
|
|
804
|
+
}), signUpTermsNode]
|
|
805
|
+
}), /* @__PURE__ */jsx8(NotificationsBox4, {})]
|
|
806
|
+
})
|
|
807
|
+
});
|
|
808
|
+
};
|
|
809
|
+
|
|
810
|
+
// src/ErrorBoundary.tsx
|
|
811
|
+
import { NotificationCard as NotificationCard3 } from "@ttoss/components/NotificationCard";
|
|
812
|
+
import { notify } from "@ttoss/logger";
|
|
813
|
+
import { useI18n as useI18n7 } from "@ttoss/react-i18n";
|
|
814
|
+
import { ErrorBoundary as ReactErrorBoundary } from "react-error-boundary";
|
|
815
|
+
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
816
|
+
var ErrorFallback = ({
|
|
817
|
+
resetErrorBoundary
|
|
818
|
+
}) => {
|
|
819
|
+
const {
|
|
820
|
+
intl
|
|
821
|
+
} = useI18n7();
|
|
822
|
+
return /* @__PURE__ */jsx9("div", {
|
|
823
|
+
role: "alert",
|
|
824
|
+
children: /* @__PURE__ */jsx9(NotificationCard3, {
|
|
825
|
+
type: "error",
|
|
826
|
+
message: intl.formatMessage({
|
|
827
|
+
id: "khMx/2",
|
|
828
|
+
defaultMessage: [{
|
|
829
|
+
"type": 0,
|
|
830
|
+
"value": "An error occurred with your authentication. Please try again."
|
|
831
|
+
}]
|
|
832
|
+
}),
|
|
833
|
+
onClose: resetErrorBoundary
|
|
834
|
+
})
|
|
835
|
+
});
|
|
836
|
+
};
|
|
837
|
+
var ErrorBoundary = ({
|
|
838
|
+
children
|
|
839
|
+
}) => {
|
|
840
|
+
return /* @__PURE__ */jsx9(ReactErrorBoundary, {
|
|
841
|
+
FallbackComponent: ErrorFallback,
|
|
842
|
+
onError: error => {
|
|
843
|
+
notify({
|
|
844
|
+
type: "error",
|
|
845
|
+
title: "Authentication Error",
|
|
846
|
+
message: error.message
|
|
847
|
+
});
|
|
848
|
+
},
|
|
849
|
+
children
|
|
850
|
+
});
|
|
851
|
+
};
|
|
852
|
+
|
|
853
|
+
// src/Auth.tsx
|
|
854
|
+
import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
855
|
+
var AuthLogic = props => {
|
|
856
|
+
const {
|
|
857
|
+
screen,
|
|
858
|
+
setScreen,
|
|
859
|
+
onSignUp,
|
|
860
|
+
onForgotPassword,
|
|
861
|
+
onSignIn,
|
|
862
|
+
onConfirmSignUpCheckEmail,
|
|
863
|
+
onConfirmSignUpWithCode,
|
|
864
|
+
onForgotPasswordResetPassword,
|
|
865
|
+
passwordMinimumLength,
|
|
866
|
+
signUpTerms
|
|
867
|
+
} = props;
|
|
868
|
+
const {
|
|
869
|
+
clearNotifications,
|
|
870
|
+
setLoading
|
|
871
|
+
} = useNotifications2();
|
|
872
|
+
React3.useEffect(() => {
|
|
873
|
+
clearNotifications();
|
|
874
|
+
}, [screen.value, clearNotifications]);
|
|
875
|
+
React3.useEffect(() => {
|
|
876
|
+
return clearNotifications;
|
|
877
|
+
}, [clearNotifications]);
|
|
878
|
+
const onGoToSignIn = () => {
|
|
879
|
+
setScreen({
|
|
880
|
+
value: "signIn"
|
|
881
|
+
});
|
|
882
|
+
};
|
|
883
|
+
const onGoToSignUp = React3.useCallback(() => {
|
|
884
|
+
if (!onSignUp) {
|
|
885
|
+
return void 0;
|
|
886
|
+
}
|
|
887
|
+
setScreen({
|
|
888
|
+
value: "signUp"
|
|
889
|
+
});
|
|
890
|
+
}, [onSignUp, setScreen]);
|
|
891
|
+
const onGoToForgotPassword = React3.useCallback(() => {
|
|
892
|
+
if (!onForgotPassword) {
|
|
893
|
+
return void 0;
|
|
894
|
+
}
|
|
895
|
+
setScreen({
|
|
896
|
+
value: "forgotPassword"
|
|
897
|
+
});
|
|
898
|
+
}, [onForgotPassword, setScreen]);
|
|
899
|
+
const notificationsWrapper = fn => {
|
|
900
|
+
return async input => {
|
|
901
|
+
if (fn) {
|
|
902
|
+
clearNotifications();
|
|
903
|
+
setLoading(true);
|
|
904
|
+
const result = await fn(input);
|
|
905
|
+
setLoading(false);
|
|
906
|
+
return result;
|
|
907
|
+
}
|
|
908
|
+
};
|
|
909
|
+
};
|
|
910
|
+
if (screen.value === "signIn") {
|
|
911
|
+
return /* @__PURE__ */jsx10(AuthSignIn, {
|
|
912
|
+
onSignIn: notificationsWrapper(onSignIn),
|
|
913
|
+
onGoToSignUp: onSignUp && onGoToSignUp,
|
|
914
|
+
onGoToForgotPassword: onForgotPassword && onGoToForgotPassword,
|
|
915
|
+
passwordMinimumLength
|
|
916
|
+
});
|
|
917
|
+
}
|
|
918
|
+
if (screen.value === "signUp" && onSignUp) {
|
|
919
|
+
return /* @__PURE__ */jsx10(AuthSignUp, {
|
|
920
|
+
onSignUp: notificationsWrapper(onSignUp),
|
|
921
|
+
passwordMinimumLength,
|
|
922
|
+
onGoToSignIn,
|
|
923
|
+
signUpTerms
|
|
924
|
+
});
|
|
925
|
+
}
|
|
926
|
+
if (screen.value === "forgotPassword" && onForgotPassword) {
|
|
927
|
+
return /* @__PURE__ */jsx10(AuthForgotPassword, {
|
|
928
|
+
onForgotPassword: notificationsWrapper(onForgotPassword),
|
|
929
|
+
onGoToSignIn,
|
|
930
|
+
onGoToSignUp: onSignUp && onGoToSignUp
|
|
931
|
+
});
|
|
932
|
+
}
|
|
933
|
+
if (screen.value === "confirmResetPassword" && onForgotPasswordResetPassword) {
|
|
934
|
+
return /* @__PURE__ */jsx10(AuthForgotPasswordResetPassword, {
|
|
935
|
+
onForgotPasswordResetPassword: notificationsWrapper(onForgotPasswordResetPassword),
|
|
936
|
+
onGoToSignIn,
|
|
937
|
+
email: screen.context.email
|
|
938
|
+
});
|
|
939
|
+
}
|
|
940
|
+
if (screen.value === "confirmSignUpWithCode" && onConfirmSignUpWithCode) {
|
|
941
|
+
return /* @__PURE__ */jsx10(AuthConfirmSignUpWithCode, {
|
|
942
|
+
onConfirmSignUpWithCode: notificationsWrapper(onConfirmSignUpWithCode),
|
|
943
|
+
email: screen.context.email
|
|
944
|
+
});
|
|
945
|
+
}
|
|
946
|
+
if (screen.value === "confirmSignUpCheckEmail" && onConfirmSignUpCheckEmail) {
|
|
947
|
+
return /* @__PURE__ */jsx10(AuthConfirmSignUpCheckEmail, {
|
|
948
|
+
onConfirmSignUpCheckEmail
|
|
949
|
+
});
|
|
950
|
+
}
|
|
951
|
+
return null;
|
|
952
|
+
};
|
|
953
|
+
var Auth = props => {
|
|
954
|
+
const {
|
|
955
|
+
layout = {
|
|
956
|
+
fullScreen: true
|
|
957
|
+
}
|
|
958
|
+
} = props;
|
|
959
|
+
const withLogoNode = React3.useMemo(() => {
|
|
960
|
+
return /* @__PURE__ */jsx10(LogoProvider, {
|
|
961
|
+
logo: props.logo,
|
|
962
|
+
children: /* @__PURE__ */jsx10(ErrorBoundary, {
|
|
963
|
+
children: /* @__PURE__ */jsx10(AuthLogic, {
|
|
964
|
+
...props
|
|
965
|
+
})
|
|
966
|
+
})
|
|
967
|
+
});
|
|
968
|
+
}, [props]);
|
|
969
|
+
if (layout.fullScreen) {
|
|
970
|
+
if (layout.sideContentPosition) {
|
|
971
|
+
return /* @__PURE__ */jsx10(AuthFullScreen, {
|
|
972
|
+
children: /* @__PURE__ */jsxs7(Flex5, {
|
|
973
|
+
sx: {
|
|
974
|
+
width: "100%",
|
|
975
|
+
height: "100%",
|
|
976
|
+
flexDirection: layout.sideContentPosition === "left" ? "row" : "row-reverse"
|
|
977
|
+
},
|
|
978
|
+
children: [/* @__PURE__ */jsx10(Flex5, {
|
|
979
|
+
sx: {
|
|
980
|
+
width: "100%",
|
|
981
|
+
height: "100%",
|
|
982
|
+
flex: [0, 0, 1],
|
|
983
|
+
justifyContent: "center",
|
|
984
|
+
alignItems: "center"
|
|
985
|
+
},
|
|
986
|
+
children: layout.sideContent
|
|
987
|
+
}), /* @__PURE__ */jsx10(Flex5, {
|
|
988
|
+
sx: {
|
|
989
|
+
width: "100%",
|
|
990
|
+
height: "100%",
|
|
991
|
+
flex: [1],
|
|
992
|
+
justifyContent: "center",
|
|
993
|
+
alignItems: "center"
|
|
994
|
+
},
|
|
995
|
+
children: withLogoNode
|
|
996
|
+
})]
|
|
997
|
+
})
|
|
998
|
+
});
|
|
999
|
+
}
|
|
1000
|
+
return /* @__PURE__ */jsx10(AuthFullScreen, {
|
|
1001
|
+
children: withLogoNode
|
|
1002
|
+
});
|
|
1003
|
+
}
|
|
1004
|
+
return withLogoNode;
|
|
1005
|
+
};
|
|
1006
|
+
|
|
1007
|
+
// src/AuthProvider.tsx
|
|
1008
|
+
import { useNotifications as useNotifications3 } from "@ttoss/react-notifications";
|
|
1009
|
+
import * as React4 from "react";
|
|
1010
|
+
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
1011
|
+
var AuthContext = React4.createContext(null);
|
|
1012
|
+
var UNAUTHENTICATED_USER = {
|
|
1013
|
+
user: null,
|
|
1014
|
+
tokens: null,
|
|
1015
|
+
isAuthenticated: false
|
|
1016
|
+
};
|
|
1017
|
+
var AuthProvider = props => {
|
|
1018
|
+
const {
|
|
1019
|
+
getAuthData,
|
|
1020
|
+
signOut: signOutProp
|
|
1021
|
+
} = props;
|
|
1022
|
+
const {
|
|
1023
|
+
setLoading
|
|
1024
|
+
} = useNotifications3();
|
|
1025
|
+
const [authData, setAuthData] = React4.useState({
|
|
1026
|
+
user: null,
|
|
1027
|
+
tokens: null,
|
|
1028
|
+
isAuthenticated: void 0
|
|
1029
|
+
});
|
|
1030
|
+
React4.useEffect(() => {
|
|
1031
|
+
setLoading(authData.isAuthenticated === void 0);
|
|
1032
|
+
}, [authData.isAuthenticated, setLoading]);
|
|
1033
|
+
React4.useEffect(() => {
|
|
1034
|
+
let isMounted = true;
|
|
1035
|
+
const fetchAuthData = async () => {
|
|
1036
|
+
try {
|
|
1037
|
+
const data = await getAuthData?.();
|
|
1038
|
+
if (!isMounted) return;
|
|
1039
|
+
if (data) {
|
|
1040
|
+
setAuthData(data);
|
|
1041
|
+
} else {
|
|
1042
|
+
setAuthData(UNAUTHENTICATED_USER);
|
|
1043
|
+
}
|
|
1044
|
+
} catch {
|
|
1045
|
+
if (!isMounted) return;
|
|
1046
|
+
setAuthData(UNAUTHENTICATED_USER);
|
|
1047
|
+
}
|
|
1048
|
+
};
|
|
1049
|
+
fetchAuthData();
|
|
1050
|
+
return () => {
|
|
1051
|
+
isMounted = false;
|
|
1052
|
+
};
|
|
1053
|
+
}, [getAuthData]);
|
|
1054
|
+
const signOut = React4.useCallback(async () => {
|
|
1055
|
+
await signOutProp?.();
|
|
1056
|
+
setAuthData(UNAUTHENTICATED_USER);
|
|
1057
|
+
}, [signOutProp]);
|
|
1058
|
+
if (authData.isAuthenticated === void 0) {
|
|
1059
|
+
return null;
|
|
1060
|
+
}
|
|
1061
|
+
return /* @__PURE__ */jsx11(AuthContext.Provider, {
|
|
1062
|
+
value: {
|
|
1063
|
+
signOut,
|
|
1064
|
+
isAuthenticated: authData.isAuthenticated ?? false,
|
|
1065
|
+
user: authData.user,
|
|
1066
|
+
tokens: authData.tokens,
|
|
1067
|
+
setAuthData
|
|
1068
|
+
},
|
|
1069
|
+
children: props.children
|
|
1070
|
+
});
|
|
1071
|
+
};
|
|
1072
|
+
var useAuth = () => {
|
|
1073
|
+
const context = React4.useContext(AuthContext);
|
|
1074
|
+
if (!context) {
|
|
1075
|
+
throw new Error("useAuth must be used within an AuthProvider");
|
|
1076
|
+
}
|
|
1077
|
+
return context;
|
|
1078
|
+
};
|
|
1079
|
+
|
|
1080
|
+
// src/useAuthScreen.ts
|
|
1081
|
+
import * as React5 from "react";
|
|
1082
|
+
var useAuthScreen = initialScreen => {
|
|
1083
|
+
const [screen, setScreen] = React5.useState(initialScreen || {
|
|
1084
|
+
value: "signIn"
|
|
1085
|
+
});
|
|
1086
|
+
return {
|
|
1087
|
+
screen,
|
|
1088
|
+
setScreen
|
|
1089
|
+
};
|
|
1090
|
+
};
|
|
1091
|
+
export { Auth, AuthConfirmSignUpCheckEmail, AuthConfirmSignUpWithCode, AuthForgotPassword, AuthForgotPasswordResetPassword, AuthFullScreen, AuthProvider, AuthSignIn, AuthSignUp, ErrorBoundary, useAuth, useAuthScreen };
|