From 8f5f89abfdea8e81c0b66834d92af6c802def04d Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Fri, 16 Aug 2019 16:22:33 -0400 Subject: [PATCH 1/4] improve email step in several ways --- src/components/formik-forms/formik-input.scss | 5 +++++ src/components/formik-forms/input.scss | 7 ------- src/components/join-flow/email-step.jsx | 14 +++++++++----- src/l10n.json | 2 +- 4 files changed, 15 insertions(+), 13 deletions(-) delete mode 100644 src/components/formik-forms/input.scss diff --git a/src/components/formik-forms/formik-input.scss b/src/components/formik-forms/formik-input.scss index 3cf483877..fa739015a 100644 --- a/src/components/formik-forms/formik-input.scss +++ b/src/components/formik-forms/formik-input.scss @@ -25,4 +25,9 @@ outline: none; } } + + &::placeholder { + font-style: italic; + color: $type-gray-75percent; + } } diff --git a/src/components/formik-forms/input.scss b/src/components/formik-forms/input.scss deleted file mode 100644 index 1ac2a0b7e..000000000 --- a/src/components/formik-forms/input.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import "../../colors"; -@import "../../frameless"; - -.input::placeholder { - font-style: italic; - color: $type-gray-75percent; -} diff --git a/src/components/join-flow/email-step.jsx b/src/components/join-flow/email-step.jsx index 1f89b15fb..3533d00e4 100644 --- a/src/components/join-flow/email-step.jsx +++ b/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 */ /> ); diff --git a/src/l10n.json b/src/l10n.json index 098033b98..23d5fdc3f 100644 --- a/src/l10n.json +++ b/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.", From 5b5ac6a66fcb0ce4816d277fe2f695c47e017b85 Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Fri, 16 Aug 2019 17:13:24 -0400 Subject: [PATCH 2/4] added email subscribe checkbox --- src/components/formik-forms/formik-checkbox.scss | 12 ++---------- src/components/join-flow/email-step.jsx | 8 ++++++++ src/components/join-flow/join-flow-steps.scss | 9 +++++++++ src/l10n.json | 1 + 4 files changed, 20 insertions(+), 10 deletions(-) diff --git a/src/components/formik-forms/formik-checkbox.scss b/src/components/formik-forms/formik-checkbox.scss index 66c302587..ba8844d21 100644 --- a/src/components/formik-forms/formik-checkbox.scss +++ b/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; diff --git a/src/components/join-flow/email-step.jsx b/src/components/join-flow/email-step.jsx index 3533d00e4..8a7728684 100644 --- a/src/components/join-flow/email-step.jsx +++ b/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'); @@ -97,6 +98,13 @@ class EmailStep extends React.Component { onFocus={() => setFieldError('email', null)} /* eslint-enable react/jsx-no-bind */ /> +
+ +
); }} diff --git a/src/components/join-flow/join-flow-steps.scss b/src/components/join-flow/join-flow-steps.scss index b89be6b63..1fca7c9fd 100644 --- a/src/components/join-flow/join-flow-steps.scss +++ b/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; } diff --git a/src/l10n.json b/src/l10n.json index 23d5fdc3f..5252d06ad 100644 --- a/src/l10n.json +++ b/src/l10n.json @@ -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", From a609709f41469beda88c35a3a46548128800849c Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Fri, 16 Aug 2019 17:13:56 -0400 Subject: [PATCH 3/4] ability to pass formik checkbox label classname --- .../formik-forms/formik-checkbox.jsx | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/src/components/formik-forms/formik-checkbox.jsx b/src/components/formik-forms/formik-checkbox.jsx index c9ff7e471..804c4b855 100644 --- a/src/components/formik-forms/formik-checkbox.jsx +++ b/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 }) => (
@@ -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 }) => ( ); FormikCheckbox.propTypes = { - className: PropTypes.string, id: PropTypes.string, label: PropTypes.string, + labelClassName: PropTypes.string, name: PropTypes.string }; From 18605ea04791977cdd79e0328d18682e6a7b9312 Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Fri, 16 Aug 2019 17:51:07 -0400 Subject: [PATCH 4/4] create your account --- src/l10n.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/l10n.json b/src/l10n.json index 5252d06ad..f07a9840b 100644 --- a/src/l10n.json +++ b/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.",