Recovery Options Account Block for React

Edit OPTIONS at the top: each has an id, a name, a state (none, set or verified), the day it was verified as since, its masked value, and what its field is called, hints and takes (field, hint, input, placeholder). The count in the heading, the line over the list and each badge are worked out from the states. GOAL is how many ways back make a person safe (three here): reach it and the line says so. The order of the array is the order the ways are tried, and the numbers follow it.

Save checks the field (an address needs its at sign and a domain, a number needs its country code and seven digits), masks what you typed (the first two letters of an address, the last four digits of a number) and marks the row Set up. Nothing is sent, nothing is stored and no link or code goes out, so it never becomes Verified here; the status line says it was saved in this demo. In your app, post the value to your server, which sends the link or code, and turn the row to Verified when the person confirms it.

It says in the status line that a test was sent in this demo and that nothing was sent. A real test sends a harmless message to that address or number so a person finds out now, not during a lockout, that the way back works; it would then show the day it last succeeded.

The number is the order the ways are tried, so a list that read differently would mislead; it is a real ordered list for the same reason. There is no dragging: change the order in the array. A way that isn't set up is skipped when someone recovers an account.

The rows are an ordered list with a name saying so, state is written in words and an icon, never colour alone, and masked values are read as written. Each button names its row ("Set up security key", "Send a test to recovery email"), and the Set up or Change button says whether its field is open with aria-expanded. Opening a field moves focus into it; Save and Cancel return focus to the button that opened it. The problem line sits under the field, tied to it, with an icon and words in the text colour. One polite status line is present from the start.

Each row keeps its number, name, state and value, with the two buttons dropping under them. An open field takes the full width of the row, with Save and Cancel under it. The advice line may take two or three lines; its space is reserved, so it never moves the list when the count changes.