shadcn.io is not affiliated with official shadcn/ui
Deployment Targets Account Block for React Aria
Which SSH keys may deploy where: a table of keys with their SHA-256 fingerprints and a switch each for Production, Preview and Local, a typed word before Production, and a form that fingerprints a pasted public key.
Installation
Overview
Control which keys may ship to which environment, with this deploy keys panel for React with React Aria. A hairline frame with a plus mark on each corner holds a table with a row per key: its name, its fingerprint in mono (SHA256:pd7Ypb5m…), when it last deployed and a Switch for each target, Production, Preview and Local. Turning Production on does not take hold at once: a band under the table asks for a typed word ("deploy") in place, and Escape or Cancel leaves it off. One line above the table says who can deploy to Production ("ci-deploy can deploy to Production."). An "Add a key" form takes a pasted public key and writes its real fingerprint: the browser decodes the key body and computes its SHA-256 with crypto.subtle, the same way OpenSSH does, or names what is wrong with the text (an unknown type, a private key, bad base64, a cut-short body, a type that disagrees with the body). The Shine Button Add key adds the row with every switch off. On a phone each key is a card with three labelled switches. It's built from a native table, Switch, Textarea, Input, Button, Shine Button and Guides, with a CSS entrance only. For the deploy settings of any hosting or app-builder product.
FAQ
How do I fill it with my keys?
Edit KEYS. Each has an id, a name, its print (the fingerprint, SHA256: and 43 characters), the ISO day it was last used or an empty string, and the targets it may deploy to (production, preview, local). The word asked before Production is WORD, and the accepted key types are KINDS. A key you add is read by parseKey and fingerprinted by fingerprintOf, so the fingerprints you type into KEYS should come from ssh-keygen -lf on the same files.
Is the fingerprint real?
Yes. The pasted line is split into its type, its base64 body and a comment; the body is decoded, its inner type name is checked against the line's, and SHA-256 of the decoded bytes is computed with the browser's crypto.subtle and written as SHA256: plus the base64 without padding, which is what ssh-keygen -lf prints. Use a sample key fills in a valid key made for this demo. The block only reads public keys: pasting a private key block gets a refusal, and the text never leaves the tab.
What stays local, and how do I make it real?
Everything. Switches and added keys change this page's state and the foot says so; nothing is deployed and no key is registered. To make it real, call your API in setTarget and addKey, change the switches only when it answers, and have your deploy service check the key's targets itself. The typed word is a speed bump for people, not a security control.
How does the typed word work?
Switching Production on sets the switch to on but asks first: the band under the table names the key and takes focus in a field. Typing "deploy" and pressing Allow Production turns it on and returns focus to the switch; any other text says "Type deploy exactly to continue." Cancel and Escape leave it off and return focus to the switch. Turning Production off is immediate, and Preview and Local always switch at once. The band is always present with its height, so nothing moves.
How does it look on a phone, and is it accessible?
Each key is a card: the name, fingerprint and last-used line, then Production, Preview and Local as rows with their name at the start and the switch at the end. Every switch is named for the key and the target ("ci-deploy can deploy to Production"), the table has a caption and column heads read out from the medium breakpoint, the problem under the key box is tied to it with aria-describedby, and the status line is a polite live region present from the start. Fingerprints and key text keep their order in a right-to-left page.