Team Members Account Block for React

Edit MEMBERS (an id, a name and its two initials, an email, a role of Owner, Admin, Editor or Viewer, the ISO day of the last sign-in and whether two-factor is on as tfa) and INVITES (an email, the role it offers and the ISO sent and expires days). The count of people without two-factor, the sort order and "yesterday" are worked out from those rows and the one AS_OF constant, never the clock, so replace it with today's date when you wire it up. The team has SEATS seats, members and invitations together.

Everything. Changing a role, queuing a reminder, resending a link, inviting, withdrawing and removing change this page's state and say so in the foot; nothing is sent and nobody is told. Undo walks the changes back, which a real server can't always do. To make it real, call your endpoints in setRoleOf, remind, resendLink, invite, withdraw and remove, change a tile only when they answer, and put a failure in the same status line. Sending the reminder and the invitation belongs to your server: the form only checks the address.

The band counts the members whose two-factor is off, and Send a reminder queues one for each of them at once; their tiles then read "Two-factor off, reminded" and the button turns quiet and says "Reminder queued". The shield and the words carry the state, never a colour. Members without two-factor sort to the front so they can't be missed, and the owner can't be removed or have their role changed from here.

Remove member in a tile's menu opens an alert dialog that says the member can no longer sign in, that the seat frees up and that their work stays. Focus starts on Cancel, Escape closes it and focus returns to the tile's menu button. After you confirm, focus goes to the next tile's menu button. The tile is replaced by an empty seat, so the grid keeps its height, and the first empty seat says so.

The tiles go one across, each with the same height, and the nudge band stacks its button under the sentence. The foot with the status line and Undo stays pinned to the bottom of the screen, so the result of a change is always in view. The invitation form stacks its fields.

The tiles are a real list. Every role select is named for the person ("Role for Maren Dahlquist"), the menu buttons say whose menu they open, the shield is hidden from assistive technology because the words are beside it, and emails keep their reading order in a right-to-left page. Problems under the invitation field are announced and linked to it, and the status line is a polite live region present from the start.