9101aba816
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>
263 lines
8.3 KiB
TypeScript
263 lines
8.3 KiB
TypeScript
// Phase 7 end-to-end coverage for the email-code login flow,
|
|
// returning-user resume, gateway-driven session revocation, and the
|
|
// browser-not-supported blocker. The gateway is mocked through
|
|
// `page.route(...)`; the lobby's first authenticated `user.account.get`
|
|
// call is answered with a forged `ExecuteCommandResponse` signed by
|
|
// the fixture key in `fixtures/gateway-key.ts` so `GalaxyClient.
|
|
// verifyResponse` accepts it under the matching public key the dev
|
|
// server picks up via `VITE_GATEWAY_RESPONSE_PUBLIC_KEY`.
|
|
//
|
|
// The Connect-Web request URL pattern is
|
|
// <baseUrl>/galaxy.gateway.v1.EdgeGateway/<MethodName>
|
|
// so the route handlers below match against the trailing path
|
|
// suffix and ignore the host.
|
|
|
|
import { fromJson, type JsonValue } from "@bufbuild/protobuf";
|
|
import { expect, test, type Page } from "@playwright/test";
|
|
import { ExecuteCommandRequestSchema } from "../../src/proto/galaxy/gateway/v1/edge_gateway_pb";
|
|
import { forgeExecuteCommandResponseJson } from "./fixtures/sign-response";
|
|
|
|
interface MockSetup {
|
|
pendingSubscribes: Array<() => void>;
|
|
}
|
|
|
|
async function mockGatewayHappyPath(
|
|
page: Page,
|
|
displayName: string,
|
|
): Promise<MockSetup> {
|
|
const pendingSubscribes: Array<() => void> = [];
|
|
|
|
await page.route("**/api/v1/public/auth/send-email-code", async (route) => {
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify({ challenge_id: "ch-test-1" }),
|
|
});
|
|
});
|
|
|
|
await page.route(
|
|
"**/api/v1/public/auth/confirm-email-code",
|
|
async (route) => {
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify({ device_session_id: "dev-test-1" }),
|
|
});
|
|
},
|
|
);
|
|
|
|
await page.route(
|
|
"**/galaxy.gateway.v1.EdgeGateway/ExecuteCommand",
|
|
async (route) => {
|
|
const reqText = route.request().postData();
|
|
if (reqText === null) {
|
|
await route.fulfill({ status: 400 });
|
|
return;
|
|
}
|
|
const req = fromJson(
|
|
ExecuteCommandRequestSchema,
|
|
JSON.parse(reqText) as JsonValue,
|
|
);
|
|
const accountJson = JSON.stringify({
|
|
account: {
|
|
user_id: "user-1",
|
|
email: "pilot@example.com",
|
|
user_name: "player-test",
|
|
display_name: displayName,
|
|
},
|
|
});
|
|
const responseJson = await forgeExecuteCommandResponseJson({
|
|
requestId: req.requestId,
|
|
timestampMs: BigInt(Date.now()),
|
|
resultCode: "ok",
|
|
payloadBytes: new TextEncoder().encode(accountJson),
|
|
});
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: responseJson,
|
|
});
|
|
},
|
|
);
|
|
|
|
await page.route(
|
|
"**/galaxy.gateway.v1.EdgeGateway/SubscribeEvents",
|
|
async (route) => {
|
|
// Hold the stream open until the test releases it via
|
|
// `pendingSubscribes`. Releasing fulfils with a Connect
|
|
// end-of-stream frame so the watcher reads a clean stream
|
|
// end and triggers the documented revocation path.
|
|
const action = await new Promise<"endOfStream" | "abort">(
|
|
(resolve) => {
|
|
pendingSubscribes.push(() => resolve("endOfStream"));
|
|
},
|
|
);
|
|
if (action === "abort") {
|
|
await route.abort();
|
|
return;
|
|
}
|
|
// Connect over HTTP/1.1 server-streaming framing:
|
|
// 1 byte flag (0x02 = end-stream)
|
|
// 4 bytes big-endian length
|
|
// N bytes JSON body
|
|
// `{}` is an end-stream with no error; that's how the
|
|
// gateway closes a healthy stream after a session
|
|
// invalidation.
|
|
const body = new TextEncoder().encode("{}");
|
|
const frame = new Uint8Array(5 + body.length);
|
|
frame[0] = 0x02;
|
|
new DataView(frame.buffer).setUint32(1, body.length, false);
|
|
frame.set(body, 5);
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "application/connect+json",
|
|
body: Buffer.from(frame),
|
|
});
|
|
},
|
|
);
|
|
|
|
return { pendingSubscribes };
|
|
}
|
|
|
|
async function completeLogin(page: Page): Promise<void> {
|
|
await page.goto("/");
|
|
await expect(page).toHaveURL(/\/login$/);
|
|
await page.getByTestId("login-email-input").fill("pilot@example.com");
|
|
await page.getByTestId("login-email-submit").click();
|
|
await expect(page.getByTestId("login-code-input")).toBeVisible();
|
|
await page.getByTestId("login-code-input").fill("123456");
|
|
await page.getByTestId("login-code-submit").click();
|
|
await expect(page).toHaveURL(/\/lobby$/);
|
|
}
|
|
|
|
test.describe("Phase 7 — auth flow", () => {
|
|
// Each test runs in a fresh browser context by default, so IndexedDB
|
|
// starts empty on every test entry. The setup hook here is reserved
|
|
// for routes shared across cases.
|
|
|
|
test("fresh browser completes the email-code login and reaches the lobby", async ({
|
|
page,
|
|
}) => {
|
|
const mocks = await mockGatewayHappyPath(page, "Pilot");
|
|
await completeLogin(page);
|
|
await expect(page.getByTestId("device-session-id")).toHaveText(
|
|
"dev-test-1",
|
|
);
|
|
await expect(page.getByTestId("account-greeting")).toContainText("Pilot");
|
|
|
|
mocks.pendingSubscribes.forEach((resolve) => resolve());
|
|
});
|
|
|
|
test("returning user lands on the lobby without re-login", async ({
|
|
page,
|
|
}) => {
|
|
const mocks = await mockGatewayHappyPath(page, "Pilot");
|
|
await completeLogin(page);
|
|
await expect(page.getByTestId("account-greeting")).toBeVisible();
|
|
|
|
await page.reload();
|
|
await expect(page).toHaveURL(/\/lobby$/);
|
|
await expect(page.getByTestId("device-session-id")).toHaveText(
|
|
"dev-test-1",
|
|
);
|
|
|
|
mocks.pendingSubscribes.forEach((resolve) => resolve());
|
|
});
|
|
|
|
test("server-side revocation closes the active client within one second", async ({
|
|
page,
|
|
}) => {
|
|
const mocks = await mockGatewayHappyPath(page, "Pilot");
|
|
await completeLogin(page);
|
|
await expect(page.getByTestId("account-greeting")).toBeVisible();
|
|
|
|
// Fire all pending SubscribeEvents requests with an empty 200
|
|
// response. Connect-Web's server-streaming reader sees no frames
|
|
// and the watcher trips into `signOut("revoked")`, which the
|
|
// layout effect turns into a redirect back to /login.
|
|
const releaseAt = Date.now();
|
|
mocks.pendingSubscribes.forEach((resolve) => resolve());
|
|
|
|
await expect(page).toHaveURL(/\/login$/, { timeout: 1000 });
|
|
expect(Date.now() - releaseAt).toBeLessThan(1500);
|
|
});
|
|
|
|
test("language picker switches the form text and forwards the locale", async ({
|
|
page,
|
|
}) => {
|
|
const sendRequests: Array<{ body: Record<string, unknown> }> = [];
|
|
await page.route(
|
|
"**/api/v1/public/auth/send-email-code",
|
|
async (route) => {
|
|
const raw = route.request().postData() ?? "";
|
|
sendRequests.push({
|
|
body: JSON.parse(raw) as Record<string, unknown>,
|
|
});
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify({ challenge_id: "ch-test-2" }),
|
|
});
|
|
},
|
|
);
|
|
|
|
await page.goto("/login");
|
|
await expect(page.getByTestId("login-email-submit")).toHaveText(
|
|
"send code",
|
|
);
|
|
|
|
await page
|
|
.getByTestId("login-language-select")
|
|
.selectOption("ru");
|
|
await expect(page.getByTestId("login-email-submit")).toHaveText(
|
|
"отправить код",
|
|
);
|
|
|
|
await page.getByTestId("login-email-input").fill("pilot@example.com");
|
|
await page.getByTestId("login-email-submit").click();
|
|
await expect(page.getByTestId("login-code-input")).toBeVisible();
|
|
|
|
expect(sendRequests).toHaveLength(1);
|
|
expect(sendRequests[0]!.body).toEqual({
|
|
email: "pilot@example.com",
|
|
locale: "ru",
|
|
});
|
|
});
|
|
|
|
test("browser without WebCrypto Ed25519 shows the not-supported blocker", async ({
|
|
page,
|
|
}) => {
|
|
await page.addInitScript(() => {
|
|
// Force the SessionStore probe to fail by making
|
|
// generateKey reject for Ed25519 specifically. Other
|
|
// algorithms continue to work so unrelated browser code
|
|
// is not disturbed.
|
|
const original = crypto.subtle.generateKey.bind(crypto.subtle);
|
|
crypto.subtle.generateKey = ((
|
|
algorithm: AlgorithmIdentifier | RsaHashedKeyGenParams | EcKeyGenParams,
|
|
extractable: boolean,
|
|
keyUsages: KeyUsage[],
|
|
) => {
|
|
const name =
|
|
typeof algorithm === "string"
|
|
? algorithm
|
|
: (algorithm as KeyAlgorithm).name;
|
|
if (typeof name === "string" && name.toLowerCase() === "ed25519") {
|
|
return Promise.reject(
|
|
new DOMException("not supported", "NotSupportedError"),
|
|
);
|
|
}
|
|
return original(
|
|
algorithm as Parameters<typeof original>[0],
|
|
extractable,
|
|
keyUsages,
|
|
);
|
|
}) as typeof crypto.subtle.generateKey;
|
|
});
|
|
|
|
await page.goto("/");
|
|
await expect(page.getByText(/browser not supported/i)).toBeVisible();
|
|
await expect(page).not.toHaveURL(/\/login$/);
|
|
});
|
|
});
|