Login
<LoginForm />Basic Login Component/Form
The basic Login component consists of a title (Log in), two input fields (Username and Password), and two buttons (Log in and Forgot password).
You can customize the form’s title and labels using internationalization.
The basic Login component can be used to create log-in pages featuring rich content.
|
Note
|
Password managers
Login is incompatible with password managers if placed inside another component’s [1] shadow root.
This isn’t an issue when using Login’s modal overlay.
|
Modal Overlay
Login features its own modal overlay. Use it to create simple log-in pages — which are full-screen on mobile devices — or to handle authentication without a dedicated log-in page. You can also use it to handle re-authentication when the user’s session has expired.
The overlay can be opened programmatically or through user interaction, for example, by using a log-in button.
Validation
Login shows an error message when authentication fails. The error message consists of a title and a message. It’s displayed directly below the title of the form.
The error message is customizable using internationalization. It should contain instructions on how to resolve the problem.
More information can also be provided to the user, for example by linking to a page with helpful material or by displaying contact information.
Internationalization (i18n)
Login’s titles, descriptions, labels, and messages are all customizable using internationalization.
Header
The header is only shown for modal log-in forms.
| Property | Default value |
|---|---|
Title | "App name" |
Description | "Application description" |
Form
Customize the form’s title, input field and button labels.
| Property | Default value |
|---|---|
Title | "Log in" |
Username | "Username" |
Password | "Password" |
Submit | "Log in" |
Forgot password | "Forgot password" |
Technical
Handling Events
Login Event
You can add a listener to log-in events and/or define an action for which a POST request is fired.
From the event, you can prevent the POST request.
The log-in button is disabled when clicked, to prevent multiple submissions.
To restore it, call component.setEnabled(true).
Forgotten Password
You can add an event listener, which allows you to offer users instructions for password recovery.
Cross-Site Request Forgery (CSRF) Tokens
If the page contains the following meta tags with a CSRF token, the token is automatically included in a form POST request:
<meta name="_csrf_parameter" content="_csrf">
<meta name="_csrf" content="71dac59f-34ee-4b31-b478-2891cbd0c55d">This token is submitted as _csrf=71dac59f-34ee-4b31-b478-2891cbd0c55d, that is, using the _csrf_parameter content as the variable name and the _csrf content as the value.
|
Important
| You can find more information in the corresponding article on vaadin.com. |