use dropdowns for birthdate in registration form

change to dropdowns since the datepicker control is not very friendly for
selecting the year

test plan:
1. go to sign up as a student (w/ course code)
2. it should not let you sign up without putting in a birthdate
3. it should save the birthdate correctly
4. go to sign up as a higher-ed student
5. it should not let you sign up without putting in a birthdate, or if you
   are under 13
6. it should save the birthdate correctly

Change-Id: I68fb35afa179ab57aaff22624282f218791b10e0
Reviewed-on: https://gerrit.instructure.com/12437
Tested-by: Jenkins <jenkins@instructure.com>
Reviewed-by: Zach Pendleton <zachp@instructure.com>
This commit is contained in:
Jon Jensen 2012-07-23 17:38:16 -06:00
parent 4a627488a8
commit 0fa86f7224
8 changed files with 93 additions and 10 deletions

View File

@ -6,10 +6,11 @@ define [
'underscore'
'str/htmlEscape'
'compiled/util/semanticDateRange'
'compiled/util/dateSelect'
'jquery.instructure_date_and_time'
'jquery.instructure_misc_helpers'
'jquery.instructure_misc_plugins'
], (ENV, Handlebars, I18n, $, _, htmlEscape, semanticDateRange) ->
], (ENV, Handlebars, I18n, $, _, htmlEscape, semanticDateRange, dateSelect) ->
Handlebars.registerHelper name, fn for name, fn of {
t : (key, defaultValue, options) ->
@ -162,5 +163,9 @@ define [
toSentence: (context, options) ->
results = _.map(context, (c) -> options.fn(c))
$.toSentence(results)
dateSelect: (name, options) ->
new Handlebars.SafeString dateSelect(name, options.hash).html()
}
return Handlebars

View File

@ -44,11 +44,15 @@ define [
class: 'btn-primary'
]
return
$form.formErrors flatten
errors = flatten
user: User::normalizeErrors(errors.user)
pseudonym: Pseudonym::normalizeErrors(errors.pseudonym)
observee: Pseudonym::normalizeErrors(errors.observee)
, arrays: false
if errors['user[birthdate]']
errors['user[birthdate(1)]'] = errors['user[birthdate]']
delete errors['user[birthdate]']
$form.formErrors errors
$node.dialog
resizable: false

View File

@ -0,0 +1,65 @@
define [
'i18n!instructure',
'jquery'
'underscore',
'str/htmlEscape'
], (I18n, $, _, h) ->
builders =
year: (options, htmlOptions) ->
step = if options.startYear < options.endYear then 1 else -1
$result = $('<select />', htmlOptions)
$result.append('<option />') if options.includeBlank
i = options.startYear
while i*step <= options.endYear*step
i += step
$result.append($('<option value="' + i + '">' + i + '</option>'))
$result
month: (options, htmlOptions, dateSettings) ->
months = dateSettings.month_names
$result = $('<select />', htmlOptions)
$result.append('<option />') if options.includeBlank
for i in [1..12]
$result.append($('<option value="' + i + '">' + h(months[i]) + '</option>'))
$result
day: (options, htmlOptions) ->
$result = $('<select />', htmlOptions)
$result.append('<option />') if options.includeBlank
for i in [1..31]
$result.append($('<option value="' + i + '">' + i + '</option>'))
$result
# generates something like rails' date_select/select_date
# TODO: feature parity
dateSelect = (name, options, htmlOptions = _.clone(options)) ->
validOptions = ['type', 'startYear', 'endYear', 'includeBlank', 'order']
delete htmlOptions[opt] for opt in validOptions
year = (new Date()).getFullYear()
position = {year: 1, month: 2, day: 3}
dateSettings = I18n.lookup('#date')
if options.type is 'birthdate'
_.defaults options,
startYear: year - 1
endYear: year - 125
includeBlank: true
_.defaults options,
startYear: year - 5
endYear: year + 5
order: dateSettings.order || ['year', 'month', 'day']
$result = $('<span>')
for i in [0...options.order.length]
type = options.order[i]
tName = name.replace(/(\]?)$/, "(" + position[type] + ")$1")
$result.append(
builders[type](
options,
_.extend({name: tName}, htmlOptions),
dateSettings
)
)
delete htmlOptions.id
$result

View File

@ -14,10 +14,12 @@ a {
.registration-dialog {
margin-top: 2em;
font-size: 1.1em;
}
.registration-dialog .spinner {
width: 100px
.registration-dialog .spinner {
width: 100px;
}
.select-birthdate {
width: auto;
}
}
.help-block-small {

View File

@ -17,7 +17,7 @@
<div class="control-group">
<label class="control-label" for="student_birthdate">{{#t "labels.birthdate"}}Birth Date{{/t}}</label>
<div class="controls">
<input type="text" id="student_birthdate" name="user[birthdate]" class="date-field">
{{dateSelect "user[birthdate]" id="student_birthdate" type="birthdate" class="select-birthdate"}}
</div>
</div>
<div class="control-group">

View File

@ -15,7 +15,7 @@
<div class="control-group">
<label class="control-label" for="student_higher_ed_birthdate">{{#t "labels.birthdate"}}Birth Date{{/t}}</label>
<div class="controls">
<input type="text" id="student_higher_ed_birthdate" name="user[birthdate]" class="date-field">
{{dateSelect "user[birthdate]" id="student_higher_ed_birthdate" type="birthdate" class="select-birthdate"}}
</div>
</div>
<div class="control-group">

View File

@ -563,6 +563,9 @@ I18n.scope.prototype = {
},
toPercentage: function(number, options) {
return I18n.toPercentage(number, options);
},
lookup: function(scope, options) {
return I18n.lookup(this.resolveScope(scope), options);
}
};
I18n.scope.prototype.t = I18n.scope.prototype.translate;

View File

@ -129,7 +129,9 @@ describe "user selenium tests" do
form = fj('.ui-dialog:visible form')
f('#student_join_code').send_keys(@course.self_enrollment_code)
f('#student_name').send_keys('student!')
f('#student_birthdate').send_keys('1/1/1980')
form.find_element(:css, "select[name='user[birthdate(1)]'] option[value='#{Time.now.year - 20}']").click
form.find_element(:css, "select[name='user[birthdate(2)]'] option[value='1']").click
form.find_element(:css, "select[name='user[birthdate(3)]'] option[value='1']").click
f('#student_username').send_keys('student')
f('#student_password').send_keys('asdfasdf')
f('#student_password_confirmation').send_keys('asdfasdf')
@ -147,7 +149,9 @@ describe "user selenium tests" do
form = fj('.ui-dialog:visible form')
f('#student_higher_ed_name').send_keys('student!')
f('#student_higher_ed_email').send_keys('student@example.com')
f('#student_higher_ed_birthdate').send_keys('1/1/1980')
form.find_element(:css, "select[name='user[birthdate(1)]'] option[value='#{Time.now.year - 20}']").click
form.find_element(:css, "select[name='user[birthdate(2)]'] option[value='1']").click
form.find_element(:css, "select[name='user[birthdate(3)]'] option[value='1']").click
form.find_element(:css, 'input[name="user[terms_of_use]"]').click
expect_new_page_load { form.submit }