Account Locked Login Block for React

Everything. The account, eight failed attempts and a lock that began at 21:25 UTC are typed constants; the unlock link waits 700 milliseconds and shows "Unlock link sent" without sending anything. In a product the count and the lock live on your server, keyed to the account and the network, and the unlock link is a single-use token with a short life that clears the count when it is used.

From the failed attempts, not typed: the rung is the last one whose count is at or below the attempts, so eight attempts land on the 15-minute rung. The lock's end time is the typed start (21:25 UTC) plus that rung's minutes, formatted by a small helper, and the line under the ladder says how many more wrong passwords would reach the next rung. Change the attempts or the start in the constants and every cell, word and time follows.

A ticking countdown would be a live region that never stops talking and a number that a screen reader keeps reading out. A fixed clock time is true for as long as the page is open, readable at once and the same for everyone. The page shows the time the lock ends, in UTC, in a time element, and the person decides when to come back.

Each cell starts with a glyph and a word: a check and "Served", a lock and "Locked now", a minus and "Not reached". The current one also has a heavy foreground edge and a slightly stronger tint, and is marked as the current step for assistive technology. Nothing is red or green.

The unlock link proves control of the account's email and opens the account at once, so it is the one button. Reset password is a link to the reset flow: it changes the password, which is the right choice when the attempts were a forgotten password rather than an attack. Both are safe to use during the lock.

It brings the two ways back again and puts focus on the unlock button. The ladder never changes, because the account is still locked in the demo: the sent link doesn't unlock anything here.