@vaadin/login 24.2.0-dev.f254716fe → 24.3.0-alpha1

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

@@ -0,0 +1,35 @@
+/**
+ * @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 loginOverlayWrapperStyles = css`
+  [part='overlay'] {
+    outline: none;
+  }
+
+  [part='card'] {
+    max-width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  [part='brand'] {
+    box-sizing: border-box;
+    overflow: hidden;
+    flex-grow: 1;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+
+  [part='brand'] h1 {
+    color: inherit;
+    margin: 0;
+  }
+`;

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

@@ -3,58 +3,17 @@
  * Copyright (c) 2018 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+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';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { loginOverlayWrapperStyles } from './vaadin-login-overlay-wrapper-styles.js';
 
-registerStyles(
-  'vaadin-login-overlay-wrapper',
-  css`
-    [part='overlay'] {
-      outline: none;
-    }
-
-    [part='card'] {
-      max-width: 100%;
-      box-sizing: border-box;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-    }
-
-    [part='brand'] {
-      box-sizing: border-box;
-      overflow: hidden;
-      flex-grow: 1;
-      flex-shrink: 0;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-end;
-    }
-
-    [part='brand'] h1 {
-      color: inherit;
-      margin: 0;
-    }
-  `,
-  { moduleId: 'vaadin-login-overlay-wrapper-styles' },
-);
-
-const template = html`
-  <section part="card">
-    <div part="brand">
-      <slot name="title">
-        <h1 part="title">[[title]]</h1>
-      </slot>
-      <p part="description">[[description]]</p>
-    </div>
-    <div part="form">
-      <slot></slot>
-    </div>
-  </section>
-`;
-
-let memoizedTemplate;
+registerStyles('vaadin-login-overlay-wrapper', [overlayStyles, loginOverlayWrapperStyles], {
+  moduleId: 'vaadin-login-overlay-wrapper-styles',
+});
 
 /**
  * An element used internally by `<vaadin-login-overlay>`. Not intended to be used separately.
@@ -62,7 +21,7 @@ let memoizedTemplate;
  * @extends Overlay
  * @private
  */
-class LoginOverlayWrapper extends Overlay {
+class LoginOverlayWrapper extends OverlayMixin(DirMixin(ThemableMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-login-overlay-wrapper';
   }
@@ -86,18 +45,25 @@ class LoginOverlayWrapper extends Overlay {
   }
 
   static get template() {
-    if (!memoizedTemplate) {
-      // Clone the superclass template
-      memoizedTemplate = super.template.cloneNode(true);
-
-      // Replace overlay slot with card
-      const card = template.content.querySelector('[part=card]');
-      const content = memoizedTemplate.content.querySelector('#content');
-      content.replaceChild(card, content.children[0]);
-    }
-
-    return memoizedTemplate;
+    return html`
+      <div id="backdrop" part="backdrop" hidden$="[[!withBackdrop]]"></div>
+      <div part="overlay" id="overlay" tabindex="0">
+        <div part="content" id="content">
+          <section part="card">
+            <div part="brand">
+              <slot name="title">
+                <h1 part="title">[[title]]</h1>
+              </slot>
+              <p part="description">[[description]]</p>
+            </div>
+            <div part="form">
+              <slot></slot>
+            </div>
+          </section>
+        </div>
+      </div>
+    `;
   }
 }
 
-customElements.define(LoginOverlayWrapper.is, LoginOverlayWrapper);
+defineCustomElement(LoginOverlayWrapper);

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

@@ -4,9 +4,9 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { LoginMixin } from './vaadin-login-mixin.js';
+import { LoginOverlayMixin } from './vaadin-login-overlay-mixin.js';
+
 export { LoginI18n } from './vaadin-login-mixin.js';
 
 /**
@@ -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;
@@ -76,22 +80,7 @@ export interface LoginOverlayEventMap extends HTMLElementEventMap, LoginOverlayC
  * @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 LoginOverlay extends LoginMixin(OverlayClassMixin(ElementMixin(ThemableMixin(HTMLElement)))) {
-  /**
-   * Defines the application description
-   */
-  description: string;
-
-  /**
-   * True if the overlay is currently displayed.
-   */
-  opened: boolean;
-
-  /**
-   * Defines the application title
-   */
-  title: string;
-
+declare class LoginOverlay extends LoginOverlayMixin(ElementMixin(ThemableMixin(HTMLElement))) {
   addEventListener<K extends keyof LoginOverlayEventMap>(
     type: K,
     listener: (this: LoginOverlay, ev: LoginOverlayEventMap[K]) => void,

package/src/vaadin-login-overlay.js

@@ -6,10 +6,10 @@
 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 { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { LoginMixin } from './vaadin-login-mixin.js';
+import { LoginOverlayMixin } from './vaadin-login-overlay-mixin.js';
 
 /**
  * `<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and
@@ -44,13 +44,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 OverlayClassMixin
+ * @mixes LoginOverlayMixin
  */
-class LoginOverlay extends LoginMixin(OverlayClassMixin(ElementMixin(ThemableMixin(PolymerElement)))) {
+class LoginOverlay extends LoginOverlayMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get template() {
     return html`
       <vaadin-login-overlay-wrapper
@@ -77,145 +77,19 @@ class LoginOverlay extends LoginMixin(OverlayClassMixin(ElementMixin(ThemableMix
           on-forgot-password="_retargetEvent"
         ></vaadin-login-form>
       </vaadin-login-overlay-wrapper>
+
+      <div hidden>
+        <slot name="custom-form-area"></slot>
+        <slot name="footer"></slot>
+      </div>
     `;
   }
 
   static get is() {
     return 'vaadin-login-overlay';
   }
-
-  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.header.*)'];
-  }
-
-  /** @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.base;
-    if (!header) {
-      return;
-    }
-    this.title = header.title;
-    this.description = header.description;
-  }
-
-  /** @private */
-  _preventClosingLogin(e) {
-    e.preventDefault();
-  }
-
-  /**
-   * @param {!Event} e
-   * @private
-   */
-  _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 */
-  _onOpenedChange() {
-    if (!this.opened) {
-      this.$.vaadinLoginForm.$.vaadinLoginUsername.value = '';
-      this.$.vaadinLoginForm.$.vaadinLoginPassword.value = '';
-      this.disabled = false;
-
-      if (this._undoTeleport) {
-        this._undoTeleport();
-      }
-    } else {
-      this._undoTeleport = this._teleport(this._getElementsToTeleport());
-
-      // 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(elements) {
-    const teleported = Array.from(elements).map((e) => {
-      return this.$.vaadinLoginOverlayWrapper.appendChild(e);
-    });
-    // Function to undo the teleport
-    return () => {
-      while (teleported.length > 0) {
-        this.appendChild(teleported.shift());
-      }
-    };
-  }
-
-  /** @private */
-  _getElementsToTeleport() {
-    return this.querySelectorAll('[slot=title]');
-  }
 }
 
-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/lumo/vaadin-login-overlay-styles.js

@@ -1,6 +1,7 @@
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import './vaadin-login-form-wrapper-styles.js';
 import { color } from '@vaadin/vaadin-lumo-styles/color.js';
+import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
 import { typography } from '@vaadin/vaadin-lumo-styles/typography.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -169,8 +170,8 @@ const loginOverlayWrapper = css`
   }
 `;
 
-registerStyles('vaadin-login-overlay-wrapper', [color, typography, loginOverlayWrapper], {
-  moduleId: 'vaadin-login-overlay-wrapper-lumo-styles',
+registerStyles('vaadin-login-overlay-wrapper', [color, typography, overlay, loginOverlayWrapper], {
+  moduleId: 'lumo-login-overlay-wrapper',
 });
 
 const loginFormWrapper = css`

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

@@ -1,7 +1,6 @@
 import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
 import '@vaadin/password-field/theme/lumo/vaadin-password-field.js';
 import '@vaadin/button/theme/lumo/vaadin-button.js';
-import '@vaadin/overlay/theme/lumo/vaadin-overlay.js';
 import './vaadin-login-form.js';
 import './vaadin-login-overlay-styles.js';
 import '../../src/vaadin-login-overlay.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/theme/material/vaadin-login-overlay.js

@@ -1,7 +1,6 @@
 import '@vaadin/text-field/theme/material/vaadin-text-field.js';
 import '@vaadin/password-field/theme/material/vaadin-password-field.js';
 import '@vaadin/button/theme/material/vaadin-button.js';
-import '@vaadin/overlay/theme/material/vaadin-overlay.js';
 import './vaadin-login-form.js';
 import './vaadin-login-overlay-styles.js';
 import '../../src/vaadin-login-overlay.js';