Add help text when a field is not required

Most of our fields are required, so it makes more sense to display help when they are optional than to asterisk every required field

src/components/forms/checkbox-group.jsx

@@ -2,6 +2,9 @@ var classNames = require('classnames');
 var FRCCheckboxGroup = require('formsy-react-components').CheckboxGroup;
 var React = require('react');
 var defaultValidationHOC = require('./validations.jsx').defaultValidationHOC;
+var inputHOC = require('./input-hoc.jsx');
+
+require('./row.scss');
 
 var CheckboxGroup = React.createClass({
     type: 'CheckboxGroup',
@@ -16,4 +19,4 @@ var CheckboxGroup = React.createClass({
     }
 });
 
-module.exports = defaultValidationHOC(CheckboxGroup);
+module.exports = inputHOC(defaultValidationHOC(CheckboxGroup));

src/components/forms/checkbox.jsx

@@ -2,6 +2,9 @@ var classNames = require('classnames');
 var FRCCheckbox = require('formsy-react-components').Checkbox;
 var React = require('react');
 var defaultValidationHOC = require('./validations.jsx').defaultValidationHOC;
+var inputHOC = require('./input-hoc.jsx');
+
+require('./row.scss');
 
 var Checkbox = React.createClass({
     type: 'Checkbox',
@@ -16,4 +19,4 @@ var Checkbox = React.createClass({
     }
 });
 
-module.exports = defaultValidationHOC(Checkbox);
+module.exports = inputHOC(defaultValidationHOC(Checkbox));

src/components/forms/input-hoc.jsx

@@ -0,0 +1,20 @@
+var React = require('react');
+
+module.exports = function InputComponentMixin (Component) {
+    var InputComponent = React.createClass({
+        getDefaultProps: function () {
+            return {
+                messages: {
+                    'general.notRequired': 'Not Required'
+                }
+            };
+        },
+        render: function () {
+            return (
+                <Component help={this.props.required ? null : this.props.messages['general.notRequired']}
+                           {...this.props} />
+            );
+        }
+    });
+    return InputComponent;
+};

src/components/forms/input.jsx

@@ -2,8 +2,10 @@ var classNames = require('classnames');
 var FRCInput = require('formsy-react-components').Input;
 var React = require('react');
 var defaultValidationHOC = require('./validations.jsx').defaultValidationHOC;
+var inputHOC = require('./input-hoc.jsx');
 
 require('./input.scss');
+require('./row.scss');
 
 var Input = React.createClass({
     type: 'Input',
@@ -22,4 +24,4 @@ var Input = React.createClass({
     }
 });
 
-module.exports = defaultValidationHOC(Input);
+module.exports = inputHOC(defaultValidationHOC(Input));

src/components/forms/phone-input.jsx

@@ -7,9 +7,12 @@ var defaultValidationHOC = require('./validations.jsx').defaultValidationHOC;
 var validationHOCFactory = require('./validations.jsx').validationHOCFactory;
 var Row = require('formsy-react-components').Row;
 var ComponentMixin = require('formsy-react-components').ComponentMixin;
+var inputHOC = require('./input-hoc.jsx');
 
 var allIso2 = allCountries.map(function (country) {return country.iso2;});
 
+require('./row.scss');
+
 var PhoneInput = React.createClass({
     displayName: 'PhoneInput',
     mixins: [
@@ -61,4 +64,4 @@ var phoneValidationHOC = validationHOCFactory({
     isPhone: 'Please enter a valid phone number'
 });
 
-module.exports = defaultValidationHOC(phoneValidationHOC(PhoneInput));
+module.exports = inputHOC(defaultValidationHOC(phoneValidationHOC(PhoneInput)));

src/components/forms/radio-group.jsx

@@ -2,6 +2,9 @@ var classNames = require('classnames');
 var FRCRadioGroup = require('formsy-react-components').RadioGroup;
 var React = require('react');
 var defaultValidationHOC = require('./validations.jsx').defaultValidationHOC;
+var inputHOC = require('./input-hoc.jsx');
+
+require('./row.scss');
 
 var RadioGroup = React.createClass({
     type: 'RadioGroup',
@@ -16,4 +19,4 @@ var RadioGroup = React.createClass({
     }
 });
 
-module.exports = defaultValidationHOC(RadioGroup);
+module.exports = inputHOC(defaultValidationHOC(RadioGroup));

src/components/forms/row.scss

@@ -0,0 +1,11 @@
+/*
+ * Styles for the Row component used by formsy-react-components
+ * Should be imported for each component that extends one of
+ * the formsy-react-components
+ */
+
+.form-group {
+    .required-symbol {
+        display: none;
+    }
+}

src/components/forms/select.jsx

@@ -3,7 +3,9 @@ var defaults = require('lodash.defaultsdeep');
 var FRCSelect = require('formsy-react-components').Select;
 var React = require('react');
 var defaultValidationHOC = require('./validations.jsx').defaultValidationHOC;
+var inputHOC = require('./input-hoc.jsx');
 
+require('./row.scss');
 require('./select.scss');
 
 var Select = React.createClass({
@@ -26,4 +28,4 @@ var Select = React.createClass({
     }
 });
 
-module.exports = defaultValidationHOC(Select);
+module.exports = inputHOC(defaultValidationHOC(Select));

src/components/forms/textarea.jsx

@@ -2,7 +2,9 @@ var classNames = require('classnames');
 var FRCTextarea = require('formsy-react-components').Textarea;
 var React = require('react');
 var defaultValidationHOC = require('./validations.jsx').defaultValidationHOC;
+var inputHOC = require('./input-hoc.jsx');
 
+require('./row.scss');
 require('./textarea.scss');
 
 var TextArea = React.createClass({
@@ -18,4 +20,4 @@ var TextArea = React.createClass({
     }
 });
 
-module.exports = defaultValidationHOC(TextArea);
+module.exports = inputHOC(defaultValidationHOC(TextArea));

src/components/login/login.jsx

@@ -41,13 +41,13 @@ var Login = React.createClass({
                             id='general.username'
                             defaultMessage={'Username'} />
                     </label>
-                    <Input type="text" ref="username" name="username" maxLength="30" key="usernameInput" />
+                    <Input type="text" ref="username" name="username" maxLength="30" key="usernameInput" required />
                     <label htmlFor="password" key="passwordLabel">
                         <FormattedMessage
                             id='general.password'
                             defaultMessage={'Password'} />
                     </label>
-                    <Input type="password" ref="password" name="password" key="passwordInput" />
+                    <Input type="password" ref="password" name="password" key="passwordInput" required />
                     {this.state.waiting ? [
                         <Button className="submit-button white" type="submit" disabled="disabled" key="submitButton">
                             <Spinner />

src/views/teacherregistration/steps.jsx

@@ -73,6 +73,7 @@ module.exports = {
                         <Checkbox label={formatMessage({id: 'teacherRegistration.showPassword'})}
                                   value={this.state.showPassword}
                                   onChange={this.onChangeShowPassword}
+                                  help={null}
                                   name="showPassword" />
                         <Button type="submit">Next Step</Button>
                     </Form>
@@ -126,7 +127,11 @@ module.exports = {
                                         {value: 'other', label: formatMessage({id: 'general.other'})}
                                     ]}
                                     required />
-                        <Input disabled={this.state.otherDisabled} name="user.genderOther" type="text" />
+                        <Input name="user.genderOther"
+                               type="text"
+                               disabled={this.state.otherDisabled}
+                               required={!this.state.otherDisabled}
+                               help={null} />
                         <Select label={formatMessage({id: 'general.country'})}
                                 name="user.country"
                                 options={countryData.countryOptions}