phase 7+: i18n primitive + login language picker + autocomplete-off

Adds a minimal Svelte 5 i18n primitive (`src/lib/i18n/`) backing the
login form, the layout blocker page, and the lobby placeholder.
SUPPORTED_LOCALES drives both the picker and the runtime lookup;
adding a language is a two-step change inside `src/lib/i18n/`.

Login form gains a globe-icon language dropdown (English / Русский
in their native names), defaulting to navigator.languages with `en`
as the fallback. Switching the locale re-renders the form in place;
on submit, the locale rides in the JSON body of `send-email-code`
because Safari/WebKit silently drops JS-set Accept-Language. Gateway
gains a body `locale` field that takes priority over the request
header for preferred-language resolution.

Email and code inputs disable browser autofill / suggestions
(`autocomplete=off` + `autocorrect=off` + `autocapitalize=off` +
`spellcheck=false`) so Keychain / address-book pickers and
remembered-value dropdowns no longer fire on focus.

Cross-cuts:
- backend & gateway openapi: clarify that body `locale` is honored.
- docs/FUNCTIONAL{,_ru}.md §1.2: document body-vs-header priority.
- gateway tests: body `locale` overrides Accept-Language; blank
  body `locale` falls back to header.
- new ui/docs/i18n.md; cross-links from auth-flow.md and ui/README.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Ilia Denisov
2026-05-07 16:14:40 +02:00
parent 22b0710d04
commit 9101aba816
20 changed files with 918 additions and 66 deletions
+65
View File
@@ -18,6 +18,7 @@ import {
import type { IDBPDatabase } from "idb";
import { AuthError } from "../src/api/auth";
import { i18n } from "../src/lib/i18n/index.svelte";
import { session } from "../src/lib/session-store.svelte";
import { type GalaxyDB, openGalaxyDB } from "../src/platform/store/idb";
import { IDBCache } from "../src/platform/store/idb-cache";
@@ -54,6 +55,7 @@ beforeEach(async () => {
session.resetForTests();
session.setStoreLoaderForTests(async () => store);
await session.init();
i18n.resetForTests("en");
sendEmailCodeSpy.mockReset();
confirmEmailCodeSpy.mockReset();
});
@@ -62,6 +64,7 @@ afterEach(async () => {
sendEmailCodeSpy.mockReset();
confirmEmailCodeSpy.mockReset();
session.resetForTests();
i18n.resetForTests("en");
db.close();
await new Promise<void>((resolve) => {
const req = indexedDB.deleteDatabase(dbName);
@@ -91,6 +94,7 @@ describe("login page", () => {
expect(sendEmailCodeSpy).toHaveBeenCalledWith(
expect.any(String),
"pilot@example.com",
{ locale: "en" },
);
expect(ui.getByTestId("login-code-input")).toBeInTheDocument();
});
@@ -222,4 +226,65 @@ describe("login page", () => {
expect(ui.getByTestId("login-email-input")).toBeInTheDocument();
});
});
test("renders the language picker with native names", async () => {
const Page = (await importLoginPage()).default;
const ui = render(Page);
const select = ui.getByTestId(
"login-language-select",
) as HTMLSelectElement;
const options = Array.from(select.options).map((o) => ({
value: o.value,
text: o.textContent?.trim() ?? "",
}));
expect(options).toEqual([
{ value: "en", text: "English" },
{ value: "ru", text: "Русский" },
]);
expect(select.value).toBe("en");
});
test("switching the language re-renders the form text in place", async () => {
const Page = (await importLoginPage()).default;
const ui = render(Page);
expect(ui.getByTestId("login-email-submit")).toHaveTextContent(
"send code",
);
const select = ui.getByTestId(
"login-language-select",
) as HTMLSelectElement;
await fireEvent.change(select, { target: { value: "ru" } });
await waitFor(() => {
expect(ui.getByTestId("login-email-submit")).toHaveTextContent(
"отправить код",
);
});
expect(i18n.locale).toBe("ru");
});
test("sendEmailCode receives the active locale", async () => {
sendEmailCodeSpy.mockResolvedValueOnce({ challengeId: "ch-1" });
const Page = (await importLoginPage()).default;
const ui = render(Page);
const select = ui.getByTestId(
"login-language-select",
) as HTMLSelectElement;
await fireEvent.change(select, { target: { value: "ru" } });
await fireEvent.input(ui.getByTestId("login-email-input"), {
target: { value: "pilot@example.com" },
});
await fireEvent.click(ui.getByTestId("login-email-submit"));
await waitFor(() => {
expect(sendEmailCodeSpy).toHaveBeenCalledTimes(1);
});
const args = sendEmailCodeSpy.mock.calls[0]!;
expect(args[1]).toBe("pilot@example.com");
expect(args[2]).toEqual({ locale: "ru" });
});
});