Digital Signature Account Block for React

The key is a fake public key made for the demo: its private half was thrown away when it was made, so nothing can be signed with it. The fingerprint is real, the SHA-256 of the key's bytes worked out in the page, and the public key downloads as a real PEM file. The signature here is only a picture kept in this page: no document is signed and nothing is sent. Never put a private key in a page.

The signature pad takes a pointer (finger, pen or mouse). Its strokes are kept as SVG paths and the saved signature is those paths scaled to fit, so it stays sharp at any size and no image is made. A pad can't be used with a keyboard alone, so Type is the other route: Tab to Draw or Type, choose Type and write your name. The typed version is a script face and the panel says it is a stand-in for a handwritten signature, not one.

It keeps the drawn or typed signature for this page, shows it in the three places it appears, and says so in the status line. The button rests quietly until there is something to save and, if pressed early, says what is missing. Undo walks back the last change. To make it real, send the strokes (or the typed name) to your server in save and show what it returns.

Generate a new key opens an alert dialog that says the old key's signatures stay valid, with focus on Keep my key. Confirming swaps the facts and the fingerprint to the new key's and the button rests as "New key made", so another needs an Undo first. In a real app the old public key stays published so earlier signatures can still be checked.

Everything: the drawing, the typed name, the saved signature and the new key. A reload starts again. Copy and the public key download are real: they copy and save the typed values.

Draw and Type are a named choice with arrow keys, the pad has a name and a Clear button with a name, and every action says what it did in a polite live region. The key's facts are a real description list and the places the signature appears are a real list. On a phone the key facts come first, the pad is full width and 160 pixels high, and the foot with Undo stays pinned.