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:
@@ -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" });
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user