Backup Codes Account Block for React

Edit FIRST_SET and FRESH_SETS at the top. A set has a made date and ten codes, each with the ISO day it was used (empty while it works). The meter, the count in the heading, the line under the meter and the file are all worked out from those, so nothing is typed twice. Codes are shown as nine characters with no look-alikes (no zero, o, one, l or i) so they survive being read out; use whatever your server makes. Dates are formatted in UTC, so they read the same on the server and in every time zone.

Download codes saves a real text file made from the set on screen: the product, the day the set was made, the ten codes numbered, each spent one marked with its day, and a line telling the person to keep it safe. Copy codes puts only the codes that still work on the clipboard, one per line, so they paste straight into a password manager; it says in the status line how many it took, or that the clipboard refused (a page that isn't served over HTTPS has none). Both are the browser's own doing: nothing is uploaded.

Everything. Confirming swaps the typed set for a second one in the page, says so in the status line and voids the old codes on screen; no request is sent and no code is stored. In your app, post the password to your server in confirm, let the server check it, make the new codes with a cryptographically secure generator, store only their hashes and return the plain codes once for display. Mark a code as used on the server when it signs someone in, and send the used days back to fill used.

The alert dialog asks for the account password because a new set replaces every old code, and a stolen session shouldn't be able to do that quietly. The field is a Password Input with a show and hide button; the confirm button stays disabled until something is typed, and in this demo any password of 8 or more characters passes, which the dialog says. Focus starts in the field, Escape and Keep my codes close it without changing anything, and focus goes back to the button that opened it. The trigger is passed to AlertDialogTrigger through render, and the dialog is controlled with open and onOpenChange.

The codes are a real list named Backup codes, each in a left-to-right monospace span so a right-to-left page doesn't reorder them, and a spent code says so in text ("Used 3 Oct. It no longer works"), never only with the strikethrough. The meter is decorative: the count is written beside it as "7 of 10 left". One polite status line is present from the start and reports each copy and each new set. The buttons are named, every control is reachable with Tab, and the dialog traps focus and returns it.

The header button drops under the sentence, the grid keeps two codes across because nine characters fit a narrow column, and the two actions at the foot share a row with the status line above them. The alert dialog is the catalog's: a sheet stuck to the bottom of the screen.