add client side validation to password reset form.

2 files changed, 51 insertions, 0 deletions

diff --git a/app/assets/javascripts/models/password_reset.js.coffee b/app/assets/javascripts/models/password_reset.js.coffee
new file mode 100644
index 00000000..c9da0a3c
--- /dev/null
+++ b/app/assets/javascripts/models/password_reset.js.coffee
@@ -0,0 +1,20 @@
+#= require ./translation
+
+class csx.Models.PasswordReset extends Backbone.Model
+  translation: new csx.Translation('user')
+  defaults:
+    email: null
+
+  requiredFields: ['email']
+
+  validate: (attributes, options) ->
+    errors = {}
+
+    unless new csx.Models.Email(attributes.email).isValid()
+      errors['email'] = @translation.errorFor('email', 'invalid')
+
+    _.each @requiredFields, (field) =>
+      if _.isEmpty(attributes[field])
+        errors[field] = @translation.errorFor(field, 'blank')
+
+    return errors if _.keys(errors).length > 0
diff --git a/app/assets/javascripts/views/passwords/reset_form.js.coffee b/app/assets/javascripts/views/passwords/reset_form.js.coffee
new file mode 100644
index 00000000..8d08e017
--- /dev/null
+++ b/app/assets/javascripts/views/passwords/reset_form.js.coffee
@@ -0,0 +1,31 @@
+class csx.Views.PasswordResetForm extends csx.AutoView
+  @viewName 'password-reset-form'
+  modelKey: "user"
+  events:
+    'input #user_email': 'onInput'
+    'submit form': 'onSubmit'
+
+  initialize: () ->
+    @model = new csx.Models.PasswordReset()
+
+  render: ->
+    @renderErrors(@model.validationError)
+
+  onInput: (event) ->
+    $element = $(event.target)
+    @model.set(@fieldNameFor($element), @valueFor($element))
+    @$('input[type=submit]').prop('disabled', !@model.isValid())
+    @render()
+
+  onSubmit: (event) ->
+    if !@model.isValid()
+      @$('input[type=submit]').prop('disabled', true)
+      event.preventDefault()
+      event.stopPropagation()
+    @render()
+
+  valueFor: (element) ->
+    if element.is(':checkbox')
+      element.prop('checked')
+    else
+      element.val()