From d990dee7553828f1a2161c64f7ef914f7aa6463d Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Tue, 5 Jul 2016 12:05:54 -0400
Subject: [PATCH] Move location of the general error message

From review of the style with @carljbowman

Requires a bit of magic, where the Form component manually adds the "all" value. But without a major overhaul of the validation system, I don't see how else to put the general error among the other fields.
---
 src/components/forms/form.jsx         | 10 +++++++---
 src/components/registration/steps.jsx |  4 ++++
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/forms/form.jsx b/src/components/forms/form.jsx
index d93495337..b0bfd8dfd 100644
--- a/src/components/forms/form.jsx
+++ b/src/components/forms/form.jsx
@@ -2,7 +2,6 @@ var classNames = require('classnames');
 var Formsy = require('formsy-react');
 var omit = require('lodash.omit');
 var React = require('react');
-var GeneralError = require('./general-error.jsx');
 var validations = require('./validations.jsx').validations;
 
 for (var validation in validations) {
@@ -32,8 +31,13 @@ var Form = React.createClass({
         );
         return (
             <Formsy.Form {... this.props} className={classes} ref="formsy" onChange={this.onChange}>
-                <GeneralError name="all" value={this.state.allValues} />
-                {this.props.children}
+                {React.Children.map(this.props.children, function (child) {
+                    if (child.props.name === 'all') {
+                        return React.cloneElement(child, {value: this.state.allValues});
+                    } else {
+                        return child;
+                    }
+                }.bind(this))}
             </Formsy.Form>
         );
     }
diff --git a/src/components/registration/steps.jsx b/src/components/registration/steps.jsx
index 2a3ff8645..c76548a7a 100644
--- a/src/components/registration/steps.jsx
+++ b/src/components/registration/steps.jsx
@@ -12,6 +12,7 @@ var CharCount = require('../../components/forms/charcount.jsx');
 var Checkbox = require('../../components/forms/checkbox.jsx');
 var CheckboxGroup = require('../../components/forms/checkbox-group.jsx');
 var Form = require('../../components/forms/form.jsx');
+var GeneralError = require('../../components/forms/general-error.jsx');
 var Input = require('../../components/forms/input.jsx');
 var PhoneInput = require('../../components/forms/phone-input.jsx');
 var RadioGroup = require('../../components/forms/radio-group.jsx');
@@ -148,6 +149,7 @@ module.exports = {
                                       onChange={this.onChangeShowPassword}
                                       help={null}
                                       name="showPassword" />
+                            <GeneralError name="all" />
                             <NextStepButton waiting={this.props.waiting || this.state.waiting}
                                             text={<intl.FormattedMessage id="teacherRegistration.nextStep" />} />
                         </Form>
@@ -508,6 +510,7 @@ module.exports = {
                                    type="text"
                                    name="address.zip"
                                    required />
+                            <GeneralError name="all" />
                             <NextStepButton waiting={this.props.waiting || this.state.waiting}
                                             text={<intl.FormattedMessage id="teacherRegistration.nextStep" />} />
                         </Form>
@@ -631,6 +634,7 @@ module.exports = {
                                        equalsField: formatMessage({id: 'general.validationEmailMatch'})
                                    }}
                                    required />
+                            <GeneralError name="all" />
                             <NextStepButton waiting={this.props.waiting}
                                             text={<intl.FormattedMessage id="teacherRegistration.nextStep" />} />
                         </Form>