How to show error message during invalid login in Java Web App using Vaadin framework?>

Question

So I am trying to build a web application and when designing the loginview I want it to show an error message when the user enters an invalid login or password. The issue is, that whenever the login fails, the page just reloads itself and there is no changes made. Page

I have written the following code to try and achieve my result but all that happens is my page just reloads and nothing else. What should happen is a popup message should appear informing the user of an invalid username or password. Code

Answer 1

I solved it like this with Vaadin 24 and Spring boot! The error message is added to the input field.

@AnonymousAllowed
@PageTitle("Login")
@Route(value = "login")
public class LoginView extends LoginOverlay implements BeforeEnterObserver {

private final AuthenticatedUser authenticatedUser;

public LoginView(AuthenticatedUser authenticatedUser) {
    this.authenticatedUser = authenticatedUser;
    setAction(RouteUtil.getRoutePath(VaadinService.getCurrent().getContext(), getClass()));

    LoginI18n i18n = LoginI18n.createDefault();
    i18n.setHeader(new LoginI18n.Header());
    i18n.getHeader().setTitle("pVerein");
    i18n.getHeader().setDescription("Login with Username and Passwort");
    i18n.setAdditionalInformation(null);
    i18n.getForm().setUsername("Username");
    i18n.getForm().setPassword("Password");
    i18n.getForm().setSubmit("Login");
    LoginI18n.ErrorMessage errorMessage = new LoginI18n.ErrorMessage();
    errorMessage.setTitle("Username or password are incorrect");
    errorMessage.setMessage("Check your entry and enter your login name and password again!");
    i18n.setErrorMessage(errorMessage);
    i18n.getForm().setForgotPassword("Forgot Password");
    setI18n(i18n);


    setForgotPasswordButtonVisible(true);
    addForgotPasswordListener(e -> schowForgotPasswordDialog(e));

    setOpened(true);
}

private void schowForgotPasswordDialog(ForgotPasswordEvent e) {
    Notification notification = Notification.show("Function will be made available in a later version!", 5000,Notification.Position.MIDDLE);
    notification.addThemeVariants(NotificationVariant.LUMO_SUCCESS);
}

@Override
public void beforeEnter(BeforeEnterEvent event) {
    if (authenticatedUser.get().isPresent()) {
        // Already logged in
        setOpened(false);
        event.forwardTo("dashboard");
    }setError(event.getLocation().getQueryParameters().getParameters().containsKey("error"));
}

}

I hope it helps you