timescale.info
Sign inSign up

How OpenChronology was built

Every merged pull request of openchronology/timeline-app, its first week of commits and its releases; and before them the 2020 PureScript editor, from snapshots of its deleted repositories in the Wayback Machine. Written to this server through the HTTP API.

327 moments · 2020-03-09T00:15:08Z CE – 2026-11-02T20:11:21Z CE · by @athan · @athan

#264 · A tidier account page: a summary, then settings as cards (#263)

  • timeline-app
  • pull request

Closes #263. The account page was one 520 px column holding every setting, with every form always open; the current password was asked four times. Now it has: - **A summary band across the top:** picture (or initial), @username, email with Verified or Unconfirmed, a storage meter, and links to the public profile, site administration (for admins) and **Sign out**. - **Cards**, two columns wide on a wide screen and one on a phone: - **Profile:** upload a picture or use an image address, previewed before saving; the sensitive content setting. - **Security:** email, password and two-factor authentication, plus recovery codes when it's on. - **Sessions:** each session, marked when it's this one, and **Sign out other sessions**. - **Sign-in methods:** password, and each provider the site offers, linked or not. Linking and unlinking happen here; the provider buttons used to sit at the top of the page. - **API keys:** the keys, each to revoke or remove, and **New API key**. - **Delete your account**, in a danger-zone card. - **Each change is closed until chosen:** a button opens its own small form, asking for the current password, and a code when two-factor is on, only for that change. The long explanations became help tips. The API calls are the same as before; only the page changed. The sign-in and registration forms are unchanged. - `platform/components/account.jsx`: the guest forms, and `AccountSettings` for a signed-in account, with the security and sessions cards. - `platform/components/account-access.jsx`: the profile, API key, sign-in method and deletion cards; `useAccountAction`; and the shared `Confirmation` and `Disclosure`. - `platform/app/platform.css`: the summary, grid, cards, rows, badges and disclosures, with phone layouts. Checked by screenshots of a signed-in account at 1440 px and 390 px, with a form open. `npm test` (304), `npm run test:platform` and `test:platform:postgres` pass.

Sources

Open #264 · A tidier account page: a summary, then settings as cards (#263) in the timeline