Fix wording on student username step

src/components/registration/steps.jsx

@@ -100,9 +100,25 @@ module.exports = {
             var formatMessage = this.props.intl.formatMessage;
             return (
                 <Slide className="registration-step username-step">
-                    <h2><intl.FormattedMessage id="registration.usernameStepTitle" /></h2>
+                    <h2>
+                        {this.props.title ? (
+                            this.props.title
+                        ) : (
+                            <intl.FormattedMessage id="registration.usernameStepTitle" />
+                        )}
+                    </h2>
                     <p className="description">
-                        <intl.FormattedMessage id="registration.usernameStepDescription" />
+                        {this.props.description ? (
+                            this.props.description
+                        ) : (
+                            <intl.FormattedMessage id="registration.usernameStepDescription" />
+                        )}
+                        {this.props.tooltip ? (
+                             <Tooltip title={'?'}
+                                 tipContent={this.props.tooltip} />
+                        ) : (
+                            null
+                        )}
                     </p>
                     <Card>
                         <Form onValidSubmit={this.onValidSubmit}>
@@ -110,6 +126,7 @@ module.exports = {
                                    className={this.state.validUsername}
                                    type="text"
                                    name="user.username"
+                                   help={this.props.usernameHelp}
                                    validations={{
                                        matchRegexp: /^[\w-]*$/,
                                        minLength: 3,

src/l10n.json

@@ -115,12 +115,18 @@
     "registration.lastStepDescription": "We are currently processing your application. ",
     "registration.nameStepTooltip": "This information is used for verification and to aggregate usage statistics.",
     "registration.nextStep": "Next Step",
-    "registration.notOnWebsite": "This information will not appear on the Scratch website.",
     "registration.personalStepTitle": "Personal Information",
     "registration.personalStepDescription": "Your individual responses will not be displayed publicly, and will be kept confidential and secure",
+    "registration.studentPersonalStepDescription": "This information will not appear on the Scratch website.",
     "registration.showPassword": "Show password",
     "registration.usernameStepDescription": "Fill in the following forms to request an account. The approval process may take up to 24 hours.",
+    "registration.studentUsernameStepDescription": "You can make games, animations, and stories using Scratch. Setting up an account is easy and it's free. Fill in the form below to get started.",
+    "registration.studentUsernameStepHelpText": "Already have a Scratch account?",
+    "registration.studentUsernameStepTitle": "Create a Scratch Account",
+    "registration.studentUsernameStepTooltip": "You'll need to create a new Scratch account to join this class.",
+    "registration.studentUsernameFieldHelpText": "For safety, don't use your real name!",
     "registration.usernameStepTitle": "Request a Teacher Account",
+    "registration.usernameStepTitleScratcher": "Create a Scratch Account",
     "registration.validationPasswordLength": "Passwords must be at least six characters",
     "registration.validationPasswordNotEquals": "Your password may not be \"password\"",
     "registration.validationPasswordNotUsername": "Your password may not be your username",

src/views/studentregistration/studentregistration.jsx

@@ -87,7 +87,15 @@ var StudentRegistration = intl.injectIntl(React.createClass({
         window.location = '/classes/' + this.props.classroomId + '/';
     },
     render: function () {
-        var demographicsDescription = this.props.intl.formatMessage({id: 'registration.notOnWebsite'});
+        var demographicsDescription = this.props.intl.formatMessage({
+            id: 'registration.studentPersonalStepDescription'});
+        var usernameTitle = this.props.intl.formatMessage({id: 'registration.studentUsernameStepTitle'});
+        var usernameHelp = this.props.intl.formatMessage({id: 'registration.studentUsernameFieldHelpText'});
+        var usernameDescription = (
+            this.props.intl.formatMessage({id: 'registration.studentUsernameStepDescription'}) + ' ' +
+            this.props.intl.formatMessage({id: 'registration.studentUsernameStepHelpText'})
+        );
+        var usernameTooltip = this.props.intl.formatMessage({id: 'registration.studentUsernameStepTooltip'});
         return (
             <Deck className="student-registration">
                 {this.state.registrationError ?
@@ -99,6 +107,10 @@ var StudentRegistration = intl.injectIntl(React.createClass({
                                                onNextStep={this.advanceStep}
                                                waiting={this.state.waiting || !this.state.classroom} />
                         <Steps.UsernameStep onNextStep={this.advanceStep}
+                                            title={usernameTitle}
+                                            description={usernameDescription}
+                                            tooltip={usernameTooltip}
+                                            usernameHelp={usernameHelp}
                                             waiting={this.state.waiting} />
                         <Steps.DemographicsStep description={demographicsDescription}
                                                 onNextStep={this.register}