@vaadin/vaadin-login - npm Package Compare versions

Comparing version 1.0.0-alpha4 to 1.0.0-alpha5

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-login",
-  "version": "1.0.0-alpha4",
+  "version": "1.0.0-alpha5",
   "main": "vaadin-login.js",
@@ -38,3 +38,3 @@ "author": "Vaadin Ltd",
     "@vaadin/vaadin-material-styles": "^1.2.0",
-    "@vaadin/vaadin-text-field": "^2.1.0",
+    "@vaadin/vaadin-text-field": "^2.3.0-alpha3",
     "@vaadin/vaadin-button": "^2.1.0",
@@ -41,0 +41,0 @@ "@polymer/iron-form": "^3.0.0-pre.18",

src/vaadin-login-overlay.js

@@ -34,2 +34,8 @@ /**
       <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-text-field slot="username" label="[[i18n.form.username]]" name="username" id="username" required="">
+          <input type="text" slot="input">
+        </vaadin-text-field>
+        <vaadin-password-field slot="password" label="[[i18n.form.password]]" name="password" id="password" required="">
+          <input type="password" slot="input">
+        </vaadin-password-field>
       </vaadin-login>
@@ -124,5 +130,7 @@
     if (!this.opened) {
+
       this.$.login.$.username.value = '';
       this.$.login.$.password.value = '';
       this.disabled = false;
+
       if (this._undoTeleport) {
@@ -133,2 +141,7 @@ this._undoTeleport();
       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.$.overlay._previousDocumentPointerEvents;
     }
@@ -135,0 +148,0 @@ }

src/vaadin-login.js

@@ -17,2 +17,3 @@ /**
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 
@@ -58,2 +59,3 @@ /**
       vaadin-password-field,
+      [part="form"] form ::slotted(*),
       #submit {
@@ -75,4 +77,10 @@ width: 100%;
           <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>
+            <slot name="username" id="usernameSlot">
+              <vaadin-text-field label="[[i18n.form.username]]" name="username" id="username" required="" on-keydown="_handleInputKeydown">
+              </vaadin-text-field>
+            </slot>
+            <slot name="password" id="passwordSlot">
+              <vaadin-password-field label="[[i18n.form.password]]" name="password" id="password" required="" on-keydown="_handleInputKeydown">
+              </vaadin-password-field>
+            </slot>
 
@@ -96,7 +104,40 @@ <vaadin-button id="submit" theme="primary contained" on-click="submit" disabled\$="[[disabled]]">[[i18n.form.submit]]</vaadin-button>
   static get version() {
-    return '1.0.0-alpha4';
+    return '1.0.0-alpha5';
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    this._handleInputKeydown = this._handleInputKeydown.bind(this);
+
+    this._usernameSlotObserver = this._createSlotObserver(this.$.usernameSlot, 'username');
+    this._passwordSlotObserver = this._createSlotObserver(this.$.passwordSlot, 'password');
+  }
+
+  _createSlotObserver(slot, field) {
+    return new FlattenedNodesObserver(slot, (info) => {
+      const removedNodes = info.removedNodes.filter(node => node.nodeType === Node.ELEMENT_NODE);
+
+      // look for slot=${field}
+      const element = this.querySelector(`[slot=${field}]`);
+      const fallbackElement = this.shadowRoot.querySelector(`:not(slot)[name=${field}]`);
+      if (element) {
+        fallbackElement.disabled = true;
+        this.$[field] = element;
+        this.$[field].addEventListener('keydown', this._handleInputKeydown);
+      }
+      if (removedNodes[0] === this.$[field]) {
+        this.$[field] = fallbackElement;
+        this.$[field].disabled = false;
+      }
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._passwordSlotObserver && this._passwordSlotObserver.disconnect();
+    this._usernameSlotObserver && this._usernameSlotObserver.disconnect();
+  }
+
   submit() {
-    if (this.disabled || !(this.$.username.validate() && this.$.password.validate())) {
+    if (this.disabled || !(this.__isValid(this.$.username) && this.__isValid(this.$.password))) {
       return;
@@ -130,6 +171,7 @@ }
     if (this._isEnterKey(e)) {
-      const {target: inputActive} = e;
-      const nextInput = inputActive.name === 'username' ? this.$.password : this.$.username;
-      if (inputActive.validate()) {
-        if (nextInput.checkValidity()) {
+      const {currentTarget: inputActive} = e;
+      const nextInput = inputActive.slot === 'username' || inputActive.name === 'username'
+        ? this.$.password : this.$.username;
+      if (this.__isValid(inputActive)) {
+        if (this.__isValid(nextInput)) {
           this.submit();
@@ -143,2 +185,6 @@ } else {
 
+  __isValid(input) {
+    return (input.validate && input.validate()) || (input.checkValidity && input.checkValidity());
+  }
+
   _isEnterKey(e) {
@@ -145,0 +191,0 @@ return e.key === 'Enter' || e.keyCode === 13;

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

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

Improved metrics

Total package byte prevSize

43159

increased by6.11%

Lines of code

798

increased by6.68%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• Updated@vaadin/vaadin-text-field@^2.3.0-alpha3