improve email step in several ways

src/components/formik-forms/formik-input.scss

@@ -25,4 +25,9 @@
             outline: none;
         }
     }
+
+    &::placeholder {
+        font-style: italic;
+        color: $type-gray-75percent;
+    }
 }

src/components/formik-forms/input.scss

-@import "../../colors";
-@import "../../frameless";
-
-.input::placeholder {
-    font-style: italic;
-    color: $type-gray-75percent;
-}

src/components/join-flow/email-step.jsx

@@ -17,12 +17,12 @@ class EmailStep extends React.Component {
         super(props);
         bindAll(this, [
             'handleValidSubmit',
-            'validateEmailIfPresent',
+            'validateEmail',
             'validateForm'
         ]);
     }
-    validateEmailIfPresent (email) {
-        if (!email) return null; // skip validation if email is blank; null indicates valid
+    validateEmail (email) {
+        if (!email) return this.props.intl.formatMessage({id: 'general.required'});
         const isValidLocally = emailValidator.validate(email);
         if (isValidLocally) {
             return null; // TODO: validate email address remotely
@@ -51,6 +51,7 @@ class EmailStep extends React.Component {
                         errors,
                         handleSubmit,
                         isSubmitting,
+                        setFieldError,
                         validateField
                     } = props;
                     return (
@@ -89,9 +90,12 @@ class EmailStep extends React.Component {
                                 id="email"
                                 name="email"
                                 placeholder={this.props.intl.formatMessage({id: 'general.emailAddress'})}
-                                validate={this.validateEmailIfPresent}
+                                validate={this.validateEmail}
                                 validationClassName="validation-full-width-input"
-                                onBlur={() => validateField('email')} // eslint-disable-line react/jsx-no-bind
+                                /* eslint-disable react/jsx-no-bind */
+                                onBlur={() => validateField('email')}
+                                onFocus={() => setFieldError('email', null)}
+                                /* eslint-enable react/jsx-no-bind */
                             />
                         </JoinFlowStep>
                     );

src/l10n.json

@@ -192,7 +192,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.acceptTermsOfUse": "By creating an account, I accept and agree to the {touLink}.",
+    "registration.acceptTermsOfUse": "By creating an account, you accept and agree to the {touLink}.",
     "registration.usernameStepTitle": "Request a Teacher Account",
     "registration.usernameStepTitleScratcher": "Create a Scratch Account",
     "registration.validationMaxLength": "Sorry, you have exceeded the maximum character limit.",