Merge pull request #3265 from benjiwheeler/join-flow-email-improve

Join flow email improvements

src/components/formik-forms/formik-checkbox.jsx

@@ -8,19 +8,16 @@ require('./formik-forms.scss');
 require('../forms/row.scss');
 
 const FormikCheckboxSubComponent = ({
-    className,
     field,
     id,
     label,
+    labelClassName,
     ...props
 }) => (
     <div className="checkbox">
         <input
             checked={field.value}
-            className={classNames(
-                'formik-checkbox',
-                className
-            )}
+            className="formik-checkbox"
             id={id}
             name={field.name}
             type="checkbox"
@@ -32,8 +29,9 @@ const FormikCheckboxSubComponent = ({
         {label && (
             <label
                 className={classNames(
+                    'formik-checkbox-label',
                     'formik-label',
-                    'formik-checkbox-label'
+                    labelClassName
                 )}
                 htmlFor={id}
             >
@@ -44,7 +42,6 @@ const FormikCheckboxSubComponent = ({
 );
 
 FormikCheckboxSubComponent.propTypes = {
-    className: PropTypes.string,
     field: PropTypes.shape({
         name: PropTypes.string,
         onBlur: PropTypes.function,
@@ -52,31 +49,32 @@ FormikCheckboxSubComponent.propTypes = {
         value: PropTypes.bool
     }),
     id: PropTypes.string,
-    label: PropTypes.string
+    label: PropTypes.string,
+    labelClassName: PropTypes.string
 };
 
 
 const FormikCheckbox = ({
-    className,
     id,
     label,
+    labelClassName,
     name,
     ...props
 }) => (
     <Field
-        className={className}
         component={FormikCheckboxSubComponent}
         id={id}
         label={label}
+        labelClassName={labelClassName}
         name={name}
         {...props}
     />
 );
 
 FormikCheckbox.propTypes = {
-    className: PropTypes.string,
     id: PropTypes.string,
     label: PropTypes.string,
+    labelClassName: PropTypes.string,
     name: PropTypes.string
 };
 

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

@@ -1,9 +1,5 @@
 @import "../../colors";
 
-.formik-checkbox-label {
-    font-weight: 300;
-}
-
 input[type="checkbox"].formik-checkbox {
     display: block;
     float: left;
@@ -14,16 +10,12 @@ input[type="checkbox"].formik-checkbox {
     height: 1.25rem;
     appearance: none;
 
-    &:focus:checked {
-        transition: all .5s ease;
+    &:focus {
+        transition: all .25s ease;
         outline: none;
         box-shadow: 0 0 0 .25rem $ui-blue-25percent;
     }
 
-    &:focus:not(:checked) {
-        outline: none;
-    }
-
     &:checked {
         background-color: $ui-blue;
         text-align: center;

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

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

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

@@ -9,6 +9,7 @@ const FormattedMessage = require('react-intl').FormattedMessage;
 
 const JoinFlowStep = require('./join-flow-step.jsx');
 const FormikInput = require('../../components/formik-forms/formik-input.jsx');
+const FormikCheckbox = require('../../components/formik-forms/formik-checkbox.jsx');
 
 require('./join-flow-steps.scss');
 
@@ -17,12 +18,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 +52,7 @@ class EmailStep extends React.Component {
                         errors,
                         handleSubmit,
                         isSubmitting,
+                        setFieldError,
                         validateField
                     } = props;
                     return (
@@ -89,10 +91,20 @@ 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 */
                             />
+                            <div className="join-flow-email-checkbox-row">
+                                <FormikCheckbox
+                                    id="subscribeCheckbox"
+                                    label={this.props.intl.formatMessage({id: 'registration.receiveEmails'})}
+                                    name="subscribe"
+                                />
+                            </div>
                         </JoinFlowStep>
                     );
                 }}

src/components/join-flow/join-flow-steps.scss

@@ -129,6 +129,15 @@
     margin-left: .5rem;
 }
 
+.modal-inner-content-email {
+    padding-top: 2.9rem;
+}
+
+.join-flow-email-checkbox-row {
+    font-size: .75rem;
+    margin: .25rem .125rem;
+}
+
 a.join-flow-link:link, a.join-flow-link:visited, a.join-flow-link:active {
     text-decoration: underline;
 }

src/l10n.json

@@ -159,7 +159,7 @@
     "registration.classroomInviteNewStudentStepDescription": "Your teacher has invited you to join a class:",
     "registration.confirmYourEmail": "Confirm Your Email",
     "registration.confirmYourEmailDescription": "If you haven't already, please click the link in the confirmation email sent to:",
-    "registration.createAccount": "Create Account",
+    "registration.createAccount": "Create Your Account",
     "registration.createUsername": "Create a username",
     "registration.genderStepTitle": "What's your gender?",
     "registration.genderStepDescription": "Scratch welcomes people of all genders. We will always keep this information private.",
@@ -182,6 +182,7 @@
     "registration.personalStepTitle": "Personal Information",
     "registration.personalStepDescription": "Your individual responses will not be displayed publicly, and will be kept confidential and secure",
     "registration.private": "Scratch will always keep this information private.",
+    "registration.receiveEmails": "I'd like to receive emails from the Scratch Team about project ideas, events, and more.",
     "registration.selectCountry": "select country",
     "registration.studentPersonalStepDescription": "This information will not appear on the Scratch website.",
     "registration.showPassword": "Show password",
@@ -192,7 +193,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.",