API Key Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Create API key button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same KeyFields component and share the block's state, so a name typed in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

No. SECRETS holds four typed placeholders and each key you make takes the next, so a reload repeats the same sequence. Nothing is random and nothing is stored: the secret is held in the page and gone once the dialog closes, which is what the dialog tells the visitor. In your app have your server make the secret when you press Create key, store only a hash of it, return it in that one response, and show it in RevealStep. Never show it again after that, in the list or anywhere else.

The key exists from the moment you press Create key: its row is in the table and its prefix is all the page keeps. The second step shows the secret masked, with an eye button to reveal it and a Copy button that copies the whole secret either way. Done stays quiet until you tick that you have stored it, and pressing it early says so and moves focus to the box. Closing in any other way, with Escape, Cancel or the close button, is allowed and says in a polite message that the secret is gone and a new key is needed, since a key nobody has is no use and the list lets people revoke it.

Here it adds a row to the drawn table in local state and shows a placeholder secret; nothing is created or sent. Name, scopes and expiry are kept in the row, and the expiry date is worked out from AS_OF, a fixed day, in UTC. In your app post the form to your server in create, show a failure in the message above the buttons, keep the first step's values if it fails, and let your server pick the real prefix. Copy uses the browser's clipboard, which needs a page served over HTTPS and a user press, and says when the clipboard refuses.

The real dialog is named by its title, which changes with the step, and described by its sentence. Focus starts in the name field, moves to the secret when it appears, and goes to the first thing missing when a press is refused. Escape and Cancel close it and return focus to the Create API key button. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it, Cancel and its close button close it and put focus on the button.

The copy shown on load docks to the foot of the frame as a bottom sheet, its actions pinned at the bottom, and the form scrolls above them; the scopes are one column. The drawn table keeps its name and prefix columns and drops the rest. The real dialog keeps the Dialog's own phone layout, a sheet from the bottom that scrolls inside itself.