Login screen more image

hey guys,

using Jmix 2.0.1 + FlowUi + Java

simple question for many, complex for others…

login screen, looked at the documentation, tried on the Vaddin website, but without success.

change the main screen of the login, so that it had an image in the part where the “Log in” is,

like a logo or like in Jmix, which had the screen with the image on the right of the screen.

does this feature exist, would it be possible?

Hello!

You can change your LoginView layout as you wish. For instance to add some picture right after the login form you can do the following:

<layout>
    <hbox id="loginLayout" width="100%" height="100%" expand="imageContainer">
        <vbox height="100%" width="auto" justifyContent="CENTER" padding="false"
              classNames="login-left-panel">
            <loginForm id="login"
                       rememberMeVisible="true"
                       forgotPasswordButtonVisible="false">
                <form title="msg://loginForm.headerTitle"
                      username="msg://loginForm.username"
                      password="msg://loginForm.password"
                      rememberMe="msg://loginForm.rememberMe"
                      submit="msg://loginForm.submit"
                      forgotPassword="msg://loginForm.forgotPassword"/>
                <errorMessage title="msg://loginForm.errorTitle"
                              message="msg://loginForm.badCredentials"/>
            </loginForm>
        </vbox>
        <hbox id="imageContainer" height="100%" alignItems="CENTER" justifyContent="CENTER"
              classNames="login-right-panel">
            <image id="brandImage" height="100%" themeNames="cover" resource="/icons/jmix-brand.svg"/>
        </hbox>
    </hbox>
</layout>

Result:

image

Note, to make custom image available through HTTP, add this configuration (also see discussion Static resources problem: - #8 by neosoft.gt):

@Configuration
public class MySecurityConfiguration {

    @Bean
    @Order(JmixSecurityFilterChainOrder.FLOWUI - 10)
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http.securityMatcher("/icons/**")
                .authorizeHttpRequests((authorize) -> authorize.requestMatchers("/icons/**").permitAll());
        return http.build();
    }
}