All components (204)

Idle warning

Layers · IdleWarning

What it is and when to use it

"Your session is about to expire": it appears before kicking anyone out, with a countdown and two clear exits, continue or sign out. On reaching zero it calls onExit by itself.

When to use it

A session that expires through inactivity and where what was being typed can be lost.
onContinue renews the session against the server; onExit closes it and cleans up. Both belong to the application.
seconds is how long the countdown lasts (60 by default); title, continueText and exitText change the texts.
What it does not do: measure inactivity or close the session. It appears when the application sets visible.

When not to

A wait that asks for no decision (resending a code): Countdown.
Warning of something that has already happened, without blocking the way: a notification with useNotifications.

Keyboard: on appearing, focus goes to "Stay signed in", so Enter is enough to stay. Tab moves between the two buttons and does not leave the warning. It is an alertdialog: clicking outside does not close it, and Escape answers the safe option, "Stay signed in" (it calls onContinue): nobody presses Escape to be kicked out.

Accessibility: it interrupts on purpose (alertdialog), because losing what was typed without warning is worse than the interruption. The title is its name and the sentence below ("For your security, this will close on its own in 45 seconds") its description. The countdown is seen every second but is announced every announceEvery seconds (15 by default) in a hidden status region: a number spoken every second leaves no room to even read the buttons.

Fine-tuning: no variables of its own. It is a Dialog with warning tone: it is adjusted with its classes, amset-dialog__*, and the countdown with amset-idle__count.

What it looks like

The notice appears when the person has not touched anything for a while.

<IdleWarning
  visible={inactivo}
  seconds={60}
  title="You haven't touched the order in a while"
  continueText="Continue with the order"
  exitText="Exit"
  onContinue={seguir}
  onExit={cerrarSesion}
/>

Props

Import it with import { IdleWarning } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`onContinue`required	`() => void`	Stay here: normally renews the session against the server.
`onExit`required	`() => void`	Called on reaching zero, and also from the exit button.
`visible`required	`boolean`	With `true` the warning appears and the countdown starts.
`announceEvery`	`number`	How often, in seconds, what remains is announced. By default 15.
`className`	`string`	Merged with the library classes; it does not replace them.
`continueText`	`string`	—
`exitText`	`string`	—
`seconds`	`number`	Seconds remaining when it appears. 60 by default.
`title`	`string`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: