Merge pull request #1379 from hypothesis/1375-fix-server-errors

Fix server errors in login form
Fix #1375

h/static/scripts/directives.coffee

@@ -14,9 +14,19 @@ formValidate = ->
       else
         toggleClass(field, addClass: true)
 
-    # Immediately show feedback for corrections.
-    elem.on 'keyup', ':input', ->
-      updateField(form[this.name]) if form[this.name]?.$valid
+    # A custom parser for each form field that is used to reset the "response"
+    # error state whenever the $viewValue changes.
+    fieldParser = (field, value) ->
+      field.$setValidity('response', true)
+      updateField(field) if field.$valid
+      return value
+
+    forEachField = (fn) ->
+      fn(field) for own _, field of form when field?.$name?
+
+    forEachField (field) ->
+      parser = angular.bind(null, fieldParser, field)
+      field.$parsers.push(parser)
 
     # Validate field when the content changes.
     elem.on 'change', ':input', ->
@@ -24,12 +34,12 @@ formValidate = ->
 
     # Validate the field when submit is clicked.
     elem.on 'submit', (event) ->
-      updateField(field) for own _, field of form when field?.$name?
+      forEachField(updateField)
 
     # Validate when a response is processed.
     scope.$on 'error', (event, name) ->
       return unless form.$name == name
-      updateField(field) for own _, field of form when field?.$name?
+      forEachField(updateField)
 
   require: 'form'
 

tests/js/directives-test.coffee

@@ -48,28 +48,36 @@ describe 'h.directives', ->
 
     it 'should apply an error class to an invalid field on change', ->
       $field = $element.find('.form-field')
-      $element.find('[name=username]').val('ab').change()
-      assert.include $field.prop('className'), 'form-field-error'
+      $input = $element.find('[name=username]')
+
+      controller = $input.controller('ngModel')
+      controller.$setViewValue('ab')
+      $input.change()
+
+      assert.include($field.prop('className'), 'form-field-error')
 
     it 'should remove an error class to an valid field on change', ->
       $field = $element.find('.form-field').addClass('form-field-error')
       $input = $element.find('[name=username]')
-      $input.val('abc').change()
-      assert.notInclude $field.prop('className'), 'form-field-error'
+
+      controller = $input.controller('ngModel')
+      controller.$setViewValue('abc')
+      $input.triggerHandler('change')
+
+      assert.notInclude($field.prop('className'), 'form-field-error')
 
     it 'should apply an error class to an invalid field on submit', ->
       $field = $element.find('.form-field')
-      $element.trigger('submit')
-      assert.include $field.prop('className'), 'form-field-error'
+      $element.triggerHandler('submit')
+      assert.include($field.prop('className'), 'form-field-error')
 
     it 'should remove an error class from a valid field on submit', ->
-      $scope.model.username = 'abc'
-      $scope.$digest()
-
       $field = $element.find('.form-field').addClass('form-field-error')
+      controller = $element.find('[name=username]').controller('ngModel')
+      controller.$setViewValue('abc')
 
-      $element.trigger('submit')
-      assert.notInclude $field.prop('className'), 'form-field-error'
+      $element.triggerHandler('submit')
+      assert.notInclude($field.prop('className'), 'form-field-error')
 
     it 'should apply an error class to an invalid field on "error" event', ->
       $scope.$emit('error', 'login')
@@ -78,23 +86,36 @@ describe 'h.directives', ->
       $field = $element.find('.form-field')
       assert.include $field.prop('className'), 'form-field-error'
 
-    it 'should remove an error class on valid input on keyup', ->
-      $scope.model.username = 'abc'
-      $scope.$digest()
-
+    it 'should remove an error class on valid input when the view changes', ->
       $field = $element.find('.form-field').addClass('form-field-error')
-      $element.find('[name=username]').keyup()
+      controller = $element.find('[name=username]').controller('ngModel')
+      controller.$setViewValue('abc')
 
-      assert.notInclude $field.prop('className'), 'form-field-error'
+      assert.notInclude($field.prop('className'), 'form-field-error')
 
-    it 'should not add an error class on invalid input on keyup', ->
-      $scope.model.username = ''
-      $scope.$digest()
+    it 'should not add an error class on invalid input on when the view changes', ->
+      $field = $element.find('.form-field')
+      controller = $element.find('[name=username]').controller('ngModel')
+      controller.$setViewValue('ab')
+
+      assert.notInclude($field.prop('className'), 'form-field-error')
 
+    it 'should reset the "response" error on change', ->
       $field = $element.find('.form-field')
-      $element.find('[name=username]').keyup()
+      $input = $element.find('[name=username]')
+      controller = $input.controller('ngModel')
+      controller.$setViewValue('abc')
+
+      # Submit Event
+      controller.$setValidity('response', false)
+      controller.responseErrorMessage = 'fail'
+      $scope.$emit('error', $input.controller('form').$name)
+      assert.include($field.prop('className'), 'form-field-error')
+
+      controller.$setViewValue('abc')
+      $scope.$digest()
 
-      assert.notInclude $field.prop('className'), 'form-field-error'
+      assert.notInclude($field.prop('className'), 'form-field-error')
 
 
   describe '.username', ->
@@ -116,7 +137,7 @@ describe 'h.directives', ->
 
     it 'prevents the default browser action on click', ->
       event = jQuery.Event('click')
-      $element.find('.user').trigger(event)
+      $element.find('.user').triggerHandler(event)
 
       assert(event.isDefaultPrevented())
 
@@ -158,7 +179,7 @@ describe 'h.directives', ->
     it 'calls the given search function', ->
       $scope.query = "Test query"
       $scope.$digest()
-      $element.trigger('submit')
+      $element.triggerHandler('submit')
       sinon.assert.calledWith($scope.update, "Test query")
 
     it 'calls the given clear function', ->