shadcn.io is not affiliated with official shadcn/ui
Account Locked Login Block for Vue
A locked-account page for a point-of-sale system that draws the lockout ladder, marks the rung the account is on with a fixed unlock time, and offers an unlock link by email or a password reset.
Installation
Overview
Say how long a lock lasts and why, with this account locked login block for Vue with Ark UI. It's the page Tilltop, a point-of-sale system, shows after eight wrong passwords in a row: the page's side rails run the full height and one band crosses it, with a centred column. Under the heading is the lockout ladder, four hairline cells: three wrong passwords lock for 1 minute, five for 5, eight for 15 and ten for 1 hour. The rung this account is on is marked with a heavy edge and the words "Locked now", the ones behind it say "Served" and the one ahead says "Not reached", each with a glyph, so no state is colour alone. The lock time is fixed text ("Locked until 21:40 UTC"), and nothing on the page ticks. Two ways back: Email me an unlock link, which shows a sent result in its place, and Reset password, a link. It's built from Button, Shine Button and Guides, with a CSS entrance only. For lockouts after repeated failures and any gate with a waiting period.
FAQ
What stays in the page, and how do I wire it for real?
Everything. The account, eight failed attempts and a lock that began at 21:25 UTC are typed constants; the unlock link waits 700 milliseconds and shows "Unlock link sent" without sending anything. In a product the count and the lock live on your server, keyed to the account and the network, and the unlock link is a single-use token with a short life that clears the count when it is used.
How is the current rung worked out?
From the failed attempts, not typed: the rung is the last one whose count is at or below the attempts, so eight attempts land on the 15-minute rung. The lock's end time is the typed start (21:25 UTC) plus that rung's minutes, formatted by a small helper, and the line under the ladder says how many more wrong passwords would reach the next rung. Change the attempts or the start in the constants and every cell, word and time follows.
Why doesn't the time tick down?
A ticking countdown would be a live region that never stops talking and a number that a screen reader keeps reading out. A fixed clock time is true for as long as the page is open, readable at once and the same for everyone. The page shows the time the lock ends, in UTC, in a time element, and the person decides when to come back.
How do the cells show where you are without colour?
Each cell starts with a glyph and a word: a check and "Served", a lock and "Locked now", a minus and "Not reached". The current one also has a heavy foreground edge and a slightly stronger tint, and is marked as the current step for assistive technology. Nothing is red or green.
What is the difference between the two ways back?
The unlock link proves control of the account's email and opens the account at once, so it is the one button. Reset password is a link to the reset flow: it changes the password, which is the right choice when the attempts were a forgotten password rather than an attack. Both are safe to use during the lock.