@vaadin/login 24.2.0-alpha9 → 24.2.0-beta2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/login",
-  "version": "24.2.0-alpha9",
+  "version": "24.2.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -43,14 +43,14 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "24.2.0-alpha9",
-    "@vaadin/component-base": "24.2.0-alpha9",
-    "@vaadin/overlay": "24.2.0-alpha9",
-    "@vaadin/password-field": "24.2.0-alpha9",
-    "@vaadin/text-field": "24.2.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.2.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha9"
+    "@vaadin/button": "24.2.0-beta2",
+    "@vaadin/component-base": "24.2.0-beta2",
+    "@vaadin/overlay": "24.2.0-beta2",
+    "@vaadin/password-field": "24.2.0-beta2",
+    "@vaadin/text-field": "24.2.0-beta2",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-beta2",
+    "@vaadin/vaadin-material-styles": "24.2.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-beta2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -61,5 +61,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "e9765733fea96542e379e02e6f42b07145893140"
+  "gitHead": "4b852f9a12d4dade7f0fb3c73b7212436cebf310"
 }

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

@@ -15,6 +15,12 @@ export const LoginFormMixin = (superClass) =>
       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();
@@ -47,13 +53,24 @@ export const LoginFormMixin = (superClass) =>
       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: {
-          username: userName.value,
-          password: password.value,
-        },
+        detail,
       };
 
       const firedEvent = this.dispatchEvent(new CustomEvent('login', loginEventDetails));
@@ -68,6 +85,17 @@ export const LoginFormMixin = (superClass) =>
       }
     }
 
+    /** @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') {

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

@@ -4,6 +4,7 @@
  * 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 { 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';
 
@@ -30,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>
@@ -66,6 +72,6 @@ class LoginFormWrapper extends ThemableMixin(PolymerElement) {
   }
 }
 
-customElements.define(LoginFormWrapper.is, LoginFormWrapper);
+defineCustomElement(LoginFormWrapper);
 
 export { LoginFormWrapper };

package/src/vaadin-login-form.js

@@ -8,6 +8,7 @@ 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 { LoginFormMixin } from './vaadin-login-form-mixin.js';
@@ -46,6 +47,7 @@ import { LoginFormMixin } from './vaadin-login-form-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
@@ -59,8 +61,8 @@ class LoginForm extends LoginFormMixin(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 LoginFormMixin(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"
@@ -121,6 +123,6 @@ class LoginForm extends LoginFormMixin(ElementMixin(ThemableMixin(PolymerElement
   }
 }
 
-customElements.define(LoginForm.is, LoginForm);
+defineCustomElement(LoginForm);
 
 export { LoginForm };

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

@@ -108,21 +108,39 @@ export const LoginOverlayMixin = (superClass) =>
 
     /** @private */
     async _onOpenedChange() {
+      const form = this.$.vaadinLoginForm;
+
+      // Wait for initial render on overlay initialization
+      if (!form.$ && this.updateComplete) {
+        await this.updateComplete;
+      }
+
       if (!this.opened) {
-        // Wait for initial render on overlay initialization
-        if (!this.$.vaadinLoginForm.$ && this.updateComplete) {
-          await this.updateComplete;
+        form.$.vaadinLoginUsername.value = '';
+        form.$.vaadinLoginPassword.value = '';
+        this.disabled = false;
+
+        if (this._undoTitleTeleport) {
+          this._undoTitleTeleport();
         }
 
-        this.$.vaadinLoginForm.$.vaadinLoginUsername.value = '';
-        this.$.vaadinLoginForm.$.vaadinLoginPassword.value = '';
-        this.disabled = false;
+        if (this._undoFieldsTeleport) {
+          this._undoFieldsTeleport();
+        }
 
-        if (this._undoTeleport) {
-          this._undoTeleport();
+        if (this._undoFooterTeleport) {
+          this._undoFooterTeleport();
         }
       } else {
-        this._undoTeleport = this._teleport(this._getElementsToTeleport());
+        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
@@ -132,20 +150,18 @@ export const LoginOverlayMixin = (superClass) =>
     }
 
     /** @private */
-    _teleport(elements) {
-      const teleported = Array.from(elements).map((e) => {
-        return this.$.vaadinLoginOverlayWrapper.appendChild(e);
+    _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 () => {
-        while (teleported.length > 0) {
-          this.appendChild(teleported.shift());
-        }
+        this.append(...teleported);
       };
     }
-
-    /** @private */
-    _getElementsToTeleport() {
-      return this.querySelectorAll('[slot=title]');
-    }
   };

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

@@ -4,6 +4,7 @@
  * 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 { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
 import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
@@ -65,4 +66,4 @@ class LoginOverlayWrapper extends OverlayMixin(DirMixin(ThemableMixin(PolymerEle
   }
 }
 
-customElements.define(LoginOverlayWrapper.is, LoginOverlayWrapper);
+defineCustomElement(LoginOverlayWrapper);

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

@@ -27,7 +27,11 @@ export type LoginOverlayErrorChangedEvent = CustomEvent<{ value: boolean }>;
 /**
  * Fired when a user submits the login.
  */
-export type LoginOverlayLoginEvent = CustomEvent<{ username: string; password: string }>;
+export type LoginOverlayLoginEvent = CustomEvent<{
+  username: string;
+  password: string;
+  custom?: Record<string, unknown>;
+}>;
 
 export interface LoginOverlayCustomEventMap {
   'description-changed': LoginOverlayDescriptionChangedEvent;

package/src/vaadin-login-overlay.js

@@ -6,6 +6,7 @@
 import './vaadin-login-form.js';
 import './vaadin-login-overlay-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 { LoginOverlayMixin } from './vaadin-login-overlay-mixin.js';
@@ -43,6 +44,7 @@ import { LoginOverlayMixin } from './vaadin-login-overlay-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
@@ -75,6 +77,11 @@ class LoginOverlay extends LoginOverlayMixin(ElementMixin(ThemableMixin(PolymerE
           on-forgot-password="_retargetEvent"
         ></vaadin-login-form>
       </vaadin-login-overlay-wrapper>
+
+      <div hidden>
+        <slot name="custom-form-area"></slot>
+        <slot name="footer"></slot>
+      </div>
     `;
   }
 
@@ -83,6 +90,6 @@ class LoginOverlay extends LoginOverlayMixin(ElementMixin(ThemableMixin(PolymerE
   }
 }
 
-customElements.define(LoginOverlay.is, LoginOverlay);
+defineCustomElement(LoginOverlay);
 
 export { LoginOverlay };

package/theme/lumo/vaadin-login-form-wrapper-styles.js

@@ -17,6 +17,11 @@ const loginFormWrapper = css`
     margin-top: calc(var(--lumo-font-size-xxxl) - var(--lumo-font-size-xxl));
   }
 
+  ::slotted([slot='submit']) {
+    margin-top: var(--lumo-space-l);
+    margin-bottom: var(--lumo-space-s);
+  }
+
   ::slotted([slot='forgot-password']) {
     margin: var(--lumo-space-s) auto;
   }

package/theme/lumo/vaadin-login-form.js

@@ -2,5 +2,4 @@ import '@vaadin/button/theme/lumo/vaadin-button.js';
 import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
 import '@vaadin/password-field/theme/lumo/vaadin-password-field.js';
 import './vaadin-login-form-wrapper-styles.js';
-import './vaadin-login-form-styles.js';
 import '../../src/vaadin-login-form.js';

package/theme/material/vaadin-login-form-wrapper-styles.js

@@ -5,7 +5,6 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 const loginFormWrapper = css`
   :host {
     background: var(--material-background-color) linear-gradient(hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
-    min-height: 250px;
   }
 
   [part='form'] {
@@ -22,6 +21,19 @@ const loginFormWrapper = css`
     font-size: var(--material-h5-font-size);
   }
 
+  ::slotted([slot='submit']) {
+    margin-top: 3em;
+    margin-bottom: 2em;
+    flex-grow: 0;
+  }
+
+  @media only screen and (max-width: 1023px) {
+    ::slotted([slot='submit']) {
+      margin-top: 2.5em;
+      margin-bottom: 1em;
+    }
+  }
+
   ::slotted([slot='forgot-password']) {
     margin: 0.5rem auto;
     padding-bottom: 12px;

package/theme/material/vaadin-login-form.js

@@ -2,5 +2,4 @@ import '@vaadin/button/theme/material/vaadin-button.js';
 import '@vaadin/text-field/theme/material/vaadin-text-field.js';
 import '@vaadin/password-field/theme/material/vaadin-password-field.js';
 import './vaadin-login-form-wrapper-styles.js';
-import './vaadin-login-form-styles.js';
 import '../../src/vaadin-login-form.js';

package/theme/material/vaadin-login-overlay-styles.js

@@ -1,5 +1,4 @@
 import '@vaadin/vaadin-material-styles/color.js';
-import './vaadin-login-form-styles.js';
 import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
 import { typography } from '@vaadin/vaadin-material-styles/typography.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -338,9 +337,7 @@ const loginFormWrapper = css`
     }
 
     :host([theme~='with-overlay']) [part='form'] ::slotted(form) {
-      justify-content: space-around;
-      margin-top: 20px;
-      min-height: 250px;
+      margin-top: 15px;
     }
   }
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/login",
-  "version": "24.2.0-alpha9",
+  "version": "24.2.0-beta2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -148,7 +148,7 @@
         },
         {
           "name": "vaadin-login-overlay",
-          "description": "`<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and\nhaving an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows\npassword managers to work with login form.\n\n```\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:\n\nPart name       | Description\n----------------|---------------------------------------------------------|\n`card`          | Container for the entire component's content\n`brand`         | Container for application title and description\n`form`          | Container for the `<vaadin-login-form>` component\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha9/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
+          "description": "`<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and\nhaving an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows\npassword managers to work with login form.\n\n```\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:\n\nPart name       | Description\n----------------|---------------------------------------------------------|\n`card`          | Container for the entire component's content\n`brand`         | Container for application title and description\n`form`          | Container for the `<vaadin-login-form>` component\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-beta2/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
           "attributes": [
             {
               "name": "action",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/login",
-  "version": "24.2.0-alpha9",
+  "version": "24.2.0-beta2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -93,7 +93,7 @@
         },
         {
           "name": "vaadin-login-overlay",
-          "description": "`<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and\nhaving an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows\npassword managers to work with login form.\n\n```\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:\n\nPart name       | Description\n----------------|---------------------------------------------------------|\n`card`          | Container for the entire component's content\n`brand`         | Container for application title and description\n`form`          | Container for the `<vaadin-login-form>` component\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha9/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
+          "description": "`<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and\nhaving an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows\npassword managers to work with login form.\n\n```\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:\n\nPart name       | Description\n----------------|---------------------------------------------------------|\n`card`          | Container for the entire component's content\n`brand`         | Container for application title and description\n`form`          | Container for the `<vaadin-login-form>` component\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-beta2/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
           "extension": true,
           "attributes": [
             {

package/theme/lumo/vaadin-login-form-styles.js

@@ -1,13 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-login-form',
-  css`
-    form > vaadin-button[theme~='submit'] {
-      margin-top: var(--lumo-space-l);
-      margin-bottom: var(--lumo-space-s);
-    }
-  `,
-  { moduleId: 'lumo-login-form' },
-);

package/theme/material/vaadin-login-form-styles.js

@@ -1,21 +0,0 @@
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-login-form',
-  css`
-    form > vaadin-button[theme~='submit'] {
-      margin-top: 3em;
-      margin-bottom: 2em;
-      flex-grow: 0;
-    }
-
-    /* Small screen */
-    @media only screen and (max-width: 1023px) {
-      form > vaadin-button[theme~='submit'] {
-        margin-top: 2.5em;
-        margin-bottom: 1em;
-      }
-    }
-  `,
-  { moduleId: 'material-login-form' },
-);