@vaadin/vaadin-login - npm Package Compare versions

Comparing version 1.0.0-alpha1 to 1.0.0-alpha2

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-login",
-  "version": "1.0.0-alpha1",
+  "version": "1.0.0-alpha2",
   "main": "vaadin-login.js",
@@ -40,3 +40,4 @@ "author": "Vaadin Ltd",
     "@vaadin/vaadin-text-field": "^2.1.0",
-    "@vaadin/vaadin-button": "^2.1.0"
+    "@vaadin/vaadin-button": "^2.1.0",
+    "@polymer/iron-form": "^3.0.0-pre.18"
   },
@@ -48,2 +49,3 @@ "devDependencies": {
     "wct-browser-legacy": "^1.0.1",
+    "@polymer/iron-test-helpers": "^3.0.0-pre.18",
     "@vaadin/vaadin-demo-helpers": "^2.0.0",
@@ -50,0 +52,0 @@ "@vaadin/vaadin-dialog": "^2.2.0"

src/vaadin-login.js

@@ -12,2 +12,3 @@ /**
 import '@vaadin/vaadin-license-checker/vaadin-license-checker.js';
+import '@polymer/iron-form/iron-form.js';
 import '@vaadin/vaadin-text-field/src/vaadin-text-field.js';
@@ -83,3 +84,4 @@ import '@vaadin/vaadin-text-field/src/vaadin-password-field.js';
       vaadin-text-field,
-      vaadin-password-field {
+      vaadin-password-field,
+      #submit {
         width: 100%;
@@ -105,8 +107,11 @@ }
           </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-text-field label="[[i18n.form.username]]" autofocus=""></vaadin-text-field>
-          <vaadin-password-field label="[[i18n.form.password]]"></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">[[i18n.form.submit]]</vaadin-button>
-
           <vaadin-button id="forgotPasswordButton" theme="tertiary small" on-click="_forgotPassword" hidden\$="[[hideForgotPasswordButton]]">[[i18n.form.forgotPassword]]</vaadin-button>
@@ -126,3 +131,3 @@
   static get version() {
-    return '1.0.0-alpha1';
+    return '1.0.0-alpha2';
   }
@@ -133,2 +138,19 @@
       /**
+       * 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`
+      */
+      action: {
+        type: String,
+        value: null
+      },
+      /**
+       * If set, disable the "Log in" button and prevent user from submitting login form
+       */
+      disabled: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true
+      },
+      /**
        * Whether to hide the forgot password button. The button is visible by default.
@@ -195,5 +217,59 @@ */
 
+  submit() {
+    if (this.disabled || !(this.$.username.validate() && this.$.password.validate())) {
+      return;
+    }
+
+    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.$.loginForm.submit();
+    }
+
+    this.disabled = true;
+  }
+
   _forgotPassword() {
     this.dispatchEvent(new CustomEvent('forgot-password'));
   }
+
+  _handleInputKeydown(e) {
+    if (this._isEnterKey(e)) {
+      const {target: inputActive} = e;
+      const nextInput = inputActive.name === 'username' ? this.$.password : this.$.username;
+      if (inputActive.validate()) {
+        if (nextInput.checkValidity()) {
+          this.submit();
+        } else {
+          nextInput.focus();
+        }
+      }
+    }
+  }
+
+  _isEnterKey(e) {
+    return e.key === 'Enter' || e.keyCode === 13;
+  }
+
+  /**
+   * 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
+   *
+  */
 }
@@ -200,0 +276,0 @@

No alert changes

Improved metrics

Total package byte prevSize

35539

increased by6.76%

Lines of code

456

increased by18.13%

Worsened metrics

Dependency count

9

increased by12.5%

Dev dependency count

7

increased by16.67%

Dependency changes

• + Added@polymer/iron-form@^3.0.0-pre.18

• + Added@polymer/iron-ajax@3.0.1(transitive)

• + Added@polymer/iron-form@3.0.1(transitive)