Connected Accounts Account Block for React

Edit PROVIDERS for the services you offer (an id, a two-letter mark for the neutral tile, the name and the address the service returned) and LINKS for what this person has linked: the ISO day it was linked, how many times it has signed them in and the last three sign-ins, newest first. Dates are formatted in UTC so they read the same on the server and in every time zone. The counts in the header, the sentence in each pane and the list of providers still to link are all worked out from those two lists. The tiles are placeholders: drop in a logo you have the rights to use.

Everything. Linking adds a row to the page's state and says so ("Nothing opened at Apple"), Check this connection only reports what a real check would do, and Unlink removes the row and keeps it on an undo stack. No provider is contacted and nothing is stored. To wire it, start the provider's OAuth flow from the Link buttons, call your server to revoke the link in unlink, and fill LINKS from your user record; the dialog's copy already says that nothing changes at the provider.

The example account has no password, so a linked provider is the only way in. When one remains its Unlink button gets aria-disabled, a Only way in badge and a line saying to link another account first, and pressing it answers in the status line instead of opening a dialog. Link another provider and both rows can be unlinked again. If your accounts always have a password, remove the rule by letting only be false.

Unlinking removes the row at once and pushes it with its position onto a small stack; the Undo button at the foot puts the last one back where it was, with its history, and moves focus to it. Linking a provider again by hand clears its entry from the stack so a row can never appear twice. With nothing to undo the button stays in place, looks quiet and answers "Nothing to undo."

The linked accounts are a real list, every button names its provider ("Sign-ins for GitHub", "Unlink GitHub"), and the disclosure is a button with aria-expanded and aria-controls whose closed content is inert. The tiles are hidden from assistive technology because the name is always beside them. The dialog traps focus and closes with Escape. One polite status line reports each link, unlink, check and undo, and counts and addresses keep their direction in an RTL layout.

Each row keeps its tile and text and moves its two buttons under them. The history opens under the row at full width, with each sign-in's place and browser on two lines. The linking buttons wrap, and the foot's Undo sits under the status line.