cleaned up form and added basic validation

services/web/app/views/subscriptions/new.jade

@@ -45,65 +45,87 @@ block content
 									.col-md-3
 										h2.pull-right {{price}}
 										span.pull-right every {{billingCycleType}}
+								hr
 
-								input(type='text', ng-blur="applyCoupon()", ng-model="data.coupon")
 
 
 
 
-								.form-group
-									input.form-control.input-lg-1(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly='number', ng-model='data.number', placeholder='Credit Card Number')
-									input.form-control.input-lg-1(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly='cvv', ng-model='data.cvv')
-								.form-group
-									label #{translate("month")}
-									select.form-control(data-recurly='month', ng-model='data.month')
-										option(value="01") 01 January
-										option(value="02") 02 February
-										option(value="03") 03 March
-										option(value="04") 04 April
-										option(value="05") 05 May
-										option(value="06") 06 June
-										option(value="07") 07 July
-										option(value="08") 08 August
-										option(value="09") 09 September
-										option(value="10") 10 October
-										option(value="11") 11 November
-										option(value="12") 12 December
-								.form-group
-									label #{translate("year")}
-									select.form-control(data-recurly='year', ng-model='data.year')
-										option(value="2015") 2015
-										option(value="2016") 2016
-										option(value="2017") 2017
-										option(value="2018") 2018
-										option(value="2019") 2019
-										option(value="2020") 2020
-										option(value="2021") 2021
-										option(value="2022") 2022
-										option(value="2023") 2023
-										option(value="2024") 2024
-										option(value="2025") 2025
-										option(value="2026") 2026
-								.form-group
-									label #{translate("first_name")}
-									input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="first_name", ng-model="data.first_name")
-								.form-group
-									label #{translate("last_name")}
-									input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="last_name", ng-model="data.last_name")
+								.row
+									.col-md-12
+										.form-group
+											div(ng-hide="validation.correctCvv") invalid cvv
+											div(ng-hide="validation.correctCardNumber") invalid card number
+									.col-md-9
+										.form-group(ng-class="validation.correctCardNumber ? '' : 'has-error' ")
+											input.form-control(ng-model='data.number', ng-blur="validateCardNumber()", placeholder='Credit Card Number')
+									.col-md-3
+										.form-group(ng-class="validation.correctCvv ? '' : 'has-error' ")
+											input.form-control(ng-model='data.cvv', ng-blur="validateCvv()")
+								.row
+									div(ng-hide="validation.correctExpiry") invalid expiry
+									.col-md-5
+										.form-group(ng-class="validation.correctExpiry ? '' : 'has-error' ")
+											label #{translate("month")}
+											select.form-control(data-recurly='month', ng-change="validateExpiry()", ng-model='data.month')
+												option(value="01") 01 January
+												option(value="02") 02 February
+												option(value="03") 03 March
+												option(value="04") 04 April
+												option(value="05") 05 May
+												option(value="06") 06 June
+												option(value="07") 07 July
+												option(value="08") 08 August
+												option(value="09") 09 September
+												option(value="10") 10 October
+												option(value="11") 11 November
+												option(value="12") 12 December
+									.col-md-5
+										.form-group(ng-class="validation.correctExpiry ? '' : 'has-error' ")
+											label #{translate("year")}
+											select.form-control(data-recurly='year', ng-change="validateExpiry()", ng-model='data.year')
+												option(value="2015") 2015
+												option(value="2016") 2016
+												option(value="2017") 2017
+												option(value="2018") 2018
+												option(value="2019") 2019
+												option(value="2020") 2020
+												option(value="2021") 2021
+												option(value="2022") 2022
+												option(value="2023") 2023
+												option(value="2024") 2024
+												option(value="2025") 2025
+												option(value="2026") 2026
+								.row
+									.col-md-6
+										.form-group
+											label #{translate("first_name")}
+											input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="first_name", ng-model="data.first_name")
+									.col-md-6
+										.form-group
+											label #{translate("last_name")}
+											input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="last_name", ng-model="data.last_name")
 								.form-group
 									label #{translate("address")}
 									input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="address1", ng-model="data.address1")
-								.form-group
-									label #{translate("city")}
-									input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="city", ng-model="data.city")
+								.row
+									.col-md-8
+										.form-group
+											label #{translate("city")}
+											input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="city", ng-model="data.city")
+									.col-md-4
+											label #{translate("zip_post_code")}
+											input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="postal_code", ng-model="data.postal_code")
+
 								.form-group
 									label #{translate("country")}
 									select.form-control(data-recurly="country", ng-model="data.country")
 										mixin countries_options()
+												
 								.form-group
-									label #{translate("country")}
-									input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="postal_code", ng-model="data.postal_code")
-																																							
+									label #{translate("Coupon")}
+									input.form-control(type='text', ng-blur="applyCoupon()", ng-model="data.coupon")
+
 								.form-group
 									button.btn.btn-success(ng-click="submit()") #{translate("submit")} 						
 

services/web/public/coffee/main/new-subscription.coffee

@@ -8,16 +8,11 @@ define [
 		$scope.currencyCode = MultiCurrencyPricing.currencyCode
 		$scope.plans = MultiCurrencyPricing.plans
 
-
-
 		$scope.switchToStudent = ()->
 			window.location = "/user/subscription/new?planCode=student&currency=#{$scope.currencyCode}"
 
-
 		__api_key = recurlyCreds.apiKey
-		configured = false
-		$scope.error = false
-		$scope.token = false
+
 		$scope.data =
 			number: "4111111111111111"
 			month: "02"
@@ -29,13 +24,17 @@ define [
 			address1 : "7 somewhere"
 			city:"london"
 			country:"GB"
+
+		$scope.validation =
+			correctCardNumber : true
+			correctExpiry: true
+			correctCvv:true
+
 		recurly.configure __api_key
+
 		pricing = recurly.Pricing()
-		#pricing.attach(document.querySelector('#pricing'))
 		window.pricing = pricing
 
-		$scope.planName = "no yet set"
-		
 		pricing.plan(window.plan_code, { quantity: 1 }).currency($scope.currencyCode).done()
 
 		$scope.applyCoupon = ->
@@ -45,6 +44,15 @@ define [
 			$scope.currencyCode = newCurrency
 			pricing.currency(newCurrency).done()
 
+		$scope.validateCardNumber = ->
+			$scope.validation.correctCardNumber = recurly.validate.cardNumber($scope.data.number)
+
+		$scope.validateExpiry = ->
+			$scope.validation.correctExpiry = recurly.validate.expiry($scope.data.month, $scope.data.year)
+
+		$scope.validateCvv = ->
+			$scope.validation.correctCvv = recurly.validate.cvv($scope.data.cvv)
+
 		pricing.on "change", =>
 			$scope.planName = pricing.items.plan.name
 			$scope.price = pricing.price.currency.symbol+pricing.price.next.total