cauthy-auth 0.36.1 → 0.38.0

package/dist/react.mjs

@@ -796,11 +796,19 @@ var TEXTS = {
     secondStepOff: "Off: signing in asks only for your password.",
     turnOn: "Turn on",
     turnOff: "Turn off",
-    addToApp: "Add this key to your authenticator app, then enter the code it shows.",
+    addToApp: "Scan this code with your authenticator app, or add the key below by hand, then enter the code it shows.",
     openInApp: "Open in an authenticator app",
+    qrAlt: "QR code to add this account to an authenticator app",
     recoveryCodes: "Recovery codes",
     newRecoveryCodes: "New recovery codes",
     keepCodes: "Keep these codes somewhere safe. Each works once, and they are not shown again.",
+    copyCodes: "Copy all",
+    downloadCodes: "Download .txt",
+    codesCopied: "The codes were copied.",
+    codesNotCopied: "The codes could not be copied. Select them and copy them by hand.",
+    change: "Change",
+    passwordSet: "Your account has a password.",
+    addAnotherPasskey: "Add a passkey",
     passkeys: "Passkeys",
     managePasskeys: "Add or remove a passkey",
     passkeysHelp: "Sign in with your fingerprint, your face or your device's lock, without a password.",
@@ -980,11 +988,19 @@ var TEXTS = {
     secondStepOff: "Inactivo: al entrar solo se pide tu contrase\xF1a.",
     turnOn: "Activar",
     turnOff: "Desactivar",
-    addToApp: "Agrega esta clave a tu aplicaci\xF3n de autenticaci\xF3n y escribe el c\xF3digo que muestra.",
+    addToApp: "Escanea este c\xF3digo con tu aplicaci\xF3n de autenticaci\xF3n, o agrega a mano la clave de abajo, y escribe el c\xF3digo que muestra.",
     openInApp: "Abrir en una aplicaci\xF3n de autenticaci\xF3n",
+    qrAlt: "C\xF3digo QR para agregar esta cuenta a una aplicaci\xF3n de autenticaci\xF3n",
     recoveryCodes: "C\xF3digos de recuperaci\xF3n",
     newRecoveryCodes: "Nuevos c\xF3digos de recuperaci\xF3n",
     keepCodes: "Guarda estos c\xF3digos en un lugar seguro. Cada uno sirve una vez y no se vuelven a mostrar.",
+    copyCodes: "Copiar todos",
+    downloadCodes: "Descargar .txt",
+    codesCopied: "Los c\xF3digos quedaron copiados.",
+    codesNotCopied: "No se pudieron copiar los c\xF3digos. Selecci\xF3nalos y c\xF3pialos a mano.",
+    change: "Cambiar",
+    passwordSet: "Tu cuenta tiene contrase\xF1a.",
+    addAnotherPasskey: "Agregar una llave de acceso",
     passkeys: "Llaves de acceso",
     managePasskeys: "Agregar o quitar una llave de acceso",
     passkeysHelp: "Entra con tu huella, tu rostro o el bloqueo de tu dispositivo, sin contrase\xF1a.",
@@ -2160,6 +2176,8 @@ function OrganizationMembers(props) {
   const [role, setRole] = useState("");
   const [name, setName] = useState("");
   const [asking, setAsking] = useState(null);
+  const [adding, setAdding] = useState(false);
+  const [renamingOpen, setRenamingOpen] = useState(false);
   const [gone, setGone] = useState(null);
   const id = props.organizationId;
   const when = props.formatDate ?? ((iso) => new Date(iso).toLocaleDateString());
@@ -2194,6 +2212,7 @@ function OrganizationMembers(props) {
     const r = await run(() => auth.organizations.add(id, { email, role, locale: props.locale }), "add");
     if (!r.ok) return;
     setEmail("");
+    setAdding(false);
     setDone(f.t.memberAdded.replace("{email}", r.member.email));
     saved({ kind: "member.added", organizationId: id, userId: r.member.userId, email: r.member.email, role: r.member.role || role });
     await load();
@@ -2224,6 +2243,7 @@ function OrganizationMembers(props) {
     if (!r.ok) return;
     setSeat(r.organization);
     setName(r.organization.name);
+    setRenamingOpen(false);
     setDone(f.t.organizationRenamed.replace("{name}", r.organization.name));
     saved({ kind: "organization.renamed", organizationId: id, name: r.organization.name });
   };
@@ -2253,6 +2273,24 @@ function OrganizationMembers(props) {
   const archiving = seat.can.archive && !hidden("archive");
   const deleting = seat.can.delete && !hidden("delete");
   const renaming = seat.can.update && !hidden("rename");
+  const alone = members !== null && members.every((m) => m.you);
+  const addOpen = adding || alone;
+  const open = (form) => {
+    setDone(null);
+    f.setError(null);
+    if (form === "add") setAdding(true);
+    else setRenamingOpen(true);
+  };
+  const cancelAdd = () => {
+    setEmail("");
+    f.setError(null);
+    setAdding(false);
+  };
+  const cancelRename = () => {
+    setName(seat.name);
+    f.setError(null);
+    setRenamingOpen(false);
+  };
   return /* @__PURE__ */ jsxs(Wrap, { f, as: "div", slot: "account", root, children: [
     /* @__PURE__ */ jsxs(Wrap, { f, as: "section", slot: "section", section: "members", children: [
       /* @__PURE__ */ jsxs(Heading, { f, children: [
@@ -2316,18 +2354,23 @@ function OrganizationMembers(props) {
       }) }),
       done && /* @__PURE__ */ jsx(Say, { f, tone: "success", children: done })
     ] }),
-    manage && giveable.length > 0 && /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "section", section: "add-member", onSubmit: add, noValidate: true, children: [
+    manage && giveable.length > 0 && (addOpen ? /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "section", section: "add-member", onSubmit: add, noValidate: true, children: [
       /* @__PURE__ */ jsx(Heading, { f, children: f.t.memberAdd }),
       /* @__PURE__ */ jsx(Field, { f, name: "email", type: "email", label: f.t.email, value: email, autoComplete: "off", required: true, onChange: setEmail }),
       /* @__PURE__ */ jsx(AddRole, { f, value: role, options: giveable.map((c) => ({ value: c.role, label: roleName(c) })), onChange: setRole }),
-      /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "primary", loading: f.loading("add"), disabled: f.busy, className: f.cx("button"), children: f.t.memberAdd })
-    ] }),
+      /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "primary", loading: f.loading("add"), disabled: f.busy, className: f.cx("button"), children: f.t.memberAdd }),
+      !alone && /* @__PURE__ */ jsx(Cancel, { f, onClick: cancelAdd })
+    ] }) : /* @__PURE__ */ jsx(Wrap, { f, as: "div", slot: "section", section: "add-member", children: /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "secondary", disabled: f.busy, className: f.cx("providerButton"), onClick: () => open("add"), children: f.t.memberAdd }) })),
     (renaming || archiving || deleting) && /* @__PURE__ */ jsxs(Wrap, { f, as: "section", slot: "section", section: "organization", children: [
       /* @__PURE__ */ jsx(Heading, { f, children: f.t.organization }),
-      renaming && /* @__PURE__ */ jsxs(Wrap, { f, as: "form", section: "rename", onSubmit: rename, noValidate: true, children: [
+      renaming && (renamingOpen ? /* @__PURE__ */ jsxs(Wrap, { f, as: "form", section: "rename", onSubmit: rename, noValidate: true, children: [
         /* @__PURE__ */ jsx(Field, { f, name: "name", type: "text", label: f.t.name, value: name, autoComplete: "organization", required: true, onChange: setName }),
-        /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "primary", loading: f.loading("rename"), disabled: f.busy, className: f.cx("button"), children: f.t.organizationRename })
-      ] }),
+        /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "primary", loading: f.loading("rename"), disabled: f.busy, className: f.cx("button"), children: f.t.organizationRename }),
+        /* @__PURE__ */ jsx(Cancel, { f, onClick: cancelRename })
+      ] }) : /* @__PURE__ */ jsxs(Fragment2, { children: [
+        /* @__PURE__ */ jsx(Note, { f, children: seat.name }),
+        /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "secondary", disabled: f.busy, className: f.cx("providerButton"), onClick: () => open("rename"), children: f.t.organizationRename })
+      ] })),
       asking === "archive" ? confirming(archiveQuestion, f.t.organizationArchive, () => void close("archive")) : asking === "delete" ? confirming(deleteQuestion, f.t.organizationDelete, () => void close("delete")) : /* @__PURE__ */ jsxs(Fragment2, { children: [
         archiving && /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "danger", loading: f.loading("archive"), disabled: f.busy, className: f.cx("providerButton"), onClick: () => ask("archive", f.t.organizationArchive, archiveQuestion, () => void close("archive")), children: f.t.organizationArchive }),
         deleting && /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "danger", loading: f.loading("delete"), disabled: f.busy, className: f.cx("providerButton"), onClick: () => ask("delete", f.t.organizationDelete, deleteQuestion, () => void close("delete")), children: f.t.organizationDelete })
@@ -2346,6 +2389,7 @@ function PasskeysPart({ props, account, accountUrl, when }) {
   const [list, setList] = useState([]);
   const [name, setName] = useState("");
   const [password, setPassword] = useState("");
+  const [adding, setAdding] = useState(false);
   useEffect(() => {
     void auth.methods().then((m) => {
       const can2 = m.passkeyHere && canUsePasskeys();
@@ -2371,6 +2415,7 @@ function PasskeysPart({ props, account, accountUrl, when }) {
     setList([...list, r.passkey]);
     setName("");
     setPassword("");
+    setAdding(false);
     setDone(f.t.passkeyAdded);
     props.onSaved?.({ kind: "passkey.added", id: r.passkey.id });
   };
@@ -2380,43 +2425,123 @@ function PasskeysPart({ props, account, accountUrl, when }) {
     setList(list.filter((p) => p.id !== id));
     props.onSaved?.({ kind: "passkey.removed", id });
   };
+  const cancel = () => {
+    setName("");
+    setPassword("");
+    f.setError(null);
+    setAdding(false);
+  };
+  const listed = list.length === 0 ? /* @__PURE__ */ jsx(Note, { f, children: f.t.noPasskeys }) : /* @__PURE__ */ jsx("ul", { className: f.cx("sessions"), children: list.map((p) => /* @__PURE__ */ jsxs("li", { className: f.cx("session"), children: [
+    p.name || f.t.passkeyUnnamed,
+    p.kind !== "unknown" && /* @__PURE__ */ jsx(Tag, { f, plain: ` \xB7 ${f.t.passkeyKinds[p.kind]}`, children: f.t.passkeyKinds[p.kind] }),
+    " \xB7 ",
+    when(p.createdAt),
+    " ",
+    /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "danger", loading: f.loading(`remove:${p.id}`), disabled: f.busy, className: f.cx("providerButton"), onClick: () => void remove(p.id), children: f.t.removePasskey })
+  ] }, p.id)) });
+  if (list.length > 0 && !adding) {
+    return /* @__PURE__ */ jsxs(Wrap, { f, as: "div", slot: "section", section: "passkeys", children: [
+      /* @__PURE__ */ jsx(Heading, { f, children: f.t.passkeys }),
+      /* @__PURE__ */ jsx(Note, { f, children: f.t.passkeysHelp }),
+      general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
+      listed,
+      /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "secondary", disabled: f.busy, className: f.cx("providerButton"), onClick: () => {
+        setDone(null);
+        f.setError(null);
+        setAdding(true);
+      }, children: f.t.addAnotherPasskey }),
+      done && /* @__PURE__ */ jsx(Say, { f, tone: "success", children: done })
+    ] });
+  }
   return /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "section", section: "passkeys", onSubmit: add, noValidate: true, children: [
     /* @__PURE__ */ jsx(Heading, { f, children: f.t.passkeys }),
     /* @__PURE__ */ jsx(Note, { f, children: f.t.passkeysHelp }),
     general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
-    list.length === 0 ? /* @__PURE__ */ jsx(Note, { f, children: f.t.noPasskeys }) : /* @__PURE__ */ jsx("ul", { className: f.cx("sessions"), children: list.map((p) => /* @__PURE__ */ jsxs("li", { className: f.cx("session"), children: [
-      p.name || f.t.passkeyUnnamed,
-      p.kind !== "unknown" && /* @__PURE__ */ jsx(Tag, { f, plain: ` \xB7 ${f.t.passkeyKinds[p.kind]}`, children: f.t.passkeyKinds[p.kind] }),
-      " \xB7 ",
-      when(p.createdAt),
-      " ",
-      /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "danger", loading: f.loading(`remove:${p.id}`), disabled: f.busy, className: f.cx("providerButton"), onClick: () => void remove(p.id), children: f.t.removePasskey })
-    ] }, p.id)) }),
+    listed,
     /* @__PURE__ */ jsx(Field, { f, name: "name", type: "text", label: f.t.passkeyName, value: name, autoComplete: "off", onChange: setName }),
     account.hasPassword && /* @__PURE__ */ jsx(Field, { f, name: "password", type: "password", label: f.t.currentPassword, value: password, autoComplete: "current-password", required: true, onChange: setPassword }),
     /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "primary", loading: f.loading(), disabled: f.busy, className: f.cx("button"), children: f.t.addPasskeyDevice }),
     /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "secondary", loading: f.loading("security_key"), disabled: f.busy, className: f.cx("providerButton"), onClick: () => void add(null, "security_key"), children: f.t.addSecurityKey }),
+    list.length > 0 && /* @__PURE__ */ jsx(Cancel, { f, onClick: cancel }),
     done && /* @__PURE__ */ jsx(Say, { f, tone: "success", children: done })
   ] });
 }
+function Cancel({ f, onClick }) {
+  return /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "secondary", disabled: f.busy, className: f.cx("providerButton"), onClick, children: f.t.cancel });
+}
+function RecoveryCodes({ f, codes }) {
+  const [copied, setCopied] = useState(null);
+  useEffect(() => setCopied(null), [codes]);
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(codes.join("\n"));
+      setCopied(true);
+    } catch {
+      setCopied(false);
+    }
+  };
+  const download = () => {
+    const file = new Blob([`${f.t.recoveryCodes}
+
+${codes.join("\n")}
+`], { type: "text/plain;charset=utf-8" });
+    const url = URL.createObjectURL(file);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "recovery-codes.txt";
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 0);
+  };
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    /* @__PURE__ */ jsx(Note, { f, children: f.t.keepCodes }),
+    /* @__PURE__ */ jsx("ul", { className: f.cx("codes"), children: codes.map((c) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("code", { children: c }) }, c)) }),
+    /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "secondary", className: f.cx("providerButton"), onClick: () => void copy(), children: f.t.copyCodes }),
+    /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "secondary", className: f.cx("providerButton"), onClick: download, children: f.t.downloadCodes }),
+    copied === true && /* @__PURE__ */ jsx(Say, { f, tone: "success", children: f.t.codesCopied }),
+    copied === false && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.t.codesNotCopied })
+  ] });
+}
 function ProfilePart({ props, account, onSaved }) {
   const auth = useAuth();
   const { f, done, setDone, run, general } = useSection(props);
   const [name, setName] = useState(account.name);
+  const [editing, setEditing] = useState(account.name.trim() === "");
   const submit = async (e) => {
     e.preventDefault();
     const r = await run(() => auth.account.update({ name }));
     if (!r.ok) return;
     onSaved(r.account);
+    setName(r.account.name);
+    setEditing(r.account.name.trim() === "");
     setDone(f.t.saved);
     props.onSaved?.({ kind: "profile.saved", name: r.account.name });
   };
+  const cancel = () => {
+    setName(account.name);
+    f.setError(null);
+    setEditing(false);
+  };
+  if (!editing) {
+    return /* @__PURE__ */ jsxs(Wrap, { f, as: "div", slot: "section", section: "profile", children: [
+      /* @__PURE__ */ jsx(Heading, { f, children: f.t.profile }),
+      /* @__PURE__ */ jsx(Note, { f, children: account.name }),
+      /* @__PURE__ */ jsx(Note, { f, children: account.email }),
+      /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "secondary", disabled: f.busy, className: f.cx("providerButton"), onClick: () => {
+        setDone(null);
+        setEditing(true);
+      }, children: f.t.change }),
+      done && /* @__PURE__ */ jsx(Say, { f, tone: "success", children: done })
+    ] });
+  }
   return /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "section", section: "profile", onSubmit: submit, noValidate: true, children: [
     /* @__PURE__ */ jsx(Heading, { f, children: f.t.profile }),
     /* @__PURE__ */ jsx(Note, { f, children: account.email }),
     general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
     /* @__PURE__ */ jsx(Field, { f, name: "name", type: "text", label: f.t.name, value: name, autoComplete: "name", onChange: setName }),
     /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "primary", loading: f.loading(), disabled: f.busy, className: f.cx("button"), children: f.t.save }),
+    account.name.trim() !== "" && /* @__PURE__ */ jsx(Cancel, { f, onClick: cancel }),
     done && /* @__PURE__ */ jsx(Say, { f, tone: "success", children: done })
   ] });
 }
@@ -2425,15 +2550,35 @@ function EmailPart({ props, account }) {
   const { f, done, setDone, run, general } = useSection(props);
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [editing, setEditing] = useState(false);
   const submit = async (e) => {
     e.preventDefault();
     if (!f.check(checkEmail(email), account.hasPassword && checkPassword(password))) return;
     const r = await run(() => auth.account.changeEmail({ email, password }));
     if (!r.ok) return;
+    setEmail("");
     setPassword("");
+    setEditing(false);
     setDone(f.t.emailSent.replace("{email}", r.email));
     props.onSaved?.({ kind: "email.change_requested", email: r.email });
   };
+  const cancel = () => {
+    setEmail("");
+    setPassword("");
+    f.setError(null);
+    setEditing(false);
+  };
+  if (!editing) {
+    return /* @__PURE__ */ jsxs(Wrap, { f, as: "div", slot: "section", section: "email", children: [
+      /* @__PURE__ */ jsx(Heading, { f, children: f.t.emailAddress }),
+      /* @__PURE__ */ jsx(Note, { f, children: account.email }),
+      /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "secondary", disabled: f.busy, className: f.cx("providerButton"), onClick: () => {
+        setDone(null);
+        setEditing(true);
+      }, children: f.t.changeEmail }),
+      done && /* @__PURE__ */ jsx(Say, { f, tone: "success", children: done })
+    ] });
+  }
   return /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "section", section: "email", onSubmit: submit, noValidate: true, children: [
     /* @__PURE__ */ jsx(Heading, { f, children: f.t.emailAddress }),
     /* @__PURE__ */ jsx(Note, { f, children: account.email }),
@@ -2441,7 +2586,7 @@ function EmailPart({ props, account }) {
     /* @__PURE__ */ jsx(Field, { f, name: "email", type: "email", label: f.t.newEmail, value: email, autoComplete: "email", required: true, onChange: setEmail }),
     account.hasPassword && /* @__PURE__ */ jsx(Field, { f, name: "password", type: "password", label: f.t.currentPassword, value: password, autoComplete: "current-password", required: true, onChange: setPassword }),
     /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "primary", loading: f.loading(), disabled: f.busy, className: f.cx("button"), children: f.t.changeEmail }),
-    done && /* @__PURE__ */ jsx(Say, { f, tone: "success", children: done })
+    /* @__PURE__ */ jsx(Cancel, { f, onClick: cancel })
   ] });
 }
 function LinkedPart({ props }) {
@@ -2506,6 +2651,7 @@ function PasswordPart({ props }) {
   const { f, done, setDone, run, general } = useSection(props);
   const [password, setPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
+  const [editing, setEditing] = useState(false);
   usePasswordPolicy(f, useMethods(auth));
   const submit = async (e) => {
     e.preventDefault();
@@ -2514,16 +2660,34 @@ function PasswordPart({ props }) {
     if (!r.ok) return;
     setPassword("");
     setNewPassword("");
+    setEditing(false);
     setDone(f.t.passwordChangedHere);
     props.onSaved?.({ kind: "password.changed" });
   };
+  const cancel = () => {
+    setPassword("");
+    setNewPassword("");
+    f.setError(null);
+    setEditing(false);
+  };
+  if (!editing) {
+    return /* @__PURE__ */ jsxs(Wrap, { f, as: "div", slot: "section", section: "password", children: [
+      /* @__PURE__ */ jsx(Heading, { f, children: f.t.password }),
+      /* @__PURE__ */ jsx(Note, { f, children: f.t.passwordSet }),
+      /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "secondary", disabled: f.busy, className: f.cx("providerButton"), onClick: () => {
+        setDone(null);
+        setEditing(true);
+      }, children: f.t.changePassword }),
+      done && /* @__PURE__ */ jsx(Say, { f, tone: "success", children: done })
+    ] });
+  }
   return /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "section", section: "password", onSubmit: submit, noValidate: true, children: [
-    /* @__PURE__ */ jsx(Heading, { f, children: f.t.changePassword }),
+    /* @__PURE__ */ jsx(Heading, { f, children: f.t.password }),
     general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
     /* @__PURE__ */ jsx(Field, { f, name: "password", type: "password", label: f.t.currentPassword, value: password, autoComplete: "current-password", required: true, onChange: setPassword }),
     /* @__PURE__ */ jsx(Field, { f, name: "newPassword", type: "password", label: f.t.newPassword, value: newPassword, autoComplete: "new-password", required: true, onChange: setNewPassword, hint: f.passwordRule }),
     /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "primary", loading: f.loading(), disabled: f.busy, className: f.cx("button"), children: f.t.changePassword }),
-    done && /* @__PURE__ */ jsx(Say, { f, tone: "success", children: done })
+    /* @__PURE__ */ jsx(Cancel, { f, onClick: cancel })
   ] });
 }
 function SecondStepPart({ props, account, onChanged }) {
@@ -2533,10 +2697,11 @@ function SecondStepPart({ props, account, onChanged }) {
   const [code, setCode] = useState("");
   const [setup, setSetup] = useState(null);
   const [codes, setCodes] = useState(null);
+  const [asking, setAsking] = useState(null);
   const start = async (e) => {
     e.preventDefault();
     const r = await run(() => auth.account.mfa.setup({ password }));
-    if (r.ok) setSetup({ secret: r.secret, otpauthUri: r.otpauthUri });
+    if (r.ok) setSetup({ secret: r.secret, otpauthUri: r.otpauthUri, qr: r.qr ?? "" });
   };
   const confirm = async (e) => {
     e.preventDefault();
@@ -2549,30 +2714,41 @@ function SecondStepPart({ props, account, onChanged }) {
     onChanged(true);
     props.onSaved?.({ kind: "mfa.enabled" });
   };
-  const turnOff = async (e) => {
-    e.preventDefault();
-    const r = await run(() => auth.account.mfa.disable({ password }));
+  const turnOff = async (key) => {
+    const r = await run(() => auth.account.mfa.disable({ password }), key);
     if (!r.ok) return;
     setPassword("");
+    setAsking(null);
     setCodes(null);
     onChanged(false);
     props.onSaved?.({ kind: "mfa.disabled" });
   };
-  const renew = async () => {
-    const r = await run(() => auth.account.mfa.recoveryCodes({ password }), "codes");
+  const renew = async (key) => {
+    const r = await run(() => auth.account.mfa.recoveryCodes({ password }), key);
     if (!r.ok) return;
+    setPassword("");
+    setAsking(null);
     setCodes(r.recoveryCodes);
     props.onSaved?.({ kind: "recovery_codes.regenerated" });
   };
+  const press = (what) => {
+    f.setError(null);
+    if (!account.hasPassword) return void (what === "off" ? turnOff(what) : renew(what));
+    setPassword("");
+    setCodes(null);
+    setAsking(what);
+  };
+  const cancel = () => {
+    setPassword("");
+    f.setError(null);
+    setAsking(null);
+  };
   const passwordField = account.hasPassword && /* @__PURE__ */ jsx(Field, { f, name: "password", type: "password", label: f.t.currentPassword, value: password, autoComplete: "current-password", required: true, onChange: setPassword });
-  const shown = codes && /* @__PURE__ */ jsxs(Fragment2, { children: [
-    /* @__PURE__ */ jsx(Note, { f, children: f.t.keepCodes }),
-    /* @__PURE__ */ jsx("ul", { className: f.cx("codes"), children: codes.map((c) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("code", { children: c }) }, c)) })
-  ] });
   if (setup) {
     return /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "section", section: "secondStep", onSubmit: confirm, noValidate: true, children: [
       /* @__PURE__ */ jsx(Heading, { f, children: f.t.secondStep }),
       /* @__PURE__ */ jsx(Note, { f, children: f.t.addToApp }),
+      setup.qr && /* @__PURE__ */ jsx("img", { className: f.cx("qr"), src: setup.qr, width: 220, height: 220, alt: f.t.qrAlt }),
       /* @__PURE__ */ jsx("code", { className: f.cx("secret"), children: setup.secret }),
       /* @__PURE__ */ jsx(A, { f, href: setup.otpauthUri, children: f.t.openInApp }),
       general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
@@ -2580,14 +2756,36 @@ function SecondStepPart({ props, account, onChanged }) {
       /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "primary", loading: f.loading(), disabled: f.busy, className: f.cx("button"), children: f.t.verify })
     ] });
   }
-  return /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "section", section: "secondStep", onSubmit: account.mfaEnabled ? turnOff : start, noValidate: true, children: [
+  if (!account.mfaEnabled) {
+    return /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "section", section: "secondStep", onSubmit: start, noValidate: true, children: [
+      /* @__PURE__ */ jsx(Heading, { f, children: f.t.secondStep }),
+      /* @__PURE__ */ jsx(Note, { f, children: f.t.secondStepOff }),
+      general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
+      passwordField,
+      /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "primary", loading: f.loading(), disabled: f.busy, className: f.cx("button"), children: f.t.turnOn })
+    ] });
+  }
+  if (asking) {
+    const submit = (e) => {
+      e.preventDefault();
+      void (asking === "off" ? turnOff(SUBMIT) : renew(SUBMIT));
+    };
+    return /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "section", section: "secondStep", onSubmit: submit, noValidate: true, children: [
+      /* @__PURE__ */ jsx(Heading, { f, children: f.t.secondStep }),
+      /* @__PURE__ */ jsx(Note, { f, children: f.t.secondStepOn }),
+      general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
+      passwordField,
+      /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: asking === "off" ? "danger" : "primary", loading: f.loading(), disabled: f.busy, className: f.cx("button"), children: asking === "off" ? f.t.turnOff : f.t.newRecoveryCodes }),
+      /* @__PURE__ */ jsx(Cancel, { f, onClick: cancel })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Wrap, { f, as: "div", slot: "section", section: "secondStep", children: [
     /* @__PURE__ */ jsx(Heading, { f, children: f.t.secondStep }),
-    /* @__PURE__ */ jsx(Note, { f, children: account.mfaEnabled ? f.t.secondStepOn : f.t.secondStepOff }),
-    shown,
+    /* @__PURE__ */ jsx(Note, { f, children: f.t.secondStepOn }),
+    codes && /* @__PURE__ */ jsx(RecoveryCodes, { f, codes }),
     general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
-    passwordField,
-    /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: account.mfaEnabled ? "danger" : "primary", loading: f.loading(), disabled: f.busy, className: f.cx("button"), children: account.mfaEnabled ? f.t.turnOff : f.t.turnOn }),
-    account.mfaEnabled && /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "secondary", loading: f.loading("codes"), disabled: f.busy, className: f.cx("providerButton"), onClick: () => void renew(), children: f.t.newRecoveryCodes })
+    /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "danger", loading: f.loading("off"), disabled: f.busy, className: f.cx("button"), onClick: () => press("off"), children: f.t.turnOff }),
+    /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "secondary", loading: f.loading("codes"), disabled: f.busy, className: f.cx("providerButton"), onClick: () => press("codes"), children: f.t.newRecoveryCodes })
   ] });
 }
 function PhonePart({ props, account, onChanged }) {
@@ -2600,6 +2798,7 @@ function PhonePart({ props, account, onChanged }) {
   const [code, setCode] = useState("");
   const [sentTo, setSentTo] = useState("");
   const [codes, setCodes] = useState(null);
+  const [removing, setRemoving] = useState(false);
   const load = () => auth.account.mfa.factors().then((w) => {
     setWays(w);
     if (w && w.phoneChannels.length > 0 && !w.phoneChannels.includes(channel)) setChannel(w.phoneChannels[0]);
@@ -2620,21 +2819,34 @@ function PhonePart({ props, account, onChanged }) {
     setSentTo("");
     setCode("");
     setPassword("");
+    setNumber("");
     if (r.recoveryCodes.length > 0) setCodes(r.recoveryCodes);
     onChanged(true);
     props.onSaved?.({ kind: "phone.added", channel });
     await load();
   };
-  const remove = async (e) => {
-    e.preventDefault();
-    const r = await run(() => auth.account.mfa.removePhone({ password }));
+  const remove = async (key) => {
+    const r = await run(() => auth.account.mfa.removePhone({ password }), key);
     if (!r.ok) return;
     setPassword("");
+    setRemoving(false);
+    setCodes(null);
     await load();
     const left = await auth.account.mfa.factors();
     onChanged(Boolean(left?.totp));
     props.onSaved?.({ kind: "phone.removed" });
   };
+  const press = () => {
+    f.setError(null);
+    if (!account.hasPassword) return void remove("remove");
+    setPassword("");
+    setRemoving(true);
+  };
+  const cancel = () => {
+    setPassword("");
+    f.setError(null);
+    setRemoving(false);
+  };
   const passwordField = account.hasPassword && /* @__PURE__ */ jsx(Field, { f, name: "password", type: "password", label: f.t.currentPassword, value: password, autoComplete: "current-password", required: true, onChange: setPassword });
   if (sentTo) {
     return /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "section", section: "phone", onSubmit: confirm, noValidate: true, children: [
@@ -2645,23 +2857,46 @@ function PhonePart({ props, account, onChanged }) {
       /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "primary", loading: f.loading(), disabled: f.busy, className: f.cx("button"), children: f.t.verify })
     ] });
   }
-  return /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "section", section: "phone", onSubmit: ways.phone ? remove : add, noValidate: true, children: [
+  if (ways.phone) {
+    const by = ways.phone.channel === "whatsapp" ? f.t.byWhatsapp : ways.phone.channel === "sms" ? f.t.bySms : "";
+    const on = /* @__PURE__ */ jsxs(Note, { f, children: [
+      f.t.phoneOn.replace("{to}", ways.phone.number),
+      by && /* @__PURE__ */ jsx(Tag, { f, plain: ` \xB7 ${by}`, children: by })
+    ] });
+    if (removing) {
+      return /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "section", section: "phone", onSubmit: (e) => {
+        e.preventDefault();
+        void remove(SUBMIT);
+      }, noValidate: true, children: [
+        /* @__PURE__ */ jsx(Heading, { f, children: f.t.phone }),
+        on,
+        general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
+        passwordField,
+        /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "danger", loading: f.loading(), disabled: f.busy, className: f.cx("button"), children: f.t.removePhone }),
+        /* @__PURE__ */ jsx(Cancel, { f, onClick: cancel })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(Wrap, { f, as: "div", slot: "section", section: "phone", children: [
+      /* @__PURE__ */ jsx(Heading, { f, children: f.t.phone }),
+      on,
+      codes && /* @__PURE__ */ jsx(RecoveryCodes, { f, codes }),
+      general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
+      /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "danger", loading: f.loading("remove"), disabled: f.busy, className: f.cx("button"), onClick: press, children: f.t.removePhone })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "section", section: "phone", onSubmit: add, noValidate: true, children: [
     /* @__PURE__ */ jsx(Heading, { f, children: f.t.phone }),
-    /* @__PURE__ */ jsx(Note, { f, children: ways.phone ? f.t.phoneOn.replace("{to}", ways.phone.number) : `${f.t.phoneOff} ${f.t.phoneHelp}` }),
-    codes && /* @__PURE__ */ jsxs(Fragment2, { children: [
-      /* @__PURE__ */ jsx(Note, { f, children: f.t.keepCodes }),
-      /* @__PURE__ */ jsx("ul", { className: f.cx("codes"), children: codes.map((c) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("code", { children: c }) }, c)) })
-    ] }),
+    /* @__PURE__ */ jsx(Note, { f, children: `${f.t.phoneOff} ${f.t.phoneHelp}` }),
     general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
-    !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(Field, { f, name: "phone", type: "tel", label: f.t.phone, value: number, autoComplete: "tel", required: true, onChange: setNumber }),
+    ways.phoneChannels.length > 1 && f.C.Select && /* @__PURE__ */ jsx(ChannelPick, { f, value: channel, channels: ways.phoneChannels, onChange: setChannel }),
+    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, disabled: f.busy, onChange: () => setChannel(c) }),
       " ",
       c === "whatsapp" ? f.t.byWhatsapp : f.t.bySms
     ] }, c)) }),
     passwordField,
-    /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: ways.phone ? "danger" : "primary", loading: f.loading(), disabled: f.busy, className: f.cx("button"), children: ways.phone ? f.t.removePhone : f.t.addPhone })
+    /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "primary", loading: f.loading(), disabled: f.busy, className: f.cx("button"), children: f.t.addPhone })
   ] });
 }
 function AgentsPart({ props, when }) {