Public: anyone can read this; the crew can change it.
The /signin and /signup pages speak the home page's language #9821
Check · Review · Land · Live done — Landed and live in production.
scout/forge:scout/9812-the-signin-and-signup-pages-speak-the-ho → main 1 commit fork
3 files
changed +43
−1
docs/design/areas/forms.md +2
| @@ -6,3 +6,5 @@ A form's fields and its buttons sit in two rows, one for what you fill in and on | ||
| 6 | 6 | - `.form-actions` — the row of a form's buttons under its fields: 16px above, 8px apart, wrapping. Styled in `style/components.ts`, and in `style/content.ts` for a thread's close reason and "close into" input and for `.comment-form` on a narrow screen; written by nearly every form in `src/web/pages/` (`account.ts`, `settings.ts`, `crew.ts`, `edit.ts`, `issues.ts`, `pulls.ts`, `oauth.ts`, `teams.ts`, `chain.ts`, `everyday.ts`) and by the review comment form in `diff-view.ts`; `client.ts` finds its `.muted` note to report a save. |
| 7 | 7 | |
| 8 | 8 | - The gate break-glass (#7790) on the pull's Files step is a plain `field()` with a hint and a `.form-actions` row holding one `btn` in the `danger` variant; no new class. It sits under the disabled primary Merge button, so the page keeps one accent. |
| 9 | ||
| 10 | - `/signin` and `/signup` (#9812) speak the home page's language and add no class: `authForm` in `pages/site.ts` draws the page's one `<h1>` (`pageHead`), then the passkey door, the form and its `.form-actions` row straight on the page, no `.card`. `test/auth-language.test.ts` holds the shape. |
src/web/pages/site.ts +1 −1
| @@ -429,7 +429,7 @@ function authForm( | ||
| 429 | 429 | kind === "signup", |
| 430 | 430 | () => html`<p class="mb" id="signup-you-get">${SIGNUP_YOU_GET} <a href="/forges/new">${SIGNUP_OWN_FORGE}</a></p>`, |
| 431 | 431 | )} |
| 432 | ${card(body)} | |
| 432 | ${body} | |
| 433 | 433 | ${when( |
| 434 | 434 | kind === "signin", |
| 435 | 435 | () => html`<p class="mt"><a class="small" href="/recover">Lost your device?</a></p>`, |
test/auth-language.test.ts added +40
| @@ -0,0 +1,40 @@ | ||
| 1 | /** /signin and /signup speak the home page's language (#9812): one heading, the form on the page, no card. */ | |
| 2 | import { afterAll, beforeAll, expect, test } from "bun:test"; | |
| 3 | import { mkdtemp, rm } from "node:fs/promises"; | |
| 4 | import { tmpdir } from "node:os"; | |
| 5 | import { join } from "node:path"; | |
| 6 | import { createApp } from "../src/app.ts"; | |
| 7 | import { serve } from "../src/http/server.ts"; | |
| 8 | ||
| 9 | let dir = ""; | |
| 10 | let app: ReturnType<typeof createApp>; | |
| 11 | let servers: Awaited<ReturnType<typeof serve>>; | |
| 12 | ||
| 13 | beforeAll(async () => { | |
| 14 | dir = await mkdtemp(join(tmpdir(), "forge-auth-lang-")); | |
| 15 | app = createApp({ dataDir: dir, port: 0 }); | |
| 16 | servers = await serve(app); | |
| 17 | }); | |
| 18 | afterAll(async () => { | |
| 19 | servers.stop(); | |
| 20 | app.close(); | |
| 21 | await rm(dir, { recursive: true, force: true }); | |
| 22 | }); | |
| 23 | ||
| 24 | const main = (page: string): string => page.slice(page.indexOf("<main"), page.indexOf("</main>")); | |
| 25 | ||
| 26 | for (const [path, heading, action] of [ | |
| 27 | ["/signin", "Sign in", 'action="/signin"'], | |
| 28 | ["/signup", "Create your account", 'action="/signup"'], | |
| 29 | ] as const) { | |
| 30 | test(`${path} signed out is one heading and the form, with no card`, async () => { | |
| 31 | const res = await fetch(servers.url + path); | |
| 32 | expect(res.status).toBe(200); | |
| 33 | const page = main(await res.text()); | |
| 34 | expect(page.match(/<h1[\s>]/g)?.length).toBe(1); | |
| 35 | expect(page).toContain(heading); | |
| 36 | expect(page).toContain(`<form method="post" ${action}`); | |
| 37 | expect(page).not.toContain('class="card'); | |
| 38 | expect(page).not.toContain("card-body"); | |
| 39 | }); | |
| 40 | } |