Fix “afterschool” typo

Also make default country selectable in the user demographic step, and fix the spacing with `Create a Username`

src/components/registration/steps.jsx

@@ -124,12 +124,14 @@ module.exports = {
                     <Card>
                         <Form onValidSubmit={this.onValidSubmit}>
                             <div>
-                                <b>{formatMessage({id: 'registration.createUsername'})}</b>
-                                {this.props.usernameHelp ? (
-                                    <p className="help-text">{this.props.usernameHelp}</p>
-                                ):(
-                                    null
-                                )}
+                                <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"
@@ -280,6 +282,17 @@ module.exports = {
         },
         render: function () {
             var formatMessage = this.props.intl.formatMessage;
+            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 demographics-step">
                     <h2>
@@ -321,8 +334,7 @@ module.exports = {
                             </div>
                             <Select label={formatMessage({id: 'general.country'})}
                                     name="user.country"
-                                    options={countryData.countryOptions}
-                                    value={this.props.defaultCountry}
+                                    options={countryOptions}
                                     required />
                             <Checkbox className="demographics-checkbox-is-robot"
                                       label="I'm a robot!"

src/components/registration/steps.scss

@@ -50,6 +50,12 @@
         }
     }
 
+    &.username-step {
+        .username-label {
+            margin-bottom: .75rem;
+        }
+    }
+
     &.demographics-step {
         .gender-input {
             margin-top: -5.5rem;

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",