How to detect idle time on web page for auto logout?

[Anindya088]

Question

Hi All,

I want to create an auto-log off sort of feature if, let's say the user is just idle on the web page for some amount of time (let's say 5 min or more).

How do I know if the user is idle and start a timer based on that? I was reading about this in general on Google, and seems like in Quasar, there are ways to do this, like this discussion here

Is there a way to do this through Python and NiceGUI? Basically something like once the timer hits that threshold, I can trigger some other stuff (ex: auto log off, or pop up a notification, etc.)

Please let me know if there is a way to do this.

Thanks a lot,
Anindya

[falkoschindler]

I think it depends on what exactly you want to achieve. But something like this might be a starting point:

import asyncio
import time
from nicegui import Client, background_tasks, ui

@ui.page('/')
def index(client: Client):
    deadline: float = 0

    def reset_deadline(duration: float = 5) -> None:
        nonlocal deadline
        deadline = time.time() + duration

    async def auto_logoff() -> None:
        reset_deadline()
        while time.time() < deadline:
            print(f'Time left: {deadline - time.time():.0f}')
            await asyncio.sleep(1)
        with client:
            ui.notify('You have been logged off due to inactivity.')

    background_tasks.create(auto_logoff())

    ui.label('Hello World')
    ui.button('Do something', on_click=reset_deadline)

[Anindya088]

Hi @falkoschindler , this is great, thanks so much. I can build on top of this, very good start.
So 3 questions mainly:

1. This background_tasks what is this thing? I have never seen this before. Can I read and learn more about this somewhere?

2. Imagine a case where on my page, there are some charts and other things, like an interactive dashboard, you might toggle something and the chart updates, etc. Ideally if a user does anything that counts for activity right. So that means I use the reset deadline inside all my other elements, right? So, on all the on_change or on_click I add this reset_deadline. Or is there a better way to do this?

3. Also, can we do the same for user mouse movements? I mean I can probably ignore it, as it's probably not a valid activity, but let's say in a case, where they are reading a chart maybe and taking some time, so probably using the mouse to move places. So is there a way to trigger the reset_deadline, let's say if the mouse is idle for more than 5 sec. I suppose we use the mousemove event? But on what element? Because he could be browsing anywhere on the page, right. Is there a way to check it on the entire page (ex: like the .nicegui-content)?

Basically I am trying to expand on what you gave me, and trying to create the logic on a page where there could be multiple things the user can interact with, and I want to understand if he is completely idle (not clicking, not moving mouse etc.)

Please let me know what would be the right approach for this.

Thanks a lot,
Anindya

[falkoschindler]

1. background_tasks is a (undocumented) module for running tasks in the background, i.e. if you don't want to await their result. This is used internally for event handling, timers etc.
2. Yes, that would be the idea. But I just got another idea: You could register a handler for every SocketIO event message.

   @globals.sio.on('event')
   def handle_event(sid: str, msg: dict):
       reset_deadline()

   But I guess these lines should be placed in the global scope where reset_deadline isn't defined (to avoid registering a new callback on every page visit). So you need to re-organize the code a bit.
3. You can do something like this:

   client.page_container.on('mousemove', lambda e: print(e))

[Anindya088]

Hi @falkoschindler ,

Thanks a lot for this, very helpful.
Sorry I was offline for few days and did not check this, will start working on this now.

Regards,
Anindya

[pclass-isolated]

@Anindya088 - I am trying to do the same thing with an 'inactivity timeout' to log a user out.

Could you please help me understand what the client is in this context:
client.page_container.on('mousemove', lambda e: print(e))

I must be missing it in the docs? Where did you put that? Thank you very much!

[rodja]

We newly introduced ui.context. You can access the current client with ui.context.client. It is the Python representation of a Browser tab, which connects to the NiceGUI server.