Role Select Login Block for React

Everything. The three roles and the abilities each has are typed in one list, the chosen role changes the matrix and the sentence at once, and Continue waits 700 milliseconds and says "Continued as Editor. Nothing was sent." In a product, read the person's roles at that company from your server, show the abilities each role really grants, and start the session with the chosen role.

The rows, the columns and the sentence all read the same list: an ability is in a role's list or it isn't. The count in each row ("3 of 4 abilities") and the summary are worked out from it, so editing one role in the data updates every place that mentions it. Each answer is a word and a mark, so it never depends on color alone.

Four columns would be cramped, so only the chosen role's column shows next to the abilities, and choosing another role swaps the column. From the medium breakpoint all three roles show side by side, with the chosen one ringed.

They are native radio inputs in one group named Your roles: arrow keys move between them and Enter sends the form. Each row is read as its role name with the sentence about it as its description, and the matrix is a real table with a caption that names the chosen role, column heads and a row head per ability.

A role name alone ("Editor") means different things in different products. Showing the four abilities side by side lets a person pick the least they need, and the sentence spells out what they will not be able to do, so a missing ability never comes as a surprise after sign-in.

It continues as the role that is chosen and its label says which. A role is always chosen (Editor to begin with), so the button is never quiet; the status line beside it says how many abilities the role has, and after a press that the demo sent nothing.