Skip to main content

Login

Shadow dwc-login
Java API

The Login component is designed to provide a and user-friendly interface for authentication, allowing users to log in using a username and password. It supports various customizations to enhance user experience across different devices and locales.

Show Code

Usages​

The Login component provides a user-friendly login form interface within a dialog for entering authentication credentials. It enhances the user experience by offering:

  • Clear input fields for username and password.
  • Visibility toggle for password to verify input.
  • Input validation feedback to prompt correct format before submission.

Login submission​

When users enter their username and password, the login component validates these inputs as required fields. Once the validation passes, a form submission event is triggered, delivering the entered credentials. To prevent multiple submissions, the Signin button is immediately disabled.

The demo below illustrates a basic form submission process. If the username and password are both set to "admin" respectively, the login dialog closes, and a logout button appears. If the credentials don't match, the default error message of the login form is displayed.

Show Code

Disabling the Signin Button

By default, the login form immediately disables the Signin button once the component validates the login inputs as correct, to prevent multiple submissions. You can re-enable the Signin button using the setEnabled(true) method.

Allowing Empty Passwords

In certain scenarios, empty passwords may be permissible, allowing users to log in with just a username. The login dialog can be configured to accept empty passwords by setting setEmptyPassword(true).

Internationalization (i18n)​

The titles, descriptions, labels, and messages within the login component are fully customizable using the LoginI18n class. This flexibility allows you to tailor the login interface to meet specific localization requirements or personalization preferences.

The demo below illustrates how to provide a German translation for the login dialog, ensuring that all interface elements are adapted to the German language to enhance user experience for German-speaking users.

Show Code

Custom fields​

The login component includes several slots, which allow you to add extra fields if necessary. This feature provides more control over the information required for successful authentication.

In the example below, a Customer ID field is added to the login form. Users must provide a valid ID to complete authentication, enhancing security and ensuring that access is granted only after verifying all required credentials.

Show Code

Submission Payload

Note that the login component doesn't automatically recognize or include extra fields added to the form in its submission payload. This means developers must explicitly retrieve the value of any additional fields from the client side and handle it according to the app's requirements to complete the authentication process.

Cancel button​

In certain scenarios, it may be desirable to add a cancel button alongside the Signin button. This feature is useful particularly when a user attempts to access a restricted area of the app and needs an option to cancel the action and return to their previous location. The login form includes a cancel button by default, but it's hidden from view.

To make the cancel button visible, you must provide a label for it - once labeled, it will appear on the screen. You can also listen to cancel events to respond appropriately to user actions, ensuring a smooth and user-friendly experience for navigating the app.

Show Code

Hiding Elements

To hide an element from the login screen, simply set its label to an empty string. This approach is particularly useful for temporarily removing interface components without permanently altering the codebase.

Password managers​

The login component is designed to be compatible with browser-based password managers, enhancing the user experience by simplifying the login process. For users of Chromium-based browsers, the component integrates seamlessly with the PasswordCredential API. This integration enables several convenient features:

  • Auto-fill: The browser may automatically fill out the username and password fields if the user has saved credentials for the site.
  • Credential Management: After logging in, the browser can prompt the user to save new credentials, making future logins faster and easier.
  • Credential Selection: If multiple credentials are saved, the browser can offer a choice to the user to select from one of the saved sets.

Styling​

Shadow parts​

These are the various parts of the shadow DOM for the component, which will be required when styling via CSS is desired.

Loading...

Slots​

Listed below are the slots available for utilization within the Login component. These slots act as placeholders within the component that control where the children of a customized element should be inserted within the shadow tree.

Loading...

Reflected attributes​

The reflected attributes of a component will be shown as attributes in the rendered HTML element for the component in the DOM. This means that styling can be applied using these attributes.

Loading...