timescale.info#266 · Sign in, Sign up, or the account's menu at the header's end (#265)
- timeline-app
- pull request
- security
Closes #265. - **A guest** sees **Sign in** at the end of the header, and **Sign up** (to `/login?mode=register`) when the site takes registrations. A site without accounts shows neither. - **A signed-in account** sees its picture (or initial) and name. They open a menu with **Signed in as @name**, **Account**, **Your profile**, **Site administration** (for administrators) and **Sign out**. The menu closes on a choice, a click elsewhere or Escape, which returns the focus to the button. Sign out posts `/api/auth/logout` with the session's CSRF token and goes home. - **The navigation's Account link** is removed. - **On a phone,** the account sits beside the brand and the navigation wraps beneath. The menu button shrinks to the picture alone. - **Every page now renders per request,** since its header shows who is visiting. The layout reads the request headers before the session, so no page is prerendered with a guest's header. The icons are the only static files left. Files: `platform/components/account-menu.jsx` (new), `platform/app/layout.jsx`, `platform/app/platform.css` and the READMEs. ## Checks - Screenshots at 1280 px and 390 px, as a guest and signed in with the menu open. The same script checks that Escape closes the menu and that Sign out returns to the guest header. - `test/next-postgres.mjs`: the owner's dashboard has the account menu with their name, and a guest's has Sign in and no menu. - `npm test` (304), `npm run test:platform` and `test:platform:postgres` pass. This branches from main, as does #264 (the account page). They touch different parts of `platform.css` and should merge in either order.
Sources
Open #266 · Sign in, Sign up, or the account's menu at the header's end (#265) in the timeline