github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-30 05:55:30 -05:00
Code Issues Projects Releases Packages Wiki Activity

cleaned up form and added basic validation

Browse source
This commit is contained in:
Henry Oswald 2014-12-22 15:07:55 +00:00
parent fa1ec44e22
commit 6cedfb19d9
2 changed files with 86 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
services/web/app/views/subscriptions/new.jade
View file

@ -45,18 +45,29 @@ 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
.row
.col-md-12
.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
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-model='data.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
@ -69,9 +80,10 @@ block content
option(value="10") 10 October
option(value="11") 11 November
option(value="12") 12 December
.form-group
.col-md-5
.form-group(ng-class="validation.correctExpiry ? '' : 'has-error' ")
label #{translate("year")}
select.form-control(data-recurly='year', ng-model='data.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
@ -84,25 +96,35 @@ block content
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")
.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")}

30
services/web/public/coffee/main/new-subscription.coffee
View file

@ -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,12 +24,16 @@ define [
address1 : "7 somewhere"
city:"london"
country:"GB"
recurly.configure __api_key
pricing = recurly.Pricing()
#pricing.attach(document.querySelector('#pricing'))
window.pricing = pricing
$scope.planName = "no yet set"
$scope.validation =
correctCardNumber : true
correctExpiry: true
correctCvv:true
recurly.configure __api_key
pricing = recurly.Pricing()
window.pricing = pricing
pricing.plan(window.plan_code, { quantity: 1 }).currency($scope.currencyCode).done()
@ -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