From 6cedfb19d9175978a8d03a1d5b7e6cd6e412e52e Mon Sep 17 00:00:00 2001 From: Henry Oswald Date: Mon, 22 Dec 2014 15:07:55 +0000 Subject: [PATCH] cleaned up form and added basic validation --- services/web/app/views/subscriptions/new.jade | 116 +++++++++++------- .../coffee/main/new-subscription.coffee | 26 ++-- 2 files changed, 86 insertions(+), 56 deletions(-) diff --git a/services/web/app/views/subscriptions/new.jade b/services/web/app/views/subscriptions/new.jade index 1e05ef1d66..6aa9d6075f 100644 --- a/services/web/app/views/subscriptions/new.jade +++ b/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}} - - input(type='text', ng-blur="applyCoupon()", ng-model="data.coupon") + hr - .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")} diff --git a/services/web/public/coffee/main/new-subscription.coffee b/services/web/public/coffee/main/new-subscription.coffee index 7369c5ff72..dcce0d15d1 100644 --- a/services/web/public/coffee/main/new-subscription.coffee +++ b/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¤cy=#{$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