@vaadin/login 24.2.0-dev.e9803eea7 → 24.2.0-rc1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/login",
-  "version": "24.2.0-dev.e9803eea7",
+  "version": "24.2.0-rc1",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,12 @@
   "type": "module",
   "files": [
     "src",
+    "!src/vaadin-lit-login-form-wrapper.js",
+    "!src/vaadin-lit-login-form.d.ts",
+    "!src/vaadin-lit-login-form.js",
+    "!src/vaadin-lit-login-overlay-wrapper.js",
+    "!src/vaadin-lit-login-overlay.d.ts",
+    "!src/vaadin-lit-login-overlay.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -37,23 +43,23 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "24.2.0-dev.e9803eea7",
-    "@vaadin/component-base": "24.2.0-dev.e9803eea7",
-    "@vaadin/overlay": "24.2.0-dev.e9803eea7",
-    "@vaadin/password-field": "24.2.0-dev.e9803eea7",
-    "@vaadin/text-field": "24.2.0-dev.e9803eea7",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-dev.e9803eea7",
-    "@vaadin/vaadin-material-styles": "24.2.0-dev.e9803eea7",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-dev.e9803eea7"
+    "@vaadin/button": "24.2.0-rc1",
+    "@vaadin/component-base": "24.2.0-rc1",
+    "@vaadin/overlay": "24.2.0-rc1",
+    "@vaadin/password-field": "24.2.0-rc1",
+    "@vaadin/text-field": "24.2.0-rc1",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-rc1",
+    "@vaadin/vaadin-material-styles": "24.2.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-rc1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.3",
+    "@vaadin/testing-helpers": "^0.5.0",
     "sinon": "^13.0.2"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "a065b79b9d5a189e457fab312cc8aff0d7f2f910"
+  "gitHead": "012bef350bbf29865748f4c78338dd17c6f61a74"
 }

package/src/vaadin-login-form-mixin.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { LoginMixinClass } from './vaadin-login-mixin.js';
+
+export declare function LoginFormMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<LoginFormMixinClass> & Constructor<LoginMixinClass> & T;
+
+export declare class LoginFormMixinClass {
+  /**
+   * Submits the form.
+   */
+  submit(): void;
+}

package/src/vaadin-login-form-mixin.js

@@ -0,0 +1,127 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { LoginMixin } from './vaadin-login-mixin.js';
+
+/**
+ * @polymerMixin
+ * @mixes LoginMixin
+ */
+export const LoginFormMixin = (superClass) =>
+  class LoginFormMixin extends LoginMixin(superClass) {
+    static get observers() {
+      return ['_errorChanged(error)'];
+    }
+
+    get _customFields() {
+      return [...this.$.vaadinLoginFormWrapper.children].filter((node) => {
+        return node.getAttribute('slot') === 'custom-form-area' && node.hasAttribute('name');
+      });
+    }
+
+    /** @protected */
+    async connectedCallback() {
+      super.connectedCallback();
+
+      if (!this.noAutofocus) {
+        // Wait for the form to fully render.
+        await new Promise(requestAnimationFrame);
+        this.$.vaadinLoginUsername.focus();
+      }
+    }
+
+    /** @private */
+    _errorChanged() {
+      if (this.error && !this._preventAutoEnable) {
+        this.disabled = false;
+      }
+    }
+
+    /**
+     * Submits the form.
+     */
+    submit() {
+      const userName = this.$.vaadinLoginUsername;
+      const password = this.$.vaadinLoginPassword;
+
+      if (this.disabled || !(userName.validate() && password.validate())) {
+        return;
+      }
+
+      this.error = false;
+      this.disabled = true;
+
+      const detail = {
+        username: userName.value,
+        password: password.value,
+      };
+
+      const fields = this._customFields;
+      if (fields.length) {
+        detail.custom = {};
+
+        fields.forEach((field) => {
+          detail.custom[field.name] = field.value;
+        });
+      }
+
+      const loginEventDetails = {
+        bubbles: true,
+        cancelable: true,
+        detail,
+      };
+
+      const firedEvent = this.dispatchEvent(new CustomEvent('login', loginEventDetails));
+      if (this.action && firedEvent) {
+        const csrfMetaName = document.querySelector('meta[name=_csrf_parameter]');
+        const csrfMetaValue = document.querySelector('meta[name=_csrf]');
+        if (csrfMetaName && csrfMetaValue) {
+          this.$.csrf.name = csrfMetaName.content;
+          this.$.csrf.value = csrfMetaValue.content;
+        }
+        this.querySelector('form').submit();
+      }
+    }
+
+    /** @protected */
+    _onFormData(event) {
+      const { formData } = event;
+
+      if (this._customFields.length) {
+        this._customFields.forEach((field) => {
+          formData.append(field.name, field.value);
+        });
+      }
+    }
+
+    /** @protected */
+    _handleInputKeydown(e) {
+      if (e.key === 'Enter') {
+        const { currentTarget: inputActive } = e;
+        const nextInput =
+          inputActive.id === 'vaadinLoginUsername' ? this.$.vaadinLoginPassword : this.$.vaadinLoginUsername;
+        if (inputActive.validate()) {
+          if (nextInput.checkValidity()) {
+            this.submit();
+          } else {
+            nextInput.focus();
+          }
+        }
+      }
+    }
+
+    /** @protected */
+    _handleInputKeyup(e) {
+      const input = e.currentTarget;
+      if (e.key === 'Tab' && input instanceof HTMLInputElement) {
+        input.select();
+      }
+    }
+
+    /** @protected */
+    _onForgotPasswordClick() {
+      this.dispatchEvent(new CustomEvent('forgot-password'));
+    }
+  };

package/src/vaadin-login-form-wrapper-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const loginFormWrapperStyles: CSSResult;

package/src/vaadin-login-form-wrapper-styles.js

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const loginFormWrapperStyles = css`
+  :host {
+    overflow: hidden;
+    display: inline-block;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  [part='form'] {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  [part='form-title'] {
+    margin: 0;
+  }
+
+  [part='error-message'] {
+    position: relative;
+  }
+`;

package/src/vaadin-login-form-wrapper.js

@@ -4,7 +4,13 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { loginFormWrapperStyles } from './vaadin-login-form-wrapper-styles.js';
+
+registerStyles('vaadin-login-form-wrapper', loginFormWrapperStyles, {
+  moduleId: 'vaadin-login-form-wrapper-styles',
+});
 
 /**
  * An element used internally by `<vaadin-login-form>`. Not intended to be used separately.
@@ -16,31 +22,6 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
 class LoginFormWrapper extends ThemableMixin(PolymerElement) {
   static get template() {
     return html`
-      <style>
-        :host {
-          overflow: hidden;
-          display: inline-block;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        [part='form'] {
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-          box-sizing: border-box;
-        }
-
-        [part='form-title'] {
-          margin: 0;
-        }
-
-        [part='error-message'] {
-          position: relative;
-        }
-      </style>
       <section part="form">
         <h2 part="form-title">[[i18n.form.title]]</h2>
         <div part="error-message" hidden$="[[!error]]">
@@ -50,9 +31,14 @@ class LoginFormWrapper extends ThemableMixin(PolymerElement) {
 
         <slot name="form"></slot>
 
+        <slot name="custom-form-area"></slot>
+
+        <slot name="submit"></slot>
+
         <slot name="forgot-password"></slot>
 
         <div part="footer">
+          <slot name="footer"></slot>
           <p>[[i18n.additionalInformation]]</p>
         </div>
       </section>
@@ -86,6 +72,6 @@ class LoginFormWrapper extends ThemableMixin(PolymerElement) {
   }
 }
 
-customElements.define(LoginFormWrapper.is, LoginFormWrapper);
+defineCustomElement(LoginFormWrapper);
 
 export { LoginFormWrapper };

package/src/vaadin-login-form.d.ts

@@ -5,7 +5,7 @@
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { LoginMixin } from './vaadin-login-mixin.js';
+import { LoginFormMixin } from './vaadin-login-form-mixin.js';
 export { LoginI18n } from './vaadin-login-mixin.js';
 
 /**
@@ -69,9 +69,7 @@ export interface LoginFormEventMap extends HTMLElementEventMap, LoginFormCustomE
  * @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
  * @fires {CustomEvent} login - Fired when a user submits the login.
  */
-declare class LoginForm extends ElementMixin(ThemableMixin(LoginMixin(HTMLElement))) {
-  submit(): void;
-
+declare class LoginForm extends LoginFormMixin(ElementMixin(ThemableMixin(HTMLElement))) {
   addEventListener<K extends keyof LoginFormEventMap>(
     type: K,
     listener: (this: LoginForm, ev: LoginFormEventMap[K]) => void,

package/src/vaadin-login-form.js

@@ -8,9 +8,10 @@ import '@vaadin/text-field/src/vaadin-text-field.js';
 import '@vaadin/password-field/src/vaadin-password-field.js';
 import './vaadin-login-form-wrapper.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { LoginMixin } from './vaadin-login-mixin.js';
+import { LoginFormMixin } from './vaadin-login-form-mixin.js';
 
 /**
  * `<vaadin-login-form>` is a Web Component providing an easy way to require users
@@ -46,12 +47,13 @@ import { LoginMixin } from './vaadin-login-mixin.js';
  * @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
  * @fires {CustomEvent} login - Fired when a user submits the login.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes ElementMixin
  * @mixes ThemableMixin
- * @mixes LoginMixin
+ * @mixes LoginFormMixin
  */
-class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement))) {
+class LoginForm extends LoginFormMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -59,8 +61,8 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
           width: 100%;
         }
       </style>
-      <vaadin-login-form-wrapper theme$="[[_theme]]" error="[[error]]" i18n="[[i18n]]">
-        <form method="POST" action$="[[action]]" slot="form">
+      <vaadin-login-form-wrapper id="vaadinLoginFormWrapper" theme$="[[_theme]]" error="[[error]]" i18n="[[i18n]]">
+        <form method="POST" action$="[[action]]" on-formdata="_onFormData" slot="form">
           <input id="csrf" type="hidden" />
           <vaadin-text-field
             name="username"
@@ -89,12 +91,12 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
           >
             <input type="password" slot="input" on-keyup="_handleInputKeyup" />
           </vaadin-password-field>
-
-          <vaadin-button theme="primary contained submit" on-click="submit" disabled$="[[disabled]]">
-            [[i18n.form.submit]]
-          </vaadin-button>
         </form>
 
+        <vaadin-button slot="submit" theme="primary contained submit" on-click="submit" disabled$="[[disabled]]">
+          [[i18n.form.submit]]
+        </vaadin-button>
+
         <vaadin-button
           slot="forgot-password"
           theme="tertiary small"
@@ -111,19 +113,6 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
     return 'vaadin-login-form';
   }
 
-  static get observers() {
-    return ['_errorChanged(error)'];
-  }
-
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-
-    if (!this.noAutofocus) {
-      this.$.vaadinLoginUsername.focus();
-    }
-  }
-
   /**
    * @param {StampedTemplate} dom
    * @return {null}
@@ -132,76 +121,8 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
   _attachDom(dom) {
     this.appendChild(dom);
   }
-
-  /** @private */
-  _errorChanged() {
-    if (this.error && !this._preventAutoEnable) {
-      this.disabled = false;
-    }
-  }
-
-  submit() {
-    const userName = this.$.vaadinLoginUsername;
-    const password = this.$.vaadinLoginPassword;
-
-    if (this.disabled || !(userName.validate() && password.validate())) {
-      return;
-    }
-
-    this.error = false;
-    this.disabled = true;
-
-    const loginEventDetails = {
-      bubbles: true,
-      cancelable: true,
-      detail: {
-        username: userName.value,
-        password: password.value,
-      },
-    };
-
-    const firedEvent = this.dispatchEvent(new CustomEvent('login', loginEventDetails));
-    if (this.action && firedEvent) {
-      const csrfMetaName = document.querySelector('meta[name=_csrf_parameter]');
-      const csrfMetaValue = document.querySelector('meta[name=_csrf]');
-      if (csrfMetaName && csrfMetaValue) {
-        this.$.csrf.name = csrfMetaName.content;
-        this.$.csrf.value = csrfMetaValue.content;
-      }
-      this.querySelector('form').submit();
-    }
-  }
-
-  /** @private */
-  _handleInputKeydown(e) {
-    if (e.key === 'Enter') {
-      const { currentTarget: inputActive } = e;
-      const nextInput =
-        inputActive.id === 'vaadinLoginUsername' ? this.$.vaadinLoginPassword : this.$.vaadinLoginUsername;
-      if (inputActive.validate()) {
-        if (nextInput.checkValidity()) {
-          this.submit();
-        } else {
-          nextInput.focus();
-        }
-      }
-    }
-  }
-
-  /** @private */
-  _handleInputKeyup(e) {
-    const input = e.currentTarget;
-    if (e.key === 'Tab' && input instanceof HTMLInputElement) {
-      input.select();
-    }
-  }
-
-  /** @private */
-  _onForgotPasswordClick() {
-    this.dispatchEvent(new CustomEvent('forgot-password'));
-  }
 }
 
-customElements.define(LoginForm.is, LoginForm);
+defineCustomElement(LoginForm);
 
 export { LoginForm };

package/src/vaadin-login-overlay-mixin.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
+import type { LoginMixinClass } from './vaadin-login-mixin.js';
+
+export declare function LoginOverlayMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<LoginMixinClass> & Constructor<LoginOverlayMixinClass> & Constructor<OverlayClassMixinClass> & T;
+
+export declare class LoginOverlayMixinClass {
+  /**
+   * Defines the application description
+   */
+  description: string;
+
+  /**
+   * True if the overlay is currently displayed.
+   */
+  opened: boolean;
+
+  /**
+   * Defines the application title
+   */
+  title: string;
+}

package/src/vaadin-login-overlay-mixin.js

@@ -0,0 +1,167 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
+import { LoginMixin } from './vaadin-login-mixin.js';
+
+/**
+ * @polymerMixin
+ * @mixes LoginMixin
+ * @mixes OverlayClassMixin
+ */
+export const LoginOverlayMixin = (superClass) =>
+  class LoginOverlayMixin extends OverlayClassMixin(LoginMixin(superClass)) {
+    static get properties() {
+      return {
+        /**
+         * Defines the application description
+         * @type {string}
+         */
+        description: {
+          type: String,
+          value: 'Application description',
+          notify: true,
+        },
+
+        /**
+         * True if the overlay is currently displayed.
+         * @type {boolean}
+         */
+        opened: {
+          type: Boolean,
+          value: false,
+          observer: '_onOpenedChange',
+        },
+
+        /**
+         * Defines the application title
+         * @type {string}
+         */
+        title: {
+          type: String,
+          value: 'App name',
+        },
+      };
+    }
+
+    static get observers() {
+      return ['__i18nChanged(i18n)'];
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this._overlayElement = this.$.vaadinLoginOverlayWrapper;
+    }
+
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+
+      // Restore opened state if overlay was open when disconnecting
+      if (this.__restoreOpened) {
+        this.opened = true;
+      }
+    }
+
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+
+      // Close overlay and memorize opened state
+      this.__restoreOpened = this.opened;
+      this.opened = false;
+    }
+
+    /** @private */
+    __i18nChanged(i18n) {
+      const header = i18n && i18n.header;
+      if (!header) {
+        return;
+      }
+      this.title = header.title;
+      this.description = header.description;
+    }
+
+    /** @protected */
+    _preventClosingLogin(e) {
+      e.preventDefault();
+    }
+
+    /**
+     * @param {!Event} e
+     * @protected
+     */
+    _retargetEvent(e) {
+      e.stopPropagation();
+      const { detail, composed, cancelable, bubbles } = e;
+
+      const firedEvent = this.dispatchEvent(new CustomEvent(e.type, { bubbles, cancelable, composed, detail }));
+      // Check if `eventTarget.preventDefault()` was called to prevent default in the original event
+      if (!firedEvent) {
+        e.preventDefault();
+      }
+    }
+
+    /** @private */
+    async _onOpenedChange() {
+      const form = this.$.vaadinLoginForm;
+
+      // Wait for initial render on overlay initialization
+      if (!form.$ && this.updateComplete) {
+        await this.updateComplete;
+      }
+
+      if (!this.opened) {
+        form.$.vaadinLoginUsername.value = '';
+        form.$.vaadinLoginPassword.value = '';
+        this.disabled = false;
+
+        if (this._undoTitleTeleport) {
+          this._undoTitleTeleport();
+        }
+
+        if (this._undoFieldsTeleport) {
+          this._undoFieldsTeleport();
+        }
+
+        if (this._undoFooterTeleport) {
+          this._undoFooterTeleport();
+        }
+      } else {
+        this._undoTitleTeleport = this._teleport('title', this.$.vaadinLoginOverlayWrapper);
+
+        this._undoFieldsTeleport = this._teleport(
+          'custom-form-area',
+          form.$.vaadinLoginFormWrapper,
+          form.querySelector('vaadin-button'),
+        );
+
+        this._undoFooterTeleport = this._teleport('footer', form.$.vaadinLoginFormWrapper);
+
+        // Overlay sets pointerEvents on body to `none`, which breaks LastPass popup
+        // Reverting it back to the previous state
+        // https://github.com/vaadin/vaadin-overlay/blob/041cde4481b6262eac68d3a699f700216d897373/src/vaadin-overlay.html#L660
+        document.body.style.pointerEvents = this.$.vaadinLoginOverlayWrapper._previousDocumentPointerEvents;
+      }
+    }
+
+    /** @private */
+    _teleport(slot, target, refNode) {
+      const teleported = [...this.querySelectorAll(`[slot="${slot}"]`)].map((el) => {
+        if (refNode) {
+          target.insertBefore(el, refNode);
+        } else {
+          target.appendChild(el);
+        }
+        return el;
+      });
+      // Function to undo the teleport
+      return () => {
+        this.append(...teleported);
+      };
+    }
+  };

package/src/vaadin-login-overlay-wrapper-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const loginOverlayWrapperStyles: CSSResult;