Session Policy Settings Block for React

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.

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.

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.

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.

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.