shadcn.io is not affiliated with official shadcn/ui
Session Policy Settings Block for Vue
A session policy settings panel that leads with the sentence the settings amount to, two sliders with stops for the idle timeout and the longest session that hold each other to one rule, a device limit and an end-all-sessions dialog.
Installation
Overview
Choose when people are signed out and see what that means in one sentence, with this session policy settings panel for Vue with Ark UI. A hairline frame with a plus mark on each corner leads with the sentence the settings amount to, "People are signed out after 30 minutes idle and always after 8 hours." Under it two Sliders set the numbers by stops, the idle timeout from 15 minutes to 12 hours and the longest session from 1 hour to 30 days, each with its stops written under the track. They hold each other to one rule: the idle timeout can never be longer than the longest session, so dragging idle past it raises the longest session to the next stop that fits, and dragging the longest session below the idle timeout lowers the idle timeout, each time said in the status line. A Number Input limits how many devices one account can use at once, two Switches decide what a password change and a transfer ask for, and a last band ends every session after an Alert Dialog that names how many would end. The action foot counts unsaved changes beside a Shine Button that saves them and an outline button that discards them. It's built from Slider, Number Input, Switch, Alert Dialog, Button, Shine Button and Guides, with a CSS entrance only. For a bank, a payments dashboard or anything that signs people out.
FAQ
How do I change the stops and the starting policy?
Edit IDLE and LONGEST at the top: each stop has the minutes, how it reads in a sentence and how it reads under the track. A slider's value is the stop's place in its list, so adding a stop only needs a new entry. SAVED holds the starting places, the device limit and the two switches, and OPEN_SESSIONS is the typed count the end-all dialog quotes. The sentence, the readouts and the rule between the sliders are worked out from the stops, so nothing is typed twice.
Exactly how do the two sliders push each other?
Both compare minutes. If you drag idle to a stop longer than the longest session, the longest session moves to the first of its stops that is at least as long, so 12 hours idle lifts an 8 hour session to 24 hours. If you drag the longest session below the idle timeout, the idle timeout moves to the last of its stops that is no longer, so a 1 hour session pulls 12 hours idle down to 1 hour. The other slider moves to match and the status line says which one moved to what. Keys work as on any slider, and Home and End jump to the first and last stop.
What does End all sessions do here?
It opens an alert dialog that says how many sessions would end and that this one is among them, with focus on Keep them signed in and no close on an outside click. Confirming turns the count to zero, says "Ended 1,284 sessions in this demo." and keeps the button, now saying nothing is left to end if pressed. Nobody is signed out: the count is typed. In your app the confirm handler would call your auth service to revoke every session, and your own session should be revoked last.
What stays local, and how do I make it real?
Everything. Save keeps the policy in this page's state and says so; no session is read, limited or ended. To make it real, save the places or the minutes with the account, set your session cookie and your server-side expiry from them (the idle timeout slides with activity, the longest session doesn't), and enforce the device limit where a session is created.
How does it work on a phone and by keyboard?
The sliders and the number field take the full width, the stops stay readable at 320 pixels and the action foot is pinned to the bottom of the screen. Each slider is named, reads its value as words ("4 hours") and moves with the arrow keys, and the status line is a polite live region present from the start, so a pushed slider is announced. The stop labels are decoration for sighted people and are hidden from assistive technology.