Passkeys Account Block for React

Edit PASSKEYS at the top. Each has an id, a name the person chose, a kind (laptop, phone or key, which picks the icon and the word Device passkey or Security key), the browser and system it was made on as where, the ISO days it was created and last used (empty when it never has) and here, true for the one on the device in use, which gets a This device badge. Dates are formatted in UTC so they read the same on the server and in every time zone. Counts and the empty state are worked out from the list.

It asks for a name (an empty or repeated one is refused under the field, which keeps focus), then adds a row at the end and moves focus to it. No WebAuthn call is made and nothing is registered with a browser or a server: the dialog says so, and so does the status line. To make it real, call navigator.credentials.create() with options from your server in the submit handler, send the result back to be stored, and add the row from the response.

Click a name or press the pencil next to it to edit in place. Enter or leaving the field saves, Escape or the cross puts the old name back. An empty name or one that another passkey already has keeps the old name and says why in the status line. The name is only a label for the person, so renaming needs no confirmation; send it to your server in commit.

Removing a passkey can lock someone out if it is their way in, so it opens an alert dialog (no outside click closes it, Escape and Keep it do). When it is the only passkey the first sentence says a password is then the only way into the account. Confirming removes the row in the page and moves focus to the next row, or to the Add button in the empty state. Each trigger is passed to AlertDialogTrigger through render.

The list is a real list named Passkeys, and each row's dates are a description list whose terms are hidden from view once the columns have their own heads, so a screen reader hears Created and Last used either way. Every button names its passkey ("Remove Work laptop", "Rename Desk key"). The dialogs trap focus, close with Escape and return focus; the new row, or the row after a removal, takes focus. One polite status line reports each add, rename and removal.

Each row keeps its icon and name and stacks the two dates and Remove under them; the column heads are gone because the dates carry their own labels. The header button drops under the sentence. The dialogs are the catalog's: a sheet stuck to the bottom of the screen.