Pages
Whole screens for signing in, resetting a password and reporting an error. They reflow from 320px up, keep every message as a tone, an icon and a word, and are built to WCAG 2.2 AA as a target.
6 pages, 4 exports
- AuthLayout
- LoginForm
- PasswordResetForm
- ErrorPage
ImportLink to the section Import
Each group has its own entry, so an app that needs only this group loads only this group. Everything is also exported from @skribly/ui.
import { AuthLayout, LoginForm, PasswordResetForm, ErrorPage } from '@skribly/ui/pages'Pages in this groupLink to the section Pages in this group
- AuthLayoutThe frame of the sign in and password reset screens: a brand on top, one card with the page heading, and room for a language switch underneath. Use it for any short task a reader does before entering an app.AuthLayout
- LoginFormEmail and password sign in with remember me, a password reset link and a show password button. Checks run in the browser first; the server adds field errors and a notice. Try any password, then "skribly".LoginForm
- PasswordResetForm: request a linkThe first step of a reset: the reader asks for a link by email. Say that a link is on its way whether or not the address has an account.PasswordResetForm
- PasswordResetForm: choose a new passwordThe second step, opened from the emailed link: a new password typed twice. Pass the token in hiddenFields, and hideEmail when the link already names the account.PasswordResetForm
- ErrorPageA full page for 404, 403, 500 and 503: what happened in plain words and the ways out. Children add a second language, a request id or a search box.ErrorPage
- ErrorPage: service unavailableThe same page for a server error, with a retry button and a request id to quote to support.ErrorPage