Change the default Vaadin start login page to a custom page

Flow
1

Hello everyone.

I am new to Vaadin and have to create a Vadin project as a submission for my university.

I have created a new project with Vadin-Start and am now faced with the challenge that the Vaadin-Start login page does not meet the requirements. I feel like I’ve already read everything on the subject and haven’t found any really useful information.

So here is my question to you. Is there a way to replace the default login page with a custom one?
…I don’t think I need to mention that I have almost no experience with Spring Security. I’m practically a noob :/

So I would be very grateful for any tips you can give me :)

A possible login page that would meet our requirements would look like this:

CustomLoginPage
CustomLoginPage723×790 12.1 KB

…and sorry for any bad English.

2

Just the obvious question: why won’t the default login fit? Looking at the image, I don’t see anything that can’t be implemented. Just add your text / link below the LoginForm.

3

OMG. I am such an idiot. Thanks for the obvious tip :)

…but now I can’t get this link under the login field. I have tried the following, but still only the login dialog is displayed:

public class LoginView extends VerticalLayout implements BeforeEnterObserver {

    private final AuthenticatedUser authenticatedUser;
    private final LoginOverlay login = new LoginOverlay();

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

        LoginI18n i18n = LoginI18n.createDefault();
        i18n.setHeader(new LoginI18n.Header());
        i18n.getHeader().setTitle("Online Spielepartner");
        i18n.getHeader().setDescription("Login using your Email and password");
        i18n.getForm().setUsername("Email");
        i18n.getForm().setPassword("Password");
        i18n.getForm().setForgotPassword("Forgot password");
        LoginI18n.ErrorMessage i18nErrorMessage = i18n.getErrorMessage();
        i18nErrorMessage.setUsername("Email is required");

        i18n.setErrorMessage(i18nErrorMessage);

        i18n.setAdditionalInformation(null);
        login.setI18n(i18n);

        login.setForgotPasswordButtonVisible(false);
        login.setOpened(true);

        login.addLoginListener(e -> {
            login.getUI().ifPresent(ui -> ui.navigate("home"));
        });

        HorizontalLayout register = new HorizontalLayout();
        register.add("Don't have an account yet? ");
        register.add(new RouterLink("Register", HelloWorldView.class));

        add(login,register);

    }

    @Override
    public void beforeEnter(BeforeEnterEvent event) {
        if (authenticatedUser.get().isPresent()) {
            // Already logged in
            login.setOpened(false);
            event.forwardTo("");
        }

        login.setError(event.getLocation().getQueryParameters().getParameters().containsKey("error"));
    }
}

Maybe I’m making another stupid and obvious mistake. Which can be solved immediately :frowning:

4

You should probably add them to the footer area

1 Like
5

You can either follow Marco’s approach when using the ‘LoginOverlay’ - or you use the ‘LoginForm’ which does not have the gotcha about overlaying… which probably fits your screenshot a little bit more.

Note: using ‘LoginForm’ requires some additional styling so that it is centered.

2 Likes