LoginOverlay

Description #

<vaadin-login-overlay> is a web component which renders a login form in an overlay and provides an additional brand part for application title and description.

<vaadin-login-overlay opened></vaadin-login-overlay>

Styling #

The following shadow DOM parts are available for styling:

Part name	Description
backdrop	Backdrop of the overlay
overlay	The overlay container element
content	The overlay content element
card	Container for the brand and form wrapper
brand	Container for application title and description
description	The application description
form-wrapper	The login form wrapper element
form	The login form element
form-title	Title of the login form
error-message	Container for error message
error-message-title	Container for error message title
error-message-description	Container for error message description
footer	Container for the footer element

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.

description #

Type: string

Defines the application description

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.

opened #

Type: boolean

True if the overlay is currently displayed.

title #

Type: string

Defines the application title

Methods #

submit #

Type: () => void

Submits the form.

Events #

closed #

Type: LoginOverlayClosedEvent

Fired when the overlay is closed.

description-changed #

Type: LoginOverlayDescriptionChangedEvent

Fired when the description property changes.

disabled-changed #

Type: LoginOverlayDisabledChangedEvent

Fired when the disabled property changes.

error-changed #

Type: LoginOverlayErrorChangedEvent

Fired when the error property changes.

forgot-password #

Type: CustomEvent

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

login #

Type: LoginOverlayLoginEvent

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

Types #

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;
}

LoginOverlayClosedEvent #

/**
 * Fired when the overlay is closed.
 */
export type LoginOverlayClosedEvent = CustomEvent;

LoginOverlayDescriptionChangedEvent #

/**
 * Fired when the `description` property changes.
 */
export type LoginOverlayDescriptionChangedEvent = CustomEvent<{ value: string }>;

LoginOverlayDisabledChangedEvent #

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

LoginOverlayErrorChangedEvent #

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

LoginOverlayLoginEvent #

/**
 * Fired when a user submits the login.
 */
export type LoginOverlayLoginEvent = CustomEvent<{
  username: string;
  password: string;
  custom?: Record<string, unknown>;
}>;