Progress Steps Login Block for React

Everything. Any address that looks like an email and any password get through the first two steps, and the code step accepts 482913, printed once under the field. Verifying waits less than a second, then the page shows three ticks (account found, password accepted, code verified) with a polite status message saying nothing was sent. In a product, check each answer with your server as it's given and keep the busy state until it answers.

No. "About 20 seconds to go" is typed text for each step (20, 15, then 5 seconds), not something the page measures. If you show an estimate, base it on how long your own visitors take and say "about"; if you can't, keep the progress line and drop the time line.

Steps reached, not time: it sits at 10, 40 and 70 percent on the three steps and fills at the end. It is decorative and hidden from screen readers, because the cells, the "Step 2 of 3" line and a polite message each time you move say the same thing in words.

Everything you typed. Back from the code returns to the password with it still in the field, and back again returns to the email; going forward, the code you had entered is still in its slots. Focus moves to the field of the step you land on, and a polite message says the step and that what you typed is kept.

No. The cells are a read-only picture of where you are, with the current one marked for assistive technology and finished ones announced as "Done", so a visitor can't skip a step. Steps only advance with Continue and go back with Back.

The three cells stay three across, with the number over the name, and the progress line and time line sit under them in one row. Each panel is one field and one button, so the Continue button is on the first screen. The steps share one grid cell, so nothing moves when a step changes.