@vaadin/vaadin-login - npm Package Compare versions

Comparing version 1.0.0-alpha3 to 1.0.0-alpha4

package.json

@@ -13,6 +13,6 @@ {
   "name": "@vaadin/vaadin-login",
-  "version": "1.0.0-alpha3",
+  "version": "1.0.0-alpha4",
   "main": "vaadin-login.js",
   "author": "Vaadin Ltd",
-  "license": "https://raw.githubusercontent.com/vaadin/vaadin-confirm-dialog/master/LICENSE",
+  "license": "Apache-2.0",
   "bugs": {
@@ -38,3 +38,2 @@ "url": "https://github.com/vaadin/vaadin-login/issues"
     "@vaadin/vaadin-material-styles": "^1.2.0",
-    "@vaadin/vaadin-license-checker": "^2.1.0",
     "@vaadin/vaadin-text-field": "^2.1.0",
@@ -52,4 +51,5 @@ "@vaadin/vaadin-button": "^2.1.0",
     "@vaadin/vaadin-demo-helpers": "^2.0.0",
+    "@vaadin/vaadin-icons": "^4.2.1",
     "@vaadin/vaadin-dialog": "^2.2.0"
   }
 }

README.md

@@ -137,4 +137,4 @@ [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-login)](https://www.npmjs.com/package/@vaadin/vaadin-login)
 
-Commercial Vaadin Add-on License version 3 (CVALv3). For license terms, see LICENSE.
+Apache License 2.0
 
 Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

src/vaadin-login-mixin.js

 /**
 @license
-Copyright (c) 2018 Vaadin Ltd.
-This program is available under Commercial Vaadin Add-On License 3.0 (CVALv3).
-See <a href="https://vaadin.com/license/cval-3">the website</a> for the complete license.
+Vaadin Login
+Copyright (C) 2018 Vaadin Ltd
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
@@ -11,8 +11,22 @@ /**
 export const LoginMixin = subclass => class VaadinLoginMixin extends subclass {
+
+  /**
+   * Fired when user clicks on the "Forgot password" button.
+   *
+   * @event forgot-password
+  */
+
+  /**
+   * Fired when an user submits the login.
+   * The event contains `username` and `password` values in the `detail` property.
+   *
+   * @event login
+   *
+  */
+
   static get properties() {
     return {
       /**
-       * Defines how the login callback will be handled on a submit action:
-       * - If set, a synchronous POST call will be fired to the path defined.
-       * - If left blank, a `login` event will be dispatched containing `username` and `password`
+       * 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.
       */
@@ -25,3 +39,3 @@ action: {
       /**
-       * If set, disable the "Log in" button and prevent user from submitting login form
+       * If set, disable the "Log in" button and prevent user from submitting login form.
        */
@@ -45,3 +59,3 @@ disabled: {
        */
-      hideForgotPasswordButton: {
+      noForgotPassword: {
         type: Boolean,
@@ -57,3 +71,4 @@ value: false,
        *
-       * The object has the following JSON structure and default values:
+       * The object has the following JSON structure (by default it doesn't include
+       * `header` section, which can be added to override `title` and `description` properties):
 
@@ -85,6 +100,2 @@ {
           return {
-            header: {
-              title: 'App name',
-              description: 'Inspiring application description'
-            },
             form: {
@@ -108,2 +119,3 @@ title: 'Log in',
   }
+
 };

src/vaadin-login-overlay.js

 /**
 @license
-Copyright (c) 2018 Vaadin Ltd.
-This program is available under Commercial Vaadin Add-On License 3.0 (CVALv3).
-See <a href="https://vaadin.com/license/cval-3">the website</a> for the complete license.
+Vaadin Login
+Copyright (C) 2018 Vaadin Ltd
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
@@ -11,36 +11,7 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-import { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js';
 import './vaadin-login.js';
 import { LoginMixin } from './vaadin-login-mixin.js';
+import './vaadin-login-overlay-element.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-const $_documentContainer = document.createElement('template');
-
-$_documentContainer.innerHTML = `<dom-module id="vaadin-login-overlay-styles" theme-for="vaadin-login-overlay-element">
-  <template>
-    <style>
-      [part="overlay"] {
-        outline: none;
-      }
-    </style>
-  </template>
-</dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
-
 /**
- * The ovelay element
- *
- * @memberof Vaadin
- * @private
-*/
-class LoginOverlayElement extends OverlayElement {
-  static get is() {
-    return 'vaadin-login-overlay-element';
-  }
-}
-
-customElements.define(LoginOverlayElement.is, LoginOverlayElement);
-
-
-/**
  * `<vaadin-login-overlay>` is a Web Component.
@@ -61,5 +32,7 @@ *
     return html`
-    <vaadin-login-overlay-element id="overlay" opened="{{opened}}" focus-trap="" with-backdrop="">
-      <vaadin-login theme="with-overlay" id="login" action="{{action}}" disabled="{{disabled}}" error="{{error}}" hide-forgot-password-button="{{hideForgotPasswordButton}}" i18n="{{i18n}}" on-login="_handleEvent" on-forgot-password="_handleEvent">
+    <vaadin-login-overlay-element id="overlay" opened="{{opened}}" focus-trap="" with-backdrop="" title="[[title]]" description="[[description]]">
+
+      <vaadin-login theme="with-overlay" id="login" action="{{action}}" disabled="{{disabled}}" error="{{error}}" no-forgot-password="{{noForgotPassword}}" i18n="{{i18n}}" on-login="_handleEvent" on-forgot-password="_handleEvent">
       </vaadin-login>
+
     </vaadin-login-overlay-element>
@@ -75,7 +48,21 @@ `;
     return {
+      /**
+       * Defines the application description
+       */
+      description: {
+        type: String,
+        value: 'Application description',
+        notify: true
+      },
       opened: {
         type: Boolean,
         value: false,
-        observer: '_onOpenedChange',
-        notify: true
+        observer: '_onOpenedChange'
+      },
+      /**
+       * Defines the application title
+       */
+      title: {
+        type: String,
+        value: 'App name'
       }
@@ -85,2 +72,8 @@ };
 
+  static get observers() {
+    return [
+      '__i18nChanged(i18n.header.*)'
+    ];
+  }
+
   ready() {
@@ -107,2 +100,11 @@ super.ready();
 
+  __i18nChanged(i18n) {
+    const header = i18n.base;
+    if (!header) {
+      return;
+    }
+    this.title = header.title;
+    this.description = header.description;
+  }
+
   _preventClosingLogin(e) {
@@ -129,4 +131,30 @@ e.preventDefault();
       this.disabled = false;
+      if (this._undoTeleport) {
+        this._undoTeleport();
+      }
+    } else {
+      this._undoTeleport = this._teleport(this._getElementsToTeleport());
     }
   }
+
+  _teleport(elements) {
+    const teleported = [];
+    for (const e of elements) {
+      this.$.overlay.appendChild(e);
+      teleported.push(e);
+    }
+    // Function to undo the teleport
+    return () => {
+      while (teleported.length > 0) {
+        this.appendChild(teleported.shift());
+      }
+    };
+  }
+
+  _getElementsToTeleport() {
+    if (!this._elementsToTeleport) {
+      this._elementsToTeleport = this.querySelectorAll('[slot=title]');
+    }
+    return this._elementsToTeleport;
+  }
 }
@@ -133,0 +161,0 @@

src/vaadin-login.js

 /**
 @license
-Copyright (c) 2018 Vaadin Ltd.
-This program is available under Commercial Vaadin Add-On License 3.0 (CVALv3).
-See <a href="https://vaadin.com/license/cval-3">the website</a> for the complete license.
+Vaadin Login
+Copyright (C) 2018 Vaadin Ltd
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
@@ -11,3 +11,2 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-import '@vaadin/vaadin-license-checker/vaadin-license-checker.js';
 import { LoginMixin } from './vaadin-login-mixin.js';
@@ -46,27 +45,4 @@ import '@polymer/iron-form/iron-form.js';
 
-      [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;
-      }
-
       [part="form"] {
-        flex: none;
+        flex: 1;
         display: flex;
@@ -91,28 +67,21 @@ flex-direction: column;
     </style>
-      <section part="card">
-        <div part="brand">
-          <h1>[[i18n.header.title]]</h1>
-          <p>[[i18n.header.description]]</p>
+      <section part="form">
+        <h2>[[i18n.form.title]]</h2>
+        <div part="error-message" hidden\$="[[!error]]">
+          <h5>[[i18n.errorMessage.title]]</h5>
+          <p>[[i18n.errorMessage.message]]</p>
         </div>
+        <iron-form id="loginForm" allow-redirect="">
+          <form method="POST" action\$="[[action]]">
+            <vaadin-text-field label="[[i18n.form.username]]" name="username" id="username" required="" on-keydown="_handleInputKeydown"></vaadin-text-field>
+            <vaadin-password-field label="[[i18n.form.password]]" name="password" id="password" required="" on-keydown="_handleInputKeydown"></vaadin-password-field>
 
-        <div part="form">
-          <h2>[[i18n.form.title]]</h2>
-          <div part="error-message" hidden\$="[[!error]]">
-            <h5>[[i18n.errorMessage.title]]</h5>
-            <p>[[i18n.errorMessage.message]]</p>
-          </div>
-          <iron-form id="loginForm" allow-redirect="">
-            <form method="POST" action\$="[[action]]">
-              <vaadin-text-field label="[[i18n.form.username]]" name="username" id="username" autofocus="" required="" on-keydown="_handleInputKeydown"></vaadin-text-field>
-              <vaadin-password-field label="[[i18n.form.password]]" name="password" id="password" required="" on-keydown="_handleInputKeydown"></vaadin-password-field>
+            <vaadin-button id="submit" theme="primary contained" on-click="submit" disabled\$="[[disabled]]">[[i18n.form.submit]]</vaadin-button>
+          </form>
+        </iron-form>
 
-              <vaadin-button id="submit" theme="primary contained" on-click="submit" disabled\$="[[disabled]]">[[i18n.form.submit]]</vaadin-button>
-            </form>
-          </iron-form>
+        <vaadin-button id="forgotPasswordButton" theme="tertiary small" on-click="_forgotPassword" hidden\$="[[noForgotPassword]]">[[i18n.form.forgotPassword]]</vaadin-button>
 
-          <vaadin-button id="forgotPasswordButton" theme="tertiary small" on-click="_forgotPassword" hidden\$="[[hideForgotPasswordButton]]">[[i18n.form.forgotPassword]]</vaadin-button>
-
-          <div part="footer">
-            <p>[[i18n.additionalInformation]]</p>
-          </div>
+        <div part="footer">
+          <p>[[i18n.additionalInformation]]</p>
         </div>
@@ -127,3 +96,3 @@ </section>
   static get version() {
-    return '1.0.0-alpha3';
+    return '1.0.0-alpha4';
   }
@@ -137,17 +106,18 @@
     this.error = false;
-    if (this.action == null) {
-      const eventDetails = {
-        bubbles: true,
-        cancelable: true,
-        detail: {
-          username: this.$.username.value,
-          password: this.$.password.value
-        }
-      };
-      this.dispatchEvent(new CustomEvent('login', eventDetails));
-    } else {
+    this.disabled = true;
+
+    const loginEventDetails = {
+      bubbles: true,
+      cancelable: true,
+      detail: {
+        username: this.$.username.value,
+        password: this.$.password.value
+      }
+    };
+    const loginEvent = new CustomEvent('login', loginEventDetails);
+    this.dispatchEvent(loginEvent);
+
+    if (this.action && !loginEvent.defaultPrevented) {
       this.$.loginForm.submit();
     }
-
-    this.disabled = true;
   }
@@ -176,16 +146,2 @@
   }
-
-  /**
-   * Fired when user clicks on the "Forgot password" button
-   *
-   * @event forgot-password
-  */
-
-  /**
-   * Fired when an user submits the login.
-   * This event is fired **only** if `action` is `null`
-   *
-   * @event login
-   *
-  */
 }
@@ -196,7 +152,1 @@
 export { VaadinLogin };
-
-const licenseChecker = window.Vaadin.developmentModeCallback
-  && window.Vaadin.developmentModeCallback['vaadin-license-checker'];
-if (typeof licenseChecker === 'function') {
-  licenseChecker(VaadinLogin);
-}

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

@@ -10,3 +10,3 @@ import '@vaadin/vaadin-lumo-styles/color.js';
   <template>
-    <style>
+    <style include="lumo-color lumo-typography">
       :host {
@@ -31,2 +31,4 @@ top: 0;
         box-shadow: none;
+        width: 100%;
+        height: 100%;
       }
@@ -41,8 +43,22 @@
       }
-    </style>
-  </template>
-</dom-module><dom-module id="lumo-login-overlay" theme-for="vaadin-login">
-  <template>
-    <style include="lumo-color lumo-typography">
-      :host([theme~="with-overlay"]) {
+
+      [part="card"] {
+        width: calc(var(--lumo-size-m) * 10);
+        background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
+      }
+
+      [part="brand"] {
+        padding: var(--lumo-space-l) var(--lumo-space-xl) var(--lumo-space-l) var(--lumo-space-l);
+        background-color: var(--lumo-primary-color);
+        color: var(--lumo-primary-contrast-color);
+        min-height: calc(var(--lumo-size-m) * 5);
+      }
+
+      [part="brand"] p {
+        line-height: var(--lumo-line-height-s);
+        color: var(--lumo-tint-70pct);
+        margin-bottom: 0;
+      }
+
+      [part="content"] {
         min-height: 100%;
@@ -54,3 +70,3 @@ display: flex;
 
-      :host([theme~="with-overlay"]) [part="card"] {
+      [part="card"] {
         border-radius: var(--lumo-border-radius);
@@ -64,3 +80,3 @@ box-shadow: var(--lumo-box-shadow-s);
       and (max-width: 500px) {
-        :host([theme~="with-overlay"]) {
+        [part="content"] {
           min-height: 100%;
@@ -71,3 +87,4 @@ background: var(--lumo-base-color);
 
-        :host([theme~="with-overlay"]) [part="card"] {
+        [part="card"],
+        [part="overlay"] {
           width: 100%;
@@ -85,3 +102,3 @@ border-radius: 0;
       and (orientation: landscape) {
-        :host([theme~="with-overlay"]) [part="card"] {
+        [part="card"] {
           flex-direction: row;
@@ -93,4 +110,4 @@ align-items: stretch;
 
-        :host([theme~="with-overlay"]) [part="brand"],
-        :host([theme~="with-overlay"]) [part="form"] {
+        [part="brand"],
+        [part="form"] {
           flex: auto;
@@ -101,5 +118,10 @@ flex-basis: 0;
 
-        :host([theme~="with-overlay"]) [part="brand"] {
+        [part="brand"] {
           justify-content: flex-start;
         }
+
+        [part="form"] {
+          padding: var(--lumo-space-l);
+          overflow: auto;
+        }
       }
@@ -116,7 +138,7 @@
       and (orientation: landscape) {
-        :host([theme~="with-overlay"]) {
+        [part="content"] {
           height: 100vh;
         }
 
-        :host([theme~="with-overlay"]) [part="card"] {
+        [part="card"] {
           margin: 0;
@@ -131,3 +153,3 @@ width: 100%;
 
-        :host([theme~="with-overlay"]) [part="form"] {
+        [part="form"] {
           height: 100%;
@@ -144,3 +166,3 @@ overflow: auto;
       and (-webkit-device-pixel-ratio: 3) {
-        :host([theme~="with-overlay"]) [part="card"] {
+        [part="card"] {
           padding: 0 constant(safe-area-inset-bottom);
@@ -150,3 +172,3 @@ padding: 0 env(safe-area-inset-bottom);
 
-        :host([theme~="with-overlay"]) [part="brand"] {
+        [part="brand"] {
           margin-left: calc(constant(safe-area-inset-bottom) * -1);
@@ -160,4 +182,28 @@ margin-left: calc(env(safe-area-inset-bottom) * -1);
   </template>
+</dom-module><dom-module id="lumo-login-overlay" theme-for="vaadin-login">
+  <template>
+    <style include="lumo-color lumo-typography">
+      :host([theme~="with-overlay"]) {
+        min-height: 100%;
+        display: flex;
+        justify-content: center;
+        max-width: 100%;
+      }
+
+      /* Landscape small screen */
+      @media only screen
+      and (max-height: 600px)
+      and (min-width: 600px)
+      and (orientation: landscape) {
+        :host([theme~="with-overlay"]) [part="form"] {
+          height: 100%;
+          -webkit-overflow-scrolling: touch;
+          flex: 1;
+          padding: 2px;
+        }
+      }
+    </style>
+  </template>
 </dom-module>`;
 
 document.head.appendChild($_documentContainer.content);

theme/lumo/vaadin-login-styles.js

@@ -9,20 +9,7 @@ import '@vaadin/vaadin-lumo-styles/color.js';
     <style include="lumo-color lumo-typography">
-      [part="card"] {
-        width: calc(var(--lumo-size-m) * 10);
+      :host {
+        max-width: calc(var(--lumo-size-m) * 10);
         background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
       }
 
-      [part="brand"] {
-        padding: var(--lumo-space-l) var(--lumo-space-xl) var(--lumo-space-l) var(--lumo-space-l);
-        background-color: var(--lumo-primary-color);
-        color: var(--lumo-primary-contrast-color);
-        min-height: calc(var(--lumo-size-m) * 5);
-      }
-
-      [part="brand"] p {
-        line-height: var(--lumo-line-height-s);
-        color: var(--lumo-tint-70pct);
-        margin-bottom: 0;
-      }
-
       [part="form"] {
@@ -29,0 +16,0 @@ padding: var(--lumo-space-l);

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

Misc. License Issues

License

(Experimental) A package's licensing information has fine-grained problems.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Dependency count

9

decreased by-10%

Number of package files

16

increased by6.67%

Number of low license alerts

0

decreased by-100%

Number of medium license alerts

0

decreased by-100%

License quality

100

increased by25%

Lines of code

748

increased by17.24%

Worsened metrics

Total package byte prevSize

40674

decreased by-3.73%

Dev dependency count

8

increased by14.29%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removed@vaadin/vaadin-license-checker@^2.1.0

• - Removed@vaadin/vaadin-license-checker@2.1.2(transitive)