@jskit-ai/users-web 0.2.12 → 0.2.14

package/fixtures/translated-app/PreferencesSection.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { useI18n } from "vue-i18n";
+
+// An app's own settings section: its words come from the app's messages, its
+// choices, feedback and field errors from JSKIT.
+const props = defineProps({
+  runtime: {
+    type: Object,
+    required: true
+  }
+});
+const { t } = useI18n();
+const preferences = props.runtime.preferences;
+</script>
+
+<template>
+  <v-form novalidate @submit.prevent="preferences.submit">
+    <v-select
+      v-model="preferences.form.theme"
+      :items="preferences.options.theme"
+      :label="t('app.settings.theme')"
+      :error-messages="preferences.fieldErrors.theme"
+      data-testid="theme-select"
+    />
+    <v-btn type="submit" data-testid="preferences-save" :loading="preferences.isSaving.value">
+      {{ t("app.settings.save") }}
+    </v-btn>
+  </v-form>
+</template>

package/fixtures/translated-app/appMessages.json

@@ -0,0 +1,13 @@
+{
+  "app": {
+    "menu": {
+      "settings": "Settings",
+      "signOut": "Sign out"
+    },
+    "settings": {
+      "preferences": "Preferences",
+      "theme": "Theme",
+      "save": "Save preferences"
+    }
+  }
+}

package/fixtures/translated-app/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Translated app acceptance</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>

package/fixtures/translated-app/main.js

@@ -0,0 +1,181 @@
+import { createApp, h, inject, onMounted, reactive, ref, shallowReactive } from "vue";
+import { createPinia } from "pinia";
+import { createI18n } from "vue-i18n";
+import { createRouter, createWebHistory, RouterView } from "vue-router";
+import { QueryClient, VueQueryPlugin, useQuery } from "@tanstack/vue-query";
+import "vuetify/styles";
+import { createVuetify } from "vuetify";
+import * as components from "vuetify/components";
+import * as directives from "vuetify/directives";
+import { aliases, mdi } from "vuetify/iconsets/mdi-svg";
+import { registerJskitMessages, setJskitI18n } from "@jskit-ai/kernel/client/i18n";
+import { silentLogger } from "@jskit-ai/kernel/shared/support/silentLogger";
+import { createHttpClient } from "@jskit-ai/http-runtime/client";
+import { ShellErrorHost, ShellWebClientProvider, useShellErrorPresentationStore } from "@jskit-ai/shell-web/client";
+import { SHELL_WEB_ERROR_RUNTIME_KEY } from "@jskit-ai/shell-web/client/error";
+import { SHELL_WEB_PLACEMENT_RUNTIME_KEY } from "@jskit-ai/shell-web/client/placement";
+import { SHELL_REQUEST_RECOVERY_RUNTIME_KEY } from "@jskit-ai/shell-web/client/requestRecovery";
+import {
+  AuthProfileMenuLinkItem,
+  AuthProfileWidget,
+  AuthWebClientProvider,
+  DefaultLoginView,
+  DefaultResetPasswordView,
+  DefaultSignOutView
+} from "@jskit-ai/auth-web/client";
+import AccountSettingsClientElement from "../../src/client/components/AccountSettingsClientElement.vue";
+import ProfileClientElement from "../../src/client/components/ProfileClientElement.vue";
+import appMessages from "./appMessages.json" with { type: "json" };
+import PreferencesSection from "./PreferencesSection.vue";
+
+// An app translated into the locale the test exported with `jskit i18n export`
+// and handed to the page. Every JSKIT package's English is registered, as the
+// JSKIT Vite plugin registers each installed package's catalog.
+const translation = window.translatedFixture;
+const catalogs = import.meta.glob("../../../*/locales/en.json", { eager: true, import: "default" });
+Object.values(catalogs).forEach(registerJskitMessages);
+const i18n = createI18n({
+  legacy: false,
+  locale: translation.locale,
+  fallbackLocale: "en",
+  messages: { en: appMessages, [translation.locale]: translation.messages },
+  missingWarn: false,
+  fallbackWarn: false,
+  warnHtmlMessage: false
+});
+setJskitI18n(i18n);
+
+const registered = new Map();
+const componentRegistry = {
+  register(id, component) {
+    registered.set(id, component);
+    return componentRegistry;
+  },
+  has: (id) => registered.has(id),
+  get: (id) => registered.get(id)
+};
+
+// The shell's placements as a double; the error runtime, its host and request
+// recovery are the real ones ShellWebClientProvider builds.
+let context = {
+  surfaceConfig: {
+    tenancyMode: "none",
+    defaultSurfaceId: "home",
+    enabledSurfaceIds: ["home", "auth", "account"],
+    surfacesById: {
+      home: { id: "home", enabled: true, pagesRoot: "home", routeBase: "/home", requiresWorkspace: false },
+      auth: { id: "auth", enabled: true, pagesRoot: "auth", routeBase: "/auth", requiresWorkspace: false },
+      account: { id: "account", enabled: true, pagesRoot: "account", routeBase: "/account", requiresWorkspace: false }
+    }
+  }
+};
+
+// What a host passes ProfileClientElement.
+const profileState = shallowReactive({
+  profileForm: reactive({ displayName: "Ada", email: "ada@example.com" }),
+  preferencesForm: reactive({ avatarSize: 64 }),
+  profileAvatar: reactive({ effectiveUrl: "", hasUploadedAvatar: true }),
+  profileInitials: "AD",
+  selectedAvatarFileName: "",
+  profileFieldErrors: reactive({}),
+  profileMutation: { isPending: ref(false) },
+  avatarDeleteMutation: { isPending: ref(false) }
+});
+const profileActions = {
+  async submitProfile() {},
+  async openAvatarEditor() {},
+  async submitAvatarDelete() {}
+};
+const ProfileSection = { render: () => h(ProfileClientElement, { state: profileState, actions: profileActions }) };
+
+function section(value, title, component, order) {
+  return { order, component, props: { value, title, usesSharedRuntime: true } };
+}
+const placementsByTarget = {
+  "account-settings:sections": [
+    section("profile", "jskit.users.accountSettings.profile.title", ProfileSection, 100),
+    section("preferences", "app.settings.preferences", PreferencesSection, 200)
+  ],
+  "auth-profile-menu:primary-menu": [
+    { id: "app.menu.settings", component: AuthProfileMenuLinkItem, props: { label: "app.menu.settings", to: "/account" } },
+    { id: "app.menu.sign-out", component: AuthProfileMenuLinkItem, props: { label: "app.menu.signOut", to: "/auth/signout" } }
+  ]
+};
+const placement = {
+  getContext: () => context,
+  getPlacements: ({ target } = {}) => placementsByTarget[target] || [],
+  getRevision: () => 0,
+  subscribe: () => () => {},
+  setContext(patch) {
+    context = { ...context, ...patch };
+    return context;
+  }
+};
+
+const fixtureHttp = createHttpClient({ credentials: "include" });
+// A page whose requests fail: a query the shell's request recovery reports as
+// a banner, and a request the page reports itself as a snackbar (the shell
+// shows one banner at a time).
+const ErrorsPage = {
+  setup() {
+    const errorRuntime = inject(SHELL_WEB_ERROR_RUNTIME_KEY);
+    useQuery({
+      queryKey: ["fixture", "offline"],
+      queryFn: () => fixtureHttp.request("/api/offline"),
+      meta: { jskit: { requestRecoveryMethod: "GET" } }
+    });
+    onMounted(async () => {
+      try {
+        await fixtureHttp.request("/api/broken");
+      } catch (error) {
+        errorRuntime.report({ source: "fixture.errors", message: error.message, cause: error, severity: "error", channel: "snackbar" });
+      }
+    });
+    return () => h("div", { "data-testid": "errors-page" });
+  }
+};
+const HomePage = { render: () => h("div", { "data-testid": "home" }, [h(AuthProfileWidget)]) };
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    { path: "/home", component: HomePage },
+    { path: "/errors", component: ErrorsPage },
+    { path: "/account", component: AccountSettingsClientElement },
+    { path: "/auth/login", component: DefaultLoginView },
+    { path: "/auth/reset-password", component: DefaultResetPasswordView },
+    { path: "/auth/signout", component: DefaultSignOutView }
+  ]
+});
+const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+const pinia = createPinia();
+const app = createApp({
+  render: () => h(components.VApp, null, {
+    default: () => [h(components.VMain, null, { default: () => h(RouterView) }), h(ShellErrorHost)]
+  })
+});
+app.use(i18n);
+app.use(pinia);
+app.use(router);
+app.use(VueQueryPlugin, { queryClient });
+app.use(createVuetify({ components, directives, icons: { defaultSet: "mdi", aliases, sets: { mdi } } }));
+
+const { shell } = ShellWebClientProvider.setup({ components: componentRegistry, logger: silentLogger, queryClient, router });
+shell.error.configure({});
+useShellErrorPresentationStore(pinia).attachRuntimeStore(shell.errorPresentationStore);
+shell.requestRecovery.install();
+app.provide(SHELL_WEB_PLACEMENT_RUNTIME_KEY, placement);
+app.provide(SHELL_WEB_ERROR_RUNTIME_KEY, shell.error);
+app.provide(SHELL_REQUEST_RECOVERY_RUNTIME_KEY, shell.requestRecovery);
+
+const outputs = AuthWebClientProvider.setup({
+  components: componentRegistry,
+  mobile: null,
+  pinia,
+  realtime: null,
+  shell: { placement, bootstrap: { async refresh() {} } },
+  vueApp: app
+});
+await AuthWebClientProvider.boot({}, { outputs });
+await router.isReady();
+app.mount("#app");

package/fixtures/translated-app/src/error.js

@@ -0,0 +1,2 @@
+// The app error configuration ShellWebClientProvider imports: shell-web defaults.
+export default {};

package/fixtures/translated-app/src/placement.js

@@ -0,0 +1,2 @@
+// The app modules ShellWebClientProvider imports; this fixture places everything through its own double.
+export default [];

package/fixtures/translated-app/src/placementTopology.js

@@ -0,0 +1,2 @@
+// The app modules ShellWebClientProvider imports; this fixture places everything through its own double.
+export default [];

package/fixtures/translated-app/vite.config.mjs

@@ -0,0 +1,14 @@
+import { fileURLToPath } from "node:url";
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+export default defineConfig({
+  root: fileURLToPath(new URL("./", import.meta.url)),
+  plugins: [vue()],
+  define: {
+    __VUE_I18N_FULL_INSTALL__: true,
+    __VUE_I18N_LEGACY_API__: false,
+    __INTLIFY_PROD_DEVTOOLS__: false
+  },
+  server: { host: "127.0.0.1", strictPort: true }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/users-web",
-  "version": "0.2.12",
+  "version": "0.2.14",
   "type": "module",
   "scripts": {
     "test": "node --test --test-concurrency=1"
@@ -13,15 +13,15 @@
     "./locales/en.json": "./locales/en.json"
   },
   "dependencies": {
-    "@jskit-ai/uploads-image-web": "0.2.5",
-    "@jskit-ai/users-core": "0.2.6"
+    "@jskit-ai/uploads-image-web": "0.2.7",
+    "@jskit-ai/users-core": "0.2.8"
   },
   "peerDependencies": {
-    "@jskit-ai/auth-web": "0.2.8",
-    "@jskit-ai/http-runtime": "0.2.5",
-    "@jskit-ai/http-web": "0.2.11",
-    "@jskit-ai/kernel": "0.2.5",
-    "@jskit-ai/shell-web": "0.2.6",
+    "@jskit-ai/auth-web": "0.2.10",
+    "@jskit-ai/http-runtime": "0.2.7",
+    "@jskit-ai/http-web": "0.2.13",
+    "@jskit-ai/kernel": "0.2.7",
+    "@jskit-ai/shell-web": "0.2.8",
     "@tanstack/vue-query": "^5.90.5",
     "vue": "^3.5.13",
     "vue-router": "^5.0.4",

package/test/translatedApp.browser.test.js

@@ -0,0 +1,405 @@
+import assert from "node:assert/strict";
+import { execFileSync } from "node:child_process";
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+import process from "node:process";
+import { after, before, test } from "node:test";
+import { fileURLToPath } from "node:url";
+import { chromium, expect } from "@playwright/test";
+import { en as vuetifyEnglish } from "vuetify/locale";
+import { flattenCatalog, formatMessage } from "@jskit-ai/kernel/shared/i18n";
+import { createChromiumLaunchOptions, startViteFixture, stopProcess } from "../../../tooling/testUtils/browserFixture.mjs";
+
+// The translation acceptance test: an app exports a pseudo-locale with
+// `jskit i18n export`, translates every message, switches to it, and no JSKIT
+// screen it opens shows English.
+const RUN = process.env.JSKIT_USERS_WEB_BROWSER_INTEGRATION === "1";
+const options = { skip: !RUN, timeout: 120_000 };
+const LOCALE = "en-XA";
+const REPOSITORY_ROOT = fileURLToPath(new URL("../../../", import.meta.url));
+const JSKIT_CLI = path.join(REPOSITORY_ROOT, "tooling", "jskit-catalog", "scripts", "jskit.mjs");
+const FIXTURE_ROOT = fileURLToPath(new URL("../fixtures/translated-app/", import.meta.url));
+const APP_MESSAGES = JSON.parse(fs.readFileSync(path.join(FIXTURE_ROOT, "appMessages.json"), "utf8"));
+
+// Every ASCII letter becomes an accented one, so any ASCII word left on a page
+// is text that did not come through the translation.
+const ASCII_LETTERS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+const PSEUDO_LETTERS = [..."áƀçđéƒĝĥíĵķĺɱñóþʠŕšţúṽŵẋýžÁƁÇĐÉƑĜĤÍĴĶĹṀÑÓÞǪŔŠŢÚṼŴẊÝŽ"];
+const PSEUDO = new Map([...ASCII_LETTERS].map((letter, index) => [letter, PSEUDO_LETTERS[index]]));
+// Words that are the fixture's data (names, email, providers), not interface text.
+const DATA_WORDS = new Set(["Ada", "AD", "AL", "Lovelace", "ada", "example", "com", "Google", "GitHub", "Local"]);
+// Vuetify's own labels ("{0} appended action") are translated through Vuetify's
+// locale, not JSKIT's.
+const VUETIFY_TEXTS = Object.values(flattenCatalog(vuetifyEnglish))
+  .map(String)
+  .filter((message) => /[A-Za-z]{2,}/u.test(message.replace(/\{\d+\}/gu, "")))
+  .map((message) => new RegExp(
+    `^${message.replace(/[.*+?^${}()|[\]\\]/gu, "\\$&").replace(/\\\{\d+\\\}/gu, ".*")}$`,
+    "u"
+  ));
+
+const CAPABILITIES = {
+  provider: { id: "local", label: "Local" },
+  features: {
+    password: { login: true, register: true },
+    passwordRecovery: { request: true, complete: true },
+    otp: { login: true },
+    oauthLogin: { enabled: true, defaultProvider: "google", providers: [{ id: "google", label: "Google" }] },
+    emailConfirmation: true
+  }
+};
+const SIGNED_OUT = { authenticated: false, csrfToken: "fixture-csrf", authCapabilities: CAPABILITIES };
+const SIGNED_IN = { ...SIGNED_OUT, authenticated: true, username: "Ada Lovelace", email: "ada@example.com" };
+
+let projectRoot = "";
+let english = {};
+let messages = {};
+let pseudo = {};
+let runtime = null;
+let browser = null;
+
+// Accents the letters outside {placeholders}; placeholders, quoted literals and
+// the | between plural choices stay as written.
+function pseudoMessage(message) {
+  let result = "";
+  for (let index = 0; index < message.length; index += 1) {
+    if (message[index] !== "{") {
+      result += PSEUDO.get(message[index]) ?? message[index];
+      continue;
+    }
+    let end = index + 1;
+    let quoted = false;
+    while (end < message.length && (message[end] !== "}" || quoted)) {
+      if (message[end] === "'") quoted = !quoted;
+      end += 1;
+    }
+    result += message.slice(index, end + 1);
+    index = end;
+  }
+  return result;
+}
+
+function pseudoCatalog(catalog) {
+  return Object.fromEntries(Object.entries(catalog).map(([name, value]) => [
+    name,
+    typeof value === "string" ? pseudoMessage(value) : pseudoCatalog(value)
+  ]));
+}
+
+function jskit(...args) {
+  return execFileSync(process.execPath, [JSKIT_CLI, "i18n", ...args, "--root", projectRoot], { encoding: "utf8" });
+}
+
+/** The English of a JSKIT key, as a server sends it. */
+function englishOf(key, params = {}) {
+  assert.ok(Object.hasOwn(english, key), `${key} is not in the exported English`);
+  return formatMessage(english[key], params);
+}
+
+/** The pseudo-locale text of a JSKIT or app key, as the page shows it. */
+function shown(key, params = {}) {
+  const message = pseudo[key];
+  assert.ok(message !== undefined, `${key} is not translated`);
+  return formatMessage(message, params);
+}
+
+before(async () => {
+  if (!RUN) return;
+  // A throwaway app that installs users-web, with the repository's packages as its node_modules.
+  projectRoot = fs.mkdtempSync(path.join(os.tmpdir(), "jskit-translated-app-"));
+  fs.writeFileSync(path.join(projectRoot, "package.json"), JSON.stringify({
+    name: "translated-app",
+    private: true,
+    type: "module",
+    dependencies: { "@jskit-ai/users-web": "*" }
+  }));
+  fs.symlinkSync(path.join(REPOSITORY_ROOT, "node_modules"), path.join(projectRoot, "node_modules"), "dir");
+  jskit("export", LOCALE);
+  const file = path.join(projectRoot, "src", "locales", LOCALE, "jskit.json");
+  const exported = JSON.parse(fs.readFileSync(file, "utf8"));
+  english = flattenCatalog(exported);
+  fs.writeFileSync(file, `${JSON.stringify(pseudoCatalog(exported), null, 2)}\n`);
+  jskit("check", LOCALE);
+  // What the app loads for the locale: the translated JSKIT file and its own messages.
+  messages = { ...JSON.parse(fs.readFileSync(file, "utf8")), ...pseudoCatalog(APP_MESSAGES) };
+  pseudo = flattenCatalog(messages);
+
+  runtime = await startViteFixture({ fixtureRoot: FIXTURE_ROOT });
+  browser = await chromium.launch(createChromiumLaunchOptions());
+});
+
+after(async () => {
+  await browser?.close();
+  await stopProcess(runtime);
+  if (projectRoot) fs.rmSync(projectRoot, { recursive: true, force: true });
+});
+
+/** One page in the pseudo-locale with the API behind it; anything unexpected under /api is a failure. */
+async function openApp({ session = SIGNED_OUT, routes = {} } = {}) {
+  const page = await browser.newPage({ baseURL: runtime.baseURL, viewport: { width: 1280, height: 900 } });
+  page.setDefaultTimeout(15_000);
+  page.setDefaultNavigationTimeout(60_000);
+  await page.addInitScript((translation) => {
+    window.translatedFixture = translation;
+  }, { locale: LOCALE, messages });
+  const api = { session, requests: [], unexpected: [], errors: [], diagnostics: [], page };
+  page.on("pageerror", (error) => api.errors.push(error.message));
+  page.on("console", (message) => {
+    if (message.type() === "error") api.diagnostics.push(message.text());
+  });
+  page.on("response", (response) => {
+    if (response.status() >= 400 && !new URL(response.url()).pathname.startsWith("/api/")) {
+      api.diagnostics.push(`${response.status()} ${response.url()}`);
+    }
+  });
+  // Opens a page and waits for the app to mount, naming what stopped it otherwise.
+  api.open = async (url) => {
+    await page.goto(url);
+    await page.waitForFunction(() => document.querySelector("#app")?.children.length > 0, null, { timeout: 20_000 })
+      .catch(() => {
+        throw new Error(`the app did not mount at ${url}: ${JSON.stringify([...api.errors, ...api.diagnostics])}`);
+      });
+  };
+  await page.route("**/api/**", async (route) => {
+    const request = route.request();
+    const { pathname } = new URL(request.url());
+    if (!pathname.startsWith("/api/")) {
+      await route.continue();
+      return;
+    }
+    const key = `${request.method()} ${pathname}`;
+    if (key === "GET /api/session") {
+      await route.fulfill({ json: api.session });
+      return;
+    }
+    api.requests.push(key);
+    if (!routes[key]) {
+      api.unexpected.push(key);
+      await route.fulfill({ status: 500, json: { error: `unexpected ${key}` } });
+      return;
+    }
+    const answer = typeof routes[key] === "function" ? routes[key]() : routes[key];
+    await (answer === "abort" ? route.abort("internetdisconnected") : route.fulfill(answer));
+  });
+  return api;
+}
+
+/** Lines of visible text and visible labelling attributes that still carry an ASCII word. */
+async function leftoverEnglish(page) {
+  const texts = await page.evaluate(() => {
+    const found = document.body.innerText.split("\n");
+    for (const element of document.querySelectorAll("[placeholder], [title], [aria-label], [alt]")) {
+      if (!element.checkVisibility()) continue;
+      for (const name of ["placeholder", "title", "aria-label", "alt"]) {
+        const value = element.getAttribute(name);
+        if (value) found.push(value);
+      }
+    }
+    return found;
+  });
+  return texts.filter((line) => {
+    const value = line.trim();
+    if (!value || VUETIFY_TEXTS.some((pattern) => pattern.test(value))) return false;
+    return (value.match(/[A-Za-z]{2,}/gu) || []).some((word) => !DATA_WORDS.has(word));
+  });
+}
+
+async function assertTranslated(page, screen) {
+  assert.deepEqual(await leftoverEnglish(page), [], `${screen} shows English`);
+}
+
+async function finish(api) {
+  assert.deepEqual(api.unexpected, []);
+  assert.deepEqual(api.errors, []);
+  await api.page.close();
+}
+
+test("the export holds every rendered package's English and the pseudo-locale passes jskit i18n check", options, () => {
+  for (const namespace of ["auth", "users", "shell", "http", "kernel", "crud"]) {
+    assert.ok(Object.keys(english).some((key) => key.startsWith(`jskit.${namespace}.`)), `no jskit.${namespace} keys exported`);
+  }
+  assert.equal(shown("jskit.auth.login.field.email"), "Éɱáíĺ");
+});
+
+test("sign-in, registration and password reset show only the pseudo-locale", options, async () => {
+  const api = await openApp({
+    routes: {
+      "POST /api/login": {
+        status: 401,
+        json: { error: englishOf("jskit.auth.login.invalidCredentials"), code: "auth.login.invalidCredentials" }
+      },
+      "POST /api/password/forgot": { json: { ok: true } }
+    }
+  });
+  const { page } = api;
+  await api.open("/auth/login?returnTo=/home");
+  await expect(page.getByTestId("auth-mode-register")).toBeVisible();
+  await assertTranslated(page, "sign-in");
+
+  await page.getByLabel(shown("jskit.auth.login.field.email")).fill("ada@example.com");
+  await page.getByLabel(shown("jskit.auth.login.field.password"), { exact: true }).fill("wrong horse");
+  await page.getByTestId("auth-submit").click();
+  await expect(page.getByText(shown("jskit.auth.login.invalidCredentials")).first()).toBeVisible();
+  await assertTranslated(page, "a refused sign-in");
+
+  await page.getByTestId("auth-mode-register").click();
+  await expect(page.getByText(shown("jskit.auth.login.title.register"))).toBeVisible();
+  await page.getByLabel(shown("jskit.auth.login.field.password"), { exact: true }).fill("Correct-horse-1");
+  await page.getByLabel(shown("jskit.auth.login.field.confirmPassword"), { exact: true }).fill("Different-horse-1");
+  await page.getByLabel(shown("jskit.auth.login.field.confirmPassword"), { exact: true }).blur();
+  await expect(page.getByText(shown("jskit.auth.login.passwordsMismatch"))).toBeVisible();
+  await assertTranslated(page, "registration");
+
+  await page.getByTestId("auth-mode-sign-in").click();
+  await page.getByRole("button", { name: shown("jskit.auth.login.forgotPassword") }).click();
+  await expect(page.getByText(shown("jskit.auth.login.title.forgot"))).toBeVisible();
+  await assertTranslated(page, "password reset request");
+  await page.getByLabel(shown("jskit.auth.login.field.email")).fill("ada@example.com");
+  await page.getByTestId("auth-submit").click();
+  await expect(page.getByText(shown("jskit.auth.login.resetSent")).first()).toBeVisible();
+  await assertTranslated(page, "password reset sent");
+  await finish(api);
+
+  const reset = await openApp({
+    routes: { "POST /api/password/recovery": { json: { ok: true } }, "POST /api/password/reset": { json: { ok: true } } }
+  });
+  await reset.open("/auth/reset-password#access_token=token-a&refresh_token=token-r&type=recovery");
+  const newPassword = reset.page.getByLabel(shown("jskit.auth.resetPassword.newPassword"), { exact: true });
+  await expect(newPassword).toBeVisible();
+  await newPassword.fill("Correct-horse-1");
+  await reset.page.getByLabel(shown("jskit.auth.resetPassword.confirmPassword"), { exact: true }).fill("Different-horse-1");
+  await expect(reset.page.getByText(shown("jskit.auth.resetPassword.passwordsMustMatch"))).toBeVisible();
+  await assertTranslated(reset.page, "password reset");
+  await reset.page.getByLabel(shown("jskit.auth.resetPassword.confirmPassword"), { exact: true }).fill("Correct-horse-1");
+  await reset.page.getByRole("button", { name: shown("jskit.auth.resetPassword.submit") }).click();
+  await expect(reset.page.getByText(shown("jskit.auth.resetPassword.done"))).toBeVisible();
+  await assertTranslated(reset.page, "password updated");
+  await finish(reset);
+});
+
+test("the profile menu and a refused, then retried, sign-out show only the pseudo-locale", options, async () => {
+  let failures = 1;
+  const api = await openApp({
+    session: SIGNED_IN,
+    routes: {
+      "POST /api/logout": () => {
+        if (failures > 0) {
+          failures -= 1;
+          return { status: 503, json: { error: englishOf("jskit.auth.session.unavailable"), code: "auth.session.unavailable" } };
+        }
+        api.session = SIGNED_OUT;
+        return { json: { ok: true } };
+      }
+    }
+  });
+  const { page } = api;
+  await api.open("/home");
+  await page.locator(".auth-profile-widget__activator").click();
+  const signOut = page.getByRole("link", { name: shown("app.menu.signOut") });
+  await expect(signOut).toBeVisible();
+  await assertTranslated(page, "the profile menu");
+
+  await signOut.click();
+  await expect(page.getByText(shown("jskit.auth.session.unavailable")).first()).toBeVisible();
+  await assertTranslated(page, "a refused sign-out");
+  await page.getByRole("button", { name: shown("jskit.auth.signOut.retry") }).click();
+  await page.waitForURL("**/auth/login**");
+  await expect(page.getByTestId("auth-submit")).toBeVisible();
+  await api.open("/home");
+  await expect(page.getByText(shown("jskit.auth.profile.guest"))).toBeVisible();
+  await assertTranslated(page, "the signed-out profile widget");
+  await finish(api);
+});
+
+function settingsDocument(theme = "dark") {
+  return {
+    contentType: "application/vnd.api+json",
+    json: {
+      data: {
+        type: "user-settings",
+        id: "7",
+        attributes: {
+          profile: {
+            displayName: "Ada",
+            email: "ada@example.com",
+            avatar: { uploadedUrl: "", gravatarUrl: "", effectiveUrl: "", hasUploadedAvatar: true, size: 64, version: "1" }
+          },
+          preferences: {
+            theme,
+            locale: "en-US",
+            timeZone: "UTC",
+            dateFormat: "system",
+            numberFormat: "system",
+            currencyCode: "USD",
+            avatarSize: 64
+          },
+          notifications: { productUpdates: true, accountActivity: false, securityAlerts: true },
+          security: { authMethods: [{ kind: "password", provider: "local", configured: true }] }
+        }
+      }
+    }
+  };
+}
+
+test("account settings, their feedback and a refused field show only the pseudo-locale", options, async () => {
+  let saves = 0;
+  const limit = { limit: 32 };
+  const api = await openApp({
+    session: SIGNED_IN,
+    routes: {
+      "GET /api/settings": settingsDocument(),
+      "PATCH /api/settings/preferences": () => {
+        saves += 1;
+        return saves === 1
+          ? {
+              status: 422,
+              json: {
+                error: englishOf("jskit.errors.validation_failed"),
+                code: "validation_failed",
+                details: {
+                  fieldErrors: { theme: englishOf("jskit.kernel.validation.maxLength", limit) },
+                  fieldErrorCodes: { theme: { code: "kernel.validation.maxLength", params: limit } }
+                }
+              }
+            }
+          : settingsDocument("light");
+      }
+    }
+  });
+  const { page } = api;
+  await api.open("/account?returnTo=/home");
+  await expect(page.getByText(shown("jskit.users.accountSettings.profile.save"))).toBeVisible();
+  await assertTranslated(page, "account settings");
+
+  await page.getByRole("listitem").filter({ hasText: shown("app.settings.preferences") }).click();
+  await page.waitForURL("**section=preferences**");
+  await page.getByTestId("theme-select").click();
+  await expect(page.getByRole("option", { name: shown("jskit.users.accountSettings.preferences.theme.light") })).toBeVisible();
+  await assertTranslated(page, "the theme choices");
+  await page.keyboard.press("Escape");
+
+  await page.getByTestId("preferences-save").click();
+  await expect(page.getByText(shown("jskit.kernel.validation.maxLength", limit))).toBeVisible();
+  await assertTranslated(page, "a refused preference");
+  await page.getByTestId("preferences-save").click();
+  await expect(page.getByText(shown("jskit.users.accountSettings.preferences.saved"))).toBeVisible();
+  await assertTranslated(page, "saved preferences");
+  await finish(api);
+});
+
+test("shell request recovery and http errors show only the pseudo-locale", options, async () => {
+  const api = await openApp({
+    session: SIGNED_IN,
+    routes: {
+      "GET /api/offline": "abort",
+      "GET /api/broken": { status: 500, body: "" }
+    }
+  });
+  const { page } = api;
+  await api.open("/errors");
+  await expect(page.getByText(shown("jskit.http.request.failedWithStatus", { status: 500 }))).toBeVisible();
+  await expect(page.getByText(shown("jskit.shell.recovery.appUnreachable"))).toBeVisible();
+  await assertTranslated(page, "request errors");
+  await finish(api);
+});