API keys

Datasheet

Mechanism

Key table, Row menu, Create dialog two step, Secret field once, Copy key, Scope checkboxes, Expiry select, Revoke alert dialog, Curl example, Webhook events timeline, Phone cards, Full screen dialog, Finish following, Quiet volume

Stack

Vanilla ES modules, CSS

Needs

Nothing, no dependencies

States

13 documented

Version

0.1.0

Licence

With a Pass

States

1. At restThe breadcrumb Settings then API keys; the page head with the title, the lead and the Create key; the Keys panel with three rows; the curl example and the four webhook events below. Nothing runs.
2. Create dialogCreate key opens a native dialog: Name with the placeholder Billing sync, the Scopes checkboxes with Read invoices and Read clients checked, Expiry at 90 days, a flat Cancel and the contrast key Create key. Focus starts in the Name field.
3. Name missingPressing Create key with an empty name puts Give the key a name you will recognise. in the field's hint, marks the field in error and leaves the focus there. No scope chosen says Choose at least one scope. under the scopes.
4. Key createdA named key closes the dialog and shows a Panel headed Key created with a lit lamp and Shown once, the warning that this is the only time the key is shown, the key in a Secret field and a Copy key under it. The new row appears at the top with its prefix, scopes, today's date, Never and Active.
5. RevokingThe row menu's Revoke key opens the Alert dialog with a red lamp and Cannot be undone. The title names the key and the body reads Anything using this key stops working at once. Keep key is the safe key and has the focus; confirming marks the row Revoked and puts its lamp out.
6. LoadingThe last used cell of every row is a skeleton bar; Create key is disabled until the scopes load and the row menu keys are disabled. The name, prefix, scopes, created date and state still print.
7. EmptyNo keys yet. Create one to connect your own tools. with a plain Create key, and the curl example and webhook events stay visible under it.
8. ErrorThe create dialog is open with Give the key a name you will recognise. under the empty Name field; the revoke alert dialog reads Anything using this key stops working at once.
9. SuccessThe Key created panel sits above the keys panel, the copy key says Copied and its lamp lights, and the new row is at the top.
10. PhoneUnder 700px the table is one card per key: name and prefix on the first line, scopes as a Tag, last used under them, and the menu key at the top right. The create dialog takes the whole screen.
11. KeyboardEnter opens the create dialog from Create key and Escape returns the focus there; Space reveals the secret field and checks the scopes; the copy key says Copied; the row menu opens from its key and Escape returns the focus.
12. Reduced motionThe Key created panel appears whole and its lamp is steady; the copy lamp does not wink; nothing else moves.
13. Finishes and volumeEvery surface and lamp reads the kit's tokens, so all fourteen finishes follow. The screen is set in the Quiet volume; its parts keep their sizes and draw hairlines and a whisper of depth.