shadcn.io is not affiliated with official shadcn/ui
Supervised Sign-in Account Block for Vue
Supervising a child's sign-in: a queue of approval requests with Approve and Decline, two switches for what needs approval, a sign-in window of two selects that refuses an end before the start, and the approved devices with Remove.
Installation
Overview
Let a parent decide how a child signs in and answer the requests that come up, with this supervised sign-in panel for Vue with Ark UI. At the end of the panel, Waiting for you shows one request at a time, with a count: a new tablet asking to sign in, then a password change the child asked for. The block's one colored control is the Shine Button Approve, and Decline sits beside it; approving a device adds it to the list. At the start, the child's initials, age and a Supervised badge lead into two Switches, New devices need my approval and Password changes need my approval, each with what it means. A sign-in window of two Native Selects, From and Until, refuses an end that isn't after the start and says so. The approved devices follow, each with a Remove button. On a phone the queue comes first. It's built from Switch, Native Select, Shine Button, Badge, Empty, Button and Guides, with a CSS entrance only. For family and education apps and any account a guardian supervises.
FAQ
How do I fill it with real requests and devices?
Edit DEVICES (an id, a kind for the icon, a name and the system) and REQUESTS (the ask sentence, a detail line and, for a device request, the device it adds). CHILD and AGE name the child, and FROM and UNTIL are the window when the page opens. The count of waiting requests, the sentence in the foot and the window summary are all worked out from state.
What stays local, and how do I make it real?
Everything: switches, the window, Approve, Decline and Remove change this page's state and the status line says so, and nothing is sent. To wire it, save each setting from its handler (flipDevices, flipPasswords, chooseFrom, chooseUntil) and approve or decline with a request to your server, changing the lists only when it answers. Enforce the window on the server: this page only shows it.
What stops a window that makes no sense?
Choosing a From that isn't before Until, or an Until that isn't after From, is refused: the select keeps its old value, a line under the selects says what to choose and the status line says what stayed. The line has a reserved slot, so showing it moves nothing. Times are whole hours in the child's local time.
Why does the queue show one request at a time?
Each request is a decision with a different consequence, a device that can sign in and a password that changes, so they are shown one after the other with a count. The cell keeps the height of a request even when the queue is empty, and an empty state says nothing is waiting. After a decision focus stays on Approve for the next request, or moves to Start over when none remain.