@ttoss/react-auth-core 0.2.53 → 0.2.56

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,1033 +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 schema = yup3.object().shape({
314
- code: yup3.string().required(intl.formatMessage({
315
- id: "0XOzcH",
316
- defaultMessage: [{
317
- "type": 0,
318
- "value": "Required field"
319
- }]
320
- })).max(6, intl.formatMessage({
321
- id: "SfWKyS",
322
- defaultMessage: [{
323
- "type": 0,
324
- "value": "Maximum "
325
- }, {
326
- "type": 1,
327
- "value": "value"
328
- }, {
329
- "type": 0,
330
- "value": " characters"
331
- }]
332
- }, {
333
- value: 6
334
- })),
335
- newPassword: yup3.string().required(intl.formatMessage({
336
- id: "kdFYba",
337
- defaultMessage: [{
338
- "type": 0,
339
- "value": "Password field is required"
340
- }]
341
- })).min(props.passwordMinimumLength || 8, intl.formatMessage({
342
- id: "TZ4WUk",
343
- defaultMessage: [{
344
- "type": 0,
345
- "value": "Password requires "
346
- }, {
347
- "type": 1,
348
- "value": "value"
349
- }, {
350
- "type": 0,
351
- "value": " characters"
352
- }]
353
- }, {
354
- value: props.passwordMinimumLength || 8
355
- })).trim()
356
- });
357
- const formMethods = useForm3({
358
- resolver: yupResolver3(schema),
359
- mode: "onChange"
360
- });
361
- return /* @__PURE__ */React.createElement(Form3, {
362
- ...formMethods,
363
- sx: {
364
- maxWidth: "390px"
365
- },
366
- onSubmit: /* @__PURE__ */__name(({
367
- code,
368
- newPassword
369
- }) => {
370
- return props.onForgotPasswordResetPassword({
371
- email: props.email,
372
- code,
373
- newPassword
374
- });
375
- }, "onSubmit")
376
- }, /* @__PURE__ */React.createElement(AuthCard, {
377
- buttonLabel: intl.formatMessage({
378
- id: "HT4tSM",
379
- defaultMessage: [{
380
- "type": 0,
381
- "value": "Reset Password"
382
- }]
383
- }),
384
- isValidForm: formMethods.formState.isValid,
385
- title: intl.formatMessage({
386
- id: "HT4tSM",
387
- defaultMessage: [{
388
- "type": 0,
389
- "value": "Reset Password"
390
- }]
391
- }),
392
- extraButton: props.onGoToSignIn ? /* @__PURE__ */React.createElement(Button3, {
393
- type: "button",
394
- sx: {
395
- textAlign: "center",
396
- display: "initial"
397
- },
398
- variant: "secondary",
399
- onClick: props.onGoToSignIn
400
- }, intl.formatMessage({
401
- id: "6PdOcy",
402
- defaultMessage: [{
403
- "type": 0,
404
- "value": "Cancel"
405
- }]
406
- })) : null
407
- }, /* @__PURE__ */React.createElement(FormFieldInput3, {
408
- name: "code",
409
- label: intl.formatMessage({
410
- id: "s1OmP0",
411
- defaultMessage: [{
412
- "type": 0,
413
- "value": "Confirmation code"
414
- }]
415
- })
416
- }), /* @__PURE__ */React.createElement(FormFieldPassword, {
417
- name: "newPassword",
418
- label: intl.formatMessage({
419
- id: "e3IQoc",
420
- defaultMessage: [{
421
- "type": 0,
422
- "value": "New Password"
423
- }]
424
- })
425
- }), /* @__PURE__ */React.createElement(NotificationsBox2, null)));
426
- }, "AuthForgotPasswordResetPassword");
427
-
428
- // src/AuthFullScreen.tsx
429
- import { Flex as Flex2 } from "@ttoss/ui";
430
- var AuthFullScreen = /* @__PURE__ */__name(({
431
- children
432
- }) => {
433
- return /* @__PURE__ */React.createElement(Flex2, {
434
- sx: {
435
- height: "100vh",
436
- width: "100vw",
437
- justifyContent: "center",
438
- alignItems: "center",
439
- margin: 0,
440
- backgroundPosition: "center",
441
- backgroundRepeat: "no-repeat",
442
- backgroundSize: "cover"
443
- }
444
- }, children);
445
- }, "AuthFullScreen");
446
-
447
- // src/AuthSignIn.tsx
448
- import { Form as Form4, FormFieldInput as FormFieldInput4, FormFieldPassword as FormFieldPassword2, useForm as useForm4, yup as yup4, yupResolver as yupResolver4 } from "@ttoss/forms";
449
- import { useI18n as useI18n5 } from "@ttoss/react-i18n";
450
- import { NotificationsBox as NotificationsBox3 } from "@ttoss/react-notifications";
451
- import { Button as Button4, Flex as Flex3, Link as Link2, Text as Text2 } from "@ttoss/ui";
452
- var AuthSignIn = /* @__PURE__ */__name(({
453
- onSignIn,
454
- onGoToSignUp,
455
- defaultValues,
456
- onGoToForgotPassword,
457
- passwordMinimumLength = 8
458
- }) => {
459
- const {
460
- intl
461
- } = useI18n5();
462
- const schema = yup4.object().shape({
463
- email: yup4.string().required(intl.formatMessage({
464
- id: "d1YCuH",
465
- defaultMessage: [{
466
- "type": 0,
467
- "value": "Enter your email address"
468
- }]
469
- })).email(intl.formatMessage({
470
- id: "9cApwd",
471
- defaultMessage: [{
472
- "type": 0,
473
- "value": "Please, insert a valid e-mail"
474
- }]
475
- })),
476
- password: yup4.string().required(intl.formatMessage({
477
- id: "kdFYba",
478
- defaultMessage: [{
479
- "type": 0,
480
- "value": "Password field is required"
481
- }]
482
- })).min(passwordMinimumLength, intl.formatMessage({
483
- id: "TZ4WUk",
484
- defaultMessage: [{
485
- "type": 0,
486
- "value": "Password requires "
487
- }, {
488
- "type": 1,
489
- "value": "value"
490
- }, {
491
- "type": 0,
492
- "value": " characters"
493
- }]
494
- }, {
495
- value: passwordMinimumLength
496
- })).trim()
497
- });
498
- const formMethods = useForm4({
499
- defaultValues,
500
- mode: "onChange",
501
- resolver: yupResolver4(schema)
502
- });
503
- const onSubmitForm = /* @__PURE__ */__name(data => {
504
- return onSignIn(data);
505
- }, "onSubmitForm");
506
- return /* @__PURE__ */React.createElement(Form4, {
507
- sx: {
508
- maxWidth: "390px",
509
- width: "100%"
510
- },
511
- ...formMethods,
512
- onSubmit: onSubmitForm
513
- }, /* @__PURE__ */React.createElement(AuthCard, {
514
- title: intl.formatMessage({
515
- id: "SQJto2",
516
- defaultMessage: [{
517
- "type": 0,
518
- "value": "Sign in"
519
- }]
520
- }),
521
- buttonLabel: intl.formatMessage({
522
- id: "SQJto2",
523
- defaultMessage: [{
524
- "type": 0,
525
- "value": "Sign in"
526
- }]
527
- }),
528
- isValidForm: formMethods.formState.isValid,
529
- extraButton: onGoToSignUp ? /* @__PURE__ */React.createElement(Button4, {
530
- type: "button",
531
- variant: "secondary",
532
- sx: {
533
- textAlign: "center",
534
- display: "initial"
535
- },
536
- onClick: onGoToSignUp
537
- }, intl.formatMessage({
538
- id: "EZ3YF2",
539
- defaultMessage: [{
540
- "type": 0,
541
- "value": "Sign up"
542
- }]
543
- })) : null
544
- }, /* @__PURE__ */React.createElement(Flex3, {
545
- sx: {
546
- flexDirection: "column",
547
- gap: "xl"
548
- }
549
- }, /* @__PURE__ */React.createElement(FormFieldInput4, {
550
- name: "email",
551
- label: intl.formatMessage({
552
- id: "5E12mO",
553
- defaultMessage: [{
554
- "type": 0,
555
- "value": "Email"
556
- }]
557
- })
558
- }), /* @__PURE__ */React.createElement(FormFieldPassword2, {
559
- name: "password",
560
- label: intl.formatMessage({
561
- id: "PylVqx",
562
- defaultMessage: [{
563
- "type": 0,
564
- "value": "Password"
565
- }]
566
- })
567
- })), onGoToForgotPassword && /* @__PURE__ */React.createElement(Flex3, {
568
- sx: {
569
- justifyContent: "space-between",
570
- marginTop: "lg"
571
- }
572
- }, /* @__PURE__ */React.createElement(Text2, {
573
- sx: {
574
- marginLeft: "auto",
575
- cursor: "pointer"
576
- },
577
- as: Link2,
578
- onClick: onGoToForgotPassword
579
- }, intl.formatMessage({
580
- id: "BtK6KR",
581
- defaultMessage: [{
582
- "type": 0,
583
- "value": "Forgot password?"
584
- }]
585
- }))), /* @__PURE__ */React.createElement(NotificationsBox3, null)));
586
- }, "AuthSignIn");
587
-
588
- // src/AuthSignUp.tsx
589
- import { Form as Form5, FormFieldCheckbox, FormFieldInput as FormFieldInput5, FormFieldPassword as FormFieldPassword3, useForm as useForm5, yup as yup5, yupResolver as yupResolver5 } from "@ttoss/forms";
590
- import { useI18n as useI18n6 } from "@ttoss/react-i18n";
591
- import { NotificationsBox as NotificationsBox4 } from "@ttoss/react-notifications";
592
- import { Flex as Flex4, Link as Link3, Text as Text3 } from "@ttoss/ui";
593
- import * as React3 from "react";
594
- var AuthSignUp = /* @__PURE__ */__name(props => {
595
- const {
596
- intl
597
- } = useI18n6();
598
- const {
599
- passwordMinimumLength = 8
600
- } = props;
601
- const schema = React3.useMemo(() => {
602
- return yup5.object().shape({
603
- email: yup5.string().required(intl.formatMessage({
604
- id: "d1YCuH",
605
- defaultMessage: [{
606
- "type": 0,
607
- "value": "Enter your email address"
608
- }]
609
- })).email(intl.formatMessage({
610
- id: "OhDL0i",
611
- defaultMessage: [{
612
- "type": 0,
613
- "value": "Invalid email"
614
- }]
615
- })),
616
- password: yup5.string().required(intl.formatMessage({
617
- id: "kdFYba",
618
- defaultMessage: [{
619
- "type": 0,
620
- "value": "Password field is required"
621
- }]
622
- })).min(passwordMinimumLength, intl.formatMessage({
623
- id: "TZ4WUk",
624
- defaultMessage: [{
625
- "type": 0,
626
- "value": "Password requires "
627
- }, {
628
- "type": 1,
629
- "value": "value"
630
- }, {
631
- "type": 0,
632
- "value": " characters"
633
- }]
634
- }, {
635
- value: passwordMinimumLength
636
- })).trim(),
637
- confirmPassword: yup5.string().required(intl.formatMessage({
638
- id: "NJ57Qj",
639
- defaultMessage: [{
640
- "type": 0,
641
- "value": "Confirm password field is required"
642
- }]
643
- })).oneOf([yup5.ref("password")], intl.formatMessage({
644
- id: "WU/CqP",
645
- defaultMessage: [{
646
- "type": 0,
647
- "value": "Passwords are not the same"
648
- }]
649
- })),
650
- signUpTerms: props.signUpTerms?.isRequired ? yup5.boolean().required(intl.formatMessage({
651
- id: "qnQYqN",
652
- defaultMessage: [{
653
- "type": 0,
654
- "value": "You must accept the terms and conditions"
655
- }]
656
- })) : yup5.boolean()
657
- });
658
- }, [intl, props.signUpTerms?.isRequired, passwordMinimumLength]);
659
- const signUpTermsLabel = React3.useMemo(() => {
660
- if (!props.signUpTerms) {
661
- return null;
662
- }
663
- const signUpTermsFirstMessage = intl.formatMessage({
664
- id: "Co3exe",
665
- defaultMessage: [{
666
- "type": 0,
667
- "value": "By signing up, you agree to the following Terms and Conditions."
668
- }]
669
- });
670
- const termsLinks = props.signUpTerms.terms.map((term, index, terms) => {
671
- const finalPunctuation = index === terms.length - 1 ? "." : ", ";
672
- return /* @__PURE__ */React3.createElement(React3.Fragment, {
673
- key: index
674
- }, /* @__PURE__ */React3.createElement(Link3, {
675
- key: index,
676
- href: term.url,
677
- target: "_blank",
678
- rel: "noreferrer"
679
- }, term.label), finalPunctuation);
680
- });
681
- const label = /* @__PURE__ */React3.createElement(Text3, null, signUpTermsFirstMessage, " ", termsLinks);
682
- return label;
683
- }, [intl, props.signUpTerms]);
684
- const signUpTermsNode = React3.useMemo(() => {
685
- if (!props.signUpTerms) {
686
- return null;
687
- }
688
- if (props.signUpTerms.isRequired) {
689
- return /* @__PURE__ */React3.createElement(FormFieldCheckbox, {
690
- name: "signUpTerms",
691
- label: signUpTermsLabel
692
- });
693
- } else {
694
- return /* @__PURE__ */React3.createElement(React3.Fragment, null, signUpTermsLabel);
695
- }
696
- }, [props.signUpTerms, signUpTermsLabel]);
697
- const formMethods = useForm5({
698
- mode: "onChange",
699
- resolver: yupResolver5(schema)
700
- });
701
- const onSubmitForm = /* @__PURE__ */__name(data => {
702
- return props.onSignUp(data);
703
- }, "onSubmitForm");
704
- return /* @__PURE__ */React3.createElement(Form5, {
705
- sx: {
706
- maxWidth: "390px",
707
- width: "100%"
708
- },
709
- ...formMethods,
710
- onSubmit: onSubmitForm
711
- }, /* @__PURE__ */React3.createElement(AuthCard, {
712
- buttonLabel: intl.formatMessage({
713
- id: "URJDrG",
714
- defaultMessage: [{
715
- "type": 0,
716
- "value": "Sign up"
717
- }]
718
- }),
719
- title: intl.formatMessage({
720
- id: "oayEC3",
721
- defaultMessage: [{
722
- "type": 0,
723
- "value": "Sign up"
724
- }]
725
- }),
726
- isValidForm: formMethods.formState.isValid,
727
- extraButton: /* @__PURE__ */React3.createElement(Text3, {
728
- sx: {
729
- cursor: "pointer"
730
- },
731
- onClick: props.onGoToSignIn,
732
- as: Link3
733
- }, intl.formatMessage({
734
- id: "8GMUPk",
735
- defaultMessage: [{
736
- "type": 0,
737
- "value": "I'm already registered"
738
- }]
739
- }))
740
- }, /* @__PURE__ */React3.createElement(Flex4, {
741
- sx: {
742
- flexDirection: "column",
743
- gap: "xl"
744
- }
745
- }, /* @__PURE__ */React3.createElement(FormFieldInput5, {
746
- name: "email",
747
- label: intl.formatMessage({
748
- id: "5E12mO",
749
- defaultMessage: [{
750
- "type": 0,
751
- "value": "Email"
752
- }]
753
- })
754
- }), /* @__PURE__ */React3.createElement(FormFieldPassword3, {
755
- name: "password",
756
- label: intl.formatMessage({
757
- id: "PylVqx",
758
- defaultMessage: [{
759
- "type": 0,
760
- "value": "Password"
761
- }]
762
- })
763
- }), /* @__PURE__ */React3.createElement(FormFieldPassword3, {
764
- name: "confirmPassword",
765
- label: intl.formatMessage({
766
- id: "lY+cuM",
767
- defaultMessage: [{
768
- "type": 0,
769
- "value": "Confirm password"
770
- }]
771
- })
772
- }), signUpTermsNode), /* @__PURE__ */React3.createElement(NotificationsBox4, null)));
773
- }, "AuthSignUp");
774
-
775
- // src/ErrorBoundary.tsx
776
- import { NotificationCard as NotificationCard3 } from "@ttoss/components/NotificationCard";
777
- import { notify } from "@ttoss/logger";
778
- import { useI18n as useI18n7 } from "@ttoss/react-i18n";
779
- import * as React4 from "react";
780
- import { ErrorBoundary as ReactErrorBoundary } from "react-error-boundary";
781
- var ErrorFallback = /* @__PURE__ */__name(({
782
- resetErrorBoundary
783
- }) => {
784
- const {
785
- intl
786
- } = useI18n7();
787
- return /* @__PURE__ */React4.createElement("div", {
788
- role: "alert"
789
- }, /* @__PURE__ */React4.createElement(NotificationCard3, {
790
- type: "error",
791
- message: intl.formatMessage({
792
- id: "khMx/2",
793
- defaultMessage: [{
794
- "type": 0,
795
- "value": "An error occurred with your authentication. Please try again."
796
- }]
797
- }),
798
- onClose: resetErrorBoundary
799
- }));
800
- }, "ErrorFallback");
801
- var ErrorBoundary = /* @__PURE__ */__name(({
802
- children
803
- }) => {
804
- return /* @__PURE__ */React4.createElement(ReactErrorBoundary, {
805
- FallbackComponent: ErrorFallback,
806
- onError: /* @__PURE__ */__name(error => {
807
- notify({
808
- type: "error",
809
- title: "Authentication Error",
810
- message: error.message
811
- });
812
- }, "onError")
813
- }, children);
814
- }, "ErrorBoundary");
815
-
816
- // src/Auth.tsx
817
- var AuthLogic = /* @__PURE__ */__name(props => {
818
- const {
819
- screen,
820
- setScreen,
821
- onSignUp,
822
- onForgotPassword,
823
- onSignIn,
824
- onConfirmSignUpCheckEmail,
825
- onConfirmSignUpWithCode,
826
- onForgotPasswordResetPassword,
827
- passwordMinimumLength,
828
- signUpTerms
829
- } = props;
830
- const {
831
- clearNotifications,
832
- setLoading
833
- } = useNotifications2();
834
- React5.useEffect(() => {
835
- clearNotifications();
836
- }, [screen.value, clearNotifications]);
837
- React5.useEffect(() => {
838
- return clearNotifications;
839
- }, [clearNotifications]);
840
- const onGoToSignIn = /* @__PURE__ */__name(() => {
841
- setScreen({
842
- value: "signIn"
843
- });
844
- }, "onGoToSignIn");
845
- const onGoToSignUp = React5.useCallback(() => {
846
- if (!onSignUp) {
847
- return void 0;
848
- }
849
- setScreen({
850
- value: "signUp"
851
- });
852
- }, [onSignUp, setScreen]);
853
- const onGoToForgotPassword = React5.useCallback(() => {
854
- if (!onForgotPassword) {
855
- return void 0;
856
- }
857
- setScreen({
858
- value: "forgotPassword"
859
- });
860
- }, [onForgotPassword, setScreen]);
861
- const notificationsWrapper = /* @__PURE__ */__name(fn => {
862
- return async input => {
863
- if (fn) {
864
- clearNotifications();
865
- setLoading(true);
866
- const result = await fn(input);
867
- setLoading(false);
868
- return result;
869
- }
870
- };
871
- }, "notificationsWrapper");
872
- if (screen.value === "signIn") {
873
- return /* @__PURE__ */React5.createElement(AuthSignIn, {
874
- onSignIn: notificationsWrapper(onSignIn),
875
- onGoToSignUp: onSignUp && onGoToSignUp,
876
- onGoToForgotPassword: onForgotPassword && onGoToForgotPassword,
877
- passwordMinimumLength
878
- });
879
- }
880
- if (screen.value === "signUp" && onSignUp) {
881
- return /* @__PURE__ */React5.createElement(AuthSignUp, {
882
- onSignUp: notificationsWrapper(onSignUp),
883
- passwordMinimumLength,
884
- onGoToSignIn,
885
- signUpTerms
886
- });
887
- }
888
- if (screen.value === "forgotPassword" && onForgotPassword) {
889
- return /* @__PURE__ */React5.createElement(AuthForgotPassword, {
890
- onForgotPassword: notificationsWrapper(onForgotPassword),
891
- onGoToSignIn,
892
- onGoToSignUp: onSignUp && onGoToSignUp
893
- });
894
- }
895
- if (screen.value === "confirmResetPassword" && onForgotPasswordResetPassword) {
896
- return /* @__PURE__ */React5.createElement(AuthForgotPasswordResetPassword, {
897
- onForgotPasswordResetPassword: notificationsWrapper(onForgotPasswordResetPassword),
898
- onGoToSignIn,
899
- email: screen.context.email
900
- });
901
- }
902
- if (screen.value === "confirmSignUpWithCode" && onConfirmSignUpWithCode) {
903
- return /* @__PURE__ */React5.createElement(AuthConfirmSignUpWithCode, {
904
- onConfirmSignUpWithCode: notificationsWrapper(onConfirmSignUpWithCode),
905
- email: screen.context.email
906
- });
907
- }
908
- if (screen.value === "confirmSignUpCheckEmail" && onConfirmSignUpCheckEmail) {
909
- return /* @__PURE__ */React5.createElement(AuthConfirmSignUpCheckEmail, {
910
- onConfirmSignUpCheckEmail
911
- });
912
- }
913
- return null;
914
- }, "AuthLogic");
915
- var Auth = /* @__PURE__ */__name(props => {
916
- const {
917
- layout = {
918
- fullScreen: true
919
- }
920
- } = props;
921
- const withLogoNode = React5.useMemo(() => {
922
- return /* @__PURE__ */React5.createElement(LogoProvider, {
923
- logo: props.logo
924
- }, /* @__PURE__ */React5.createElement(ErrorBoundary, null, /* @__PURE__ */React5.createElement(AuthLogic, props)));
925
- }, [props]);
926
- if (layout.fullScreen) {
927
- if (layout.sideContentPosition) {
928
- return /* @__PURE__ */React5.createElement(AuthFullScreen, null, /* @__PURE__ */React5.createElement(Flex5, {
929
- sx: {
930
- width: "100%",
931
- height: "100%",
932
- flexDirection: layout.sideContentPosition === "left" ? "row" : "row-reverse"
933
- }
934
- }, /* @__PURE__ */React5.createElement(Flex5, {
935
- sx: {
936
- width: "100%",
937
- height: "100%",
938
- flex: [0, 0, 1],
939
- justifyContent: "center",
940
- alignItems: "center"
941
- }
942
- }, layout.sideContent), /* @__PURE__ */React5.createElement(Flex5, {
943
- sx: {
944
- width: "100%",
945
- height: "100%",
946
- flex: [1],
947
- justifyContent: "center",
948
- alignItems: "center"
949
- }
950
- }, withLogoNode)));
951
- }
952
- return /* @__PURE__ */React5.createElement(AuthFullScreen, null, withLogoNode);
953
- }
954
- return withLogoNode;
955
- }, "Auth");
956
-
957
- // src/AuthProvider.tsx
958
- import { useNotifications as useNotifications3 } from "@ttoss/react-notifications";
959
- import * as React6 from "react";
960
- var AuthContext = /* @__PURE__ */React6.createContext(null);
961
- var UNAUTHENTICATED_USER = {
962
- user: null,
963
- tokens: null,
964
- isAuthenticated: false
965
- };
966
- var AuthProvider = /* @__PURE__ */__name(props => {
967
- const {
968
- getAuthData,
969
- signOut: signOutProp
970
- } = props;
971
- const {
972
- setLoading
973
- } = useNotifications3();
974
- const [authData, setAuthData] = React6.useState({
975
- user: null,
976
- tokens: null,
977
- isAuthenticated: void 0
978
- });
979
- React6.useEffect(() => {
980
- setLoading(authData.isAuthenticated === void 0);
981
- }, [authData.isAuthenticated, setLoading]);
982
- React6.useEffect(() => {
983
- const fetchAuthData = /* @__PURE__ */__name(async () => {
984
- try {
985
- const data = await getAuthData?.();
986
- if (data) {
987
- setAuthData(data);
988
- } else {
989
- setAuthData(UNAUTHENTICATED_USER);
990
- }
991
- } catch {
992
- setAuthData(UNAUTHENTICATED_USER);
993
- }
994
- }, "fetchAuthData");
995
- fetchAuthData();
996
- }, [getAuthData]);
997
- const signOut = React6.useCallback(async () => {
998
- await signOutProp?.();
999
- setAuthData(UNAUTHENTICATED_USER);
1000
- }, [signOutProp]);
1001
- if (authData.isAuthenticated === void 0) {
1002
- return null;
1003
- }
1004
- return /* @__PURE__ */React6.createElement(AuthContext.Provider, {
1005
- value: {
1006
- signOut,
1007
- isAuthenticated: authData.isAuthenticated ?? false,
1008
- user: authData.user,
1009
- tokens: authData.tokens,
1010
- setAuthData
1011
- }
1012
- }, props.children);
1013
- }, "AuthProvider");
1014
- var useAuth = /* @__PURE__ */__name(() => {
1015
- const context = React6.useContext(AuthContext);
1016
- if (!context) {
1017
- throw new Error("useAuth must be used within an AuthProvider");
1018
- }
1019
- return context;
1020
- }, "useAuth");
1021
-
1022
- // src/useAuthScreen.ts
1023
- import * as React7 from "react";
1024
- var useAuthScreen = /* @__PURE__ */__name(initialScreen => {
1025
- const [screen, setScreen] = React7.useState(initialScreen || {
1026
- value: "signIn"
1027
- });
1028
- return {
1029
- screen,
1030
- setScreen
1031
- };
1032
- }, "useAuthScreen");
1033
- export { Auth, AuthConfirmSignUpCheckEmail, AuthConfirmSignUpWithCode, AuthForgotPassword, AuthForgotPasswordResetPassword, AuthFullScreen, AuthProvider, AuthSignIn, AuthSignUp, ErrorBoundary, useAuth, useAuthScreen };