Sign-in Page
Getting into an app, and back in when something goes wrong: signing in (with a second step), creating an account, and resetting a password, with every state on the way. Made only of Canon's components. Try a wrong password (type wrong), a wrong code (000000), or a reset that ends in the app.
The pattern
A page of its own, without the app around it: the app's mark, then a Card for each step. In an app, each step is its own address: /sign-in, /sign-in/code, /sign-up, /forgot-password, /reset-password?token=….
Globex Billing
Sign in
Welcome back to Globex Billing.
Enter your code
The 6-digit code in your authenticator app.
Signed in
As ada@globex.example.
Create your account
For Globex Billing.
Check your inbox
We sent a link to you@globex.example. Open it to confirm the address is yours.
Reset your password
Enter your email; we'll send you a link to choose a new password.
Check your email
If there's an account for you@globex.example, a link to reset its password is on its way. It works for an hour.
Choose a new password
For ada@globex.example.
This link has expired
Reset links work for an hour, and only once. Ask for a new one.
Signing in
Two Fields: the email (autocomplete="username") and a Password with autocomplete="current-password", so password managers fill them. No rules and no strength meter here: they're for choosing a password, not typing one in. The way out, "Forgot password?", is the password Field's own action, beside its label. Password warns when Caps Lock is on.
While the server answers, the Button is busy (aria-busy) and unavailable, so it isn't sent twice. A wrong password shows an Alert (role="alert") that doesn't say which of the two was wrong, empties the password and puts focus back in it. After three, the Alert says to wait, and offers the reset.
Other providers go after a Separator with "or", as Buttons whose words say where they go, each with its provider's mark (decoration: aria-hidden, in the Button's text color). "Keep me signed in" is a Checkbox: it's sent with the form, unlike a Switch.
The second step
An Input OTP with autocomplete="one-time-code", so a code the device received fills in by itself. It's checked as soon as the last digit is in (the Button is there too). A wrong code is the Field's error, and the code empties for another try. Lost devices have a way out: a recovery code.
Creating an account
The new password shows what it needs while it has focus (data-reveal="focus"): its rules, checked as people type, and a strength meter scored from them. The confirmation only says whether it matches (data-match). Both use autocomplete="new-password", so a password manager can make one up. Afterwards, a step that says where the confirmation went, with a way to send it again.
Resetting a password
Asking for a link says the same whether or not there's an account for that email, so the page can't be used to find out who has one. Sending again waits 30 seconds, counting down on its Button. The link opens "Choose a new password" (its rules shown at once: it's all the page is for), then sign in, with an Alert that says the password changed. An old link gets a page of its own, with a way to ask for a new one.
The page's states
A session that ended brings people back to sign in with an Alert that says so (role="status": it's news, not an error), and back where they were afterwards. Each step's title takes focus when it opens, as a new page's would; each step is its own address.