Merge pull request #3204 from benjiwheeler/join-flow-email-step

formatted email step, added input

package.json

@@ -72,6 +72,7 @@
     "copy-webpack-plugin": "0.2.0",
     "create-react-class": "15.6.2",
     "css-loader": "0.23.1",
+    "email-validator": "2.0.4",
     "enzyme": "3.10.0",
     "enzyme-adapter-react-16": "1.14.0",
     "eslint": "5.16.0",

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

@@ -5,6 +5,7 @@ import {Field} from 'formik';
 
 const ValidationMessage = require('../forms/validation-message.jsx');
 
+require('./input.scss');
 require('../forms/input.scss');
 require('../forms/row.scss');
 

src/components/formik-forms/input.scss

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

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

@@ -1,10 +1,13 @@
 const bindAll = require('lodash.bindall');
+const classNames = require('classnames');
 const React = require('react');
 const PropTypes = require('prop-types');
 import {Formik} from 'formik';
 const {injectIntl, intlShape} = require('react-intl');
+const emailValidator = require('email-validator');
 
 const JoinFlowStep = require('./join-flow-step.jsx');
+const FormikInput = require('../../components/formik-forms/formik-input.jsx');
 
 require('./join-flow-steps.scss');
 
@@ -13,9 +16,18 @@ class EmailStep extends React.Component {
         super(props);
         bindAll(this, [
             'handleValidSubmit',
+            'validateEmailIfPresent',
             'validateForm'
         ]);
     }
+    validateEmailIfPresent (email) {
+        if (!email) return null; // skip validation if email is blank; null indicates valid
+        const isValidLocally = emailValidator.validate(email);
+        if (isValidLocally) {
+            return null; // TODO: validate email address remotely
+        }
+        return this.props.intl.formatMessage({id: 'registration.validationEmailInvalid'});
+    }
     validateForm () {
         return {};
     }
@@ -35,17 +47,35 @@ class EmailStep extends React.Component {
             >
                 {props => {
                     const {
+                        errors,
                         handleSubmit,
-                        isSubmitting
+                        isSubmitting,
+                        validateField
                     } = props;
                     return (
                         <JoinFlowStep
                             description={this.props.intl.formatMessage({id: 'registration.emailStepDescription'})}
                             headerImgSrc="/images/hoc/getting-started.jpg"
+                            innerContentClassName="modal-inner-content-email"
                             title={this.props.intl.formatMessage({id: 'registration.emailStepTitle'})}
                             waiting={isSubmitting}
                             onSubmit={handleSubmit}
-                        />
+                        >
+                            <FormikInput
+                                className={classNames(
+                                    'join-flow-input',
+                                    'join-flow-input-tall',
+                                    {fail: errors.email}
+                                )}
+                                error={errors.email}
+                                id="email"
+                                name="email"
+                                placeholder={this.props.intl.formatMessage({id: 'general.emailAddress'})}
+                                validate={this.validateEmailIfPresent}
+                                validationClassName="validation-full-width-input"
+                                onBlur={() => validateField('email')} // eslint-disable-line react/jsx-no-bind
+                            />
+                        </JoinFlowStep>
                     );
                 }}
             </Formik>
@@ -58,4 +88,5 @@ EmailStep.propTypes = {
     onNextStep: PropTypes.func
 };
 
+
 module.exports = injectIntl(EmailStep);

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

@@ -13,6 +13,7 @@ const JoinFlowStep = ({
     className,
     description,
     headerImgSrc,
+    innerContentClassName,
     nextButton,
     onSubmit,
     title,
@@ -28,7 +29,8 @@ const JoinFlowStep = ({
             <ModalInnerContent
                 className={classNames(
                     'join-flow-inner-content',
-                    className
+                    className,
+                    innerContentClassName
                 )}
             >
                 {title && (
@@ -57,6 +59,7 @@ JoinFlowStep.propTypes = {
     className: PropTypes.string,
     description: PropTypes.string,
     headerImgSrc: PropTypes.string,
+    innerContentClassName: PropTypes.string,
     nextButton: PropTypes.node,
     onSubmit: PropTypes.func,
     title: PropTypes.string,

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

@@ -13,6 +13,10 @@
     }
 }
 
+.join-flow-input-tall {
+    height: 3rem;
+}
+
 .join-flow-input-title {
     font-weight: bold;
     margin-bottom: .5rem;
@@ -93,3 +97,7 @@
     height: 2rem;
     margin-left: .5rem;
 }
+
+.modal-inner-content-email {
+    padding-top: 2.9rem;
+}

src/l10n.json

@@ -20,7 +20,7 @@
     "general.create": "Create",
     "general.credits": "Credits",
     "general.dmca": "DMCA",
-    "general.emailAddress": "Email Address",
+    "general.emailAddress": "Email address",
     "general.english": "English",
     "general.error": "Oops! Something went wrong",
     "general.errorIdentifier": "Your error was logged with id {errorId}",
@@ -196,6 +196,7 @@
     "registration.validationUsernameExists": "Sorry, that username already exists",
     "registration.validationUsernameVulgar": "Hmm, that looks inappropriate",
     "registration.validationUsernameInvalid": "Invalid username",
+    "registration.validationEmailInvalid": "Email doesn’t look right. Try another?",
     "registration.waitForApproval": "Wait for Approval",
     "registration.waitForApprovalDescription": "You can log into your Scratch Account now, but the features specific to Teachers are not yet available. Your information is being reviewed. Please be patient, the approval process can take up to one day. You will receive an email indicating your account has been upgraded once your account has been approved.",
     "registration.welcomeStepDescription": "You have successfully set up a Scratch account! You are now a member of the class:",