PIN Entry Login Block for React

Only against the constant PIN in the file; nothing is sent. In a product, check the PIN on your server or against a key in the device's secure storage, never in the page, and enforce the lockout there: a lock that the page keeps is a lock the visitor can reload away. The lock here ends at a typed clock time, "21:40 UTC", and "Reset the demo" brings the tries back so the block can be run again.

The four dots are a picture of a real password-type input that is hidden visually but not from assistive technology, named PIN, with a numeric keyboard on phones. Typing or pasting digits fills it, the keypad's keys append to the same state, and while a key has focus a typed digit or Backspace does what the keypad would. Enter in the field submits the form. Tapping the keypad never raises the phone's own keyboard, because the keys don't focus the field.

No. The dots are hidden from it, the field is a password field, and the single polite status line speaks counts only: "2 of 4 digits entered", "PIN cleared", "Incorrect PIN. 2 tries left". The keypad's keys are named by their digit, as any dial pad's are, but nothing reads the PIN back.

A disabled button explains nothing and strands the keyboard. This one stays focusable and is only quiet, with a label that names what comes next: pressing it with too few digits says "Enter all 4 digits" and moves focus to the field.

Change the PIN constant and the SLOTS list that draws the dots; the keypad, the field's length and every message follow from PIN.length. Six digits is better for anything holding money.

That block is a modal that approves one transfer and submits itself on the fourth digit. This one is a whole page that unlocks an app, with the page's rails and band, an explicit Unlock button, a lock after three tries and a "Forgot PIN?" way out.