Pattern Lock Login Block for React

Only against the typed SECRET in the file, dots 1, 4, 7, 8 and 9; nothing is sent. In a product, store only a hash of the pattern, check it on your server or in the device's secure storage, and enforce the lockout there, since a lock the page keeps can be reloaded away. Here the lock ends at a typed clock time, "21:40 UTC", and "Reset the demo" brings the tries back.

Less than people think. A pattern of four to nine dots on a three by three grid has 389,112 possibilities: more than a four-digit PIN's 10,000, fewer than a six-digit PIN's 1,000,000, and people favour a few shapes, so a limit on tries matters more than the grid. The lock here counts three misses and then stops.

Every dot is a real button, and the grid is one tab stop. The arrow keys move between the dots, Space or Enter adds the one you are on, a digit adds that dot (1 is the first dot of the top row, 9 the last of the bottom row), Backspace removes the last and Escape clears. Each dot is named with its number and, once it is in the pattern, its place in the sequence, and the polite status line says "Dot 4 added. 2 dots so far", so nothing depends on seeing the line.

The grid keeps the pointer capture while a finger or mouse is down, so the line keeps following it if it leaves a dot. A dot is taken when the pointer comes within a little under half a cell of its centre; a dot passed straight over between two others is taken as well. A new drag adds to the pattern rather than starting it over, so press Clear to begin again. On a phone the grid doesn't scroll the page while you draw.

Only a pattern of four or more dots. Pressing Unlock with fewer says "Connect at least 4 dots" and moves focus to the grid without using a try, and the button is quiet and labelled "Draw your pattern" until there are enough dots, but never disabled.