Identity Provider Settings Block for React

Edit OIDC_TOKEN and SAML_TOKEN at the top: they are the sample person's claims for each protocol, with a few arrays and an empty value to show how those resolve, and OIDC_MAPS and SAML_MAPS are the claims each field reads by default. The menus list the claims of the token, the resolved values, the problems and the provisioning sentence are worked out from it, and TARGETS is the list of our fields with which are required. In your app, the token would be a real one from a test sign-in.

A required field is named in its row when it maps to nothing, when the claim it maps to is empty in the sample token, or, for email, when the value isn't shaped like an address, so mapping email to a name claim is caught. Save refuses while a problem remains, says which field, and puts focus on its menu. Optional fields can stay unmapped or empty, and the resolved column says "Not mapped" or "No value". Switching the protocol resets the claims to that protocol's usual names and says so.

An identity provider's issuer address is where your app fetches keys and where tokens are checked, so a plain http address would let anyone on the path change them. Save refuses an empty issuer, one that doesn't start with https:// and one that isn't a valid address, says why under the field and puts focus on it; once Save has found something, the message follows your typing. The secret is masked with a show button and is fictional.

Everything. Nothing connects to a provider or fetches a token: the connection, the mapping and the switch live in this page's state, and Save only says what it kept. To make it real, store the connection, keep the secret on the server and never send it back to the browser, read the claims from the provider's real tokens and apply the mapping and the default role when an account is created.

The connection fields stack, each table row becomes a card with the field, its menu and what it resolves to, the token tree sits under the cards in a scroller of its own and the action foot is pinned to the bottom of the screen. The table has a caption and column headers on a large screen, each menu is named for its field ("Claim for Email") and described by what it resolves to and any problem, and the status line is a polite live region present from the start.