add backbone view for registration-form.

9 files changed, 125 insertions, 44 deletions

diff --git a/app/assets/javascripts/models/email.js.coffee b/app/assets/javascripts/models/email.js.coffee
new file mode 100644
index 00000000..66d9cc32
--- /dev/null
+++ b/app/assets/javascripts/models/email.js.coffee
@@ -0,0 +1,8 @@
+class CakeSide.Models.Email
+  EMAIL_REGEX=/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/
+
+  constructor: (email) ->
+    @email = email
+
+  isValid: ->
+    EMAIL_REGEX.test(@email)
diff --git a/app/assets/javascripts/models/session.js.coffee b/app/assets/javascripts/models/session.js.coffee
index 96a7d390..bc513987 100644
--- a/app/assets/javascripts/models/session.js.coffee
+++ b/app/assets/javascripts/models/session.js.coffee
@@ -1,6 +1,8 @@
+#= require ./translation
+
 class CakeSide.Models.Session extends Backbone.Model
-  EMAIL_REGEX=/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/
   modelKey: 'session'
+  translation: new CakeSide.Translation('session')
   defaults:
     email: null
     password: null
@@ -10,16 +12,11 @@ class CakeSide.Models.Session extends Backbone.Model
   validate: (attributes, options) ->
     errors = {}
 
-    if !EMAIL_REGEX.test(attributes.email)
-      errors['email'] = @errorFor('email', 'invalid')
+    unless new CakeSide.Models.Email(attributes.email).isValid()
+      errors['email'] = @translation.errorFor('email', 'invalid')
 
     _.each @requiredFields, (field) =>
       if _.isEmpty(attributes[field])
-        errors[field] = @errorFor(field, 'blank')
+        errors[field] = @translation.errorFor(field, 'blank')
 
     return errors if _.keys(errors).length > 0
-
-  errorFor: (attribute, scope) ->
-    attributeName = I18n.t("activerecord.attributes.#{@modelKey}.#{attribute}")
-    error = I18n.t("errors.messages.#{scope}")
-    "#{attributeName} #{error}"
diff --git a/app/assets/javascripts/models/translation.js.coffee b/app/assets/javascripts/models/translation.js.coffee
new file mode 100644
index 00000000..d2aff769
--- /dev/null
+++ b/app/assets/javascripts/models/translation.js.coffee
@@ -0,0 +1,8 @@
+class CakeSide.Translation
+  constructor: (modelKey) ->
+    @modelKey = modelKey
+
+  errorFor: (attribute, scope) ->
+    attributeName = I18n.t("activerecord.attributes.#{@modelKey}.#{attribute}")
+    error = I18n.t("errors.messages.#{scope}")
+    "#{attributeName} #{error}"
diff --git a/app/assets/javascripts/models/user.js.coffee b/app/assets/javascripts/models/user.js.coffee
new file mode 100644
index 00000000..bd5a7d87
--- /dev/null
+++ b/app/assets/javascripts/models/user.js.coffee
@@ -0,0 +1,26 @@
+#= require ./translation
+
+class CakeSide.Models.User extends Backbone.Model
+  modelKey: 'user'
+  translation: new CakeSide.Translation('user')
+  defaults:
+    name: null
+    email: null
+    password: null
+
+  requiredFields: ['name', 'email', 'password']
+
+  validate: (attributes, options) ->
+    errors = {}
+
+    unless new CakeSide.Models.Email(attributes.email).isValid()
+      errors['email'] = @translation.errorFor('email', 'invalid')
+
+    _.each @requiredFields, (field) =>
+      if _.isEmpty(attributes[field])
+        errors[field] = @translation.errorFor(field, 'blank')
+
+    unless attributes.accepted
+      errors['accepted'] = @translation.errorFor('accepted', 'accepted')
+
+    return errors if _.keys(errors).length > 0
diff --git a/app/assets/javascripts/views/sessions/registration-form.js.coffee b/app/assets/javascripts/views/sessions/registration-form.js.coffee
new file mode 100644
index 00000000..269434fb
--- /dev/null
+++ b/app/assets/javascripts/views/sessions/registration-form.js.coffee
@@ -0,0 +1,36 @@
+#= require views/auto_view
+
+class CakeSide.Views.RegistrationForm extends CakeSide.AutoView
+  @viewName 'registration-form'
+  modelKey: "user"
+  events:
+    'input #user_name': 'onInput'
+    'input #user_email': 'onInput'
+    'input #user_password': 'onInput'
+    'change #user_accepted': 'onInput'
+    'submit form': 'onSubmit'
+
+  initialize: () ->
+    @model = new CakeSide.Models.User()
+
+  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/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 5376d6cc..b5ce46e8 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -17,7 +17,9 @@
 
 @import "font-awesome";
 @import "bootstrap";
+
 @import "my-kitchens";
+@import "sessions";
 
 .hide {
   display: none;
diff --git a/app/assets/stylesheets/sessions.scss b/app/assets/stylesheets/sessions.scss
new file mode 100644
index 00000000..2adfcfe2
--- /dev/null
+++ b/app/assets/stylesheets/sessions.scss
@@ -0,0 +1,7 @@
+.sessions.new {
+  .form-check {
+    .invalid-feedback {
+      display: block;
+    }
+  }
+}
diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb
index 39d5a406..7a6e18e1 100644
--- a/app/views/sessions/new.html.erb
+++ b/app/views/sessions/new.html.erb
@@ -1,17 +1,3 @@
-<% content_for :javascript do %>
-<script type="text/javascript">
-  $(document).ready(function(){
-    $('#accepted').click(function(){
-      if( $('#accepted').is(':checked')){
-        $('#submit-registration').removeAttr('disabled');
-      }
-      else{
-        $('#submit-registration').attr('disabled', 'disabled');
-      }
-    });
-  });
-</script>
-<% end %>
 <div class="row">
   <div class="col">
     <%= image_tag "cakeside-logo.png" %>
@@ -40,26 +26,32 @@
       <% end %>
     </div>
 
-    <%= form_for(User.new, as: :user, url: registration_path, html: { class: 'form-horizontal' }) do |f| %>
-      <fieldset>
-        <legend>New to CakeSide? Join Us!</legend>
-      </fieldset>
-      <div class="form-group">
-        <%= f.text_field :name, placeholder: 'Full name', class: 'form-control' %>
-      </div>
-      <div class="form-group">
-        <%= f.email_field :email, placeholder: 'Email', class: 'form-control' %>
-      </div>
-      <div class="form-group">
-        <%= f.password_field :password, placeholder: 'Password', class: 'form-control' %>
-      </div>
-      <div class="form-check">
-        <label>
-          <input id="accepted" name="accepted" type="checkbox" value="" />
-          I have read the <a href="/terms.html">terms and conditions</a> and the <a href="/privacy.html">privacy policy</a>
-        </label>
-      </div>
-      <%= f.submit "Register", id: 'submit-registration', class: "btn btn-primary" %>
-    <% end %>
+    <div data-autoview="registration-form">
+      <%= form_for(User.new, as: :user, url: registration_path, html: { class: 'form-horizontal', novalidate: :novalidate }) do |f| %>
+        <fieldset>
+          <legend>New to CakeSide? Join Us!</legend>
+        </fieldset>
+        <div class="form-group">
+          <%= f.text_field :name, placeholder: 'Full name', class: 'form-control', required: :required %>
+          <div class="invalid-feedback"></div>
+        </div>
+        <div class="form-group">
+          <%= f.email_field :email, placeholder: 'Email', class: 'form-control', required: :required %>
+          <div class="invalid-feedback"></div>
+        </div>
+        <div class="form-group">
+          <%= f.password_field :password, placeholder: 'Password', class: 'form-control', required: :required %>
+          <div class="invalid-feedback"></div>
+        </div>
+        <div class="form-check">
+          <label>
+            <input id="user_accepted" name="user[accepted]" type="checkbox" value="" />
+            I have read the <a href="/terms.html">terms and conditions</a> and the <a href="/privacy.html">privacy policy</a>
+            <div class="invalid-feedback"></div>
+          </label>
+        </div>
+        <%= f.submit "Register", id: 'submit-registration', class: "btn btn-primary" %>
+      <% end %>
+    </div>
   </div>
 </div>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index c9e7ec0d..94543825 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -25,3 +25,8 @@ en:
       session:
         email: 'Email'
         password: 'Password'
+      user:
+        accepted: "Terms and conditions"
+        email: 'Email'
+        name: 'Full name'
+        password: 'Password'