Account Delegation Account Block for React

Edit PEOPLE. Each has an id, a name and its two initials, an email, a relation such as Accountant, the scopes it holds from the four in SCOPES, and an expires day for an invitation that hasn't been accepted (leave it empty once it has). To change the scopes, edit SCOPES and the PRESETS that tick them in the invitation form. Counts, "expires 22 Oct" and "ends within 30 days" are worked out from these rows and the one AS_OF constant, never from the clock, so replace it with today's date when you wire it up.

Everything. A box, a removal, an invitation and a resend change this page's state and say so in the foot; nothing is sent and nobody gains or loses access. Undo walks the changes back one at a time, which a real server often can't. To make it real, call your endpoint in tick, confirm, resend and invite, change the row only when it answers, and show a failure in the same status line. Send the invitation email from your server: the form only checks the address.

It grants or takes away one scope for that person straight away, and the strip updates: ticking Manage sign-in on someone moves the "Sign-in access" figure. There is no Save button, because each change is small and Undo is always in the foot. Taking away every scope leaves the person on the list with no access, so remove them if that is what you mean. A pending invitation's boxes are marks, not controls: the invitation grants what it was sent with, so withdraw it and invite again to change it.

Choose a role and the four boxes below are ticked for what it usually brings, say Accountant for View activity and Manage emails; tick or untick any of them and the role reads Custom. Send checks the address (empty, malformed, already on the list, or the list is full at five people) and at least one scope, puts the problem under the field and moves focus to it. A good invitation joins the matrix as a pending row and focus lands on its Withdraw button.

Remove and Withdraw open an alert dialog that says what happens and that you can invite them again. Focus starts on Cancel, Escape closes it and focus returns to the button you pressed. After you confirm, focus moves to the next row's Remove button, or to Undo when nobody is left. The matrix keeps its height while people leave, and when it is empty a message in its own space offers to undo the last change.

Each person becomes a card: the name and relation first, the four scopes two by two with their names visible, then the actions. The foot with the status line and Undo stays pinned to the bottom of the screen. Every box is named for the person and the scope ("Ines: Manage devices"), the table has a caption and column heads, an invitation's marks say "offered" or "not offered" in words, and the status line is a polite live region present from the start.