API Key Builder Settings Block for React

Edit the constants at the top. RESOURCES lists what a key can touch, each with a label, a path and a hint. KEYS lists the account's keys, each with its environment, a grant of None, Read or Write per resource, the last day it signed a request and the last four characters of its value: your API should never send back more than that. The "Reads 3, writes 1" summary, the key count and every sentence in the check are worked out from the grants, so nothing is typed twice. Write counts as Read too, so a resource a key can write is also one it can read.

A GET needs Read; a POST or a DELETE needs Write. The check looks up the grant for the chosen resource in the builder's current draft, not in the saved key, and prints the verdict, a 200 or a 403 and one sentence: no access, Read where Write is needed, or the grant that allows it. It is a small pure function of the grants and nothing is sent. In your app, run the same rule where the key is enforced so the preview can't drift from the real behaviour. The Copy button copies the request as a cURL command that reads the key from an environment variable, so no secret is ever on the page.

Everything. Saving changes the key in this page's state, and a new key is added to the table with a masked value whose last four characters come from a short typed list. No key exists and nothing is stored or sent. To make it real, send the draft to your API in the save handler, add the key it returns to the list, and show its secret once in a dialog (the reveal-once screen is a separate block, dialog-api-key), then keep only the last four characters on this page.

Save and Discard are always on the page and marked aria-disabled while nothing has changed, so pressing them then says there is nothing to do. A key needs a name and access to at least one resource: if either is missing, Save says so in the status line and an inline message, and moves focus to the name field or the access group. Saving an existing key updates its row and the summary in the table; saving a new one adds a row and selects it. Choosing another key while you have unsaved changes loads it and drops them.

Below the medium breakpoint the table becomes one card per key, the builder's fields stack, each resource's three choices fill the row, and the check sits under the builder with the foot pinned to the bottom of the screen. The table is native, with a caption, column headers, and the key's name as a real button that marks the chosen key with aria-current. Every Segment Group is named for its resource ("Refunds access"), the check's selects have visible labels, and the status line is a polite live region present from the start.