Merge pull request #231 from blockchain/signup-validation

Signup validation

app/partials/alpha-agreement.jade

@@ -109,4 +109,4 @@
           | 8.1. Except for those limited rights expressly granted in Section 2.1, Blockchain and its licensors retain all right, title and interest in and to the Alpha Services and the Alpha Materials, including all related intellectual property rights. The parties are independent contractors with respect to each other, and nothing in this Agreement shall be construed as creating an employer-employee relationship, a partnership, agency relationship or a joint venture between the parties. This Agreement further controls the actions of all party representatives, officers, agents, employees and associated individuals. The terms of this Agreement shall be binding on the parties, and all successors to the foregoing who take their rights hereunder. Neither party will assign, transfer or delegate its rights or obligations under this Agreement (in whole or in part) without the other party’s prior
           | written consent except that Blockchain may assign and delegate this Agreement pursuant to a transfer of all or substantially all of Blockchain’s business and assets, whether by merger, sale of assets, sale of stock, or otherwise. Any attempted assignment, transfer or delegation in violation of the foregoing shall be null and void. All modifications to and waivers of any terms of this Agreement must be in a writing that is signed by the parties hereto and expressly references this Agreement. This Agreement shall be governed by the laws of the State of New York, without regard to New York conflict of laws rules. The exclusive venue and jurisdiction for any and all disputes, claims and controversies arising from or relating to this Agreement shall be the state or federal courts located in New York City. In the event that any provision of this Agreement conflicts with governing law or if any provision is held to be null, void or otherwise ineffective or invalid by a court of competent jurisdiction, (a) such provision shall be deemed to be restated to reflect as nearly as possible the original intentions of the parties in accordance with applicable law, and (b) the remaining terms, provisions, covenants and restrictions of this Agreement shall remain in full force and effect. No waiver of any breach of any provision of this Agreement shall constitute a waiver of any prior, concurrent or subsequent breach of the same or any other provisions hereof, and no waiver shall be effective unless made in writing and signed by an authorized representative of the waiving party. This Agreement and all expressly referenced documents constitute the entire agreement between the parties with respect to the subject matter hereof and supersedes all prior and contemporaneous agreements or communications, including any reseller or similar agreements previously executed by the parties. All notices, consents and approvals under this Agreement must be delivered in writing by email to the email address supplied by one party to the other during the account signup process, or posted to the Blockchain website.
 .modal-footer.flex-end.pal
-  button.button-success.button-lg(ng-click="acceptAgreement(); $dismiss()" translate="OK")  
+  button.button-success.button-lg(ng-click="$close()" translate="OK")  

app/partials/signup.jade

@@ -1,34 +1,66 @@
 div
   header
     h2.em-300(translate="NEW_ACCT_WELCOME")
-  form.form-horizontal(role="form",name="form",novalidate)
-    .security-red.mbl.em-400.flex-center
+  form.form-horizontal(
+    role="form"
+    name="signupForm"
+    ng-submit="signup()"
+    autocomplete="off"
+    novalidate)
+    .security-red.mbl.mtl.em-400.flex-center
       i.ti-hand-stop.mrm.h3.mvn.hidden-xs
       span(translate="ALPHA_WARNING")
-    .form-group(ng-class="{'has-error': errors.email, 'has-success': success.email}")
+    .form-group(ng-class="{'has-error': signupForm.email.$invalid && signupForm.email.$touched}")
       label.col-sm-4.control-label(translate="EMAIL")
       .col-sm-8
-        input.form-control(type="email",ng-model="fields.email",autofocus,ng-blur="validate()", ng-focus="errors.email = null")
-        span.help-block 
-          p {{ errors.email }}
-    .form-group(ng-class="{'has-error': errors.password, 'has-success': success.password}")
+        input.form-control(
+          name="email"
+          type="email"
+          ng-model="fields.email"
+          required
+          autofocus)
+        span.help-block(ng-show="signupForm.email.$touched")
+          p(ng-show="signupForm.email.$error.required" translate="EMAIL_ADDRESS_REQUIRED")
+          p(ng-show="signupForm.email.$error.email" translate="EMAIL_ADDRESS_INVALID")
+    .form-group(ng-class="{'has-error': signupForm.password.$invalid && signupForm.password.$touched}")
       label.col-sm-4.control-label(translate="NEW_PASSWORD")
       .col-sm-8
-        input.form-control(type="password", name="password",ng-model="fields.password",autofocus,ng-blur="validate()", ng-focus="errors.password = null", ng-maxlength="255", min-entropy="25" required)
-        password-entropy(password="fields.password").help-block  
-        span.help-block {{ errors.password }}
-    .form-group(ng-class="{'has-error': errors.confirmation, 'has-success': success.confirmation}")
+        input.form-control(
+          name="password"
+          type="password"
+          ng-model="fields.password"
+          ng-maxlength="255"
+          min-entropy="25"
+          required)
+        password-entropy.help-block(password="fields.password")
+        span.help-block(ng-show="signupForm.password.$touched")
+          p(ng-show="signupForm.password.$error.minEntropy && fields.password != undefined" translate="TOO_WEAK")
+          p(ng-show="signupForm.password.$error.maxlength" translate="TOO_LONG")
+    .form-group(ng-class="{'has-error': signupForm.confirmation.$invalid && signupForm.confirmation.$touched}")
       label.col-sm-4.control-label(translate="CONFIRM_PASSWORD")
       .col-sm-8
-        input.form-control(type="password",ng-model="fields.confirmation",on-enter="trySignup()",autofocus,ng-blur="validate()", ng-focus="errors.confirmation = null")
-        span.help-block 
-          p {{ errors.confirmation }}
+        input.form-control(
+          name="confirmation"
+          type="password"
+          ng-model="fields.confirmation"
+          is-valid="fields.confirmation == fields.password"
+          required)
+        span.help-block(ng-show="signupForm.confirmation.$touched")
+          p(ng-show="signupForm.confirmation.$error.isValid" translate="NO_MATCH")
     .form-group.flex-center.mtm
       .col-sm-4
-        input#agreement_accept.pull-right(ng-model="fields.acceptedAgreement" type="checkbox" name="agreement_accept" ng-change="validate()")
+        input#agreement_accept.pull-right(
+          name="agreement"
+          type="checkbox"
+          ng-model="fields.acceptedAgreement"
+          required)
       label.em-300.col-sm-8
         | I have read and agree to the 
         a.em-500(ng-click="showAgreement()") Alpha Program Participation Agreement
     .flex-center.flex-end.mbl
-      button.button-primary(ng-click="signup()",ng-disabled="!form.$valid || !isValid || !fields.acceptedAgreement", translate="CONTINUE", ng-show="!working")  
+      button.button-primary(
+        type="submit"
+        ng-disabled="signupForm.$invalid"
+        translate="CONTINUE"
+        ng-show="!working")  
       img(ng-show="working" src="img/spinner.gif")

assets/js/controllers/app.controller.js

@@ -2,7 +2,7 @@ angular
   .module('walletApp')
   .controller("AppCtrl", AppCtrl);
 
-function AppCtrl($scope, Wallet, Alerts, $state, $rootScope, $location, $cookieStore, $timeout, $uibModal, $window, $translate) {
+function AppCtrl($scope, Wallet, Alerts, $state, $rootScope, $location, $timeout, $uibModal, $window, $translate) {
   $scope.status = Wallet.status;
   $scope.settings = Wallet.settings;
   $rootScope.isMock = Wallet.isMock;

assets/js/controllers/login.controller.js

@@ -2,18 +2,18 @@ angular
   .module('walletApp')
   .controller("LoginCtrl", LoginCtrl);
 
-function LoginCtrl($scope, $rootScope, $log, $http, Wallet, Alerts, $cookieStore, $uibModal, $state, $stateParams, $timeout, $translate, filterFilter) {
+function LoginCtrl($scope, $rootScope, $log, $http, Wallet, Alerts, $cookies, $uibModal, $state, $stateParams, $timeout, $translate, filterFilter) {
   $scope.status = Wallet.status;
   $scope.settings = Wallet.settings;
   $scope.disableLogin = null;
   $scope.status.enterkey = false;
-  $scope.key = $cookieStore.get("key");
+  $scope.key = $cookies.get("key");
   $scope.errors = {
     uid: null,
     password: null,
     twoFactor: null
   };
-  $scope.uidAvailable = $cookieStore.get('uid') != null || $stateParams.uid;
+  $scope.uidAvailable = $cookies.get('uid') != null || $stateParams.uid;
   $scope.user = Wallet.user;
 
   //   Browser compatibility warnings:
@@ -88,16 +88,16 @@ function LoginCtrl($scope, $rootScope, $log, $http, Wallet, Alerts, $cookieStore
   if (Wallet.guid != null) {
     $scope.uid = Wallet.guid;
   } else {
-    $scope.uid = $stateParams.uid || $cookieStore.get("uid");
+    $scope.uid = $stateParams.uid || $cookies.get("uid");
   }
   if ($scope.key != null) {
     $scope.status.enterkey = true;
   }
   $scope.twoFactorCode = "";
   $scope.busy = false;
   $scope.isValid = false;
-  if (!!$cookieStore.get("password")) {
-    $scope.password = $cookieStore.get("password");
+  if (!!$cookies.get("password")) {
+    $scope.password = $cookies.get("password");
   }
   $scope.login = () => {
     if ($scope.busy) return;
@@ -126,10 +126,10 @@ function LoginCtrl($scope, $rootScope, $log, $http, Wallet, Alerts, $cookieStore
       Wallet.login($scope.uid, $scope.password, null, needs2FA, success, error);
     }
     if ($scope.uid != null && $scope.uid !== "") {
-      $cookieStore.put("uid", $scope.uid);
+      $cookies.put("uid", $scope.uid);
     }
     if ($scope.savePassword && $scope.password != null && $scope.password !== "") {
-      $cookieStore.put("password", $scope.password);
+      $cookies.put("password", $scope.password);
     }
   };
 

assets/js/controllers/navigation.controller.js

@@ -2,7 +2,7 @@ angular
   .module('walletApp')
   .controller("NavigationCtrl", NavigationCtrl);
 
-function NavigationCtrl($scope, Wallet, currency, SecurityCenter, $translate, $cookieStore, $state, filterFilter, $interval) {
+function NavigationCtrl($scope, Wallet, currency, SecurityCenter, $translate, $cookies, $state, filterFilter, $interval) {
   $scope.status = Wallet.status;
   $scope.security = SecurityCenter.security;
   $scope.settings = Wallet.settings;
@@ -36,8 +36,8 @@ function NavigationCtrl($scope, Wallet, currency, SecurityCenter, $translate, $c
       if (confirm(translation)) {
         $scope.uid = null;
         $scope.password = null;
-        $cookieStore.remove("password");
-//      $cookieStore.remove("uid") // Pending a "Forget Me feature"
+        $cookies.remove("password");
+//      $cookies.remove("uid") // Pending a "Forget Me feature"
 
         $state.go("wallet.common.transactions", {
           accountIndex: ""

assets/js/controllers/settings/settings.controller.js

@@ -2,7 +2,7 @@ angular
   .module('walletApp')
   .controller("SettingsCtrl", SettingsCtrl);
 
-function SettingsCtrl($scope, Wallet, Alerts, $cookieStore, $state) {
+function SettingsCtrl($scope, Wallet, Alerts, $state) {
   if ($state.current.name === "wallet.common.settings") {
     $state.go("wallet.common.settings.info");
   }

assets/js/controllers/signup.controller.js

@@ -2,7 +2,9 @@ angular
   .module('walletApp')
   .controller("SignupCtrl", SignupCtrl);
 
-function SignupCtrl($scope, $rootScope, $log, Wallet, Alerts, currency, $uibModal, $translate, $cookieStore, $filter, $state, $http, languages) {
+SignupCtrl.$inject = ['$scope', '$state', '$cookies', '$filter', '$translate', '$uibModal', 'Wallet', 'Alerts', 'currency', 'languages'];
+
+function SignupCtrl($scope, $state, $cookies, $filter, $translate, $uibModal, Wallet, Alerts, currency, languages) {
   $scope.working = false;
   $scope.alerts = Alerts.alerts;
   $scope.status = Wallet.status;
@@ -14,7 +16,6 @@ function SignupCtrl($scope, $rootScope, $log, Wallet, Alerts, currency, $uibModa
     }
   });
 
-  $scope.isValid = true;
   let language_guess = $filter("getByProperty")("code", $translate.use(), languages);
   if (language_guess == null) {
     $scope.language_guess = $filter("getByProperty")("code", "en", languages);
@@ -31,125 +32,47 @@ function SignupCtrl($scope, $rootScope, $log, Wallet, Alerts, currency, $uibModa
   $scope.showAgreement = () => {
     const modalInstance = $uibModal.open({
       templateUrl: "partials/alpha-agreement.jade",
-      controller: 'SignupCtrl',
+      controller: function () {},
       windowClass: "bc-modal terms-modal"
     });
+    modalInstance.result.then(() => $scope.fields.acceptedAgreement = true);
   };
 
   $scope.close = () => {
     Alerts.clear();
     $state.go("wallet.common.home");
   };
 
-  $scope.trySignup = () => {
-    if ($scope.isValid) $scope.signup();
-  };
-
   $scope.signup = () => {
-    $scope.validate();
-    if ($scope.isValid) {
+    if ($scope.signupForm.$valid) {
       $scope.working = true;
-      $scope.createWallet( uid => {
+      $scope.createWallet((uid) => {
         $scope.working = false;
         if (uid != null) {
-          $cookieStore.put("uid", uid);
+          $cookies.put("uid", uid);
         }
         if ($scope.savePassword) {
-          $cookieStore.put("password", $scope.fields.password);
+          $cookies.put("password", $scope.fields.password);
         }
         $scope.close("");
       });
     }
   };
 
   $scope.createWallet = successCallback => {
-    Wallet.create($scope.fields.password, $scope.fields.email, $scope.fields.language, $scope.fields.currency, uid => {
+    Wallet.create($scope.fields.password, $scope.fields.email, $scope.fields.language, $scope.fields.currency, (uid) => {
       successCallback(uid);
     });
   };
 
-  $scope.$watch("fields.confirmation", newVal => {
-    if ((newVal != null) && $scope.fields.password !== "") {
-      $scope.validate(false);
-    }
-  });
-
-  $scope.validate = visual => {
-    if (visual == null) {
-      visual = true;
-    }
-    $scope.isValid = true;
-    $scope.errors = {
-      email: null,
-      password: null,
-      confirmation: null
-    };
-    $scope.success = {
-      email: false,
-      password: false,
-      confirmation: false
-    };
-    if ($scope.fields.email === "") {
-      $scope.isValid = false;
-      $translate("EMAIL_ADDRESS_REQUIRED").then( translation => {
-        $scope.errors.email = translation;
-      });
-    } else if ($scope.form && $scope.form.$error.email) {
-      $scope.isValid = false;
-      $translate("EMAIL_ADDRESS_INVALID").then( translation => {
-        $scope.errors.email = translation;
-      });
-    } else {
-      $scope.success.email = true;
-    }
-    if ($scope.form && $scope.form.$error) {
-      if ($scope.form.$error.minEntropy) {
-        $scope.isValid = false;
-        $translate("TOO_WEAK").then( translation => {
-          $scope.errors.password = translation;
-        });
-      }
-      if ($scope.form.$error.maxlength) {
-        $scope.isValid = false;
-        $translate("TOO_LONG").then( translation => {
-          $scope.errors.password = translation;
-        });
-      }
-    }
-    if ($scope.fields.confirmation === "") {
-      $scope.isValid = false;
-    } else {
-      if ($scope.fields.confirmation === $scope.fields.password) {
-        $scope.success.confirmation = true;
-      } else {
-        $scope.isValid = false;
-        if (visual) {
-          $translate("NO_MATCH").then( translation => {
-            $scope.errors.confirmation = translation;
-          });
-        }
-      }
-    }
-    if (!$scope.fields.acceptedAgreement) {
-      $scope.isValid = false;
-    }
-  };
-  $scope.validate();
-
   $scope.$watch("language_guess", (newVal, oldVal) => {
-    if (newVal != null) {
+    if (newVal) {
       $translate.use(newVal.code);
       Wallet.changeLanguage(newVal);
     }
   });
 
   $scope.$watch("currency_guess", (newVal, oldVal) => {
-    if (newVal != null) {
-      Wallet.changeCurrency(newVal);
-    }
-  });
-
-  $scope.$on('signed_agreement', () => {
-    $scope.fields.acceptedAgreement = true;
+    if (newVal) Wallet.changeCurrency(newVal);
   });
 }

assets/js/controllers/transaction.controller.js

@@ -2,7 +2,7 @@ angular
   .module('walletApp')
   .controller('TransactionCtrl', TransactionCtrl);
 
-function TransactionCtrl($scope, Wallet, $log, $state, $stateParams, $filter, $cookieStore, $sce) {
+function TransactionCtrl($scope, Wallet, $log, $state, $stateParams, $filter, $sce) {
   $scope.addressBook = Wallet.addressBook;
   $scope.status = Wallet.status;
   $scope.settings = Wallet.settings;

assets/js/services/wallet.service.js

@@ -9,9 +9,9 @@ angular
   .module('walletServices', [])
   .factory('Wallet', Wallet);
 
-Wallet.$inject = ['$http', '$window', '$timeout', 'Alerts', 'MyWallet', 'MyBlockchainApi', 'MyBlockchainSettings', 'MyWalletStore', 'MyWalletPayment', 'MyWalletTokenEndpoints', '$rootScope', 'ngAudio', '$cookieStore', '$translate', '$filter', '$state', '$q', 'bcPhoneNumber', 'languages', 'currency'];
+Wallet.$inject = ['$http', '$window', '$timeout', 'Alerts', 'MyWallet', 'MyBlockchainApi', 'MyBlockchainSettings', 'MyWalletStore', 'MyWalletPayment', 'MyWalletTokenEndpoints', '$rootScope', 'ngAudio', '$cookies', '$translate', '$filter', '$state', '$q', 'bcPhoneNumber', 'languages', 'currency'];
 
-function Wallet($http, $window, $timeout, Alerts, MyWallet, MyBlockchainApi, MyBlockchainSettings, MyWalletStore, MyWalletPayment, MyWalletTokenEndpoints, $rootScope, ngAudio, $cookieStore, $translate, $filter, $state, $q, bcPhoneNumber, languages, currency) {
+function Wallet($http, $window, $timeout, Alerts, MyWallet, MyBlockchainApi, MyBlockchainSettings, MyWalletStore, MyWalletPayment, MyWalletTokenEndpoints, $rootScope, ngAudio, $cookies, $translate, $filter, $state, $q, bcPhoneNumber, languages, currency) {
   const wallet = {
     goal: {
       auth: false
@@ -814,11 +814,11 @@ function Wallet($http, $window, $timeout, Alerts, MyWallet, MyBlockchainApi, MyB
     } else if (event === 'logging_out') {
       if (wallet.didLogoutByChoice) {
         $translate('LOGGED_OUT').then((translation) => {
-          $cookieStore.put('alert-success', translation);
+          $cookies.put('alert-success', translation);
         });
       } else {
         $translate('LOGGED_OUT_AUTOMATICALLY').then((translation) => {
-          $cookieStore.put('alert-warning', translation);
+          $cookies.put('alert-warning', translation);
           wallet.applyIfNeeded();
         });
       }
@@ -852,15 +852,15 @@ function Wallet($http, $window, $timeout, Alerts, MyWallet, MyBlockchainApi, MyB
     wallet.monitor(event, data);
   });
 
-  let message = $cookieStore.get('alert-warning');
+  let message = $cookies.get('alert-warning');
   if (message !== void 0 && message !== null) {
     Alerts.displayWarning(message, true);
-    $cookieStore.remove('alert-warning');
+    $cookies.remove('alert-warning');
   }
-  message = $cookieStore.get('alert-success');
+  message = $cookies.get('alert-success');
   if (message !== void 0 && message !== null) {
     Alerts.displaySuccess(message);
-    $cookieStore.remove('alert-success');
+    $cookies.remove('alert-success');
   }
 
   wallet.setNote = (tx, text) => {