Account switcher: more than one account signed in at once

Someone who looks after several mailboxes of their own can now keep
them all signed in in one browser and move between them from the
account menu, without signing out (multi-account spec, MA-B; forum
topic 75).

How it holds them. The session cookie is unchanged: it is the account
in front, and every request is answered with it, so nothing else in the
server changes. The others ride in a second cookie, <name>_more, as a
list of their own session cookies. Each session stays its own -- sealed
credential, expiry and "this is my device" -- and nothing about one is
read through another. At most 5 in all, all on this mail server.

- Add account (account menu): with sign-in on the mail server's page
  it goes there with prompt=login, so the server asks again rather than
  reuse the first sign-in; with the password form, a small dialog asks.
  Refused, and the front stays, when either account's organization has
  addAccounts off (inbuxa:SharingPolicy), the account is on another
  server, or 5 are open. The same account again just comes to the
  front.
- Switching (POST /api/auth/accounts/<id>/front) swaps it into front;
  the web app clears what it cached for the previous account and
  reloads. A message being written blocks the switch.
- Sign out ends only the account in front, and the next one comes
  forward; Sign out of all accounts ends every one.
- GET /api/auth/accounts lists them, the front first, and says whether
  one more may be added.

Not in this change: unread counts and notifications for the accounts
not in front (MA-8), which the spec puts last.

The mock can sign in a second user (MOCK_SECOND_USER/PASS) and answer
addAccounts false (MOCK_NO_ADD_ACCOUNTS), for the new server tests:
two accounts joining, switching, the same account twice, a switch to a
session it doesn't hold, signing out of one and of all, and an
organization that forbids it; and the OAuth start asking prompt=login.
The client tests cover listing, switching (cache cleared, reload) and
both sign-outs. Checked in Chrome against the mock: add, switch, sign
out of one.

New strings (9, English only in the other ten catalogs): "Add
account", "Sign out of all accounts", "Add an account", "Both accounts
stay signed in here; switch between them from this menu.", "Working…",
"That account couldn't be added.", "You can't add more accounts here.",
and the other-server and organization refusals. typecheck, tests (web
1538, server 276) and build pass.

web/src/views/AddAccountDialog.tsx

@@ -0,0 +1,111 @@
+import { useEffect, useState, type FormEvent } from "react";
+import { Dialog } from "@/ui/dialog";
+import { apiFetch } from "@/jmap/client";
+import { withBase } from "@/lib/basePath";
+import { clearSignedInData, isDeviceTrusted } from "@/lib/storage";
+import { t } from "@/lib/i18n";
+
+/**
+ * inbuxa MA-B: sign a second account in beside the one in front.
+ *
+ * With sign-in on the mail server's own page and one mail server, there is
+ * nothing to ask here: the browser goes straight to that page, which asks for
+ * the account. With several servers the address comes first, to pick one; with
+ * the password form, so does the password. Either way the account joins the
+ * others and comes to the front, and the app reloads into it.
+ *
+ * It is remembered on this device exactly as the first one was (MA-7).
+ */
+export function AddAccountDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const [mode, setMode] = useState<"oauth" | "oauth-address" | "password" | null>(null);
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const remember = isDeviceTrusted();
+
+  useEffect(() => {
+    if (!open) return;
+    setError(null);
+    let live = true;
+    fetch(withBase("/api/config"))
+      .then((r) => (r.ok ? r.json() : null))
+      .then((c) => {
+        if (!live) return;
+        const oauth = c?.signIn === "oauth";
+        const next = oauth ? (c?.signInDirect === true ? "oauth" : "oauth-address") : "password";
+        setMode(next);
+        // Nothing to ask: off to the mail server's page
+        if (next === "oauth") goToServer("");
+      })
+      .catch(() => live && setMode("password"));
+    return () => {
+      live = false;
+    };
+    // goToServer only reads `remember`, fixed for the dialog's life
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  function goToServer(address: string) {
+    setBusy(true);
+    // What is cached belongs to the account in front, which won't be
+    clearSignedInData();
+    const params = new URLSearchParams({ add: "1", ...(address ? { username: address } : {}), ...(remember ? { remember: "1" } : {}) });
+    window.location.assign(withBase(`/api/auth/oauth/start?${params}`));
+  }
+
+  const submit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (!username.trim()) return;
+    if (mode === "oauth-address") return goToServer(username.trim());
+    if (!password) return;
+    setBusy(true);
+    setError(null);
+    try {
+      await apiFetch("/api/auth/login", {
+        method: "POST",
+        body: JSON.stringify({ username: username.trim(), password, remember, add: true }),
+      });
+      clearSignedInData();
+      window.location.reload();
+    } catch (err) {
+      setError((err as Error).message || t("That account couldn't be added."));
+      setBusy(false);
+    }
+  };
+
+  if (mode === "oauth") return null;
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      title={t("Add an account")}
+      size="sm"
+      footer={
+        <>
+          <button className="btn btn-ghost" onClick={onClose} disabled={busy}>
+            {t("Cancel")}
+          </button>
+          <button className="btn btn-primary" form="add-account" type="submit" disabled={busy || !username.trim() || (mode === "password" && !password)}>
+            {busy ? t("Working…") : t("Add account")}
+          </button>
+        </>
+      }
+    >
+      <form id="add-account" onSubmit={(e) => void submit(e)}>
+        <p className="hint">{t("Both accounts stay signed in here; switch between them from this menu.")}</p>
+        <div className="field">
+          <label htmlFor="add-account-user">{t("Email address")}</label>
+          <input id="add-account-user" autoComplete="username" value={username} onChange={(e) => setUsername(e.target.value)} autoFocus />
+        </div>
+        {mode === "password" && (
+          <div className="field">
+            <label htmlFor="add-account-pw">{t("Password")}</label>
+            <input id="add-account-pw" type="password" autoComplete="current-password" value={password} onChange={(e) => setPassword(e.target.value)} />
+          </div>
+        )}
+        {error && <p className="error">{error}</p>}
+      </form>
+    </Dialog>
+  );
+}