Banner not showing on LoginOverlay

Flow
1

I am trying to add a banner to the top right of the screen

image
image1239Ă—691 16.2 KB

public class LoginView extends LoginOverlay
    implements AfterNavigationObserver, BeforeEnterObserver {
    public LoginView() {
        LoginI18n i18n = LoginI18n.createDefault();
        i18n.setHeader(new LoginI18n.Header());
        i18n.getHeader().setTitle("App");
        i18n.setAdditionalInformation(null);
        i18n.setForm(new LoginI18n.Form());
        i18n.getForm().setSubmit("Sign in");
        i18n.getForm().setTitle("Sign in");
        i18n.getForm().setUsername("Username");
        i18n.getForm().setPassword("Password");
        setI18n(i18n);
        setForgotPasswordButtonVisible(false);
        setAction("login");

        Div banner = UIComponents.createEnvironmentBanner(envStage);
        getElement().appendChild(banner.getElement());
    }

I am not sure why the login page is showing fine, but only the banner is missing.

Thanks in advance for any insights or suggestions!

2

Well… if you had to use something like this, you used the component in an unintended way.

You might wanna try to extend from e.g. div or any other component as root for your view, add your environment information there and populate the login overlay on top of that, but extending the overlay like this won’t work.

1 Like
3

The overlay shown in the browser is not the element you are accessing here. Most overlaying components in Vaadin (for instance the dialog, the combobox dropdown, etc) create an additional element on the client side, that is then attached to the document body without any knowledge about it on the server side.

I assume the easiest solution for your use case would be to let your LoginView extend the VerticalLayout instead. Add your banner as the first component with Alignment END and then add the normal LoginForm as 2nd component with a flex grow of 1.

1 Like
4

Thanks,
Sharing my code changes so it might help others :

public class LoginView extends VerticalLayout
    implements AfterNavigationObserver, BeforeEnterObserver {

    private LoginOverlay loginOverlay;

    public LoginView() {
        loginOverlay = new LoginOverlay();
        LoginI18n i18n = LoginI18n.createDefault();
        i18n.setHeader(new LoginI18n.Header());
         ......
        loginOverlay.setI18n(i18n);
        loginOverlay.setForgotPasswordButtonVisible(false);
        loginOverlay.setAction("login");


        Div banner = UIComponents.createEnvironmentBanner();
        add(banner);
        add(loginOverlay);
    }

Note:
may need to set banner z-index

5

You don’t need to use the LoginOverlay as your use case is different from the intentional use case of that component. Normally you use the overlay variant, if you already have some content in the background and just want to slide the overlay into the workflow of the page.

But since you show a real login page, the LoginForm is the intended component to use here.