LoginForm

Description #

<vaadin-login-form> is a Web Component providing an easy way to require users to log in into an application. Note that component has no shadowRoot.

<vaadin-login-form></vaadin-login-form>

Component has to be accessible from the document layer in order to allow password managers to work properly with form values. Using <vaadin-login-overlay> allows to always attach the component to the document body.

Styling #

The following shadow DOM parts are available for styling:

Part name	Description
form	Container for the entire component's content
form-title	Title of the login form
error-message	Container for error message, contains error-message-title and error-message-description parts. Hidden by default.
error-message-title	Container for error message title
error-message-description	Container for error message description
footer	Container additional information text from i18n object

See Styling Components documentation.

Properties #

action #

Type: string | null

If set, a synchronous POST call will be fired to the path defined. The login event is also dispatched, so event.preventDefault() can be called to prevent the POST call.

disabled #

Type: boolean

If set, disable the "Log in" button and prevent user from submitting login form. It is re-enabled automatically, when error is set to true, allowing form resubmission after user makes changes.

error #

Type: boolean

If set, the error message is shown. The message is hidden by default. When set, it changes the disabled state of the submit button.

headingLevel #

Type: number

Sets the root heading level (aria-level) for the heading hierarchy. Default value: 1. Child headings automatically increment from this base level i.e. standalone login form renders its title as <h1>, whereas the form in the overlay uses <h2>, as the <h1> element is used by the overlay's own title.

i18n #

Type: LoginI18n

The object used to localize this component. To change the default localization, replace this with an object that provides all properties, or just the individual properties you want to change.

The object has the following JSON structure (by default it doesn't include additionalInformation and header sections, header can be added to override title and description properties in vaadin-login-overlay):

{
  header: {
    title: 'App name',
    description: 'Inspiring application description'
  },
  form: {
    title: 'Log in',
    username: 'Username',
    password: 'Password',
    submit: 'Log in',
    forgotPassword: 'Forgot password'
  },
  errorMessage: {
    title: 'Incorrect username or password',
    message: 'Check that you have entered the correct username and password and try again.',
    username: 'Username is required',
    password: 'Password is required'
  },
  additionalInformation: 'In case you need to provide some additional info for the user.'
}

See also: LoginI18n

noAutofocus #

Type: boolean

If set, the user name field automatically receives focus when the component is attached to the document.

noForgotPassword #

Type: boolean

Whether to hide the forgot password button. The button is visible by default.

Methods #

submit #

Type: () => void

Submits the form.

Events #

disabled-changed #

Type: LoginFormDisabledChangedEvent

Fired when the disabled property changes.

error-changed #

Type: LoginFormErrorChangedEvent

Fired when the error property changes.

forgot-password #

Type: CustomEvent

Fired when user clicks on the "Forgot password" button.

login #

Type: LoginFormLoginEvent

Fired when an user submits the login. The event contains username and password values in the detail property.

Types #

LoginFormDisabledChangedEvent #

/**
 * Fired when the `disabled` property changes.
 */
export type LoginFormDisabledChangedEvent = CustomEvent<{ value: boolean }>;

LoginFormErrorChangedEvent #

/**
 * Fired when the `error` property changes.
 */
export type LoginFormErrorChangedEvent = CustomEvent<{ value: boolean }>;

LoginFormLoginEvent #

/**
 * Fired when a user submits the login.
 */
export type LoginFormLoginEvent = CustomEvent<{ username: string; password: string }>;

LoginI18n #

export interface LoginI18n {
  form?: {
    title?: string;
    username?: string;
    password?: string;
    submit?: string;
    forgotPassword?: string;
  };
  errorMessage?: {
    title?: string;
    message?: string;
    username?: string;
    password?: string;
  };
  header?: {
    title?: string;
    description?: string;
  };
  additionalInformation?: string;
}