@vaadin/vaadin-login - npm Package Compare versions

Comparing version 1.0.0-alpha8 to 1.0.0-alpha9

package.json

@@ -13,4 +13,4 @@ {
   "name": "@vaadin/vaadin-login",
-  "version": "1.0.0-alpha8",
-  "main": "vaadin-login.js",
+  "version": "1.0.0-alpha9",
+  "main": "vaadin-login-overlay.js",
   "author": "Vaadin Ltd",
@@ -34,3 +34,3 @@ "license": "Apache-2.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-themable-mixin": "^1.2.0",
+    "@vaadin/vaadin-themable-mixin": "^1.4.1",
     "@vaadin/vaadin-element-mixin": "^2.0.0",
@@ -44,7 +44,7 @@ "@vaadin/vaadin-lumo-styles": "^1.3.0",
   "devDependencies": {
-    "@polymer/iron-component-page": "^3.0.0-pre.18",
-    "@polymer/iron-demo-helpers": "^3.0.0-pre.18",
+    "@polymer/iron-component-page": "^4.0.0",
+    "@polymer/iron-demo-helpers": "^3.0.0",
     "@webcomponents/webcomponentsjs": "^2.0.0",
     "wct-browser-legacy": "^1.0.1",
-    "@polymer/iron-test-helpers": "^3.0.0-pre.18",
+    "@polymer/iron-test-helpers": "^3.0.0",
     "@vaadin/vaadin-demo-helpers": "^2.0.0",
@@ -51,0 +51,0 @@ "@vaadin/vaadin-icons": "^4.2.1",

README.md

@@ -18,18 +18,18 @@ [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-login)](https://www.npmjs.com/package/@vaadin/vaadin-login)
 
+[Vaadin Login](https://vaadin.com/components/vaadin-login) consists of two components:
 
-[<vaadin-login>](https://vaadin.com/components/vaadin-login) is a Web Component providing a painless login experience, part of the [Vaadin components](https://vaadin.com/components).
+<vaadin-login-overlay> is a Web Component providing a painless login experience, part of the [Vaadin components](https://vaadin.com/components). Component shows the <vaadin-login-form> inside of an overlay.
 
 ```html
-<vaadin-login></vaadin-login>
+<vaadin-login-overlay opened></vaadin-login-overlay>
 ```
 
-`<vaadin-login-overlay>` is a `<vaadin-login>` wrapper which opens the login form in an overlay and allows the form being accessible for password managers.
+[<img src="https://raw.githubusercontent.com/vaadin/vaadin-login/master/screenshot.png" width="700" alt="Screenshot of vaadin-login-overlay">](https://vaadin.com/components/vaadin-login)
 
+&lt;vaadin-login-form&gt; is a Web Component providing a form to require users to log in into an application.
+
 ```html
-<vaadin-login-overlay></vaadin-login-overlay>
+<vaadin-login-form></vaadin-login-form>
 ```
 
-[<img src="https://raw.githubusercontent.com/vaadin/vaadin-login/master/screenshot.png" width="700" alt="Screenshot of vaadin-login-overlay">](https://vaadin.com/components/vaadin-login)
-
-
 ## Installation
@@ -55,3 +55,3 @@
 ```html
-<link rel="import" href="bower_components/vaadin-login/vaadin-login.html">
+<link rel="import" href="bower_components/vaadin-login/vaadin-login-overlay.html">
 ```
@@ -70,3 +70,3 @@ ### Polymer 3 and ES Modules compatible version
 ```js
-import '@vaadin/vaadin-login/vaadin-login.js';
+import '@vaadin/vaadin-login/vaadin-login-overlay.js';
 ```
@@ -84,14 +84,14 @@
 
-  `theme/lumo/vaadin-login.html`
   `theme/lumo/vaadin-login-overlay.html`
+  `theme/lumo/vaadin-login-form.html`
 
 - The component with the Material theme:
 
-  `theme/material/vaadin-login.html`
   `theme/material/vaadin-login-overlay.html`
+  `theme/material/vaadin-login-form.html`
 
 - Aliases for lumo themed components:
 
-  `vaadin-login.html`
   `vaadin-login-overlay.html`
+  `vaadin-login-form.html`
 
@@ -98,0 +98,0 @@

src/vaadin-login-mixin.js

@@ -114,56 +114,29 @@ /**
         notify: true
-      }
-    };
-  }
+      },
 
-  connectedCallback() {
-    super.connectedCallback();
-    this._handleInputKeydown = this._handleInputKeydown.bind(this);
-  }
-
-  submit() {
-    if (this.disabled || !(LoginMixin.__isValid(this.$.username) && LoginMixin.__isValid(this.$.password))) {
-      return;
-    }
-
-    this.error = false;
-    this.disabled = true;
-
-    const loginEventDetails = {
-      bubbles: true,
-      cancelable: true,
-      detail: {
-        username: this.$.username.value,
-        password: this.$.password.value
+      /**
+       * If set, prevents auto enabling the component when error property is set to true.
+       */
+      _preventAutoEnable: {
+        type: Boolean,
+        value: false
       }
     };
-
-    const firedEvent = this.dispatchEvent(new CustomEvent('login', loginEventDetails));
-    if (this.action && firedEvent) {
-      this.$.loginForm.submit();
-    }
   }
 
-  static __isValid(input) {
-    return (input.validate && input.validate()) || (input.checkValidity && input.checkValidity());
-  }
+  _retargetEvent(e) {
+    e.stopPropagation();
+    const {
+      detail,
+      composed,
+      cancelable,
+      bubbles
+    } = e;
 
-  static _isEnterKey(e) {
-    return e.key === 'Enter' || e.keyCode === 13;
-  }
-
-  _handleInputKeydown(e) {
-    if (LoginMixin._isEnterKey(e)) {
-      const {currentTarget: inputActive} = e;
-      const nextInput = inputActive.id === 'username'
-        ? this.$.password : this.$.username;
-      if (LoginMixin.__isValid(inputActive)) {
-        if (LoginMixin.__isValid(nextInput)) {
-          this.submit();
-        } else {
-          nextInput.focus();
-        }
-      }
+    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();
     }
   }
 };

src/vaadin-login-overlay-wrapper.js

@@ -64,3 +64,3 @@ /**
  * `<vaadin-login-overlay-wrapper>` is a helper element for `<vaadin-login-overlay>` that provides
- * responsible template for the login form.
+ * responsive template for the login form.
  *
@@ -75,3 +75,3 @@ * ### Styling
  * `brand`         | Container for application title and description
- * `form`          | Container for the `<vaadin-login>` component
+ * `form`          | Container for the `<vaadin-login-form>` component
  *
@@ -86,3 +86,3 @@ * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
  * -------------|-----------------------------------------------|
- * no name      | Default placeholder for the `<vaadin-login>`
+ * no name      | Default placeholder for the `<vaadin-login-form>`
  * `title`      | Placeholder for customizing the title
@@ -89,0 +89,0 @@ *

src/vaadin-login-overlay.js

@@ -11,3 +11,3 @@ /**
 import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-import './vaadin-login.js';
+import './vaadin-login-form.js';
 import { LoginMixin } from './vaadin-login-mixin.js';
@@ -17,8 +17,8 @@ import './vaadin-login-overlay-wrapper.js';
 /**
- * `<vaadin-login-overlay>` is a wrapper of the `<vaadin-login>` which opens a login form in an overlay and
- * additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows
+ * `<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and
+ * having an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows
  * password managers to work with login form.
  *
  * ```
- * <vaadin-login-overlay></vaadin-login-overlay>
+ * <vaadin-login-overlay opened></vaadin-login-overlay>
  * ```
@@ -28,3 +28,5 @@ *
  *
- * To style the element check: `<vaadin-login-overlay-wrapper>`, `<vaadin-login>` and `<vaadin-overlay>` elements
+ * To style the element check: [`<vaadin-login-overlay-wrapper>`](#/elements/vaadin-login-overlay-wrapper),
+ * [`<vaadin-login-form-wrapper>`](#/elements/vaadin-login-form-wrapper), [`<vaadin-login-form>`](#/elements/vaadin-login-form)
+ * and `<vaadin-overlay>` elements
  *
@@ -40,26 +42,8 @@ * @memberof Vaadin
     return html`
-    <style>
-      vaadin-text-field,
-      vaadin-password-field,
-      #submit {
-        width: 100%;
-      }
-    </style>
-    <vaadin-login-overlay-wrapper id="wrapper" opened="{{opened}}" focus-trap="" with-backdrop="" title="[[title]]" description="[[description]]" theme\$="[[theme]]">
+    <vaadin-login-overlay-wrapper id="vaadinLoginOverlayWrapper" opened="{{opened}}" focus-trap="" with-backdrop="" title="[[title]]" description="[[description]]" theme\$="[[theme]]">
 
-      <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-form theme="with-overlay" id="vaadinLoginForm" action="{{action}}" disabled="{{disabled}}" error="{{error}}" no-forgot-password="{{noForgotPassword}}" i18n="{{i18n}}" on-login="_retargetEvent" on-forgot-password="_retargetEvent">
 
-        <form id="loginForm" method="POST" action\$="[[action]]" slot="form">
-          <vaadin-text-field name="username" label="[[i18n.form.username]]" id="username" required="" on-keydown="_handleInputKeydown" autocapitalize="none" autocorrect="off" spellcheck="false">
-            <input type="text" slot="input">
-          </vaadin-text-field>
+      </vaadin-login-form>
 
-          <vaadin-password-field name="password" label="[[i18n.form.password]]" id="password" required="" on-keydown="_handleInputKeydown" spellcheck="false">
-            <input type="password" slot="input">
-          </vaadin-password-field>
-
-          <vaadin-button id="submit" theme="primary contained vaadin-login-submit" on-click="submit" disabled\$="[[disabled]]">[[i18n.form.submit]]</vaadin-button>
-        </form>
-      </vaadin-login>
-
     </vaadin-login-overlay-wrapper>
@@ -123,4 +107,4 @@ `;
 
-    this.$.wrapper.addEventListener('vaadin-overlay-outside-click', this._preventClosingLogin);
-    this.$.wrapper.addEventListener('vaadin-overlay-escape-press', this._preventClosingLogin);
+    this.$.vaadinLoginOverlayWrapper.addEventListener('vaadin-overlay-outside-click', this._preventClosingLogin);
+    this.$.vaadinLoginOverlayWrapper.addEventListener('vaadin-overlay-escape-press', this._preventClosingLogin);
   }
@@ -131,5 +115,5 @@
 
-    this.$.wrapper.removeEventListener('vaadin-overlay-outside-click', this._preventClosingLogin);
-    this.$.wrapper.removeEventListener('vaadin-overlay-escape-press', this._preventClosingLogin);
-    this.$.wrapper.opened = false;
+    this.$.vaadinLoginOverlayWrapper.removeEventListener('vaadin-overlay-outside-click', this._preventClosingLogin);
+    this.$.vaadinLoginOverlayWrapper.removeEventListener('vaadin-overlay-escape-press', this._preventClosingLogin);
+    this.$.vaadinLoginOverlayWrapper.opened = false;
   }
@@ -150,19 +134,7 @@
 
-  _handleEvent(e) {
-    e.stopPropagation();
-    const {
-      detail,
-      composed,
-      cancelable,
-      bubbles
-    } = e;
-
-    this.dispatchEvent(new CustomEvent(e.type, {bubbles, cancelable, composed, detail}));
-  }
-
   _onOpenedChange() {
     if (!this.opened) {
 
-      this.$.login.$.username.value = '';
-      this.$.login.$.password.value = '';
+      this.$.vaadinLoginForm.$.vaadinLoginUsername.value = '';
+      this.$.vaadinLoginForm.$.vaadinLoginPassword.value = '';
       this.disabled = false;
@@ -179,3 +151,3 @@
       // https://github.com/vaadin/vaadin-overlay/blob/041cde4481b6262eac68d3a699f700216d897373/src/vaadin-overlay.html#L660
-      document.body.style.pointerEvents = this.$.wrapper._previousDocumentPointerEvents;
+      document.body.style.pointerEvents = this.$.vaadinLoginOverlayWrapper._previousDocumentPointerEvents;
     }
@@ -186,3 +158,3 @@ }
     const teleported = Array.from(elements).map(e => {
-      return this.$.wrapper.appendChild(e);
+      return this.$.vaadinLoginOverlayWrapper.appendChild(e);
     });
@@ -189,0 +161,0 @@ // Function to undo the teleport

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

@@ -5,3 +5,3 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-overlay/vaadin-overlay.js';
-import './vaadin-login-styles.js';
+import './vaadin-login-form-wrapper-styles.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
@@ -171,3 +171,3 @@
   </template>
-</dom-module><dom-module id="lumo-login-overlay" theme-for="vaadin-login">
+</dom-module><dom-module id="lumo-login-overlay" theme-for="vaadin-login-form-wrapper">
   <template>
@@ -196,15 +196,4 @@ <style include="lumo-color lumo-typography">
   </template>
-</dom-module><custom-style>
-  <style>
-    vaadin-login-overlay-wrapper vaadin-login #submit {
-      margin-top: var(--lumo-space-l);
-      margin-bottom: var(--lumo-space-s);
-    }
+</dom-module>`;
 
-    vaadin-login-overlay-wrapper vaadin-login #loginForm * {
-      width: 100%;
-    }
-  </style>
-</custom-style>`;
-
 document.head.appendChild($_documentContainer.content);

theme/lumo/vaadin-login-overlay.js

 import '@vaadin/vaadin-text-field/theme/lumo/vaadin-text-field.js';
 import '@vaadin/vaadin-text-field/theme/lumo/vaadin-password-field.js';
 import '@vaadin/vaadin-button/theme/lumo/vaadin-button.js';
-import './vaadin-login.js';
+import './vaadin-login-form.js';
 import './vaadin-login-overlay-styles.js';
 import '../../src/vaadin-login-overlay.js';

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

 import '@vaadin/vaadin-material-styles/typography.js';
 import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-overlay/vaadin-overlay.js';
-import './vaadin-login-styles.js';
+import '@vaadin/vaadin-overlay/theme/material/vaadin-overlay.js';
+import './vaadin-login-form-styles.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
@@ -9,3 +9,3 @@
   <template>
-    <style include="material-color-light material-typography">
+    <style include="material-overlay material-color-light material-typography">
       :host {
@@ -89,6 +89,2 @@ top: 0;
       and (max-width: 1023px) {
-        [part="card"] {
-          min-width: 375px;
-        }
-
         [part="brand"] {
@@ -110,6 +106,2 @@ justify-content: center;
         }
-
-        [part="form"] ::slotted(*) {
-          max-width: 375px;
-        }
       }
@@ -186,2 +178,3 @@
         [part="form"] ::slotted(*) {
+          display: flex;
           bottom: 0;
@@ -284,3 +277,3 @@ min-height: 100%;
   </template>
-</dom-module><dom-module id="material-login-overlay" theme-for="vaadin-login">
+</dom-module><dom-module id="material-login-overlay" theme-for="vaadin-login-form-wrapper">
   <template>
@@ -291,2 +284,3 @@ <style include="material-color-light material-typography">
         justify-content: center;
+        width: 100%;
       }
@@ -293,0 +287,0 @@

theme/material/vaadin-login-overlay.js

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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

58394

increased by4.63%

Number of package files

22

increased by29.41%

Lines of code

1264

increased by3.86%

Dependency changes

• Updated@vaadin/vaadin-themable-mixin@^1.4.1