Merge pull request #779 from mewtaylor/issue/gh-773

Fix GH-[772,773]: Fix “afterschool” typo, default country and margin for username

src/components/registration/steps.jsx

@@ -27,6 +27,23 @@ var Tooltip = require('../../components/tooltip/tooltip.jsx');
 require('./steps.scss');
 
 var DEFAULT_COUNTRY = 'us';
+var getCountryOptions = function (defaultCountry) {
+    var options = countryData.countryOptions.concat({
+        label: <intl.FormattedMessage id="teacherRegistration.selectCountry" />,
+        disabled: true,
+        selected: true
+    });
+    if (typeof defaultCountry !== 'undefined') {
+        return options.sort(function (a, b) {
+            if (a.disabled) return -1;
+            if (b.disabled) return 1;
+            if (a.value === defaultCountry) return -1;
+            if (b.value === defaultCountry) return 1;
+            return 0;
+        }.bind(this));
+    }
+    return options;
+};
 
 var NextStepButton = React.createClass({
     getDefaultProps: function () {
@@ -124,12 +141,14 @@ module.exports = {
                     <Card>
                         <Form onValidSubmit={this.onValidSubmit}>
                             <div>
+                                <div className="username-label">
                                     <b>{formatMessage({id: 'registration.createUsername'})}</b>
                                     {this.props.usernameHelp ? (
                                         <p className="help-text">{this.props.usernameHelp}</p>
                                     ):(
                                         null
                                     )}
+                                </div>
                                 <Input className={this.state.validUsername}
                                        type="text"
                                        name="user.username"
@@ -251,7 +270,6 @@ module.exports = {
     DemographicsStep: intl.injectIntl(React.createClass({
         getDefaultProps: function () {
             return {
-                defaultCountry: DEFAULT_COUNTRY,
                 waiting: false,
                 description: null
             };
@@ -265,7 +283,7 @@ module.exports = {
                 'August', 'September', 'October', 'November', 'December'
             ].map(function (label, id) {
                 return {
-                    value: id+1,
+                    value: id + 1,
                     label: this.props.intl.formatMessage({id: 'general.month' + label})};
             }.bind(this));
         },
@@ -321,8 +339,7 @@ module.exports = {
                             </div>
                             <Select label={formatMessage({id: 'general.country'})}
                                     name="user.country"
-                                    options={countryData.countryOptions}
-                                    value={this.props.defaultCountry}
+                                    options={getCountryOptions(DEFAULT_COUNTRY)}
                                     required />
                             <Checkbox className="demographics-checkbox-is-robot"
                                       label="I'm a robot!"
@@ -573,17 +590,6 @@ module.exports = {
             var formatMessage = this.props.intl.formatMessage;
             var stateOptions = countryData.subdivisionOptions[this.state.countryChoice];
             stateOptions = [{}].concat(stateOptions);
-            var countryOptions = countryData.countryOptions.concat({
-                label: formatMessage({id: 'teacherRegistration.selectCountry'}),
-                disabled: true,
-                selected: true
-            }).sort(function (a, b) {
-                if (a.disabled) return -1;
-                if (b.disabled) return 1;
-                if (a.value === this.props.defaultCountry) return -1;
-                if (b.value === this.props.defaultCountry) return 1;
-                return 0;
-            }.bind(this));
             return (
                 <Slide className="registration-step address-step">
                     <h2>
@@ -598,7 +604,8 @@ module.exports = {
                         <Form onValidSubmit={this.onValidSubmit}>
                             <Select label={formatMessage({id: 'general.country'})}
                                     name="address.country"
-                                    options={countryOptions}
+                                    options={getCountryOptions()}
+                                    value={this.props.defaultCountry}
                                     onChange={this.onChangeCountry}
                                     required />
                             <Input label={formatMessage({id: 'teacherRegistration.addressLine1'})}

src/components/registration/steps.scss

@@ -50,6 +50,12 @@
         }
     }
 
+    &.username-step {
+        .username-label {
+            margin-bottom: .75rem;
+        }
+    }
+
     &.demographics-step {
         .gender-input {
             margin-top: -5.5rem;
@@ -80,7 +86,7 @@
     &.organization-step {
         .checkbox-group {
             .validation-message {
-                transform: translate(16rem, -16rem);
+                transform: translate(16rem, 8rem);
             }
         }
 

src/views/teacherregistration/l10n.json

@@ -19,7 +19,7 @@
     "teacherRegistration.orgChoiceMiddleSchool": "Middle School",
     "teacherRegistration.orgChoiceHighSchool": "High School",
     "teacherRegistration.orgChoiceUniversity": "College/University",
-    "teacherRegistration.orgChoiceAfterschool": "Afterscool Program",
+    "teacherRegistration.orgChoiceAfterschool": "Afterschool Program",
     "teacherRegistration.orgChoiceMuseum": "Museum",
     "teacherRegistration.orgChoiceLibrary": "Library",
     "teacherRegistration.orgChoiceCamp": "Camp",