@ttoss/react-auth-core 0.4.29 → 0.4.30

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