loginForm
The loginForm component collects credentials and related authentication options.
XML Element |
|
|---|---|
Java Class |
|
Basics
A basic loginForm contains username and password fields and a login button. It can also show a locale selector, a Remember me checkbox, and a Forgot password button.
Labels and Messages
Use the nested form element to set the form title, field labels, and button text. Its values can be literal text or message-bundle keys. The example also defines errorMessage content for failed authentication and additionalInformation content below the form:
<loginForm>
<form title="Welcome"
username="Username or email"
password="Password"
rememberMe="Remember me"
submit="Log in"
forgotPassword="Forgot password"/>
<errorMessage title="Login failed"
message="Check that you have entered the correct username and password and try again"/>
<additionalInformation message="Additional information"/>
</loginForm>Optional Controls
The visibility attributes let you show or hide the locale selector, Remember me checkbox, and Forgot password button without changing the nested form content:
<loginForm localesVisible="true"
rememberMeVisible="true"
forgotPasswordButtonVisible="true">
//...
</loginForm>Remember Me
The Remember me option stores a persistent browser token so that an authenticated session can survive beyond the HTTP session and application restart. Read the selected state from LoginEvent when authenticating, and use RememberMeChangedEvent when other UI behavior must react immediately to checkbox changes.
See Spring Security Remember-Me documentation for details about the underlying authentication mechanism.
Authentication
The standard login view subscribes to LoginEvent, applies the selected locale, and passes the entered credentials and remember-me state to AuthenticationManager. It reports authentication failures through the form’s error state:
@ViewComponent
private JmixLoginForm login; (1)
@Subscribe("login")
public void onLogin(final LoginEvent event) {
try {
loginViewSupport.authenticate(
AuthDetails.of(event.getUsername(), event.getPassword())
.withLocale(login.getSelectedLocale()) (2)
.withRememberMe(login.isRememberMe()) (3)
);
} catch (final BadCredentialsException | DisabledException | LockedException | AccessDeniedException e) {
log.info("Login failed", e);
event.getSource().setError(true);
}
}| 1 | Injects the form so the controller can update its state. |
| 2 | Applies the locale selected in the form. |
| 3 | Passes the checkbox value to the authentication token. |
Authentication Error Handling
Extend the login handler when users need a more specific explanation than a general authentication failure. This example detects a locked account, displays an appropriate message, and records the failed attempt:
@Subscribe("login")
public void onLogin(final AbstractLogin.LoginEvent event) {
try {
loginViewSupport.authenticate(
AuthDetails.of(event.getUsername(), event.getPassword())
.withLocale(login.getSelectedLocale())
.withRememberMe(login.isRememberMe())
);
}
catch (final BadCredentialsException | DisabledException | LockedException | AccessDeniedException e) {
if (e instanceof LockedException) {
JmixLoginI18n loginI18n = createLoginI18n();
loginI18n.getErrorMessage().setMessage(e.getMessage()); (1)
login.setI18n(loginI18n);
} else {
login.setI18n(createLoginI18n());
}
log.warn("Login failed for user '{}': {}", event.getUsername(), e.toString()); (2)
event.getSource().setError(true);
}
}| 1 | Chooses the error message for a LockedException. |
| 2 | Logs the failed login attempt. |
Styled Login View
The sample combines the form descriptor with component-scoped CSS. XML provides the login content and CSS controls the surrounding layout, background image, and form positioning:
<div classNames="custom-login">
<loginForm id="login"
rememberMeVisible="false"
forgotPasswordButtonVisible="false"
localesVisible="false">
<form title="Custom Login Sample"
username="Username"
password="Password"
rememberMe="Remember me"
submit="Log in"
forgotPassword="Forgot password"/>
</loginForm>
</div>.custom-login {
width: 100%;
background-image: url("background.png");
background-position: center;
background-size: cover;
display: flex;
height: 25em;
}
.custom-login jmix-login-form {
align-items: center;
display: flex;
max-width: 25em;
background-color: var(--lumo-base-color);
}
.custom-login vaadin-login-form-wrapper {
background-image: none;
}Attributes
The following attributes are specific to loginForm:
| Name | Description | Default |
|---|---|---|
Shows the Forgot password button. |
|
|
Shows the locale selector. |
|
|
Shows the Remember me checkbox. |
|
The following shared attributes are supported by loginForm:
Handlers
The following handlers are specific to loginForm:
| Name | Description |
|---|---|
Fired when the user clicks Forgot password. |
|
Fired when the user selects a different locale. |
|
Fired when the user submits the entered credentials. |
|
Fired when the Remember me checkbox state changes. |
|
Provides the label displayed for each locale in the selector. |
The following shared handlers are supported by loginForm:
Elements
A loginForm can contain form, errorMessage, and additionalInformation elements. The form element defines labels and button text, errorMessage defines the authentication-failure content, and additionalInformation adds supporting content below the form.
