@better-auth-ui/heroui 1.6.3 → 1.6.5

package/dist/components/auth/settings/settings.js

@@ -0,0 +1,45 @@
+import { AccountSettings as e } from "./account/account-settings.js";
+import { SecuritySettings as t } from "./security/security-settings.js";
+import { useAuth as n, useAuthenticate as r } from "@better-auth-ui/react";
+import { Tabs as i, cn as a } from "@heroui/react";
+import { useMemo as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/auth/settings/settings.tsx
+function l({ className: l, hideNav: u, path: d, variant: f, view: p, ...m }) {
+	let { authClient: h, basePaths: g, localization: _, viewPaths: v } = n();
+	if (r(h), !p && !d) throw Error("[Better Auth UI] Either `view` or `path` must be provided");
+	let y = o(() => Object.fromEntries(Object.entries(v.settings).map(([e, t]) => [t, e])), [v.settings]), b = p || (d ? y[d] : void 0);
+	return /* @__PURE__ */ c(i, {
+		className: a(l),
+		orientation: "horizontal",
+		selectedKey: b,
+		...m,
+		children: [
+			/* @__PURE__ */ s(i.ListContainer, { children: /* @__PURE__ */ c(i.List, {
+				"aria-label": _.settings.settings,
+				className: "overflow-auto w-fit",
+				children: [/* @__PURE__ */ c(i.Tab, {
+					id: "account",
+					href: `${g.settings}/${v.settings.account}`,
+					children: [_.settings.account, /* @__PURE__ */ s(i.Indicator, {})]
+				}), /* @__PURE__ */ c(i.Tab, {
+					id: "security",
+					href: `${g.settings}/${v.settings.security}`,
+					children: [_.settings.security, /* @__PURE__ */ s(i.Indicator, {})]
+				})]
+			}) }),
+			/* @__PURE__ */ s(i.Panel, {
+				id: "account",
+				className: "px-0",
+				children: /* @__PURE__ */ s(e, { variant: f })
+			}),
+			/* @__PURE__ */ s(i.Panel, {
+				id: "security",
+				className: "px-0",
+				children: /* @__PURE__ */ s(t, { variant: f })
+			})
+		]
+	});
+}
+//#endregion
+export { l as Settings };

package/dist/components/auth/sign-in.js

@@ -1,144 +1,125 @@
 import { FieldSeparator as e } from "./field-separator.js";
-import { MagicLinkButton as t } from "./magic-link-button.js";
-import { PasskeyButton as n } from "./passkey-button.js";
-import { ProviderButtons as r } from "./provider-buttons.js";
-import { useAuth as i, useSendVerificationEmail as a, useSignInEmail as o, useSignInUsername as s } from "@better-auth-ui/react";
-import { Button as c, Card as l, Checkbox as u, Description as d, FieldError as f, Form as p, Input as m, Label as h, Link as g, Spinner as _, TextField as v, cn as y, toast as b } from "@heroui/react";
+import { ProviderButtons as t } from "./provider-buttons.js";
+import { authMutationKeys as n } from "@better-auth-ui/core";
+import { useAuth as r, useFetchOptions as i, useSendVerificationEmail as a, useSignInEmail as o } from "@better-auth-ui/react";
+import { Button as s, Card as c, Checkbox as l, Description as u, FieldError as d, Form as f, Input as p, Label as m, Link as h, Spinner as g, TextField as _, cn as v, toast as y } from "@heroui/react";
+import { useState as b } from "react";
 import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
-import { useState as w } from "react";
+import { useIsMutating as w } from "@tanstack/react-query";
 //#region src/components/auth/sign-in.tsx
-function T(e) {
-	return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
-}
-function E({ className: E, socialLayout: D, socialPosition: O = "bottom", variant: k, ...A }) {
-	let { basePaths: j, baseURL: M, emailAndPassword: N, localization: P, magicLink: F, passkey: I, redirectTo: L, socialProviders: R, username: z, viewPaths: B, navigate: V } = i(), [H, U] = w(""), { mutate: W } = a({ onSuccess: () => b.success(P.auth.verificationEmailSent) }), { mutate: G, isPending: K } = o({
+function T({ className: T, socialLayout: E, socialPosition: D = "bottom", variant: O, ...k }) {
+	let { authClient: A, basePaths: j, baseURL: M, emailAndPassword: N, localization: P, plugins: F, redirectTo: I, socialProviders: L, viewPaths: R, navigate: z } = r(), { fetchOptions: B, resetFetchOptions: V } = i(), [H, U] = b(""), { mutate: W } = a(A, { onSuccess: () => y.success(P.auth.verificationEmailSent) }), { mutate: G, isPending: K } = o(A, {
 		onError: (e, { email: t }) => {
-			U(""), e.error?.code === "EMAIL_NOT_VERIFIED" ? b.danger(e.error?.message || e.message, { actionProps: {
+			U(""), e.error?.code === "EMAIL_NOT_VERIFIED" ? y.danger(e.error?.message || e.message, { actionProps: {
 				children: P.auth.resend,
 				onClick: () => W({
 					email: t,
-					callbackURL: `${M}${L}`
+					callbackURL: `${M}${I}`
 				})
-			} }) : b.danger(e.error?.message || e.message);
-		},
-		onSuccess: () => V({ to: L })
-	}), { mutate: q, isPending: J } = s({
-		onError: (e) => {
-			U(""), b.danger(e.error?.message || e.message);
+			} }) : y.danger(e.error?.message || e.message), V();
 		},
-		onSuccess: () => V({ to: L })
-	}), Y = (e) => {
+		onSuccess: () => z({ to: I })
+	}), q = (e) => {
 		e.preventDefault();
 		let t = new FormData(e.currentTarget), n = t.get("email"), r = t.get("rememberMe") === "on";
-		z?.enabled && !T(n) ? q({
-			username: n,
-			password: H
-		}) : G({
+		G({
 			email: n,
 			password: H,
-			...N?.rememberMe ? { rememberMe: r } : {}
+			...N?.rememberMe ? { rememberMe: r } : {},
+			fetchOptions: B
 		});
-	}, X = K || J, Z = N?.enabled && !!R?.length;
-	return /* @__PURE__ */ C(l, {
-		className: y("w-full max-w-sm gap-4 md:p-6", E),
-		variant: k,
-		...A,
+	}, J = w({ mutationKey: n.signIn.all }) + w({ mutationKey: n.signUp.all }) > 0, Y = F.find((e) => e.captchaComponent)?.captchaComponent, X = N?.enabled && !!L?.length;
+	return /* @__PURE__ */ C(c, {
+		className: v("w-full max-w-sm gap-4 md:p-6", T),
+		variant: O,
+		...k,
 		children: [
-			/* @__PURE__ */ S(l.Header, { children: /* @__PURE__ */ S(l.Title, {
+			/* @__PURE__ */ S(c.Header, { children: /* @__PURE__ */ S(c.Title, {
 				className: "text-xl font-semibold mb-1",
 				children: P.auth.signIn
 			}) }),
-			/* @__PURE__ */ C(l.Content, {
+			/* @__PURE__ */ C(c.Content, {
 				className: "gap-4",
 				children: [
-					O === "top" && /* @__PURE__ */ C(x, { children: [!!R?.length && /* @__PURE__ */ S(r, {
-						socialLayout: D,
-						isPending: X
-					}), Z && /* @__PURE__ */ S(e, { children: P.auth.or })] }),
-					N?.enabled && /* @__PURE__ */ C(p, {
-						onSubmit: Y,
+					D === "top" && /* @__PURE__ */ C(x, { children: [!!L?.length && /* @__PURE__ */ S(t, { socialLayout: E }), X && /* @__PURE__ */ S(e, { children: P.auth.or })] }),
+					N?.enabled && /* @__PURE__ */ C(f, {
+						onSubmit: q,
 						className: "flex flex-col gap-4",
 						children: [
-							/* @__PURE__ */ C(v, {
+							/* @__PURE__ */ C(_, {
 								name: "email",
-								type: z?.enabled ? "text" : "email",
-								autoComplete: z?.enabled ? "username" : "email",
-								isDisabled: X,
+								type: "email",
+								autoComplete: "email",
+								isDisabled: J,
 								children: [
-									/* @__PURE__ */ S(h, { children: z?.enabled ? P.auth.username : P.auth.email }),
-									/* @__PURE__ */ S(m, {
-										placeholder: z?.enabled ? P.auth.usernameOrEmailPlaceholder : P.auth.emailPlaceholder,
-										variant: k === "transparent" ? "primary" : "secondary",
+									/* @__PURE__ */ S(m, { children: P.auth.email }),
+									/* @__PURE__ */ S(p, {
+										placeholder: P.auth.emailPlaceholder,
+										variant: O === "transparent" ? "primary" : "secondary",
 										required: !0
 									}),
-									/* @__PURE__ */ S(f, {})
+									/* @__PURE__ */ S(d, {})
 								]
 							}),
-							/* @__PURE__ */ C(v, {
+							/* @__PURE__ */ C(_, {
 								minLength: N?.minPasswordLength,
 								maxLength: N?.maxPasswordLength,
 								name: "password",
 								type: "password",
 								autoComplete: "current-password",
-								isDisabled: X,
+								isDisabled: J,
 								value: H,
 								onChange: U,
 								children: [
-									/* @__PURE__ */ S(h, { children: P.auth.password }),
-									/* @__PURE__ */ S(m, {
+									/* @__PURE__ */ S(m, { children: P.auth.password }),
+									/* @__PURE__ */ S(p, {
 										placeholder: P.auth.passwordPlaceholder,
-										variant: k === "transparent" ? "primary" : "secondary",
+										variant: O === "transparent" ? "primary" : "secondary",
 										required: !0
 									}),
-									/* @__PURE__ */ S(f, {})
+									/* @__PURE__ */ S(d, {})
 								]
 							}),
-							N?.rememberMe && /* @__PURE__ */ C(u, {
+							N?.rememberMe && /* @__PURE__ */ C(l, {
 								name: "rememberMe",
-								isDisabled: X,
-								variant: k === "transparent" ? "primary" : "secondary",
-								children: [/* @__PURE__ */ S(u.Control, { children: /* @__PURE__ */ S(u.Indicator, {}) }), /* @__PURE__ */ S(u.Content, { children: /* @__PURE__ */ S(h, { children: P.auth.rememberMe }) })]
+								isDisabled: J,
+								variant: O === "transparent" ? "primary" : "secondary",
+								children: [/* @__PURE__ */ S(l.Control, { children: /* @__PURE__ */ S(l.Indicator, {}) }), /* @__PURE__ */ S(l.Content, { children: /* @__PURE__ */ S(m, { children: P.auth.rememberMe }) })]
+							}),
+							Y && /* @__PURE__ */ S("div", {
+								className: "flex justify-center",
+								children: Y
 							}),
 							/* @__PURE__ */ C("div", {
 								className: "flex flex-col gap-3",
-								children: [
-									/* @__PURE__ */ C(c, {
-										type: "submit",
-										className: "w-full",
-										isPending: X,
-										children: [X && /* @__PURE__ */ S(_, {
-											color: "current",
-											size: "sm"
-										}), P.auth.signIn]
-									}),
-									F && /* @__PURE__ */ S(t, {
-										view: "signIn",
-										isPending: X
-									}),
-									I && /* @__PURE__ */ S(n, { isPending: X })
-								]
+								children: [/* @__PURE__ */ C(s, {
+									type: "submit",
+									className: "w-full",
+									isPending: J,
+									children: [K && /* @__PURE__ */ S(g, {
+										color: "current",
+										size: "sm"
+									}), P.auth.signIn]
+								}), F.flatMap((e) => e.authButtons?.map((t, n) => /* @__PURE__ */ S(t, { view: "signIn" }, `${e.id}-${n.toString()}`)))]
 							})
 						]
 					}),
-					O === "bottom" && /* @__PURE__ */ C(x, { children: [Z && /* @__PURE__ */ S(e, { children: P.auth.or }), !!R?.length && /* @__PURE__ */ S(r, {
-						socialLayout: D,
-						isPending: X
-					})] })
+					D === "bottom" && /* @__PURE__ */ C(x, { children: [X && /* @__PURE__ */ S(e, { children: P.auth.or }), !!L?.length && /* @__PURE__ */ S(t, { socialLayout: E })] })
 				]
 			}),
-			/* @__PURE__ */ C(l.Footer, {
+			/* @__PURE__ */ C(c.Footer, {
 				className: "flex-col gap-3",
-				children: [N?.forgotPassword && /* @__PURE__ */ S(g, {
-					href: `${j.auth}/${B.auth.forgotPassword}`,
+				children: [N?.forgotPassword && /* @__PURE__ */ S(h, {
+					href: `${j.auth}/${R.auth.forgotPassword}`,
 					className: "no-underline hover:underline",
 					children: P.auth.forgotPasswordLink
-				}), N?.enabled && /* @__PURE__ */ C(d, {
+				}), N?.enabled && /* @__PURE__ */ C(u, {
 					className: "text-sm",
 					children: [
 						P.auth.needToCreateAnAccount,
 						" ",
-						/* @__PURE__ */ S(g, {
-							href: `${j.auth}/${B.auth.signUp}`,
+						/* @__PURE__ */ S(h, {
+							href: `${j.auth}/${R.auth.signUp}`,
 							className: "text-accent no-underline hover:underline decoration-accent-hover",
 							children: P.auth.signUp
 						})
@@ -149,4 +130,4 @@ function E({ className: E, socialLayout: D, socialPosition: O = "bottom", varian
 	});
 }
 //#endregion
-export { E as SignIn };
+export { T as SignIn };

package/dist/components/auth/sign-out.js

@@ -1,24 +1,24 @@
 import { useAuth as e, useSignOut as t } from "@better-auth-ui/react";
 import { Spinner as n, cn as r, toast as i } from "@heroui/react";
-import { jsx as a } from "react/jsx-runtime";
-import { useEffect as o, useRef as s } from "react";
+import { useEffect as a, useRef as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
 //#region src/components/auth/sign-out.tsx
 function c({ className: c }) {
-	let { basePaths: l, navigate: u, viewPaths: d } = e(), { mutate: f } = t({
+	let { authClient: l, basePaths: u, navigate: d, viewPaths: f } = e(), { mutate: p } = t(l, {
 		onError: (e) => {
-			i.danger(e.error?.message || e.message), u({
-				to: `${l.auth}/${d.auth.signIn}`,
+			i.danger(e.error?.message || e.message), d({
+				to: `${u.auth}/${f.auth.signIn}`,
 				replace: !0
 			});
 		},
-		onSuccess: () => u({
-			to: `${l.auth}/${d.auth.signIn}`,
+		onSuccess: () => d({
+			to: `${u.auth}/${f.auth.signIn}`,
 			replace: !0
 		})
-	}), p = s(!1);
-	return o(() => {
-		p.current || (p.current = !0, f());
-	}, [f]), /* @__PURE__ */ a(n, {
+	}), m = o(!1);
+	return a(() => {
+		m.current || (m.current = !0, p());
+	}, [p]), /* @__PURE__ */ s(n, {
 		className: r("mx-auto my-auto", c),
 		color: "current"
 	});