samie / idle

Idle - User inactivity tracking for Vaadin

Idle - User inactivity tracking for Vaadin

With Idle, you can monitor whether a user is active or inactive in your application.

This is achieved by tracking keyboard and mouse events within the window. You can set a specified inactivity time, after which the userinactive style is applied to the BODY element. Additionally, an optional event can be sent to the server-side component.

Online demo

Try the add-on demo at idle-demo.fly.dev

In the demo you can see CSS color changes applied immediately and text changed on server-side listeners.

Release notes

Version 1.0

• Apply CSS changes based on user inactivity
• Server-side listener for idle/resume

Version 2.0

• Add support for Java 8 lambdas and Vaadin 8

Version 3.0

• Add support for Vaadin 24

Issue tracking

The issues for this add-on are tracked on github.com issues page. All bug reports and feature requests are appreciated.

Contributions

Contributions are welcome, but there are no guarantees that they are accepted as such. Process for contributing is the following:

• Fork this project
• Create an issue to this project about the contribution (bug or feature) if there is no such issue about it already. Try to keep the scope minimal.
• Develop and test the fix or functionality carefully. Only include minimum amount of code needed to fix the issue.
• Send a pull request for the original project

License

Add-on is distributed under Apache License 2.0. For license terms, see LICENSE.

idle's Issues

Inactivity timeout switches to default value after page refresh

The inactivity timeout becomes 5000 after a page refresh if the UI is annotated with @PreserveOnRefresh. This happens because the javascript function "setInactivityTimeout" is only called in the method "setTimeout"

Modernise add-on for Vaadin 8

This add-ons API is quite different from Vaadin 8s API.

I would like to introduce event listeners, as I know them from the Framework:

Idle idle = Idle.track(ui, 5000);
idle.addUserActiveListener(e -> status.setValue("You are now active"));
idle.addUserInactiveListener(e -> status.setValue("You are now idle"));

Also the javascript part of this add-on has some polyfill code thats not required for officially Vaadin 8 supported browsers anymore. I would like to remove it.

As a training I have made a fork of this project where I made those changes and also created some tests for it. 😄

CSS breaks Lumo dark mode

The idle.css defines a different background color than the default one of the lumo dark theme. This leads to a white-ish background, when using the dark theme.

Not sure if the addon should apply these styles at all. In most applications, the background color is defined by a global styling, therefore I would leave that part out. Also adding bg color transitions might be seen as some unwanted style injection :)

If someone wants to have stylings based on the state, they can easily add these using the given css class names.

Vaadin 8 Support

This add-on is currently not compatible Vaadin 8.

I am working on updating it for the new Vaadin version.

Listener State not detected

Is this project still in development? Idle is not working, because check in idle.js if (self.getState().enabled) { returns undefined, although i registered a Listener. If i call from Browser Console self.onUserInactive(); everthing works on ServerSide.