@rqdhw3n/react-auth-flow 1.0.3 → 1.0.4
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/README.md +124 -62
- package/dist/index.cjs.js +399 -224
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +32 -7
- package/dist/index.es.js +399 -224
- package/dist/index.es.js.map +1 -1
- package/package.json +6 -1
package/dist/index.es.js
CHANGED
|
@@ -403,11 +403,36 @@ function useAuth() {
|
|
|
403
403
|
}
|
|
404
404
|
return context;
|
|
405
405
|
}
|
|
406
|
+
function cn(...classes) {
|
|
407
|
+
return classes.filter(Boolean).join(" ");
|
|
408
|
+
}
|
|
409
|
+
const DEFAULT_CLASSES$4 = {
|
|
410
|
+
form: "space-y-5",
|
|
411
|
+
field: "space-y-2",
|
|
412
|
+
label: "block text-sm font-medium text-slate-700",
|
|
413
|
+
input: "w-full rounded-xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-blue-500 focus:ring-4 focus:ring-blue-100 disabled:cursor-not-allowed disabled:bg-slate-100",
|
|
414
|
+
button: "w-full rounded-xl bg-blue-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60",
|
|
415
|
+
error: "rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600",
|
|
416
|
+
title: "text-2xl font-bold text-slate-900",
|
|
417
|
+
subtitle: "mt-1 text-sm text-slate-500"
|
|
418
|
+
};
|
|
406
419
|
const LoginForm = ({
|
|
407
|
-
className
|
|
420
|
+
className,
|
|
421
|
+
formClassName,
|
|
422
|
+
fieldClassName,
|
|
423
|
+
labelClassName,
|
|
424
|
+
inputClassName,
|
|
425
|
+
buttonClassName,
|
|
426
|
+
errorClassName,
|
|
427
|
+
titleClassName,
|
|
428
|
+
subtitleClassName,
|
|
408
429
|
labels = {},
|
|
409
430
|
placeholders = {},
|
|
410
431
|
submitButtonText = "Login",
|
|
432
|
+
loadingText = "Signing in...",
|
|
433
|
+
title,
|
|
434
|
+
subtitle,
|
|
435
|
+
showTitle = !!title,
|
|
411
436
|
onSuccess,
|
|
412
437
|
onError
|
|
413
438
|
}) => {
|
|
@@ -437,71 +462,106 @@ const LoginForm = ({
|
|
|
437
462
|
});
|
|
438
463
|
}
|
|
439
464
|
};
|
|
440
|
-
return /* @__PURE__ */ jsxs("
|
|
441
|
-
/* @__PURE__ */ jsxs("div", { className: "
|
|
442
|
-
/* @__PURE__ */ jsx("
|
|
443
|
-
/* @__PURE__ */ jsx(
|
|
444
|
-
"input",
|
|
445
|
-
{
|
|
446
|
-
id: "email",
|
|
447
|
-
type: "email",
|
|
448
|
-
value: email,
|
|
449
|
-
onChange: (e) => setEmail(e.target.value),
|
|
450
|
-
placeholder: placeholders.email || "your@email.com",
|
|
451
|
-
disabled: isLoading,
|
|
452
|
-
className: "auth-form-input",
|
|
453
|
-
required: true
|
|
454
|
-
}
|
|
455
|
-
)
|
|
465
|
+
return /* @__PURE__ */ jsxs("div", { className, children: [
|
|
466
|
+
showTitle && title && /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
|
|
467
|
+
/* @__PURE__ */ jsx("h1", { className: cn(DEFAULT_CLASSES$4.title, titleClassName), children: title }),
|
|
468
|
+
subtitle && /* @__PURE__ */ jsx("p", { className: cn(DEFAULT_CLASSES$4.subtitle, subtitleClassName), children: subtitle })
|
|
456
469
|
] }),
|
|
457
|
-
/* @__PURE__ */ jsxs("
|
|
458
|
-
/* @__PURE__ */
|
|
470
|
+
/* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: cn(DEFAULT_CLASSES$4.form, formClassName), children: [
|
|
471
|
+
/* @__PURE__ */ jsxs("div", { className: cn(DEFAULT_CLASSES$4.field, fieldClassName), children: [
|
|
472
|
+
/* @__PURE__ */ jsx("label", { htmlFor: "email", className: cn(DEFAULT_CLASSES$4.label, labelClassName), children: labels.email || "Email" }),
|
|
473
|
+
/* @__PURE__ */ jsx(
|
|
474
|
+
"input",
|
|
475
|
+
{
|
|
476
|
+
id: "email",
|
|
477
|
+
type: "email",
|
|
478
|
+
value: email,
|
|
479
|
+
onChange: (e) => setEmail(e.target.value),
|
|
480
|
+
placeholder: placeholders.email || "your@email.com",
|
|
481
|
+
disabled: isLoading,
|
|
482
|
+
className: cn(DEFAULT_CLASSES$4.input, inputClassName),
|
|
483
|
+
required: true
|
|
484
|
+
}
|
|
485
|
+
)
|
|
486
|
+
] }),
|
|
487
|
+
/* @__PURE__ */ jsxs("div", { className: cn(DEFAULT_CLASSES$4.field, fieldClassName), children: [
|
|
488
|
+
/* @__PURE__ */ jsx("label", { htmlFor: "password", className: cn(DEFAULT_CLASSES$4.label, labelClassName), children: labels.password || "Password" }),
|
|
489
|
+
/* @__PURE__ */ jsx(
|
|
490
|
+
"input",
|
|
491
|
+
{
|
|
492
|
+
id: "password",
|
|
493
|
+
type: "password",
|
|
494
|
+
value: password,
|
|
495
|
+
onChange: (e) => setPassword(e.target.value),
|
|
496
|
+
placeholder: placeholders.password || "••••••••",
|
|
497
|
+
disabled: isLoading,
|
|
498
|
+
className: cn(DEFAULT_CLASSES$4.input, inputClassName),
|
|
499
|
+
required: true
|
|
500
|
+
}
|
|
501
|
+
)
|
|
502
|
+
] }),
|
|
503
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
|
|
504
|
+
/* @__PURE__ */ jsx(
|
|
505
|
+
"input",
|
|
506
|
+
{
|
|
507
|
+
id: "rememberMe",
|
|
508
|
+
type: "checkbox",
|
|
509
|
+
checked: rememberMe,
|
|
510
|
+
onChange: (e) => setRememberMe(e.target.checked),
|
|
511
|
+
disabled: isLoading,
|
|
512
|
+
className: "h-4 w-4 rounded border-slate-300"
|
|
513
|
+
}
|
|
514
|
+
),
|
|
515
|
+
/* @__PURE__ */ jsx(
|
|
516
|
+
"label",
|
|
517
|
+
{
|
|
518
|
+
htmlFor: "rememberMe",
|
|
519
|
+
className: "ml-2 text-sm text-slate-700",
|
|
520
|
+
children: labels.rememberMe || "Remember me"
|
|
521
|
+
}
|
|
522
|
+
)
|
|
523
|
+
] }),
|
|
524
|
+
error && /* @__PURE__ */ jsx("div", { className: cn(DEFAULT_CLASSES$4.error, errorClassName), children: error }),
|
|
459
525
|
/* @__PURE__ */ jsx(
|
|
460
|
-
"
|
|
526
|
+
"button",
|
|
461
527
|
{
|
|
462
|
-
|
|
463
|
-
type: "password",
|
|
464
|
-
value: password,
|
|
465
|
-
onChange: (e) => setPassword(e.target.value),
|
|
466
|
-
placeholder: placeholders.password || "••••••••",
|
|
528
|
+
type: "submit",
|
|
467
529
|
disabled: isLoading,
|
|
468
|
-
className:
|
|
469
|
-
|
|
530
|
+
className: cn(DEFAULT_CLASSES$4.button, buttonClassName),
|
|
531
|
+
children: isLoading ? loadingText : submitButtonText
|
|
470
532
|
}
|
|
471
533
|
)
|
|
472
|
-
] })
|
|
473
|
-
/* @__PURE__ */ jsxs("div", { className: "auth-form-group auth-form-checkbox", children: [
|
|
474
|
-
/* @__PURE__ */ jsx(
|
|
475
|
-
"input",
|
|
476
|
-
{
|
|
477
|
-
id: "rememberMe",
|
|
478
|
-
type: "checkbox",
|
|
479
|
-
checked: rememberMe,
|
|
480
|
-
onChange: (e) => setRememberMe(e.target.checked),
|
|
481
|
-
disabled: isLoading,
|
|
482
|
-
className: "auth-form-input"
|
|
483
|
-
}
|
|
484
|
-
),
|
|
485
|
-
/* @__PURE__ */ jsx("label", { htmlFor: "rememberMe", className: "auth-form-label", children: labels.rememberMe || "Remember me" })
|
|
486
|
-
] }),
|
|
487
|
-
error && /* @__PURE__ */ jsx("div", { className: "auth-form-error", children: error }),
|
|
488
|
-
/* @__PURE__ */ jsx(
|
|
489
|
-
"button",
|
|
490
|
-
{
|
|
491
|
-
type: "submit",
|
|
492
|
-
disabled: isLoading,
|
|
493
|
-
className: "auth-form-button auth-form-button-primary",
|
|
494
|
-
children: isLoading ? "Loading..." : submitButtonText
|
|
495
|
-
}
|
|
496
|
-
)
|
|
534
|
+
] })
|
|
497
535
|
] });
|
|
498
536
|
};
|
|
499
537
|
LoginForm.displayName = "LoginForm";
|
|
538
|
+
const DEFAULT_CLASSES$3 = {
|
|
539
|
+
form: "space-y-5",
|
|
540
|
+
field: "space-y-2",
|
|
541
|
+
label: "block text-sm font-medium text-slate-700",
|
|
542
|
+
input: "w-full rounded-xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-blue-500 focus:ring-4 focus:ring-blue-100 disabled:cursor-not-allowed disabled:bg-slate-100",
|
|
543
|
+
button: "w-full rounded-xl bg-blue-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60",
|
|
544
|
+
error: "rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600",
|
|
545
|
+
title: "text-2xl font-bold text-slate-900",
|
|
546
|
+
subtitle: "mt-1 text-sm text-slate-500"
|
|
547
|
+
};
|
|
500
548
|
const RegisterForm = ({
|
|
501
|
-
className
|
|
549
|
+
className,
|
|
550
|
+
formClassName,
|
|
551
|
+
fieldClassName,
|
|
552
|
+
labelClassName,
|
|
553
|
+
inputClassName,
|
|
554
|
+
buttonClassName,
|
|
555
|
+
errorClassName,
|
|
556
|
+
titleClassName,
|
|
557
|
+
subtitleClassName,
|
|
502
558
|
labels = {},
|
|
503
559
|
placeholders = {},
|
|
504
560
|
submitButtonText = "Register",
|
|
561
|
+
loadingText = "Creating account...",
|
|
562
|
+
title,
|
|
563
|
+
subtitle,
|
|
564
|
+
showTitle = !!title,
|
|
505
565
|
onSuccess,
|
|
506
566
|
onError
|
|
507
567
|
}) => {
|
|
@@ -545,89 +605,119 @@ const RegisterForm = ({
|
|
|
545
605
|
});
|
|
546
606
|
}
|
|
547
607
|
};
|
|
548
|
-
return /* @__PURE__ */ jsxs("
|
|
549
|
-
/* @__PURE__ */ jsxs("div", { className: "
|
|
550
|
-
/* @__PURE__ */ jsx("
|
|
551
|
-
/* @__PURE__ */ jsx(
|
|
552
|
-
"input",
|
|
553
|
-
{
|
|
554
|
-
id: "name",
|
|
555
|
-
type: "text",
|
|
556
|
-
value: name,
|
|
557
|
-
onChange: (e) => setName(e.target.value),
|
|
558
|
-
placeholder: placeholders.name || "John Doe",
|
|
559
|
-
disabled: isLoading,
|
|
560
|
-
className: "auth-form-input",
|
|
561
|
-
required: true
|
|
562
|
-
}
|
|
563
|
-
)
|
|
564
|
-
] }),
|
|
565
|
-
/* @__PURE__ */ jsxs("div", { className: "auth-form-group", children: [
|
|
566
|
-
/* @__PURE__ */ jsx("label", { htmlFor: "email", className: "auth-form-label", children: labels.email || "Email" }),
|
|
567
|
-
/* @__PURE__ */ jsx(
|
|
568
|
-
"input",
|
|
569
|
-
{
|
|
570
|
-
id: "email",
|
|
571
|
-
type: "email",
|
|
572
|
-
value: email,
|
|
573
|
-
onChange: (e) => setEmail(e.target.value),
|
|
574
|
-
placeholder: placeholders.email || "your@email.com",
|
|
575
|
-
disabled: isLoading,
|
|
576
|
-
className: "auth-form-input",
|
|
577
|
-
required: true
|
|
578
|
-
}
|
|
579
|
-
)
|
|
580
|
-
] }),
|
|
581
|
-
/* @__PURE__ */ jsxs("div", { className: "auth-form-group", children: [
|
|
582
|
-
/* @__PURE__ */ jsx("label", { htmlFor: "password", className: "auth-form-label", children: labels.password || "Password" }),
|
|
583
|
-
/* @__PURE__ */ jsx(
|
|
584
|
-
"input",
|
|
585
|
-
{
|
|
586
|
-
id: "password",
|
|
587
|
-
type: "password",
|
|
588
|
-
value: password,
|
|
589
|
-
onChange: (e) => setPassword(e.target.value),
|
|
590
|
-
placeholder: placeholders.password || "••••••••",
|
|
591
|
-
disabled: isLoading,
|
|
592
|
-
className: "auth-form-input",
|
|
593
|
-
required: true
|
|
594
|
-
}
|
|
595
|
-
)
|
|
608
|
+
return /* @__PURE__ */ jsxs("div", { className, children: [
|
|
609
|
+
showTitle && title && /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
|
|
610
|
+
/* @__PURE__ */ jsx("h1", { className: cn(DEFAULT_CLASSES$3.title, titleClassName), children: title }),
|
|
611
|
+
subtitle && /* @__PURE__ */ jsx("p", { className: cn(DEFAULT_CLASSES$3.subtitle, subtitleClassName), children: subtitle })
|
|
596
612
|
] }),
|
|
597
|
-
/* @__PURE__ */ jsxs("
|
|
598
|
-
/* @__PURE__ */
|
|
613
|
+
/* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: cn(DEFAULT_CLASSES$3.form, formClassName), children: [
|
|
614
|
+
/* @__PURE__ */ jsxs("div", { className: cn(DEFAULT_CLASSES$3.field, fieldClassName), children: [
|
|
615
|
+
/* @__PURE__ */ jsx("label", { htmlFor: "name", className: cn(DEFAULT_CLASSES$3.label, labelClassName), children: labels.name || "Full Name" }),
|
|
616
|
+
/* @__PURE__ */ jsx(
|
|
617
|
+
"input",
|
|
618
|
+
{
|
|
619
|
+
id: "name",
|
|
620
|
+
type: "text",
|
|
621
|
+
value: name,
|
|
622
|
+
onChange: (e) => setName(e.target.value),
|
|
623
|
+
placeholder: placeholders.name || "John Doe",
|
|
624
|
+
disabled: isLoading,
|
|
625
|
+
className: cn(DEFAULT_CLASSES$3.input, inputClassName),
|
|
626
|
+
required: true
|
|
627
|
+
}
|
|
628
|
+
)
|
|
629
|
+
] }),
|
|
630
|
+
/* @__PURE__ */ jsxs("div", { className: cn(DEFAULT_CLASSES$3.field, fieldClassName), children: [
|
|
631
|
+
/* @__PURE__ */ jsx("label", { htmlFor: "email", className: cn(DEFAULT_CLASSES$3.label, labelClassName), children: labels.email || "Email" }),
|
|
632
|
+
/* @__PURE__ */ jsx(
|
|
633
|
+
"input",
|
|
634
|
+
{
|
|
635
|
+
id: "email",
|
|
636
|
+
type: "email",
|
|
637
|
+
value: email,
|
|
638
|
+
onChange: (e) => setEmail(e.target.value),
|
|
639
|
+
placeholder: placeholders.email || "your@email.com",
|
|
640
|
+
disabled: isLoading,
|
|
641
|
+
className: cn(DEFAULT_CLASSES$3.input, inputClassName),
|
|
642
|
+
required: true
|
|
643
|
+
}
|
|
644
|
+
)
|
|
645
|
+
] }),
|
|
646
|
+
/* @__PURE__ */ jsxs("div", { className: cn(DEFAULT_CLASSES$3.field, fieldClassName), children: [
|
|
647
|
+
/* @__PURE__ */ jsx("label", { htmlFor: "password", className: cn(DEFAULT_CLASSES$3.label, labelClassName), children: labels.password || "Password" }),
|
|
648
|
+
/* @__PURE__ */ jsx(
|
|
649
|
+
"input",
|
|
650
|
+
{
|
|
651
|
+
id: "password",
|
|
652
|
+
type: "password",
|
|
653
|
+
value: password,
|
|
654
|
+
onChange: (e) => setPassword(e.target.value),
|
|
655
|
+
placeholder: placeholders.password || "••••••••",
|
|
656
|
+
disabled: isLoading,
|
|
657
|
+
className: cn(DEFAULT_CLASSES$3.input, inputClassName),
|
|
658
|
+
required: true
|
|
659
|
+
}
|
|
660
|
+
)
|
|
661
|
+
] }),
|
|
662
|
+
/* @__PURE__ */ jsxs("div", { className: cn(DEFAULT_CLASSES$3.field, fieldClassName), children: [
|
|
663
|
+
/* @__PURE__ */ jsx("label", { htmlFor: "confirmPassword", className: cn(DEFAULT_CLASSES$3.label, labelClassName), children: labels.confirmPassword || "Confirm Password" }),
|
|
664
|
+
/* @__PURE__ */ jsx(
|
|
665
|
+
"input",
|
|
666
|
+
{
|
|
667
|
+
id: "confirmPassword",
|
|
668
|
+
type: "password",
|
|
669
|
+
value: confirmPassword,
|
|
670
|
+
onChange: (e) => setConfirmPassword(e.target.value),
|
|
671
|
+
placeholder: placeholders.confirmPassword || "••••••••",
|
|
672
|
+
disabled: isLoading,
|
|
673
|
+
className: cn(DEFAULT_CLASSES$3.input, inputClassName),
|
|
674
|
+
required: true
|
|
675
|
+
}
|
|
676
|
+
)
|
|
677
|
+
] }),
|
|
678
|
+
error && /* @__PURE__ */ jsx("div", { className: cn(DEFAULT_CLASSES$3.error, errorClassName), children: error }),
|
|
599
679
|
/* @__PURE__ */ jsx(
|
|
600
|
-
"
|
|
680
|
+
"button",
|
|
601
681
|
{
|
|
602
|
-
|
|
603
|
-
type: "password",
|
|
604
|
-
value: confirmPassword,
|
|
605
|
-
onChange: (e) => setConfirmPassword(e.target.value),
|
|
606
|
-
placeholder: placeholders.confirmPassword || "••••••••",
|
|
682
|
+
type: "submit",
|
|
607
683
|
disabled: isLoading,
|
|
608
|
-
className:
|
|
609
|
-
|
|
684
|
+
className: cn(DEFAULT_CLASSES$3.button, buttonClassName),
|
|
685
|
+
children: isLoading ? loadingText : submitButtonText
|
|
610
686
|
}
|
|
611
687
|
)
|
|
612
|
-
] })
|
|
613
|
-
error && /* @__PURE__ */ jsx("div", { className: "auth-form-error", children: error }),
|
|
614
|
-
/* @__PURE__ */ jsx(
|
|
615
|
-
"button",
|
|
616
|
-
{
|
|
617
|
-
type: "submit",
|
|
618
|
-
disabled: isLoading,
|
|
619
|
-
className: "auth-form-button auth-form-button-primary",
|
|
620
|
-
children: isLoading ? "Loading..." : submitButtonText
|
|
621
|
-
}
|
|
622
|
-
)
|
|
688
|
+
] })
|
|
623
689
|
] });
|
|
624
690
|
};
|
|
625
691
|
RegisterForm.displayName = "RegisterForm";
|
|
692
|
+
const DEFAULT_CLASSES$2 = {
|
|
693
|
+
form: "space-y-5",
|
|
694
|
+
field: "space-y-2",
|
|
695
|
+
label: "block text-sm font-medium text-slate-700",
|
|
696
|
+
input: "w-full rounded-xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-blue-500 focus:ring-4 focus:ring-blue-100 disabled:cursor-not-allowed disabled:bg-slate-100",
|
|
697
|
+
button: "w-full rounded-xl bg-blue-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60",
|
|
698
|
+
error: "rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600",
|
|
699
|
+
success: "rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700",
|
|
700
|
+
title: "text-2xl font-bold text-slate-900",
|
|
701
|
+
subtitle: "mt-1 text-sm text-slate-500"
|
|
702
|
+
};
|
|
626
703
|
const ForgotPasswordForm = ({
|
|
627
|
-
className
|
|
704
|
+
className,
|
|
705
|
+
formClassName,
|
|
706
|
+
fieldClassName,
|
|
707
|
+
labelClassName,
|
|
708
|
+
inputClassName,
|
|
709
|
+
buttonClassName,
|
|
710
|
+
errorClassName,
|
|
711
|
+
successClassName,
|
|
712
|
+
titleClassName,
|
|
713
|
+
subtitleClassName,
|
|
628
714
|
labels = {},
|
|
629
715
|
placeholders = {},
|
|
630
716
|
submitButtonText = "Send Reset Link",
|
|
717
|
+
loadingText = "Sending...",
|
|
718
|
+
title,
|
|
719
|
+
subtitle,
|
|
720
|
+
showTitle = !!title,
|
|
631
721
|
onSuccess,
|
|
632
722
|
onError
|
|
633
723
|
}) => {
|
|
@@ -664,44 +754,80 @@ const ForgotPasswordForm = ({
|
|
|
664
754
|
}
|
|
665
755
|
};
|
|
666
756
|
if (successMessage) {
|
|
667
|
-
return /* @__PURE__ */
|
|
757
|
+
return /* @__PURE__ */ jsxs("div", { className, children: [
|
|
758
|
+
showTitle && title && /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
|
|
759
|
+
/* @__PURE__ */ jsx("h1", { className: cn(DEFAULT_CLASSES$2.title, titleClassName), children: title }),
|
|
760
|
+
subtitle && /* @__PURE__ */ jsx("p", { className: cn(DEFAULT_CLASSES$2.subtitle, subtitleClassName), children: subtitle })
|
|
761
|
+
] }),
|
|
762
|
+
/* @__PURE__ */ jsx("div", { className: cn(DEFAULT_CLASSES$2.success, successClassName), children: /* @__PURE__ */ jsx("p", { children: successMessage }) })
|
|
763
|
+
] });
|
|
668
764
|
}
|
|
669
|
-
return /* @__PURE__ */ jsxs("
|
|
670
|
-
/* @__PURE__ */ jsxs("div", { className: "
|
|
671
|
-
/* @__PURE__ */ jsx("
|
|
765
|
+
return /* @__PURE__ */ jsxs("div", { className, children: [
|
|
766
|
+
showTitle && title && /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
|
|
767
|
+
/* @__PURE__ */ jsx("h1", { className: cn(DEFAULT_CLASSES$2.title, titleClassName), children: title }),
|
|
768
|
+
subtitle && /* @__PURE__ */ jsx("p", { className: cn(DEFAULT_CLASSES$2.subtitle, subtitleClassName), children: subtitle })
|
|
769
|
+
] }),
|
|
770
|
+
/* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: cn(DEFAULT_CLASSES$2.form, formClassName), children: [
|
|
771
|
+
/* @__PURE__ */ jsxs("div", { className: cn(DEFAULT_CLASSES$2.field, fieldClassName), children: [
|
|
772
|
+
/* @__PURE__ */ jsx("label", { htmlFor: "email", className: cn(DEFAULT_CLASSES$2.label, labelClassName), children: labels.email || "Email" }),
|
|
773
|
+
/* @__PURE__ */ jsx(
|
|
774
|
+
"input",
|
|
775
|
+
{
|
|
776
|
+
id: "email",
|
|
777
|
+
type: "email",
|
|
778
|
+
value: email,
|
|
779
|
+
onChange: (e) => setEmail(e.target.value),
|
|
780
|
+
placeholder: placeholders.email || "your@email.com",
|
|
781
|
+
disabled: isLoading,
|
|
782
|
+
className: cn(DEFAULT_CLASSES$2.input, inputClassName),
|
|
783
|
+
required: true
|
|
784
|
+
}
|
|
785
|
+
)
|
|
786
|
+
] }),
|
|
787
|
+
error && /* @__PURE__ */ jsx("div", { className: cn(DEFAULT_CLASSES$2.error, errorClassName), children: error }),
|
|
672
788
|
/* @__PURE__ */ jsx(
|
|
673
|
-
"
|
|
789
|
+
"button",
|
|
674
790
|
{
|
|
675
|
-
|
|
676
|
-
type: "email",
|
|
677
|
-
value: email,
|
|
678
|
-
onChange: (e) => setEmail(e.target.value),
|
|
679
|
-
placeholder: placeholders.email || "your@email.com",
|
|
791
|
+
type: "submit",
|
|
680
792
|
disabled: isLoading,
|
|
681
|
-
className:
|
|
682
|
-
|
|
793
|
+
className: cn(DEFAULT_CLASSES$2.button, buttonClassName),
|
|
794
|
+
children: isLoading ? loadingText : submitButtonText
|
|
683
795
|
}
|
|
684
796
|
)
|
|
685
|
-
] })
|
|
686
|
-
error && /* @__PURE__ */ jsx("div", { className: "auth-form-error", children: error }),
|
|
687
|
-
/* @__PURE__ */ jsx(
|
|
688
|
-
"button",
|
|
689
|
-
{
|
|
690
|
-
type: "submit",
|
|
691
|
-
disabled: isLoading,
|
|
692
|
-
className: "auth-form-button auth-form-button-primary",
|
|
693
|
-
children: isLoading ? "Loading..." : submitButtonText
|
|
694
|
-
}
|
|
695
|
-
)
|
|
797
|
+
] })
|
|
696
798
|
] });
|
|
697
799
|
};
|
|
698
800
|
ForgotPasswordForm.displayName = "ForgotPasswordForm";
|
|
801
|
+
const DEFAULT_CLASSES$1 = {
|
|
802
|
+
form: "space-y-5",
|
|
803
|
+
field: "space-y-2",
|
|
804
|
+
label: "block text-sm font-medium text-slate-700",
|
|
805
|
+
input: "w-full rounded-xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-blue-500 focus:ring-4 focus:ring-blue-100 disabled:cursor-not-allowed disabled:bg-slate-100",
|
|
806
|
+
button: "w-full rounded-xl bg-blue-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60",
|
|
807
|
+
error: "rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600",
|
|
808
|
+
success: "rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700",
|
|
809
|
+
title: "text-2xl font-bold text-slate-900",
|
|
810
|
+
subtitle: "mt-1 text-sm text-slate-500"
|
|
811
|
+
};
|
|
699
812
|
const ResetPasswordForm = ({
|
|
700
813
|
token,
|
|
701
|
-
className
|
|
814
|
+
className,
|
|
815
|
+
formClassName,
|
|
816
|
+
fieldClassName,
|
|
817
|
+
labelClassName,
|
|
818
|
+
inputClassName,
|
|
819
|
+
buttonClassName,
|
|
820
|
+
errorClassName,
|
|
821
|
+
successClassName,
|
|
822
|
+
titleClassName,
|
|
823
|
+
subtitleClassName,
|
|
702
824
|
labels = {},
|
|
703
825
|
placeholders = {},
|
|
704
826
|
submitButtonText = "Reset Password",
|
|
827
|
+
loadingText = "Updating...",
|
|
828
|
+
title,
|
|
829
|
+
subtitle,
|
|
830
|
+
showTitle = !!title,
|
|
705
831
|
onSuccess,
|
|
706
832
|
onError
|
|
707
833
|
}) => {
|
|
@@ -748,61 +874,97 @@ const ResetPasswordForm = ({
|
|
|
748
874
|
}
|
|
749
875
|
};
|
|
750
876
|
if (successMessage) {
|
|
751
|
-
return /* @__PURE__ */
|
|
877
|
+
return /* @__PURE__ */ jsxs("div", { className, children: [
|
|
878
|
+
showTitle && title && /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
|
|
879
|
+
/* @__PURE__ */ jsx("h1", { className: cn(DEFAULT_CLASSES$1.title, titleClassName), children: title }),
|
|
880
|
+
subtitle && /* @__PURE__ */ jsx("p", { className: cn(DEFAULT_CLASSES$1.subtitle, subtitleClassName), children: subtitle })
|
|
881
|
+
] }),
|
|
882
|
+
/* @__PURE__ */ jsx("div", { className: cn(DEFAULT_CLASSES$1.success, successClassName), children: /* @__PURE__ */ jsx("p", { children: successMessage }) })
|
|
883
|
+
] });
|
|
752
884
|
}
|
|
753
|
-
return /* @__PURE__ */ jsxs("
|
|
754
|
-
/* @__PURE__ */ jsxs("div", { className: "
|
|
755
|
-
/* @__PURE__ */ jsx("
|
|
756
|
-
/* @__PURE__ */ jsx(
|
|
757
|
-
"input",
|
|
758
|
-
{
|
|
759
|
-
id: "password",
|
|
760
|
-
type: "password",
|
|
761
|
-
value: password,
|
|
762
|
-
onChange: (e) => setPassword(e.target.value),
|
|
763
|
-
placeholder: placeholders.password || "••••••••",
|
|
764
|
-
disabled: isLoading,
|
|
765
|
-
className: "auth-form-input",
|
|
766
|
-
required: true
|
|
767
|
-
}
|
|
768
|
-
)
|
|
885
|
+
return /* @__PURE__ */ jsxs("div", { className, children: [
|
|
886
|
+
showTitle && title && /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
|
|
887
|
+
/* @__PURE__ */ jsx("h1", { className: cn(DEFAULT_CLASSES$1.title, titleClassName), children: title }),
|
|
888
|
+
subtitle && /* @__PURE__ */ jsx("p", { className: cn(DEFAULT_CLASSES$1.subtitle, subtitleClassName), children: subtitle })
|
|
769
889
|
] }),
|
|
770
|
-
/* @__PURE__ */ jsxs("
|
|
771
|
-
/* @__PURE__ */
|
|
890
|
+
/* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: cn(DEFAULT_CLASSES$1.form, formClassName), children: [
|
|
891
|
+
/* @__PURE__ */ jsxs("div", { className: cn(DEFAULT_CLASSES$1.field, fieldClassName), children: [
|
|
892
|
+
/* @__PURE__ */ jsx("label", { htmlFor: "password", className: cn(DEFAULT_CLASSES$1.label, labelClassName), children: labels.password || "New Password" }),
|
|
893
|
+
/* @__PURE__ */ jsx(
|
|
894
|
+
"input",
|
|
895
|
+
{
|
|
896
|
+
id: "password",
|
|
897
|
+
type: "password",
|
|
898
|
+
value: password,
|
|
899
|
+
onChange: (e) => setPassword(e.target.value),
|
|
900
|
+
placeholder: placeholders.password || "••••••••",
|
|
901
|
+
disabled: isLoading,
|
|
902
|
+
className: cn(DEFAULT_CLASSES$1.input, inputClassName),
|
|
903
|
+
required: true
|
|
904
|
+
}
|
|
905
|
+
)
|
|
906
|
+
] }),
|
|
907
|
+
/* @__PURE__ */ jsxs("div", { className: cn(DEFAULT_CLASSES$1.field, fieldClassName), children: [
|
|
908
|
+
/* @__PURE__ */ jsx("label", { htmlFor: "confirmPassword", className: cn(DEFAULT_CLASSES$1.label, labelClassName), children: labels.confirmPassword || "Confirm Password" }),
|
|
909
|
+
/* @__PURE__ */ jsx(
|
|
910
|
+
"input",
|
|
911
|
+
{
|
|
912
|
+
id: "confirmPassword",
|
|
913
|
+
type: "password",
|
|
914
|
+
value: confirmPassword,
|
|
915
|
+
onChange: (e) => setConfirmPassword(e.target.value),
|
|
916
|
+
placeholder: placeholders.confirmPassword || "••••••••",
|
|
917
|
+
disabled: isLoading,
|
|
918
|
+
className: cn(DEFAULT_CLASSES$1.input, inputClassName),
|
|
919
|
+
required: true
|
|
920
|
+
}
|
|
921
|
+
)
|
|
922
|
+
] }),
|
|
923
|
+
error && /* @__PURE__ */ jsx("div", { className: cn(DEFAULT_CLASSES$1.error, errorClassName), children: error }),
|
|
772
924
|
/* @__PURE__ */ jsx(
|
|
773
|
-
"
|
|
925
|
+
"button",
|
|
774
926
|
{
|
|
775
|
-
|
|
776
|
-
type: "password",
|
|
777
|
-
value: confirmPassword,
|
|
778
|
-
onChange: (e) => setConfirmPassword(e.target.value),
|
|
779
|
-
placeholder: placeholders.confirmPassword || "••••••••",
|
|
927
|
+
type: "submit",
|
|
780
928
|
disabled: isLoading,
|
|
781
|
-
className:
|
|
782
|
-
|
|
929
|
+
className: cn(DEFAULT_CLASSES$1.button, buttonClassName),
|
|
930
|
+
children: isLoading ? loadingText : submitButtonText
|
|
783
931
|
}
|
|
784
932
|
)
|
|
785
|
-
] })
|
|
786
|
-
error && /* @__PURE__ */ jsx("div", { className: "auth-form-error", children: error }),
|
|
787
|
-
/* @__PURE__ */ jsx(
|
|
788
|
-
"button",
|
|
789
|
-
{
|
|
790
|
-
type: "submit",
|
|
791
|
-
disabled: isLoading,
|
|
792
|
-
className: "auth-form-button auth-form-button-primary",
|
|
793
|
-
children: isLoading ? "Loading..." : submitButtonText
|
|
794
|
-
}
|
|
795
|
-
)
|
|
933
|
+
] })
|
|
796
934
|
] });
|
|
797
935
|
};
|
|
798
936
|
ResetPasswordForm.displayName = "ResetPasswordForm";
|
|
937
|
+
const DEFAULT_CLASSES = {
|
|
938
|
+
form: "space-y-5",
|
|
939
|
+
field: "space-y-2",
|
|
940
|
+
label: "block text-sm font-medium text-slate-700",
|
|
941
|
+
input: "w-full rounded-xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-blue-500 focus:ring-4 focus:ring-blue-100 disabled:cursor-not-allowed disabled:bg-slate-100",
|
|
942
|
+
button: "w-full rounded-xl bg-blue-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60",
|
|
943
|
+
error: "rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600",
|
|
944
|
+
success: "rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700",
|
|
945
|
+
title: "text-2xl font-bold text-slate-900",
|
|
946
|
+
subtitle: "mt-1 text-sm text-slate-500"
|
|
947
|
+
};
|
|
799
948
|
const VerifyEmailForm = ({
|
|
800
949
|
token: initialToken,
|
|
801
950
|
email: initialEmail,
|
|
802
|
-
className
|
|
951
|
+
className,
|
|
952
|
+
formClassName,
|
|
953
|
+
fieldClassName,
|
|
954
|
+
labelClassName,
|
|
955
|
+
inputClassName,
|
|
956
|
+
buttonClassName,
|
|
957
|
+
errorClassName,
|
|
958
|
+
successClassName,
|
|
959
|
+
titleClassName,
|
|
960
|
+
subtitleClassName,
|
|
803
961
|
labels = {},
|
|
804
962
|
placeholders = {},
|
|
805
963
|
submitButtonText = "Verify Email",
|
|
964
|
+
loadingText = "Verifying...",
|
|
965
|
+
title,
|
|
966
|
+
subtitle,
|
|
967
|
+
showTitle = !!title,
|
|
806
968
|
onSuccess,
|
|
807
969
|
onError
|
|
808
970
|
}) => {
|
|
@@ -849,51 +1011,63 @@ const VerifyEmailForm = ({
|
|
|
849
1011
|
}
|
|
850
1012
|
};
|
|
851
1013
|
if (successMessage) {
|
|
852
|
-
return /* @__PURE__ */
|
|
1014
|
+
return /* @__PURE__ */ jsxs("div", { className, children: [
|
|
1015
|
+
showTitle && title && /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
|
|
1016
|
+
/* @__PURE__ */ jsx("h1", { className: cn(DEFAULT_CLASSES.title, titleClassName), children: title }),
|
|
1017
|
+
subtitle && /* @__PURE__ */ jsx("p", { className: cn(DEFAULT_CLASSES.subtitle, subtitleClassName), children: subtitle })
|
|
1018
|
+
] }),
|
|
1019
|
+
/* @__PURE__ */ jsx("div", { className: cn(DEFAULT_CLASSES.success, successClassName), children: /* @__PURE__ */ jsx("p", { children: successMessage }) })
|
|
1020
|
+
] });
|
|
853
1021
|
}
|
|
854
|
-
return /* @__PURE__ */ jsxs("
|
|
855
|
-
/* @__PURE__ */ jsxs("div", { className: "
|
|
856
|
-
/* @__PURE__ */ jsx("
|
|
857
|
-
/* @__PURE__ */ jsx(
|
|
858
|
-
"input",
|
|
859
|
-
{
|
|
860
|
-
id: "email",
|
|
861
|
-
type: "email",
|
|
862
|
-
value: email,
|
|
863
|
-
onChange: (e) => setEmail(e.target.value),
|
|
864
|
-
placeholder: placeholders.email || "your@email.com",
|
|
865
|
-
disabled: isLoading,
|
|
866
|
-
className: "auth-form-input",
|
|
867
|
-
required: true
|
|
868
|
-
}
|
|
869
|
-
)
|
|
1022
|
+
return /* @__PURE__ */ jsxs("div", { className, children: [
|
|
1023
|
+
showTitle && title && /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
|
|
1024
|
+
/* @__PURE__ */ jsx("h1", { className: cn(DEFAULT_CLASSES.title, titleClassName), children: title }),
|
|
1025
|
+
subtitle && /* @__PURE__ */ jsx("p", { className: cn(DEFAULT_CLASSES.subtitle, subtitleClassName), children: subtitle })
|
|
870
1026
|
] }),
|
|
871
|
-
/* @__PURE__ */ jsxs("
|
|
872
|
-
/* @__PURE__ */
|
|
1027
|
+
/* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: cn(DEFAULT_CLASSES.form, formClassName), children: [
|
|
1028
|
+
/* @__PURE__ */ jsxs("div", { className: cn(DEFAULT_CLASSES.field, fieldClassName), children: [
|
|
1029
|
+
/* @__PURE__ */ jsx("label", { htmlFor: "email", className: cn(DEFAULT_CLASSES.label, labelClassName), children: labels.email || "Email" }),
|
|
1030
|
+
/* @__PURE__ */ jsx(
|
|
1031
|
+
"input",
|
|
1032
|
+
{
|
|
1033
|
+
id: "email",
|
|
1034
|
+
type: "email",
|
|
1035
|
+
value: email,
|
|
1036
|
+
onChange: (e) => setEmail(e.target.value),
|
|
1037
|
+
placeholder: placeholders.email || "your@email.com",
|
|
1038
|
+
disabled: isLoading,
|
|
1039
|
+
className: cn(DEFAULT_CLASSES.input, inputClassName),
|
|
1040
|
+
required: true
|
|
1041
|
+
}
|
|
1042
|
+
)
|
|
1043
|
+
] }),
|
|
1044
|
+
/* @__PURE__ */ jsxs("div", { className: cn(DEFAULT_CLASSES.field, fieldClassName), children: [
|
|
1045
|
+
/* @__PURE__ */ jsx("label", { htmlFor: "token", className: cn(DEFAULT_CLASSES.label, labelClassName), children: labels.token || "Verification Code" }),
|
|
1046
|
+
/* @__PURE__ */ jsx(
|
|
1047
|
+
"input",
|
|
1048
|
+
{
|
|
1049
|
+
id: "token",
|
|
1050
|
+
type: "text",
|
|
1051
|
+
value: token,
|
|
1052
|
+
onChange: (e) => setToken(e.target.value),
|
|
1053
|
+
placeholder: placeholders.token || "Enter verification code",
|
|
1054
|
+
disabled: isLoading,
|
|
1055
|
+
className: cn(DEFAULT_CLASSES.input, inputClassName),
|
|
1056
|
+
required: true
|
|
1057
|
+
}
|
|
1058
|
+
)
|
|
1059
|
+
] }),
|
|
1060
|
+
error && /* @__PURE__ */ jsx("div", { className: cn(DEFAULT_CLASSES.error, errorClassName), children: error }),
|
|
873
1061
|
/* @__PURE__ */ jsx(
|
|
874
|
-
"
|
|
1062
|
+
"button",
|
|
875
1063
|
{
|
|
876
|
-
|
|
877
|
-
type: "text",
|
|
878
|
-
value: token,
|
|
879
|
-
onChange: (e) => setToken(e.target.value),
|
|
880
|
-
placeholder: placeholders.token || "Enter verification code",
|
|
1064
|
+
type: "submit",
|
|
881
1065
|
disabled: isLoading,
|
|
882
|
-
className:
|
|
883
|
-
|
|
1066
|
+
className: cn(DEFAULT_CLASSES.button, buttonClassName),
|
|
1067
|
+
children: isLoading ? loadingText : submitButtonText
|
|
884
1068
|
}
|
|
885
1069
|
)
|
|
886
|
-
] })
|
|
887
|
-
error && /* @__PURE__ */ jsx("div", { className: "auth-form-error", children: error }),
|
|
888
|
-
/* @__PURE__ */ jsx(
|
|
889
|
-
"button",
|
|
890
|
-
{
|
|
891
|
-
type: "submit",
|
|
892
|
-
disabled: isLoading,
|
|
893
|
-
className: "auth-form-button auth-form-button-primary",
|
|
894
|
-
children: isLoading ? "Loading..." : submitButtonText
|
|
895
|
-
}
|
|
896
|
-
)
|
|
1070
|
+
] })
|
|
897
1071
|
] });
|
|
898
1072
|
};
|
|
899
1073
|
VerifyEmailForm.displayName = "VerifyEmailForm";
|
|
@@ -937,6 +1111,7 @@ export {
|
|
|
937
1111
|
RegisterForm,
|
|
938
1112
|
ResetPasswordForm,
|
|
939
1113
|
VerifyEmailForm,
|
|
1114
|
+
cn,
|
|
940
1115
|
createAuthClient,
|
|
941
1116
|
normalizeError,
|
|
942
1117
|
useAuth
|