Disable log in button on submit

src/vaadin-login.html

@@ -94,7 +94,7 @@ <h5>[[i18n.errorMessage.title]]</h5>
               <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">[[i18n.form.submit]]</vaadin-button>
+              <vaadin-button id="submit" theme="primary contained" on-click="submit" disabled$="[[disabled]]">[[i18n.form.submit]]</vaadin-button>
             </form>
           </iron-form>
 
@@ -132,6 +132,14 @@ <h5>[[i18n.errorMessage.title]]</h5>
 
         static get properties() {
           return {
+            /**
+             * 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,7 +203,12 @@ <h5>[[i18n.errorMessage.title]]</h5>
         }
 
         submit() {
+          if (this.disabled || !(this.$.username.validate() && this.$.password.validate())) {
+            return;
+          }
+
           this.$.loginForm.submit();
+          this.disabled = true;
         }
 
         _forgotPassword() {

test/login-test.html

@@ -129,6 +129,67 @@
 
         expect(submitSpy.called).to.be.true;
       });
+
+      it('should disable button after submiting form', () => {
+        const {username, password, loginForm, submit} = login.$;
+        username.value = 'username';
+        password.value = 'password';
+
+        // Remove `allow-redirect` to create an async call from iron-form
+        loginForm.removeAttribute('allow-redirect');
+
+        // FIXME: Workaround for IE11 issue that breaks if it tries to send a request using an empty string
+        // Can be removed once we introduce the `login` event
+        const formElement = login.shadowRoot.querySelector('form');
+        formElement.setAttribute('action', '/');
+
+        MockInteractions.pressEnter(password);
+
+
+        expect(submit.disabled).to.be.true;
+      });
+
+      it('should prevent submit call when login is disabled', () => {
+        const {username, password, loginForm, submit} = login.$;
+        username.value = 'username';
+        password.value = 'password';
+
+        const submitSpy = sinon.spy(loginForm, 'submit');
+
+        login.setAttribute('disabled', 'disabled');
+
+        MockInteractions.pressEnter(password);
+        expect(submitSpy.called).to.be.false;
+
+        MockInteractions.tap(submit);
+        expect(submitSpy.called).to.be.false;
+      });
+
+      it('should not disable button on button click if form is invalid', () => {
+        const {submit} = login.$;
+
+        expect(submit.disabled).to.not.be.true;
+        MockInteractions.tap(submit);
+        expect(submit.disabled).to.not.be.true;
+      });
+
+      it('should disable button on button click if form is valid', () => {
+        const {username, password, loginForm, submit} = login.$;
+        username.value = 'username';
+        password.value = 'password';
+
+        // Remove `allow-redirect` to create an async call from iron-form
+        loginForm.removeAttribute('allow-redirect');
+
+        // FIXME: Workaround for IE11 issue that breaks if it tries to send a request using an empty string
+        // Can be removed once we introduce the `login` event
+        const formElement = login.shadowRoot.querySelector('form');
+        formElement.setAttribute('action', '/');
+
+        MockInteractions.tap(submit);
+
+        expect(submit.disabled).to.be.true;
+      });
     });
 
     describe('hidden button test', function() {