Merge pull request #202 from appirio-tech/feature/vikas-sup-1534-prevent-multiple-clicks

SUP-1534, Handle double-click scenario for registration page.

Author: vikasrohit

app/account/register/register.controller.js

@@ -13,7 +13,7 @@
 
     // Set default for toggle password directive
     vm.defaultPlaceholder = 'Create Password';
-    vm.busyDisabled = true;
+    vm.busyMessage = CONSTANTS.BUSY_PROGRESS_MESSAGE;
 
     // lookup users country
     Helpers.getCountyObjFromIP()

app/account/register/register.jade

@@ -77,9 +77,9 @@
 
         p(ng-class="{ 'has-symbol-or-number': (vm.registerForm.password.$dirty && !vm.registerForm.password.$error.hasSymbolOrNumber) }") At least one number or symbol
 
-    button(type="submit", ng-disabled="vm.registerForm.$invalid", ng-class="{'enabled-button': vm.registerForm.$valid}") Join Now
-      //- busy-message
-      //-   i.fa.fa-spinner Processing...
+    button(type="submit", busy, busy-disabled="true", ng-disabled="vm.registerForm.$invalid", ng-class="{'enabled-button': vm.registerForm.$valid}") Join Now
+      busy-message
+        i.fa.fa-spinner(ng-bind="vm.busyMessage")
 
   section.terms
     p By clicking "JOIN NOW" you agree to Topcoder's

app/topcoder.constants.js

@@ -27,7 +27,8 @@ angular.module("CONSTANTS", [])
 	"EVENT_PROFILE_UPDATED": "profile_updated",
 	"STATE_LOADING": "loading",
 	"STATE_ERROR": "error",
-	"STATE_READY": "ready"
+	"STATE_READY": "ready",
+	"BUSY_PROGRESS_MESSAGE": "Processing.."
 })
 
 ;

assets/css/account/account.scss

@@ -44,6 +44,10 @@
     &.enabled-button {
       @include ui-enabled-button;
     }
+
+    &[disabled] {
+      @include ui-disabled-button;
+    }
   }
 
   // Form stylings

assets/css/partials/_mixins.scss

@@ -294,6 +294,11 @@
   cursor: pointer;
 }
 
+@mixin ui-disabled-button {
+  background-color: $ui-disabled-button-blue;
+  cursor: default;
+}
+
 @mixin ui-track-button {
   border: 2px solid $ui-enabled-button-blue;
   color: $ui-enabled-button-blue;

config.js

@@ -32,7 +32,9 @@ module.exports = function() {
 
         STATE_LOADING: 'loading',
         STATE_ERROR: 'error',
-        STATE_READY: 'ready'
+        STATE_READY: 'ready',
+
+        BUSY_PROGRESS_MESSAGE : 'Processing..'
 
       }
     },
@@ -68,7 +70,9 @@ module.exports = function() {
 
         STATE_LOADING: 'loading',
         STATE_ERROR: 'error',
-        STATE_READY: 'ready'
+        STATE_READY: 'ready',
+
+        BUSY_PROGRESS_MESSAGE : 'Processing..'
 
       }
     },
@@ -104,7 +108,9 @@ module.exports = function() {
 
         STATE_LOADING: 'loading',
         STATE_ERROR: 'error',
-        STATE_READY: 'ready'
+        STATE_READY: 'ready',
+
+        BUSY_PROGRESS_MESSAGE : 'Processing..'
 
       }
     }