shadcn.io is not affiliated with official shadcn/ui
Time Restricted Login Block for Vue
A sign-in that works only in set hours: a week grid of 24 hour cells for each day with a derived next window, a readout for any cell, and a request for off-hours access.
Installation
Overview
Show exactly when a back office lets people in, with this time restricted login block for Vue with Ark UI. It's the sign-in of Tickerhall, an exchange back office, as a panel: a short header over one framed panel in four bands. The first is three facts in hairline cells: a demo time chosen with a Native Select of five typed moments, whether that moment is inside the allowed hours, and the next change worked out from the typed rules, such as when the next window opens and in how long. The second is the week: seven rows of 24 hour cells, allowed hours in a solid mix with a bar at the foot, the demo time outlined, one tab stop with arrow keys across the cells and a readout for the cell under the pointer or focus. The third asks for off-hours access with a reason and a few words in a Textarea, and the foot holds the one Shine Button. On a phone the hours scroll sideways under a day column that stays. It's built from native buttons in a table, Native Select, Field, Textarea, Shine Button and Guides, with a CSS entrance only. For back offices, trading desks and any sign-in with business hours.
FAQ
What stays in the page, and how do I wire it for real?
Everything. The hours are typed constants, the five demo times are fixed days counted from a typed AS_OF, and nothing reads the clock or ticks, so the page looks the same on the server and in every time zone. Sending the request waits half a second and says what a real product would do. In a product, check the hours on your server from its own clock and the user's rules, and show this grid from the same data.
How is the next window worked out?
From the rules and the demo time only. If the demo time falls in an allowed stretch, the next change is that stretch closing; otherwise the function walks forward day by day, up to a week, to the first stretch that starts later, and the line spells its day, date, clock time and how long it is from the demo time. Saturday afternoon, for example, opens on Monday at 08:00.
How do I read the week with a keyboard?
The grid is one tab stop. Arrow keys move between hours and days, Home and End jump to the first and last hour of the day, and each cell is a button named with its day, hour and state ("Wed 08:00: allowed"). The readout under the grid follows hover, focus and a tap, and the status line says the result of a tap.
How is allowed told apart without colour?
Allowed hours have a solid tone and a bar along their foot; closed hours are plain. The demo time has a heavy outline, which also keeps the bar when its hour is allowed. The legend names all three, and every cell has its state in its name.
What does the request do?
It asks for a reason and at least ten characters of details, names the problem under the field and focuses it when one is missing, and says what a real product would do. If the demo time is inside the hours it says no request is needed. Nothing is sent; wire the submit to your own admin queue.