cauthy-auth 0.33.0 → 0.35.0

package/dist/next.d.mts

@@ -1,5 +1,5 @@
-import { C as Cauthy } from './cauthy-2jtP2LVQ.mjs';
-import { S as Session } from './system-BrrJsrFW.mjs';
+import { C as Cauthy } from './cauthy-C-GoRXy9.mjs';
+import { S as Session } from './system-DUGV040y.mjs';
 import 'jose';
 import './theme.mjs';
 

package/dist/next.d.ts

@@ -1,5 +1,5 @@
-import { C as Cauthy } from './cauthy-CKfvvv_i.js';
-import { S as Session } from './system-BvvoNs2y.js';
+import { C as Cauthy } from './cauthy-BUozWD72.js';
+import { S as Session } from './system-Bz4haPrI.js';
 import 'jose';
 import './theme.js';
 

package/dist/react.d.mts

@@ -620,7 +620,11 @@ interface OrganizationsClient {
     members(organizationId: string): Promise<OrganizationPerson[] | null>;
     /** The roles a member may be given, or null when the person may not see them. */
     roles(organizationId: string): Promise<OrganizationRoleChoice[] | null>;
-    /** Adds a person by their address; an address with no account gets one and its invitation. */
+    /**
+     * Adds a person by their address; an address with no account gets one and
+     * its invitation. It only adds: a person who already belongs keeps their
+     * role and the result is the error `member_exists` (change it with `setRole`).
+     */
     add(organizationId: string, form: {
         email: string;
         role: string;
@@ -1193,6 +1197,8 @@ interface AuthTexts {
     savePassword: string;
     passwordChanged: string;
     confirming: string;
+    /** While a form waits on what the workspace offers, or on the account it shows. */
+    loading: string;
     emailConfirmed: string;
     invitedTo: string;
     invitedToOrganization: string;
@@ -1279,7 +1285,7 @@ interface AuthTexts {
     /** By error code; one missing shows what the server said. */
     errors: Record<string, string>;
 }
-type Slot = 'form' | 'field' | 'label' | 'input' | 'button' | 'providerButton' | 'providerIcon' | 'link' | 'error' | 'fieldError' | 'hint' | 'notice' | 'separator' | 'footer' | 'check' | 'account' | 'section' | 'heading' | 'secret' | 'codes' | 'sessions' | 'session';
+type Slot = 'form' | 'field' | 'label' | 'input' | 'button' | 'providerButton' | 'providerIcon' | 'link' | 'error' | 'fieldError' | 'hint' | 'notice' | 'pending' | 'separator' | 'footer' | 'check' | 'account' | 'section' | 'heading' | 'secret' | 'codes' | 'sessions' | 'session';
 interface AuthFormProps {
     /** The language of the built-in sentences. Default: `en`. */
     locale?: 'en' | 'es';
@@ -1287,8 +1293,14 @@ interface AuthFormProps {
     texts?: Partial<Omit<AuthTexts, 'errors'>> & {
         errors?: Record<string, string>;
     };
-    /** Called once the person is signed in. Default: go to `returnTo`. */
-    onSuccess?: () => void;
+    /**
+     * Called once the person is signed in, instead of going to `returnTo`. The
+     * form stays busy (its button loading, every control disabled) until it
+     * leaves the page. When the application keeps the form on screen while it
+     * moves on (a router's navigation, loading the session), return a Promise:
+     * the form waits for it, then is free again if it is still shown.
+     */
+    onSuccess?: () => void | Promise<unknown>;
     /** Where to go after signing in, and where a provider returns to. Default: `/`. */
     returnTo?: string;
     /**
@@ -1331,7 +1343,9 @@ interface AuthFormProps {
  * other action (a provider, a passkey, a sign-in link, cancel, send again);
  * `danger` removes, leaves, deletes, disconnects or turns something off.
  * `loading` is true on the one button whose action is under way; every
- * button is `disabled` meanwhile, as before.
+ * button is `disabled` meanwhile. Draw a spinner (or the like) on the button
+ * while `loading` is true, and keep its label: after a sign-in it stays true
+ * until the page is left, so the person sees the work go on.
  */
 interface AuthButtonProps {
     type: 'submit' | 'button';
@@ -1372,6 +1386,7 @@ interface AuthInputProps {
     value: string;
     autoComplete?: string;
     required?: boolean;
+    disabled?: boolean;
     className?: string;
     'aria-invalid'?: boolean;
     'aria-describedby'?: string;
@@ -1529,8 +1544,11 @@ interface AcceptInviteProps extends AuthFormProps {
 }
 declare function AcceptInvite(props: AcceptInviteProps): react.JSX.Element;
 interface PendingTermsProps extends Omit<AuthFormProps, 'links' | 'returnTo' | 'createAccounts'> {
-    /** Called once the person accepted. Nothing else happens: the application decides what follows. */
-    onSuccess?: () => void;
+    /**
+     * Called once the person accepted. Nothing else happens: the application
+     * decides what follows. A Promise keeps the button loading until it settles.
+     */
+    onSuccess?: () => void | Promise<unknown>;
 }
 /**
  * The legal documents the signed-in person still owes (a new version of the
@@ -1583,8 +1601,8 @@ type AccountEvent = {
     kind: 'sessions.ended';
 };
 interface AccountProps extends Omit<AuthFormProps, 'links' | 'returnTo' | 'onSuccess'> {
-    /** Called after "sign out everywhere". Default: go to `/`. */
-    onSignedOut?: () => void;
+    /** Called after "sign out everywhere". Default: go to `/`. A Promise keeps the button loading until it settles. */
+    onSignedOut?: () => void | Promise<unknown>;
     /** The moment of a session, as the application writes dates. Default: the browser's own way, in the reader's time zone. */
     formatDate?: (iso: string) => string;
     /**

package/dist/react.d.ts

@@ -620,7 +620,11 @@ interface OrganizationsClient {
     members(organizationId: string): Promise<OrganizationPerson[] | null>;
     /** The roles a member may be given, or null when the person may not see them. */
     roles(organizationId: string): Promise<OrganizationRoleChoice[] | null>;
-    /** Adds a person by their address; an address with no account gets one and its invitation. */
+    /**
+     * Adds a person by their address; an address with no account gets one and
+     * its invitation. It only adds: a person who already belongs keeps their
+     * role and the result is the error `member_exists` (change it with `setRole`).
+     */
     add(organizationId: string, form: {
         email: string;
         role: string;
@@ -1193,6 +1197,8 @@ interface AuthTexts {
     savePassword: string;
     passwordChanged: string;
     confirming: string;
+    /** While a form waits on what the workspace offers, or on the account it shows. */
+    loading: string;
     emailConfirmed: string;
     invitedTo: string;
     invitedToOrganization: string;
@@ -1279,7 +1285,7 @@ interface AuthTexts {
     /** By error code; one missing shows what the server said. */
     errors: Record<string, string>;
 }
-type Slot = 'form' | 'field' | 'label' | 'input' | 'button' | 'providerButton' | 'providerIcon' | 'link' | 'error' | 'fieldError' | 'hint' | 'notice' | 'separator' | 'footer' | 'check' | 'account' | 'section' | 'heading' | 'secret' | 'codes' | 'sessions' | 'session';
+type Slot = 'form' | 'field' | 'label' | 'input' | 'button' | 'providerButton' | 'providerIcon' | 'link' | 'error' | 'fieldError' | 'hint' | 'notice' | 'pending' | 'separator' | 'footer' | 'check' | 'account' | 'section' | 'heading' | 'secret' | 'codes' | 'sessions' | 'session';
 interface AuthFormProps {
     /** The language of the built-in sentences. Default: `en`. */
     locale?: 'en' | 'es';
@@ -1287,8 +1293,14 @@ interface AuthFormProps {
     texts?: Partial<Omit<AuthTexts, 'errors'>> & {
         errors?: Record<string, string>;
     };
-    /** Called once the person is signed in. Default: go to `returnTo`. */
-    onSuccess?: () => void;
+    /**
+     * Called once the person is signed in, instead of going to `returnTo`. The
+     * form stays busy (its button loading, every control disabled) until it
+     * leaves the page. When the application keeps the form on screen while it
+     * moves on (a router's navigation, loading the session), return a Promise:
+     * the form waits for it, then is free again if it is still shown.
+     */
+    onSuccess?: () => void | Promise<unknown>;
     /** Where to go after signing in, and where a provider returns to. Default: `/`. */
     returnTo?: string;
     /**
@@ -1331,7 +1343,9 @@ interface AuthFormProps {
  * other action (a provider, a passkey, a sign-in link, cancel, send again);
  * `danger` removes, leaves, deletes, disconnects or turns something off.
  * `loading` is true on the one button whose action is under way; every
- * button is `disabled` meanwhile, as before.
+ * button is `disabled` meanwhile. Draw a spinner (or the like) on the button
+ * while `loading` is true, and keep its label: after a sign-in it stays true
+ * until the page is left, so the person sees the work go on.
  */
 interface AuthButtonProps {
     type: 'submit' | 'button';
@@ -1372,6 +1386,7 @@ interface AuthInputProps {
     value: string;
     autoComplete?: string;
     required?: boolean;
+    disabled?: boolean;
     className?: string;
     'aria-invalid'?: boolean;
     'aria-describedby'?: string;
@@ -1529,8 +1544,11 @@ interface AcceptInviteProps extends AuthFormProps {
 }
 declare function AcceptInvite(props: AcceptInviteProps): react.JSX.Element;
 interface PendingTermsProps extends Omit<AuthFormProps, 'links' | 'returnTo' | 'createAccounts'> {
-    /** Called once the person accepted. Nothing else happens: the application decides what follows. */
-    onSuccess?: () => void;
+    /**
+     * Called once the person accepted. Nothing else happens: the application
+     * decides what follows. A Promise keeps the button loading until it settles.
+     */
+    onSuccess?: () => void | Promise<unknown>;
 }
 /**
  * The legal documents the signed-in person still owes (a new version of the
@@ -1583,8 +1601,8 @@ type AccountEvent = {
     kind: 'sessions.ended';
 };
 interface AccountProps extends Omit<AuthFormProps, 'links' | 'returnTo' | 'onSuccess'> {
-    /** Called after "sign out everywhere". Default: go to `/`. */
-    onSignedOut?: () => void;
+    /** Called after "sign out everywhere". Default: go to `/`. A Promise keeps the button loading until it settles. */
+    onSignedOut?: () => void | Promise<unknown>;
     /** The moment of a session, as the application writes dates. Default: the browser's own way, in the reader's time zone. */
     formatDate?: (iso: string) => string;
     /**

package/dist/react.js

@@ -823,6 +823,7 @@ var TEXTS = {
     savePassword: "Save the password",
     passwordChanged: "Your password was changed. You can sign in with it now.",
     confirming: "Confirming your address\u2026",
+    loading: "Loading\u2026",
     emailConfirmed: "Your address is confirmed. You can sign in now.",
     invitedTo: "You've been invited to {workspace}",
     invitedToOrganization: "You've been invited to {organization} on {workspace}",
@@ -910,6 +911,7 @@ var TEXTS = {
       last_manager: "Somebody else must manage the members first: give that role to another member.",
       last_owner: "An organization keeps at least one owner: make another member owner first.",
       organization_not_found: "That organization no longer exists.",
+      member_exists: "That person already belongs to the organization; their role was not changed. Change it in the list instead.",
       already_member: "That person already belongs to the organization. Change their role instead.",
       unknown_role: "Choose one of the roles offered.",
       user_not_active: "That account is disabled.",
@@ -1003,6 +1005,7 @@ var TEXTS = {
     savePassword: "Guardar la contrase\xF1a",
     passwordChanged: "Tu contrase\xF1a se cambi\xF3. Ya puedes entrar con ella.",
     confirming: "Confirmando tu correo\u2026",
+    loading: "Cargando\u2026",
     emailConfirmed: "Tu correo qued\xF3 confirmado. Ya puedes entrar.",
     invitedTo: "Te invitaron a {workspace}",
     invitedToOrganization: "Te invitaron a {organization} en {workspace}",
@@ -1090,6 +1093,7 @@ var TEXTS = {
       last_manager: "Primero alguien m\xE1s debe administrar los miembros: dale ese rol a otro miembro.",
       last_owner: "Una organizaci\xF3n conserva al menos un propietario: primero haz propietario a otro miembro.",
       organization_not_found: "Esa organizaci\xF3n ya no existe.",
+      member_exists: "Esa persona ya pertenece a la organizaci\xF3n; su rol no cambi\xF3. C\xE1mbialo en la lista.",
       already_member: "Esa persona ya pertenece a la organizaci\xF3n. Cambia su rol.",
       unknown_role: "Escoge uno de los roles ofrecidos.",
       user_not_active: "Esa cuenta est\xE1 desactivada.",
@@ -1134,7 +1138,14 @@ var TEXTS = {
     }
   }
 };
-var PlainButton = ({ variant: _variant, loading: _loading, ...p }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { ...p });
+var PlainButton = ({ variant: _variant, loading, children, ...p }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { ...p, "aria-busy": loading || void 0, children: [
+  loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cauthy-spinner", "aria-hidden": "true" }),
+  children
+] });
+var UnstyledButton = ({ variant: _variant, loading, children, ...p }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { ...p, "aria-busy": loading || void 0, children: [
+  children,
+  loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "\u2026" })
+] });
 var PlainInput = (p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ...p });
 var looks = /* @__PURE__ */ new Map();
 var loaded = /* @__PURE__ */ new Set();
@@ -1242,12 +1253,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] = (0, import_react.useState)(null);
   const [problems, setProblems] = (0, import_react.useState)({ list: [], round: 0 });
@@ -1264,9 +1278,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] = (0, import_react.useState)(null);
-  const busy = acting !== null;
+  const busy = acting !== null || opts.waiting === true;
   const setBusy = (0, import_react.useCallback)((on) => setActing(on === false ? null : on === true ? SUBMIT : on), []);
   const loading = (key = SUBMIT) => acting === key;
+  const shown = (0, import_react.useRef)(true);
+  (0, import_react.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] = (0, import_react.useState)(void 0);
   const locale = props.locale ?? "en";
   const say = (e) => {
@@ -1275,15 +1312,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__ */ (0, import_jsx_runtime.jsx)(
       OwnForm,
@@ -1291,7 +1331,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
@@ -1300,7 +1340,16 @@ function Wrap(p) {
     return p.root?.["data-cauthy"] !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...p.root, children: own }) : own;
   }
   const Tag2 = p.as;
-  return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(Pending, { f: p.f }) : p.children;
+  return /* @__PURE__ */ (0, import_jsx_runtime.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 }) {
+  if (f.plain) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "status", children: f.t.loading });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { role: "status", className: f.cx("pending"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cauthy-spinner", "aria-hidden": "true" }),
+    " ",
+    f.t.loading
+  ] });
 }
 function Note({ f, children, footer }) {
   const { Text } = f.C;
@@ -1341,10 +1390,10 @@ function Check(p) {
   const { f } = p;
   const { Checkbox } = f.C;
   if (Checkbox) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Checkbox, { id, name: p.name, checked: p.checked, required: p.required, className: f.own("check"), onChange: p.onChange, children: p.children });
+    return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("label", { className: f.cx("check"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "checkbox", name: p.name, checked: p.checked, required: p.required, onChange: (e) => p.onChange(e.target.checked) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "checkbox", name: p.name, checked: p.checked, required: p.required, disabled: f.busy, onChange: (e) => p.onChange(e.target.checked) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: p.children })
   ] });
 }
@@ -1353,10 +1402,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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("option", { value: o.value, children: o.label }, o.value)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("option", { value: o.value, children: o.label }, o.value)) });
 }
 function Labelled({ f, id, label, children }) {
   const { Field: OwnField } = f.C;
@@ -1410,6 +1460,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,
@@ -1499,6 +1550,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 () => {
@@ -1514,8 +1566,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;
@@ -1543,7 +1594,11 @@ function SecondStepForm(p) {
 }
 function ProviderButtons(p) {
   const { f } = p;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: p.providers.map((provider) => /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: p.providers.map((provider) => /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("img", { src: provider.iconUrl, alt: "", width: 18, height: 18, className: f.cx("providerIcon") }),
     f.t.continueWith,
     " ",
@@ -1556,8 +1611,8 @@ function signInOffers(methods) {
 }
 function SignIn(props) {
   const auth = useAuth();
-  const f = useForm(props);
   const [methods, setMethods] = (0, import_react.useState)(null);
+  const f = useForm(props, { waiting: methods === null });
   const [email, setEmail] = (0, import_react.useState)("");
   const [password, setPassword] = (0, import_react.useState)("");
   const [code, setCode] = (0, import_react.useState)("");
@@ -1629,14 +1684,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 () => {
@@ -1645,10 +1702,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();
@@ -1765,10 +1822,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;
@@ -1931,13 +1990,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;
@@ -1975,10 +2037,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__ */ (0, import_jsx_runtime.jsxs)(Wrap, { f, as: "div", slot: "form", root: f.root, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Heading, { f, children: f.t.termsChanged }),
@@ -1993,15 +2056,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] = (0, import_react.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;
@@ -2414,11 +2477,26 @@ function LinkedPart({ props }) {
       " ",
       /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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 }) {
@@ -2576,7 +2654,7 @@ function PhonePart({ props, account, onChanged }) {
     !ways.phone && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(ChannelPick, { f, value: channel, channels: ways.phoneChannels, onChange: setChannel }),
     !ways.phone && ways.phoneChannels.length > 1 && !f.C.Select && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: f.cx("field"), role: "radiogroup", children: ways.phoneChannels.map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: f.cx("label"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "radio", name: "channel", value: c, checked: channel === c, onChange: () => setChannel(c) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.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)) }),
@@ -2623,10 +2701,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__ */ (0, import_jsx_runtime.jsxs)(Wrap, { f, as: "section", slot: "section", section: "sessions", children: [