From 7508ba6c47fbe36bd6f78551d02dceb9919cf1f9 Mon Sep 17 00:00:00 2001
From: Henry Oswald <henry.oswald@sharelatex.com>
Date: Wed, 7 Jan 2015 16:43:20 +0000
Subject: [PATCH] improved validation so that fields recurly said are wrong get
 highlighted

---
 services/web/app/views/subscriptions/new.jade | 21 +++++++++--------
 .../coffee/main/new-subscription.coffee       | 23 +++++++++++--------
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/services/web/app/views/subscriptions/new.jade b/services/web/app/views/subscriptions/new.jade
index b4f5f8e279..53ade84a71 100644
--- a/services/web/app/views/subscriptions/new.jade
+++ b/services/web/app/views/subscriptions/new.jade
@@ -73,17 +73,18 @@ block content
 													div.alert.alert-warning.small(ng-hide="validation.correctCardNumber") #{translate("invalid")} #{translate("credit_card_number")}
 										.row
 											.col-md-6
-												.form-group(ng-class="validation.correctCardNumber ? '' : 'has-error' ")
+												.form-group(ng-class="validation.number == false || validation.errorFields.number ? 'has-error' : ''")
 													input.form-control(ng-model='data.number', ng-blur="validateCardNumber()", placeholder="#{translate('credit_card_number')}")
 											.col-md-3
-												.form-group(ng-class="validation.correctCvv ? '' : 'has-error' ")
+												.form-group(ng-class="validation.correctCvv == false || validation.errorFields.cvv ? 'has-error' : ''")
 													input.form-control(ng-model='data.cvv', ng-blur="validateCvv()", placeholder="CVV")
 										.row
 											.col-md-12
 												div.alert.alert-warning.small(ng-hide="validation.correctExpiry") #{translate("invalid")} #{translate("expiry")}
-											.col-md-2
-												.form-group(ng-class="validation.correctExpiry ? '' : 'has-error' ")
-													select(data-recurly='month', ng-change="validateExpiry()", ng-model='data.month')
+										.row
+											.col-md-3
+												.form-group(ng-class="validation.correctExpiry == false || validation.errorFields.month ? 'has-error' : ''")
+													select.form-control(data-recurly='month', ng-change="validateExpiry()", ng-model='data.month')
 														option(value="", disabled, selected) Month
 														option(value="01") 01
 														option(value="02") 02
@@ -98,8 +99,8 @@ block content
 														option(value="11") 11
 														option(value="12") 12
 											.col-md-3
-												.form-group(ng-class="validation.correctExpiry ? '' : 'has-error' ")
-													select(data-recurly='year', ng-change="validateExpiry()", ng-model='data.year')
+												.form-group(ng-class="validation.correctExpiry == false || validation.errorFields.year ? 'has-error' : ''")
+													select.form-control(data-recurly='year', ng-change="validateExpiry()", ng-model='data.year')
 														option(value="", disabled, selected) Year
 														option(value="2015") 2015
 														option(value="2016") 2016
@@ -115,10 +116,10 @@ block content
 														option(value="2026") 2026
 									.row
 										.col-md-6
-											.form-group
+											.form-group(ng-class="validation.errorFields.first_name ? 'has-error' : ''")
 												input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="first_name", ng-model="data.first_name", required, placeholder="#{translate('first_name')}")
 										.col-md-6
-											.form-group
+											.form-group(ng-class="validation.errorFields.last_name ? 'has-error' : ''")
 												input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="last_name", ng-model="data.last_name", required, placeholder="#{translate('last_name')}")
 									hr
 									.row
@@ -137,7 +138,7 @@ block content
 									.row
 										.col-md-7
 											.form-group
-												select.form-control(data-recurly="country", ng-model="data.country", ng-change="updateCountry()",required)
+												select.form-control(data-recurly="country", ng-model="data.country", ng-change="updateCountry()", required)
 													mixin countries_options()
 									.row
 										.col-md-8
diff --git a/services/web/public/coffee/main/new-subscription.coffee b/services/web/public/coffee/main/new-subscription.coffee
index cac4ccfae5..d7e792bebf 100644
--- a/services/web/public/coffee/main/new-subscription.coffee
+++ b/services/web/public/coffee/main/new-subscription.coffee
@@ -15,10 +15,10 @@ define [
 		$scope.paymentMethod = "credit_card"
 
 		$scope.data =
-			number: undefined
-			month: undefined
-			year: undefined
-			cvv: undefined
+			number: ""
+			month: ""
+			year: ""
+			cvv: ""
 			first_name: ""
 			last_name: ""
 			postal_code: ""
@@ -27,6 +27,7 @@ define [
 			city:""
 			country:window.countryCode
 
+
 		$scope.validation =
 			correctCardNumber : true
 			correctExpiry: true
@@ -55,16 +56,16 @@ define [
 			$scope.currencyCode = newCurrency
 			pricing.currency(newCurrency).done()
 
-		$scope.validateCardNumber = ->
-			if $scope.data.number?
+		$scope.validateCardNumber = validateCardNumber = ->
+			if $scope.data.number?.length != 0
 				$scope.validation.correctCardNumber = recurly.validate.cardNumber($scope.data.number)
 
-		$scope.validateExpiry = ->
-			if $scope.data.month? and $scope.data.year?
+		$scope.validateExpiry = validateExpiry = ->
+			if $scope.data.month?.length != 0 and $scope.data.year?.length != 0
 				$scope.validation.correctExpiry = recurly.validate.expiry($scope.data.month, $scope.data.year)
 
-		$scope.validateCvv = ->
-			if $scope.data.cvv?
+		$scope.validateCvv = validateCvv = ->
+			if $scope.data.cvv?.length != 0
 				$scope.validation.correctCvv = recurly.validate.cvv($scope.data.cvv)
 
 		$scope.updateCountry = ->
@@ -77,8 +78,10 @@ define [
 				$scope.usePaypal = false
 
 		completeSubscription = (err, recurly_token_id) ->
+			$scope.validation.errorFields = {}
 			if err?
 				$scope.genericError = err.message
+				_.each err.fields, (field)-> $scope.validation.errorFields[field] = true
 			else
 				postData =
 					_csrf: window.csrfToken