mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
cleaned up form and added basic validation
This commit is contained in:
Henry Oswald
parent
fa1ec44e22
commit
6cedfb19d9
2 changed files with 86 additions and 56 deletions
|
|
@ -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")}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue