Customized style for the LoginForm (or LoginOverlay)

Flow
1

Hi,

I’m trying to use LoginForm along with Spring Security in my Vaadin 14 application.
Besides there are many features lacking in the component (such as “Register”, “Remember Me”, “CAPTCHA”, etc…), it doesn’t give you any style object to mess with.
I don’t want my Login form to be that flat and look alike any other Vaadin app’s login page. but I don’t know how exactly and efficiently can I change it’s style.
I’m thinking maybe using a different font, or putting a background image or so.
Has anyone faced and came up with a solution so far, I’d appreciate to share it here as a reference for the rest of us.

Thanks

2

My answer will be about the styling of your LoginOverlay. I don’t know how to add your own components.

You can style the overlay by adding your own stylesheet to your loginView using
@CssImport(value = "./styles/myLoginViewStyles.css", themeFor = "vaadin-login-overlay-wrapper")

Within this .css file, you will have to use :host syntax.

For example, I have added my own background image around the loginOverlay with exactly this approach and having the following in my myLoginViewStyles.css:

[part="backdrop"]
 {
    background-image: url(img/login-bg.jpg);
    background-size: cover;
}

You can style any other things like having different fonts similarly to this.

And lastly, I think it is possible to add your own components like register and captcha, but it’s a bit more arduous and probably involves changing the template files of vaadin-login-overlay. I’m not 100% certain what is best way there, so I won’t personally explain further in that regard.

3

Adding to what Kaspar said above, you can of course also use the theme variables (see https://vaadin.com/docs/v14/themes/lumo/lumo-overview.html for Lumo variables) to change the appearance of any Vaadin component, e.g. font family, either globally or specifically for one component instance.

As for lacking features, as the needs vary so much between applications, we’re going to add generic support for custom content next year (related ticket is https://vaadin.com/docs/v14/themes/lumo/lumo-overview.html).