Finish form validation implementation

h/static/scripts/controllers.coffee

@@ -712,23 +712,34 @@ class Auth
     _timeout = null
 
     _reset = ->
-      delete $scope.errors
       angular.extend $scope.model, base
       for own _, ctrl of $scope when angular.isFunction ctrl?.$setPristine
         ctrl.$setPristine()
-        for own _, field of ctrl when angular.isFunction field?.$setUntouched
-          field.$setUntouched()
+
+    _updateFormValidity = (form, reason) ->
+      if reason == 'Invalid username or password.'
+        form.password.$setValidity('invalid', false)
+      else if reason
+        form.responseErrorMessage = reason
+
+    _updateFieldValidity = (form, errors) ->
+      for field, error of errors
+        form[field].$setValidity('response', false)
+        form[field].responseErrorMessage = error
+
+    _resetFormValidity = (form) ->
+      form.password.$setValidity('invalid', true)
+      for own _, field of form when field.$setValidity
+        field.$setValidity('response', true)
+        field.responseErrorMessage = null
 
     _error = (form, data) ->
       {errors, reason} = data
 
-      if reason # Seems legit, and only used for login messages...
-        $scope.login.password.$setValidity('server', false)
-        $scope.login.password.serverError = reason
+      _updateFormValidity(form, reason)
+      _updateFieldValidity(form, errors)
 
-      for field, error of errors
-        $scope[form][field].$setValidity('server', false)
-        $scope[form][field].serverError = error
+      $scope.$emit('error', form.$name)
 
     _startTimeout = ->
       # Reset the auth forms after five minutes of inactivity
@@ -743,13 +754,15 @@ class Auth
         _startTimeout()
 
     $scope.submit = (form) ->
+      _resetFormValidity(form)
+
       angular.extend session, $scope.model
       return unless form.$valid
 
       promise = session["$#{form.$name}"] ->
-        $scope.$emit 'success', form.$name
+        $scope.$emit('success', form.$name)
 
-      promise.then(_reset, _error.bind(null, form.$name))
+      promise.then(_reset, _error.bind(null, form))
 
 
 class Editor

h/static/scripts/directives.coffee

 formField = ->
   link: (scope, elem, attr, form) ->
     field = form[attr.target]
+    errorClass = attr.errorClass
+
     return unless field?
 
+    unless errorClass
+      throw new Error('FormField directive requires an error-class attribute')
+
     field.unsetFieldError = ->
-      elem.removeClass('form-field-error')
+      elem.removeClass(errorClass)
 
     field.setFieldError = ->
-      elem.addClass('form-field-error')
+      elem.addClass(errorClass)
 
   require: '^form'
   restrict: 'C'
@@ -33,7 +38,12 @@ formValidate = ->
 
     # Validate the field when submit is clicked.
     elem.on 'submit', (event) ->
-      updateField(field) for own key, field of form when key[0] != '$'
+      updateField(field) for own _, field of form when field.$name?
+
+    # 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?
 
   require: 'form'
 

h/static/styles/forms.scss

@@ -6,6 +6,10 @@
   margin-bottom: 10px;
 }
 
+.form-description {
+  margin-bottom: 1em;
+}
+
 %form-input-error-state {
   &, &:focus, &.js-focus {
     color: #b4777a;