Commit 1e9b754b

mo <mo.khan@gmail.com>
2017-09-04 15:42:56
connect view to login form.
1 parent 9385d7d
Changed files (6)
app
assets
views
spec
app/assets/javascripts/initializers/auto_view_setup.js.coffee
@@ -1,25 +1,16 @@
 #= require ./behaviour
 
 class CakeSide.AutoViewSetup extends CakeSide.Behaviour
-  @views = {}
   @on "ready"
 
   execute: ->
     for element in $('[data-autoview]')
-      #CakeSide.AutoView.install(element)
       @install($(element))
 
   install: (element) ->
     viewName = element.data('autoview')
-    constructor = CakeSide.Proxy.create(CakeSide.Views, viewName)
-
-    if _.isUndefined(constructor)
-      console.error("Could not find autoview for #{viewName}")
-      return
-
-    view = new constructor
-      el: element
-      $el: $(element)
-    view.render()
-
-    CakeSide.AutoViewSetup.views[viewName.replace('.', '')] = view
+    if viewName.indexOf("-") > 0
+      CakeSide.AutoView.install(element)
+    else
+      constructor = CakeSide.Proxy.create(CakeSide.Views, viewName)
+      CakeSide.AutoView.create(viewName, element, constructor)
app/assets/javascripts/views/sessions/login_form.js.coffee
@@ -0,0 +1,15 @@
+#= require views/auto_view
+
+class CakeSide.Views.LoginForm extends CakeSide.AutoView
+  @viewName 'login-form'
+  events:
+    'change #session_username': 'render'
+    'change #session_password': 'render'
+
+  render: ->
+    @$('input[type=submit]').prop('disabled', !@valid())
+
+  valid: ->
+    !_.isEmpty(@field("username").val()) && !_.isEmpty(@field("password").val())
+
+  modelKey: -> "session"
app/assets/javascripts/views/auto_view.js.coffee
@@ -9,16 +9,21 @@ class CakeSide.AutoView extends Backbone.View
   @install: (element) ->
     name = $(element).data('autoview')
     constructor = @constructors[name]
+    @create(name, element, constructor)
+
+  @create: (name, element, constructor) ->
     if constructor == undefined
-      console.error("Could not find autoview for #{name}")
+      console.error("Could not find autoview at #{name}")
       return
 
     view = new constructor
       el: element
       $el: $(element)
     view.render()
-    @views[name] ?= []
-    @views[name].push(view)
+    key = name.replace(".", '-')
+    @views[key] ?= []
+    @views[key].push(view)
 
-  render: ->
-    @
+  field: (name) -> $("##{@fieldName(name)}")
+  fieldName: (name) -> "#{@modelKey()}_#{name}"
+  render: -> @
app/views/sessions/new.html.erb
@@ -23,18 +23,18 @@
     </div>
   </div>
   <div class="col">
-    <%= form_for(@session, url: sessions_path(@session), html: { class: "form-horizontal" }) do |f| %>
+    <%= form_for(@session, url: sessions_path(@session), html: { class: "form-horizontal", data: { autoview: 'login-form' } }) do |f| %>
       <legend>Got an account? Login!</legend>
       <div class="form-group">
-        <%= email_field_tag 'session[username]', '', placeholder: 'Email', class: "form-control" %>
+        <%= email_field_tag 'session[username]', '', placeholder: 'Email', class: "form-control", required: :required %>
       </div>
       <div class="form-group">
-        <%= password_field_tag 'session[password]', '', placeholder: 'Password', class: "form-control" %>
+        <%= password_field_tag 'session[password]', '', placeholder: 'Password', class: "form-control", required: :required %>
       </div>
       <p><%= link_to "Forgot your password?", new_password_path %></p>
       <%= f.submit t(".sign_in"), class: "btn btn-primary" %>
-      <br />
     <% end %>
+
     <%= form_for(User.new, as: :user, url: registration_path, html: { class: 'form-horizontal' }) do |f| %>
       <fieldset>
         <legend>New to CakeSide? Join Us!</legend>
spec/javascripts/initializers/auto_view_setup_spec.js.coffee
@@ -8,17 +8,17 @@ describe "CakeSide.AutoViewSetup", ->
 
   describe "#execute", ->
     beforeEach ->
-      CakeSide.AutoViewSetup.views = {}
+      CakeSide.AutoView.views = {}
 
     it 'attaches the autoview to the DOM element', ->
       fixture.set '<div data-autoview="My.ChangePassword"></div>'
       subject.execute()
-      result = CakeSide.AutoViewSetup.views['MyChangePassword']
+      result = CakeSide.AutoView.views['My-ChangePassword'][0]
       expect(result instanceof CakeSide.Views.My.ChangePassword).toEqual(true)
 
     it "returns nil if the autoview cannot be discovered", ->
       fixture.set '<div data-autoview="Unknown"></div>'
       subject.execute()
 
-      expect(_.isEmpty(CakeSide.AutoViewSetup.views)).toEqual(true)
+      expect(_.isEmpty(CakeSide.AutoView.views)).toEqual(true)
       expect(console.error).toHaveBeenCalled()
spec/javascripts/views/sessions/login_page_spec.js.coffee
@@ -0,0 +1,32 @@
+describe "CakeSide.Views.LoginForm", ->
+  subject = null
+
+  beforeEach ->
+    fixture.set '''
+<form class="form-horizontal" data-autoview="login-form" id="new_user_session" action="/sessions" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="NUk9vz3sVMzi09PgQrzOTDcJIki2RgCzHgtpFw0ooSha4lgMt/bUsuAk//Wvi7wb/K6qh+pVrDkKr5a5e66QTw==">
+  <div class="form-group">
+    <input type="email" name="session[username]" id="session_username" value="" placeholder="Email" class="form-control" required="required">
+  </div>
+  <div class="form-group">
+    <input type="password" name="session[password]" id="session_password" value="" placeholder="Password" class="form-control" required="required">
+  </div>
+  <p><a href="/passwords/new">Forgot your password?</a></p>
+  <input type="submit" name="commit" value="Sign In" class="btn btn-primary">
+</form>
+    '''
+
+    subject = new CakeSide.Views.LoginForm
+      el: $('#new_user_session')
+
+  it "disables the submit button when the email is missing", ->
+    subject.field('password').val('password').change()
+    expect(subject.$('input[type=submit]').prop('disabled')).toEqual(true)
+
+  it "disables the submit button when the password is missing", ->
+    subject.field('username').val('user@email.com').change()
+    expect(subject.$('input[type=submit]').prop('disabled')).toEqual(true)
+
+  it "enables the submit button when all required fields are specified", ->
+    subject.field('username').val('user@email.com').change()
+    subject.field('password').val('password').change()
+    expect(subject.$('input[type=submit]').prop('disabled')).toEqual(false)