Add ToS footer to email step, make next button Create Account

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

@@ -55,8 +55,10 @@ class EmailStep extends React.Component {
                     return (
                         <JoinFlowStep
                             description={this.props.intl.formatMessage({id: 'registration.emailStepDescription'})}
+                            footerMessage={this.props.intl.formatMessage({id: 'registration.acceptTermsOfService'})}
                             headerImgSrc="/images/hoc/getting-started.jpg"
                             innerContentClassName="modal-inner-content-email"
+                            nextButton={this.props.intl.formatMessage({id: 'registration.createAccount'})}
                             title={this.props.intl.formatMessage({id: 'registration.emailStepTitle'})}
                             waiting={isSubmitting}
                             onSubmit={handleSubmit}

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

@@ -12,6 +12,7 @@ const JoinFlowStep = ({
     children,
     className,
     description,
+    footerMessage,
     headerImgSrc,
     innerContentClassName,
     nextButton,
@@ -47,6 +48,11 @@ const JoinFlowStep = ({
                 {children}
             </ModalInnerContent>
         </div>
+        {footerMessage && (
+            <div className="join-flow-footer-message">
+                {footerMessage}
+            </div>
+        )}
         <NextStepButton
             content={nextButton}
             waiting={waiting}
@@ -58,6 +64,7 @@ JoinFlowStep.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
     description: PropTypes.string,
+    footerMessage: PropTypes.string,
     headerImgSrc: PropTypes.string,
     innerContentClassName: PropTypes.string,
     nextButton: PropTypes.node,

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

@@ -33,3 +33,12 @@
     border-top-left-radius: 1rem;
     border-top-right-radius: 1rem;
 }
+
+.join-flow-footer-message {
+    width: 100%;
+    padding: 1.125rem 1.5rem 1.125rem;
+    background-color: $ui-blue-25percent;
+    font-size: .75rem;
+    font-weight: 600;
+    color: $ui-blue;
+}

src/l10n.json

@@ -153,6 +153,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.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.",
@@ -184,6 +185,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.acceptTermsOfService": "By creating an account, I accept and agree to the Terms of Service.",
     "registration.usernameStepTitle": "Request a Teacher Account",
     "registration.usernameStepTitleScratcher": "Create a Scratch Account",
     "registration.validationMaxLength": "Sorry, you have exceeded the maximum character limit.",