timescale.info#306 · The sign-in page is laid out as one column, with provider logos
- timeline-app
- pull request
- security
Closes #305. - `/login` and creating an account are a 420 px card centered under the site's mark, with a title and a one-line welcome. On phones the card takes the width with a 20 px inset. - Providers come first: full-width 44 px buttons, each with its logo: Google's G, GitHub's mark, Facebook's f, Microsoft's four squares and a building for a directory (LDAP) account. The logos are inline SVG in the new `components/provider-icon.jsx`, so the page makes no request to the providers and the CSP is unchanged. - An "or sign in with a password" divider, then the form with an even 16 px between fields. **Forgot password?** sits beside the Password label and only appears when the site can send email. **Sign in** is full width. - Below the form: "New here? Create an account". On sign-up it's "Already have an account? Sign in", and on the other steps "Back to sign in". The terms note shows on sign-in only, since sign-up has its own checkbox. - The other steps (recovery, reset, confirmation, two-factor, the directory form) use the same card with only their own form. Tests: `npm run build` and `npm run test:platform` pass. `npm test` passes apart from the README-contents check, which only fails locally on agent worktrees. The page was screenshotted at 1280 px and 390 px with Google, GitHub, Microsoft and a directory configured, with no page errors.
Sources
Open #306 · The sign-in page is laid out as one column, with provider logos in the timeline