@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.
@@ -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 };