Delayed forced logout after showing user a message

Flow
1

I am enforcing a user logout, by programatically calling authenticationContext.logout() after a successful password change, and this works correctly.

However, to have a better UX, I also want to show a Notification and then force the logout after a delay of say 1500.
I tried using using this, but the Notification never shows up on the screen.

try {
            Notification.show("Your password was successfully changed!",5000, 
                    Notification.Position.MIDDLE).addThemeVariants(NotificationVariant.LUMO_ERROR);
            Thread.sleep(1500);// Small delay
            authenticationContext.logout();//
        } catch (InterruptedException e) {
            e.printStackTrace();
        }

What am I doing wrong?
Thank you.

2

You need to enable Server Push. By default the server sends UI changes only when the code is processed. When push is enabled you can send the changes earlier or event asynchronous.

Then you can use add push like this:

try {
    Notification.show("Your password was successfully changed!",5000, 
            Notification.Position.MIDDLE).addThemeVariants(NotificationVariant.LUMO_ERROR);

    UI.getCurrent().push();

    Thread.sleep(1500);// Small delay
    authenticationContext.logout();//
} catch (InterruptedException e) {
    e.printStackTrace();
}
1 Like
3

Server Push is the way to go.

But you shouldn’t use sleep in the current thread. Instead, inject the TaskScheduler and run

 taskScheduler.schedule(
            () -> authenticationContext.logout(),
            Instant.now().plus(Duration.ofMillis(1500))
        );
2 Likes
4

It’s also possible without push.

Configure the notification to be closed after your desired time, add a opened changed listener and once the notification closes → logout

3 Likes
5

Thank you so much. I was not even aware Notification accepted listeners. Duh!
Overall I found this approach more elegant than my initial thought of using threads.
Here is how I got it working.

        //Build and show notification
        Notification notification = new Notification("", 1500, Notification.Position.MIDDLE);
        notification.addThemeVariants(NotificationVariant.LUMO_SUCCESS);
        notification.add(
                new Div(
                        new Html("<b>Your password was successfully changed!</b>"),
                        new Html("<br>"),
                        new Text("You will now be logged out")
                )
        );

        //Logout after notification closes
        notification.addOpenedChangeListener(e -> {
            if (!e.isOpened()) {
                authenticationContext.logout();
            }
        });

        //Show notification
        notification.open();
1 Like
6

I would use Html only in special cases

7

Are there some performance issues with using html?
What’s the alternative then to get a two line message, one of them bold?
Should I be using a combination of Span / Div with adjusted font-weight via getStyle().set() instead?

8

But this can lead to a potential security issue: close the UI where the notification is shown, and then the logout never happens. Not sure if that can actually be used for anything though. And the fix to that issue might be to have a server-side timer with a slightly longer delay as a fallback.

9

Vaadin is a Java web framework means you are using Java to create the UI.
There are classes for the HTML tags: https://vaadin.com/api/platform/24.8.8/com/vaadin/flow/component/html/package-summary.html

Plus, you can use LumoUtility for styling to make sure your styling is consistent to the theme.

1 Like
10

While I agree with the sentiment… the use-case “I wanna logout the user after password change” wasn’t such a big risk for me :sweat_smile: