From 6b1b4d7f3692d5969486199649bb64647248d5bb Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Sat, 10 Aug 2019 23:18:33 -0400
Subject: [PATCH 1/5] Add ToS footer to email step, make next button Create
 Account

---
 src/components/join-flow/email-step.jsx      | 2 ++
 src/components/join-flow/join-flow-step.jsx  | 7 +++++++
 src/components/join-flow/join-flow-step.scss | 9 +++++++++
 src/l10n.json                                | 2 ++
 4 files changed, 20 insertions(+)

diff --git a/src/components/join-flow/email-step.jsx b/src/components/join-flow/email-step.jsx
index baf3b46b4..f39697556 100644
--- a/src/components/join-flow/email-step.jsx
+++ b/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}
diff --git a/src/components/join-flow/join-flow-step.jsx b/src/components/join-flow/join-flow-step.jsx
index b1b738778..26a41950f 100644
--- a/src/components/join-flow/join-flow-step.jsx
+++ b/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,
diff --git a/src/components/join-flow/join-flow-step.scss b/src/components/join-flow/join-flow-step.scss
index 3ddb67718..fc0694cf6 100644
--- a/src/components/join-flow/join-flow-step.scss
+++ b/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;
+}
diff --git a/src/l10n.json b/src/l10n.json
index 8cc1b467f..26775828a 100644
--- a/src/l10n.json
+++ b/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.",

From 8469e776228d9daa629088fc92a09a691ff1279e Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Tue, 13 Aug 2019 12:15:53 -0400
Subject: [PATCH 2/5] change Terms of Service to Terms of Use

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

diff --git a/src/l10n.json b/src/l10n.json
index 26775828a..3be867b83 100644
--- a/src/l10n.json
+++ b/src/l10n.json
@@ -185,7 +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.acceptTermsOfUse": "By creating an account, I 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.",

From 7b70612e028945296b7008c5865aeba354b58eb3 Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Tue, 13 Aug 2019 12:16:16 -0400
Subject: [PATCH 3/5] center email terms of use footer

---
 src/components/join-flow/join-flow-step.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/join-flow/join-flow-step.scss b/src/components/join-flow/join-flow-step.scss
index fc0694cf6..f16bcc51c 100644
--- a/src/components/join-flow/join-flow-step.scss
+++ b/src/components/join-flow/join-flow-step.scss
@@ -40,5 +40,6 @@
     background-color: $ui-blue-25percent;
     font-size: .75rem;
     font-weight: 600;
+    text-align: center;
     color: $ui-blue;
 }

From 30e68db79e9303dfa4f68d208e434ff0adce7749 Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Tue, 13 Aug 2019 12:16:42 -0400
Subject: [PATCH 4/5] make terms of use a link in email footer

---
 src/components/join-flow/email-step.jsx     | 18 +++++++++++++++++-
 src/components/join-flow/join-flow-step.jsx |  8 ++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/join-flow/email-step.jsx b/src/components/join-flow/email-step.jsx
index f39697556..3d598a91f 100644
--- a/src/components/join-flow/email-step.jsx
+++ b/src/components/join-flow/email-step.jsx
@@ -5,6 +5,7 @@ const PropTypes = require('prop-types');
 import {Formik} from 'formik';
 const {injectIntl, intlShape} = require('react-intl');
 const emailValidator = require('email-validator');
+const FormattedMessage = require('react-intl').FormattedMessage;
 
 const JoinFlowStep = require('./join-flow-step.jsx');
 const FormikInput = require('../../components/formik-forms/formik-input.jsx');
@@ -55,7 +56,22 @@ class EmailStep extends React.Component {
                     return (
                         <JoinFlowStep
                             description={this.props.intl.formatMessage({id: 'registration.emailStepDescription'})}
-                            footerMessage={this.props.intl.formatMessage({id: 'registration.acceptTermsOfService'})}
+                            footerContent={(
+                                <FormattedMessage
+                                    id="registration.acceptTermsOfUse"
+                                    values={{
+                                        touLink: (
+                                            <a
+                                                className="join-flow-link"
+                                                href="/terms_of_use"
+                                                target="_blank"
+                                            >
+                                                <FormattedMessage id="general.termsOfUse" />
+                                            </a>
+                                        )
+                                    }}
+                                />
+                            )}
                             headerImgSrc="/images/hoc/getting-started.jpg"
                             innerContentClassName="modal-inner-content-email"
                             nextButton={this.props.intl.formatMessage({id: 'registration.createAccount'})}
diff --git a/src/components/join-flow/join-flow-step.jsx b/src/components/join-flow/join-flow-step.jsx
index 26a41950f..c4dce75d7 100644
--- a/src/components/join-flow/join-flow-step.jsx
+++ b/src/components/join-flow/join-flow-step.jsx
@@ -12,7 +12,7 @@ const JoinFlowStep = ({
     children,
     className,
     description,
-    footerMessage,
+    footerContent,
     headerImgSrc,
     innerContentClassName,
     nextButton,
@@ -48,9 +48,9 @@ const JoinFlowStep = ({
                 {children}
             </ModalInnerContent>
         </div>
-        {footerMessage && (
+        {footerContent && (
             <div className="join-flow-footer-message">
-                {footerMessage}
+                {footerContent}
             </div>
         )}
         <NextStepButton
@@ -64,7 +64,7 @@ JoinFlowStep.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
     description: PropTypes.string,
-    footerMessage: PropTypes.string,
+    footerContent: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     headerImgSrc: PropTypes.string,
     innerContentClassName: PropTypes.string,
     nextButton: PropTypes.node,

From d88661113aef4f176a860b9b9533e94c395f75b4 Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Tue, 13 Aug 2019 12:17:15 -0400
Subject: [PATCH 5/5] make terms of use link underlined

---
 src/components/join-flow/join-flow-steps.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/join-flow/join-flow-steps.scss b/src/components/join-flow/join-flow-steps.scss
index f907e6f0a..06ff7b4e3 100644
--- a/src/components/join-flow/join-flow-steps.scss
+++ b/src/components/join-flow/join-flow-steps.scss
@@ -101,3 +101,7 @@
 .modal-inner-content-email {
     padding-top: 2.9rem;
 }
+
+a.join-flow-link:link, a.join-flow-link:visited, a.join-flow-link:active {
+    text-decoration: underline;
+}