Merge pull request #3807 from picklesrus/student-username-update

Change up the messaging in student registration.

src/components/registration/steps.jsx

@@ -28,6 +28,7 @@ const Spinner = require('../../components/spinner/spinner.jsx');
 const StepNavigation = require('../../components/stepnavigation/stepnavigation.jsx');
 const TextArea = require('../../components/forms/textarea.jsx');
 const Tooltip = require('../../components/tooltip/tooltip.jsx');
+const ValidationMessage = require('../../components/forms/validation-message.jsx');
 
 require('./steps.scss');
 
@@ -84,11 +85,13 @@ class UsernameStep extends React.Component {
             'handleChangeShowPassword',
             'handleUsernameBlur',
             'handleValidSubmit',
-            'validateUsername'
+            'validateUsername',
+            'handleFocus'
         ]);
         this.state = {
             showPassword: props.showPassword,
             waiting: false,
+            showUsernameTip: true,
             validUsername: ''
         };
     }
@@ -159,6 +162,9 @@ class UsernameStep extends React.Component {
             if (isValid) return this.props.onNextStep(formData);
         });
     }
+    handleFocus () {
+        this.setState({showUsernameTip: false});
+    }
     render () {
         return (
             <Slide className="registration-step username-step">
@@ -205,6 +211,13 @@ class UsernameStep extends React.Component {
                                     null
                                 )}
                             </label>
+                            { this.state.showUsernameTip &&
+                                <ValidationMessage
+                                    className={'validation-full-width-input'}
+                                    message={this.props.intl.formatMessage({id: 'registration.usernameAdviceShort'})}
+                                    mode="info"
+                                />
+                            }
                             <Input
                                 required
                                 className={this.state.validUsername}
@@ -227,6 +240,7 @@ class UsernameStep extends React.Component {
                                     maxLength: 20
                                 }}
                                 onBlur={this.handleUsernameBlur}
+                                onFocus={this.handleFocus}
                             />
                         </div>
                         <Input
@@ -253,6 +267,7 @@ class UsernameStep extends React.Component {
                                 notEqualsField: 'user.username'
                             }}
                         />
+
                         <Checkbox
                             help={null}
                             name="showPassword"

src/components/registration/steps.scss

@@ -57,6 +57,10 @@
         .username-label {
             margin-bottom: .75rem;
         }
+        .validation-info {
+            top:auto;
+            left:auto;
+        }
     }
 
     &.demographics-step {

src/l10n.json

@@ -218,7 +218,7 @@
     "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.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.studentUsernameSuggestion": "Try your favorite food, hobby, or animal along with some numbers",
     "registration.acceptTermsOfUse": "By creating an account, you acknowledge the {privacyPolicyLink} and you accept and agree to the {touLink}.",
     "registration.usernameStepTitle": "Request a Teacher Account",
     "registration.usernameStepTitleScratcher": "Create a Scratch Account",

src/views/studentregistration/studentregistration.jsx

@@ -126,7 +126,7 @@ class StudentRegistration extends React.Component {
                                 id: 'registration.studentUsernameStepTooltip'
                             })}
                             usernameHelp={this.props.intl.formatMessage({
-                                id: 'registration.studentUsernameFieldHelpText'
+                                id: 'registration.studentUsernameSuggestion'
                             })}
                             waiting={this.state.waiting}
                             onNextStep={this.handleAdvanceStep}