Sign-in Methods Settings Block for React

Edit METHODS at the top: each has an id, a name, a hint, the line its button says on the drawn card and, for a service, the two letters of its tile. SAVED holds which are on and in what order, plus the lockout. The drawn card, the sentence under it, the counts and the lockout sentence are all worked out from that state, so nothing is typed twice. Put your own logos in the tile slots if you have the rights to them; the tiles are lettermarks on purpose.

If only one method is on and you switch it off, the change is refused: the switch is put back, a message under the list says nobody could sign in, the status line says it too and focus stays on that switch. Any other method can be turned off freely, and turning one back on never needs a check. Enforce the same rule on your server, since a form on a page can't stop a request that skips it.

Move up and Move down are real buttons named for the method ("Move Passkey up"), with the first one's Up and the last one's Down left in place but saying there is nowhere to go. After a move, focus stays on the button you pressed, or on the other one when that one has reached an end, and the status line says where the method went ("Moved Passkey to position 1 of 5."). Reordering counts as one change. Methods that are off are moved too, so they keep their place when they come back. There is no drag handle, so it works the same by keyboard and by touch.

Everything. Nothing signs in, saves or connects: the switches, the order and the lockout live in this page's state, Save only says what it kept, and Google and GitHub are text. To make it real, send the saved methods and their order to your auth service, render the real sign-in page from the same list, and apply the lockout where passwords are checked. Brute-force limits belong on the server, per account and per address.

The drawn card comes first, then the rows, one per line with the same two move buttons and the switch, then the lockout band stacked, and the action foot is pinned to the bottom of the screen. The drawn card is hidden from assistive technology and restated by the sentence under it; every row is named ("Google sign-in") and says where it stands ("Google, shown 3" or "off"), and the status line is a polite live region present from the start.