@scoped-vaadin/login/src/vaadin-lit-login-form.js

vaadin-login

/**
 * @license
 * Copyright (c) 2018 - 2024 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
import '@scoped-vaadin/button/src/vaadin-lit-button.js';
import '@scoped-vaadin/text-field/src/vaadin-lit-text-field.js';
import '@scoped-vaadin/password-field/src/vaadin-lit-password-field.js';
import './vaadin-lit-login-form-wrapper.js';
import { html, LitElement } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import { defineCustomElement } from '@scoped-vaadin/component-base/src/define.js';
import { ElementMixin } from '@scoped-vaadin/component-base/src/element-mixin.js';
import { PolylitMixin } from '@scoped-vaadin/component-base/src/polylit-mixin.js';
import { ThemableMixin } from '@scoped-vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { LoginFormMixin } from './vaadin-login-form-mixin.js';

/**
 * LitElement based version of `<vaadin24-login-form>` web component.
 *
 * ## Disclaimer
 *
 * This component is an experiment and not yet a part of Vaadin platform.
 * There is no ETA regarding specific Vaadin version where it'll land.
 * Feel free to try this code in your apps as per Apache 2.0 license.
 */
class LoginForm extends LoginFormMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
  static get is() {
    return 'vaadin24-login-form';
  }

  /**
   * @protected
   * @override
   */
  createRenderRoot() {
    return this;
  }

  /** @protected */
  render() {
    return html`
      <style>
        vaadin24-login-form-wrapper > form > * {
          width: 100%;
        }
      </style>
      <vaadin24-login-form-wrapper
        id="vaadinLoginFormWrapper"
        theme="${ifDefined(this._theme)}"
        .error="${this.error}"
        .i18n="${this.i18n}"
      >
        <form method="POST" action="${this.action}" @formdata="${this._onFormData}" slot="form">
          <input id="csrf" type="hidden" />
          <vaadin24-text-field
            name="username"
            label="${this.i18n.form.username}"
            .errorMessage="${this.i18n.errorMessage.username}"
            id="vaadinLoginUsername"
            required
            @keydown="${this._handleInputKeydown}"
            autocapitalize="none"
            autocorrect="off"
            spellcheck="false"
            autocomplete="username"
            manual-validation
          >
            <input type="text" slot="input" @keyup="${this._handleInputKeyup}" />
          </vaadin24-text-field>

          <vaadin24-password-field
            name="password"
            .label="${this.i18n.form.password}"
            .errorMessage="${this.i18n.errorMessage.password}"
            id="vaadinLoginPassword"
            required
            @keydown="${this._handleInputKeydown}"
            spellcheck="false"
            autocomplete="current-password"
            manual-validation
          >
            <input type="password" slot="input" @keyup="${this._handleInputKeyup}" />
          </vaadin24-password-field>
        </form>

        <vaadin24-button
          slot="submit"
          theme="primary contained submit"
          @click="${this.submit}"
          .disabled="${this.disabled}"
        >
          ${this.i18n.form.submit}
        </vaadin24-button>

        <vaadin24-button
          slot="forgot-password"
          theme="tertiary small"
          @click="${this._onForgotPasswordClick}"
          ?hidden="${this.noForgotPassword}"
        >
          ${this.i18n.form.forgotPassword}
        </vaadin24-button>
      </vaadin24-login-form-wrapper>
    `;
  }
}

defineCustomElement(LoginForm);

export { LoginForm };