shadcn.io is not affiliated with official shadcn/ui
Pattern Lock Login Block for Radix UI
A private gallery's unlock page with a three by three grid of dots: drag across them with a pointer or use the arrow keys, Space and the digits 1 to 9, then Unlock; three tries before it locks.
Installation
Overview
Unlock an app with a pattern, with this pattern lock login block for React with Radix UI. It's the unlock page of Veilroll, a private gallery app: the page's rails run the full height of the screen and one band crosses it, and in the band a centred column holds a three by three matrix of dots on hairline cells, framed with corner marks by Guides, and one Shine Button. Drag across the dots with a pointer and a line follows your finger and joins them; a dot the line passes over is taken too, as on a phone. Or use the keyboard: the arrow keys move between the dots, Space or Enter adds the one you are on, a digit from 1 to 9 adds that dot, Backspace takes the last one off and Escape clears. Connect at least four dots, then press Unlock. A wrong pattern clears the grid and says how many tries are left; after the third the grid switches off until a typed time. The demo pattern, an L, is in the hint. The result replaces the grid in the same space and takes focus. Nothing is checked anywhere but against that typed pattern. It's built from Button, Shine Button and Guides, with a CSS entrance only. For private galleries, notes and any app that unlocks on a gesture.
FAQ
Where is the pattern checked?
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.
Is a pattern a strong lock?
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.
How does it work without a pointer?
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.
How does the drag work?
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.