cauthy-auth 0.34.0 → 0.35.1

package/dist/react.mjs

@@ -721,7 +721,7 @@ function definePolicy(given) {
 }
 
 // src/components.tsx
-import { Fragment, useCallback, useEffect, useId, useRef, useState } from "react";
+import { Fragment, useCallback, useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
 var TEXTS = {
   en: {
@@ -1087,7 +1087,38 @@ var TEXTS = {
     }
   }
 };
-var PlainButton = ({ variant: _variant, loading: _loading, ...p }) => /* @__PURE__ */ jsx("button", { ...p });
+var PlainButton = ({ variant: _variant, loading, children, ...p }) => /* @__PURE__ */ jsxs("button", { ...p, "aria-busy": loading || void 0, children: [
+  loading && /* @__PURE__ */ jsx(Spinner, {}),
+  children
+] });
+var UnstyledButton = ({ variant: _variant, loading, children, ...p }) => /* @__PURE__ */ jsxs("button", { ...p, "aria-busy": loading || void 0, children: [
+  loading && /* @__PURE__ */ jsxs(Fragment2, { children: [
+    /* @__PURE__ */ jsx(Spinner, { plain: true }),
+    " "
+  ] }),
+  children
+] });
+function Spinner({ plain }) {
+  if (!plain) return /* @__PURE__ */ jsx("span", { className: "cauthy-spinner", "aria-hidden": "true" });
+  return /* @__PURE__ */ jsx(SpinnerIcon, {});
+}
+var LESS_MOTION = "(prefers-reduced-motion: reduce)";
+function watchMotion(changed) {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {
+  };
+  const query = window.matchMedia(LESS_MOTION);
+  query.addEventListener?.("change", changed);
+  return () => query.removeEventListener?.("change", changed);
+}
+var stillHere = () => typeof window.matchMedia === "function" && window.matchMedia(LESS_MOTION).matches;
+var stillOnServer = () => true;
+function SpinnerIcon() {
+  const still = useSyncExternalStore(watchMotion, stillHere, stillOnServer);
+  return /* @__PURE__ */ jsxs("svg", { className: "cauthy-spinner-icon", width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", focusable: "false", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M14.5 8A6.5 6.5 0 0 0 8 1.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: !still && /* @__PURE__ */ jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 8 8", to: "360 8 8", dur: "0.7s", repeatCount: "indefinite" }) })
+  ] });
+}
 var PlainInput = (p) => /* @__PURE__ */ jsx("input", { ...p });
 var looks = /* @__PURE__ */ new Map();
 var loaded = /* @__PURE__ */ new Set();
@@ -1195,12 +1226,15 @@ function sameOrigin(to) {
     return void 0;
   }
 }
-function useForm(props) {
+function isPending(v) {
+  return typeof v?.then === "function";
+}
+function useForm(props, opts = {}) {
   const t = { ...TEXTS[props.locale ?? "en"], ...props.texts, errors: { ...TEXTS[props.locale ?? "en"].errors, ...props.texts?.errors } };
   const cx = (slot) => props.classNames?.[slot] ?? `cauthy-${slot}`;
   const own = (slot) => props.classNames?.[slot];
   const C = props.components ?? {};
-  const Button = C.Button ?? PlainButton;
+  const Button = C.Button ?? (props.unstyled ? UnstyledButton : PlainButton);
   const Input = C.Input ?? PlainInput;
   const [error, setOnlyError] = useState(null);
   const [problems, setProblems] = useState({ list: [], round: 0 });
@@ -1217,9 +1251,32 @@ function useForm(props) {
   const fieldError = (name) => problems.list.find((e) => e.field === name) ?? (error?.field === name ? error : null);
   const firstWrong = (name) => problems.list[0]?.field === name ? problems.round : 0;
   const [acting, setActing] = useState(null);
-  const busy = acting !== null;
+  const busy = acting !== null || opts.waiting === true;
   const setBusy = useCallback((on) => setActing(on === false ? null : on === true ? SUBMIT : on), []);
   const loading = (key = SUBMIT) => acting === key;
+  const shown = useRef(true);
+  useEffect(() => {
+    shown.current = true;
+    const back = (e) => {
+      if (e.persisted) setActing(null);
+    };
+    window.addEventListener("pageshow", back);
+    return () => {
+      shown.current = false;
+      window.removeEventListener("pageshow", back);
+    };
+  }, []);
+  const hold = (after) => {
+    if (!isPending(after)) return;
+    const free = () => {
+      if (shown.current) setActing(null);
+    };
+    after.then(free, free);
+  };
+  const fail = (e) => {
+    setActing(null);
+    setError(e);
+  };
   const [policy, setPolicy] = useState(void 0);
   const locale = props.locale ?? "en";
   const say = (e) => {
@@ -1228,15 +1285,18 @@ function useForm(props) {
   };
   const passwordRule = describePasswordPolicy(policy, locale);
   const done = (to) => {
-    if (props.onSuccess) props.onSuccess();
+    setActing((a) => a ?? SUBMIT);
+    if (props.onSuccess) hold(props.onSuccess());
     else window.location.assign(sitePath(to) ?? sameOrigin(props.returnTo) ?? "/");
   };
-  const root = useRoot(props);
-  return { t, cx, own, C, Button, Input, error, setError, check, fieldError, firstWrong, busy, setBusy, loading, say, done, root, policy, setPolicy, passwordRule };
+  const root = useRoot(opts.part ? { ...props, unstyled: true } : props);
+  const plain = props.unstyled === true;
+  return { t, cx, own, C, Button, Input, error, setError, fail, check, fieldError, firstWrong, busy, setBusy, loading, hold, say, done, root, plain, policy, setPolicy, passwordRule };
 }
 var SUBMIT = "submit";
 function Wrap(p) {
   const { Form: OwnForm } = p.f.C;
+  const busy = p.busy ?? (p.f.busy || void 0);
   if (OwnForm) {
     const own = /* @__PURE__ */ jsx(
       OwnForm,
@@ -1244,7 +1304,7 @@ function Wrap(p) {
         as: p.as === "form" ? "form" : "div",
         onSubmit: p.onSubmit,
         noValidate: p.noValidate,
-        "aria-busy": p.busy,
+        "aria-busy": busy,
         className: p.slot ? p.f.own(p.slot) : void 0,
         section: p.section,
         children: p.children
@@ -1253,7 +1313,11 @@ function Wrap(p) {
     return p.root?.["data-cauthy"] !== void 0 ? /* @__PURE__ */ jsx("div", { ...p.root, children: own }) : own;
   }
   const Tag2 = p.as;
-  return /* @__PURE__ */ jsx(Tag2, { className: p.slot ? p.f.cx(p.slot) : void 0, ...p.root, onSubmit: p.onSubmit, noValidate: p.noValidate, "aria-busy": p.busy, children: p.children });
+  const children = p.busy && p.children === void 0 ? /* @__PURE__ */ jsx(Pending, { f: p.f }) : p.children;
+  return /* @__PURE__ */ jsx(Tag2, { className: p.slot ? p.f.cx(p.slot) : void 0, ...p.root, onSubmit: p.onSubmit, noValidate: p.noValidate, "aria-busy": busy, children });
+}
+function Pending({ f }) {
+  return /* @__PURE__ */ jsx("div", { className: f.cx("pending"), children: /* @__PURE__ */ jsx(Spinner, { plain: f.plain }) });
 }
 function Note({ f, children, footer }) {
   const { Text } = f.C;
@@ -1294,10 +1358,10 @@ function Check(p) {
   const { f } = p;
   const { Checkbox } = f.C;
   if (Checkbox) {
-    return /* @__PURE__ */ jsx(Checkbox, { id, name: p.name, checked: p.checked, required: p.required, className: f.own("check"), onChange: p.onChange, children: p.children });
+    return /* @__PURE__ */ jsx(Checkbox, { id, name: p.name, checked: p.checked, required: p.required, disabled: f.busy, className: f.own("check"), onChange: p.onChange, children: p.children });
   }
   return /* @__PURE__ */ jsxs("label", { className: f.cx("check"), children: [
-    /* @__PURE__ */ jsx("input", { type: "checkbox", name: p.name, checked: p.checked, required: p.required, onChange: (e) => p.onChange(e.target.checked) }),
+    /* @__PURE__ */ jsx("input", { type: "checkbox", name: p.name, checked: p.checked, required: p.required, disabled: f.busy, onChange: (e) => p.onChange(e.target.checked) }),
     /* @__PURE__ */ jsx("span", { children: p.children })
   ] });
 }
@@ -1306,10 +1370,11 @@ function Pick(p) {
   const id = p.id ?? made;
   const { f } = p;
   const { Select } = f.C;
+  const disabled = p.disabled || f.busy;
   if (Select) {
-    return /* @__PURE__ */ jsx(Select, { id, name: p.name, value: p.value, options: p.options, disabled: p.disabled, "aria-label": p.label, className: f.own("input"), onChange: p.onChange });
+    return /* @__PURE__ */ jsx(Select, { id, name: p.name, value: p.value, options: p.options, disabled, "aria-label": p.label, className: f.own("input"), onChange: p.onChange });
   }
-  return /* @__PURE__ */ jsx("select", { id, name: p.name, "aria-label": p.label, className: f.cx("input"), value: p.value, disabled: p.disabled, onChange: (e) => p.onChange(e.target.value), children: p.options.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value)) });
+  return /* @__PURE__ */ jsx("select", { id, name: p.name, "aria-label": p.label, className: f.cx("input"), value: p.value, disabled, onChange: (e) => p.onChange(e.target.value), children: p.options.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value)) });
 }
 function Labelled({ f, id, label, children }) {
   const { Field: OwnField } = f.C;
@@ -1363,6 +1428,7 @@ function Field(p) {
       value: p.value,
       autoComplete: p.autoComplete,
       required: p.required,
+      disabled: f.busy,
       className: f.cx("input"),
       "aria-invalid": bad ? true : void 0,
       "aria-describedby": described || void 0,
@@ -1452,6 +1518,7 @@ function SecondStepForm(p) {
     if (ctl.signal.aborted) return;
     setPushNumber(0);
     if (!done.ok) return f.setError(done.error);
+    f.setBusy("push");
     f.done();
   };
   const sendCode = async () => {
@@ -1467,8 +1534,7 @@ function SecondStepForm(p) {
     f.setBusy(true);
     f.setError(null);
     const r = await auth.signIn.mfa({ code });
-    f.setBusy(false);
-    if (!r.ok) return f.setError(r.error);
+    if (!r.ok) return f.fail(r.error);
     f.done();
   };
   const general = f.error && !f.error.field ? f.error : null;
@@ -1496,7 +1562,11 @@ function SecondStepForm(p) {
 }
 function ProviderButtons(p) {
   const { f } = p;
-  return /* @__PURE__ */ jsx(Fragment2, { children: p.providers.map((provider) => /* @__PURE__ */ jsxs(f.Button, { type: "button", variant: "secondary", className: f.cx("providerButton"), onClick: () => p.onPick(provider.id), children: [
+  const pick = (id) => {
+    f.setBusy(`provider:${id}`);
+    p.onPick(id);
+  };
+  return /* @__PURE__ */ jsx(Fragment2, { children: p.providers.map((provider) => /* @__PURE__ */ jsxs(f.Button, { type: "button", variant: "secondary", loading: f.loading(`provider:${provider.id}`), disabled: f.busy, className: f.cx("providerButton"), onClick: () => pick(provider.id), children: [
     provider.iconUrl && /* @__PURE__ */ jsx("img", { src: provider.iconUrl, alt: "", width: 18, height: 18, className: f.cx("providerIcon") }),
     f.t.continueWith,
     " ",
@@ -1509,8 +1579,8 @@ function signInOffers(methods) {
 }
 function SignIn(props) {
   const auth = useAuth();
-  const f = useForm(props);
   const [methods, setMethods] = useState(null);
+  const f = useForm(props, { waiting: methods === null });
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [code, setCode] = useState("");
@@ -1582,14 +1652,16 @@ function SignIn(props) {
     f.setBusy(true);
     f.setError(null);
     const r = step === "sent" ? await auth.signIn.emailCode({ code }) : await auth.signIn.email({ email, password, captchaToken: challenge.token });
-    f.setBusy(false);
     if (step === "password") challenge.renew();
     if (!r.ok && r.error.code === "sso_required") return toCompany();
     if (!r.ok) {
       setOffer((n) => n + 1);
-      return f.setError(r.error);
+      return f.fail(r.error);
+    }
+    if (r.status === "mfa_required") {
+      f.setBusy(false);
+      return setStep("code");
     }
-    if (r.status === "mfa_required") return setStep("code");
     f.done("returnTo" in r && typeof r.returnTo === "string" ? r.returnTo : void 0);
   };
   const usePasskey = async () => {
@@ -1598,10 +1670,10 @@ function SignIn(props) {
     f.setError(null);
     const r = await auth.signIn.passkey({ returnTo: props.returnTo, locale: props.locale, email });
     if (r.ok && r.status === "redirected") return;
+    if (r.ok) return f.done();
     f.setBusy(false);
-    if (!r.ok) setOffer((n) => n + 1);
-    if (!r.ok) return r.error.code === "cancelled" ? void 0 : f.setError(r.error);
-    f.done();
+    setOffer((n) => n + 1);
+    if (r.error.code !== "cancelled") f.setError(r.error);
   };
   const sendLink = async () => {
     autofill.current?.abort();
@@ -1718,10 +1790,12 @@ function SignUp(props) {
       ...legal ? { acceptLegal, consents } : {},
       captchaToken: challenge.token
     });
-    f.setBusy(false);
     challenge.renew();
-    if (!r.ok) return f.setError(r.error);
-    if (r.status === "verification_required") return setSent(true);
+    if (!r.ok) return f.fail(r.error);
+    if (r.status === "verification_required") {
+      f.setBusy(false);
+      return setSent(true);
+    }
     f.done();
   };
   const general = f.error && !f.error.field ? f.error : null;
@@ -1884,13 +1958,16 @@ function AcceptInvite(props) {
     f.setBusy(true);
     f.setError(null);
     const r = await auth.acceptInvitation(token, password);
-    f.setBusy(false);
     if (!r.ok) {
+      f.setBusy(false);
       if (r.error.code === "invalid_token") return setState("invalid");
       return f.setError(r.error);
     }
     props.onSaved?.({ kind: "invitation.accepted", email: invitation?.email ?? "", ...invitation?.organization ? { organization: invitation.organization } : {} });
-    if (r.status === "mfa_required") return setState("code");
+    if (r.status === "mfa_required") {
+      f.setBusy(false);
+      return setState("code");
+    }
     f.done();
   };
   const general = f.error && !f.error.field ? f.error : null;
@@ -1928,10 +2005,11 @@ function PendingTerms(props) {
     f.setBusy(true);
     f.setError(null);
     const r = await auth.account.acceptLegal({ kinds: owed.map((d) => d.kind) });
+    if (!r.ok) return f.fail(r.error);
+    const after = props.onSuccess?.();
+    if (isPending(after)) await Promise.resolve(after).catch(() => void 0);
     f.setBusy(false);
-    if (!r.ok) return f.setError(r.error);
     setOwed([]);
-    props.onSuccess?.();
   };
   return /* @__PURE__ */ jsxs(Wrap, { f, as: "div", slot: "form", root: f.root, children: [
     /* @__PURE__ */ jsx(Heading, { f, children: f.t.termsChanged }),
@@ -1946,15 +2024,15 @@ function PendingTerms(props) {
 }
 var ACCOUNT_SECTIONS = ["profile", "email", "password", "linked", "secondStep", "phone", "passkeys", "agents", "sessions"];
 function useSection(props) {
-  const f = useForm({ ...props, unstyled: true });
+  const f = useForm(props, { part: true });
   const [done, setDone] = useState(null);
-  const run = async (action, key = SUBMIT) => {
+  const run = async (action, key = SUBMIT, leaves = false) => {
     f.setBusy(key);
     f.setError(null);
     setDone(null);
     const r = await action();
-    f.setBusy(false);
-    if (!r.ok) f.setError(r.error);
+    if (!r.ok) f.fail(r.error);
+    else if (!leaves) f.setBusy(false);
     return r;
   };
   const general = f.error && !f.error.field ? f.error : null;
@@ -2367,11 +2445,26 @@ function LinkedPart({ props }) {
       " ",
       /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "danger", loading: f.loading(`unlink:${x.provider}`), disabled: f.busy, className: f.cx("providerButton"), onClick: () => void unlink(x.provider), children: f.t.unlink })
     ] }, x.provider)) }),
-    offered.filter((p) => !linked.some((x) => x.provider === p.id)).map((p) => /* @__PURE__ */ jsxs(f.Button, { type: "button", variant: "secondary", className: f.cx("providerButton"), onClick: () => auth.account.link(p.id, { returnTo: here }), children: [
-      f.t.linkWith,
-      " ",
-      p.name
-    ] }, p.id))
+    offered.filter((p) => !linked.some((x) => x.provider === p.id)).map((p) => /* @__PURE__ */ jsxs(
+      f.Button,
+      {
+        type: "button",
+        variant: "secondary",
+        loading: f.loading(`link:${p.id}`),
+        disabled: f.busy,
+        className: f.cx("providerButton"),
+        onClick: () => {
+          f.setBusy(`link:${p.id}`);
+          auth.account.link(p.id, { returnTo: here });
+        },
+        children: [
+          f.t.linkWith,
+          " ",
+          p.name
+        ]
+      },
+      p.id
+    ))
   ] });
 }
 function PasswordPart({ props }) {
@@ -2529,7 +2622,7 @@ function PhonePart({ props, account, onChanged }) {
     !ways.phone && /* @__PURE__ */ jsx(Field, { f, name: "phone", type: "tel", label: f.t.phone, value: number, autoComplete: "tel", required: true, onChange: setNumber }),
     !ways.phone && ways.phoneChannels.length > 1 && f.C.Select && /* @__PURE__ */ jsx(ChannelPick, { f, value: channel, channels: ways.phoneChannels, onChange: setChannel }),
     !ways.phone && ways.phoneChannels.length > 1 && !f.C.Select && /* @__PURE__ */ jsx("div", { className: f.cx("field"), role: "radiogroup", children: ways.phoneChannels.map((c) => /* @__PURE__ */ jsxs("label", { className: f.cx("label"), children: [
-      /* @__PURE__ */ jsx("input", { type: "radio", name: "channel", value: c, checked: channel === c, onChange: () => setChannel(c) }),
+      /* @__PURE__ */ jsx("input", { type: "radio", name: "channel", value: c, checked: channel === c, disabled: f.busy, onChange: () => setChannel(c) }),
       " ",
       c === "whatsapp" ? f.t.byWhatsapp : f.t.bySms
     ] }, c)) }),
@@ -2576,10 +2669,10 @@ function SessionsPart({ props, when }) {
     void auth.account.sessions().then(setSessions);
   }, []);
   const end = async () => {
-    const r = await run(() => auth.account.signOutEverywhere());
+    const r = await run(() => auth.account.signOutEverywhere(), SUBMIT, true);
     if (!r.ok) return;
     props.onSaved?.({ kind: "sessions.ended" });
-    if (props.onSignedOut) props.onSignedOut();
+    if (props.onSignedOut) f.hold(props.onSignedOut());
     else window.location.assign("/");
   };
   return /* @__PURE__ */ jsxs(Wrap, { f, as: "section", slot: "section", section: "sessions", children: [