Merge pull request #10978 from edx/shr/bug/TNL-3809-Sign-in-mutiple-clicks

Shr/bug/tnl-3809-sign-in-mutiple-clicks

cms/static/coffee/spec/main.coffee

@@ -253,6 +253,7 @@ define([
     "js/spec/views/xblock_validation_spec",
     "js/spec/views/license_spec",
     "js/spec/views/paging_spec",
+    "js/spec/views/login_studio_spec",
 
     "js/spec/views/pages/container_spec",
     "js/spec/views/pages/container_subviews_spec",

cms/static/js/factories/login.js

-define(['jquery.cookie', 'utility'], function() {
+define(['jquery.cookie', 'utility', 'common/js/components/utils/view_utils'], function(cookie, utility, ViewUtils) {
     'use strict';
     return function (homepageURL) {
         function postJSON(url, data, callback) {
@@ -22,15 +22,19 @@ define(['jquery.cookie', 'utility'], function() {
 
         $('form#login_form').submit(function(event) {
             event.preventDefault();
+            var submitButton = $('#submit'),
+                deferred = new $.Deferred(),
+                promise = deferred.promise();
+            ViewUtils.disableElementWhileRunning(submitButton, function() { return promise; });
             var submit_data = $('#login_form').serialize();
 
             postJSON('/login_post', submit_data, function(json) {
                 if(json.success) {
                     var next = /next=([^&]*)/g.exec(decodeURIComponent(window.location.search));
                     if (next && next.length > 1 && !isExternal(next[1])) {
-                        location.href = next[1];
+                        ViewUtils.redirect(next[1]);
                     } else {
-                        location.href = homepageURL;
+                        ViewUtils.redirect(homepageURL);
                     }
                 } else if($('#login_error').length === 0) {
                     $('#login_form').prepend(
@@ -39,11 +43,13 @@ define(['jquery.cookie', 'utility'], function() {
                         '</span></div>'
                     );
                     $('#login_error').addClass('is-shown');
+                    deferred.resolve();
                 } else {
                     $('#login_error')
                         .stop()
                         .addClass('is-shown')
                         .html(json.value);
+                    deferred.resolve();
                 }
             });
         });

cms/static/js/spec/views/login_studio_spec.js

+define(['jquery', 'js/factories/login', 'common/js/spec_helpers/ajax_helpers', 'common/js/components/utils/view_utils'],
+function($, LoginFactory, AjaxHelpers, ViewUtils) {
+    'use strict';
+    describe("Studio Login Page", function() {
+        var submitButton;
+
+        beforeEach(function() {
+            loadFixtures('mock/login.underscore');
+            /*jshint unused: false*/
+            var login_factory = new LoginFactory("/home/");
+            submitButton = $('#submit');
+        });
+
+        it('disable the submit button once it is clicked', function() {
+            spyOn(ViewUtils, 'redirect').andCallFake(function(){});
+            var requests = AjaxHelpers.requests(this);
+            expect(submitButton).not.toHaveClass('is-disabled');
+            submitButton.click();
+            AjaxHelpers.respondWithJson(requests, {'success': true});
+            expect(submitButton).toHaveClass('is-disabled');
+        });
+
+        it('It will not disable the submit button if there are errors in ajax request', function() {
+            var requests = AjaxHelpers.requests(this);
+            expect(submitButton).not.toHaveClass('is-disabled');
+            submitButton.click();
+            expect(submitButton).toHaveClass('is-disabled');
+            AjaxHelpers.respondWithError(requests, {});
+            expect(submitButton).not.toHaveClass('is-disabled');
+        });
+    });
+});

cms/templates/js/mock/login.underscore

+<div class="wrapper-content wrapper">
+    <form id="login_form" method="post" action="login_post" onsubmit="return false;">
+        <input type="hidden" name="csrfmiddlewaretoken" value="csrf"/>
+        <input id="email" type="email" name="email" placeholder="'example: username@domain.com'"/>
+        <input id="password" type="password" name="password"/>
+
+        <div class="form-actions">
+            <button type="submit" id="submit" name="submit" class="action action-primary">Sign In</button>
+        </div>
+        <input name="honor_code" type="checkbox" value="true" checked="true" hidden="true">
+    </form>
+</div>