From 322b4859cd004f3a8556408eab6627d925324c95 Mon Sep 17 00:00:00 2001
From: mo <mo.khan@gmail.com>
Date: Sat, 9 Sep 2017 11:53:56 -0600
Subject: add client side validation to password reset form.

---
 .../javascripts/models/password_reset.js.coffee    | 20 ++++++++++++++
 .../views/passwords/reset_form.js.coffee           | 31 ++++++++++++++++++++++
 app/views/passwords/new.html.erb                   | 16 +++++------
 3 files changed, 58 insertions(+), 9 deletions(-)
 create mode 100644 app/assets/javascripts/models/password_reset.js.coffee
 create mode 100644 app/assets/javascripts/views/passwords/reset_form.js.coffee

(limited to 'app')

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()
diff --git a/app/views/passwords/new.html.erb b/app/views/passwords/new.html.erb
index 72be491d..af01e910 100644
--- a/app/views/passwords/new.html.erb
+++ b/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>
-- 
cgit v1.2.3