Commit 322b4859

mo <mo.khan@gmail.com>
2017-09-09 17:53:56
add client side validation to password reset form.
1 parent 1b0a8ea
Changed files (3)
app
assets
javascripts
views
passwords
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
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()
app/views/passwords/new.html.erb
@@ -1,14 +1,12 @@
 <div class="row">
-  <div class="col">
+  <div class="col" data-autoview="password-reset-form">
     <h1>Forgot your password?</h1>
-    <%= form_for(@user, url: passwords_path) do |f| %>
-      <fieldset>
-        <legend>Type your email address below to reset your password.</legend>
-        <div class="form-group">
-          <%= f.email_field :email, placeholder: "Email", class: "form-control", required: :required %>
-        </div>
-        <button type="submit" class="btn btn-primary">Send me reset password instructions</button>
-      </fieldset>
+    <%= form_for(@user, url: passwords_path, html: { class: "form-horizontal needs-validation", novalidate: :novalidate }) do |f| %>
+      <div class="form-group">
+        <%= f.email_field :email, placeholder: "Email", class: "form-control", required: :required %>
+        <div class="invalid-feedback"></div>
+      </div>
+      <%= f.submit "Send me reset password instructions", class: "btn btn-primary" %>
     <% end %>
   </div>
 </div>