From 2711bafbcdb46d1dd855dba6fdd74ce848346f5b Mon Sep 17 00:00:00 2001
From: picklesrus <picklesrus@users.noreply.github.com>
Date: Wed, 15 Apr 2020 15:43:24 -0400
Subject: [PATCH 1/2] Change up the messaging in student registration to make
 the "don't use your real name" a blue info message and give some suggestions
 on how to choose a username.

---
 src/components/registration/steps.jsx           | 17 ++++++++++++++++-
 src/components/registration/steps.scss          |  4 ++++
 src/l10n.json                                   |  1 +
 .../studentregistration/studentregistration.jsx |  2 +-
 4 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/registration/steps.jsx b/src/components/registration/steps.jsx
index 42fe4714f..42bdb2db4 100644
--- a/src/components/registration/steps.jsx
+++ b/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"
diff --git a/src/components/registration/steps.scss b/src/components/registration/steps.scss
index f40dc4060..a2cc34a58 100644
--- a/src/components/registration/steps.scss
+++ b/src/components/registration/steps.scss
@@ -57,6 +57,10 @@
         .username-label {
             margin-bottom: .75rem;
         }
+        .validation-info {
+            top:auto;
+            left:auto;
+        }
     }
 
     &.demographics-step {
diff --git a/src/l10n.json b/src/l10n.json
index 960f6881d..a661b5a5c 100644
--- a/src/l10n.json
+++ b/src/l10n.json
@@ -219,6 +219,7 @@
     "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",
diff --git a/src/views/studentregistration/studentregistration.jsx b/src/views/studentregistration/studentregistration.jsx
index 5b8ff8b39..3ad1d70ab 100644
--- a/src/views/studentregistration/studentregistration.jsx
+++ b/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}

From d6fdf90a56f01b26d751aa36c65350336370591c Mon Sep 17 00:00:00 2001
From: picklesrus <picklesrus@users.noreply.github.com>
Date: Mon, 20 Apr 2020 17:38:20 -0400
Subject: [PATCH 2/2] remove unused message.

---
 src/l10n.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/l10n.json b/src/l10n.json
index a661b5a5c..2df56f154 100644
--- a/src/l10n.json
+++ b/src/l10n.json
@@ -218,7 +218,6 @@
     "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",