Encryption Key Login Block for React

All of it. The file is read with File.text() and the fingerprint is hashed with the browser's crypto.subtle, so the key is never uploaded, stored or logged, and the sample key is made up and opens nothing. Signing in waits less than a second, then says that nothing signed in. For a real product, never send a private key: sign a challenge from your server with it in the tab, or send only a public key or its fingerprint, and let the server decide.

That the first line reads -----BEGIN … KEY-----, that a last line reads -----END …----- with the same name, that the lines between are base64 with a length that is a multiple of 4, and that there is something in them. A problem is one sentence that names the line ("Line 3 has characters that aren't base64"). Signing in with a key that doesn't read puts that sentence under the paste box and moves focus there.

The SHA-256 hash of the key's decoded body, written as SHA256: and colon-separated hex pairs. Two copies of the same key give the same fingerprint, so you can compare it with the one your vault shows to be sure you picked the right file. On a page that isn't secure (plain http) the browser has no crypto.subtle, and the readout says it is working it out without ever finishing, so serve it over https.

One file at a time, .pem, .key or .txt, under 16 KB; anything else is refused with a line under the zone, and the status says the file wasn't read. Pressing the zone opens the file picker, and dropping a file on it reads it. The text lands in the paste box, so you can see and edit what was read.

The form and the readout stack, and the readout stays under the paste box and above the button, so the result of choosing a key is on the screen when you press Sign in. From the large breakpoint the readout moves to the end side, drawn between the same two rules. The two copies share one state; the one you can't see is out of the tab order and the reading order.

Yes. The drop zone is a labelled button that opens the picker, the paste box has a visible label and a problem line that is read, and the readout is a labelled section with a list of what was found. A single polite status line says what was read, copied or refused, and the result of signing in takes focus.