From a2e4762e2d39cc78ba9284b95d503c0f2bbd2037 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 1 Jul 2019 19:06:51 -0400 Subject: [PATCH 01/13] Begin implementation of legal consent checkbox --- _locales/en/messages.json | 37 ++++++++++++++++++++++++++ app/panel/components/CreateAccount.jsx | 11 +++++++- app/scss/partials/_account.scss | 7 +++++ 3 files changed, 54 insertions(+), 1 deletion(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 7b98b7bba..4faedcef2 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -2230,5 +2230,42 @@ }, "cliqz_feature_status_off": { "message": "Off" + }, + "create_account_form_legal_consent_checkbox_label": { + "message": "I accept the Terms and Conditions, the Public License Agreement, and consent to data practices found in the Privacy Policy" + }, + "create_account_form_legal_consent_checkbox_label": { + "message": "I accept the $LINK_TERMS_START$Terms and Conditions$LINK_TERMS_END$, the", + "placeholders": { + "link_terms_end": { + "content": "" + }, + "link_terms_start": { + "content": "" + } + } + }, + "account_creation_privacy_statement": { + "message": "Our general $LINK_TERMS_START$Terms and Conditions$LINK_TERMS_END$ and our $LINK_UA_START$License Agreement$LINK_UA_END$ apply. You will find our Privacy Statement $LINK_PS_START$here$LINK_PS_END$.", + "placeholders": { + "link_ps_end": { + "content": "" + }, + "link_ps_start": { + "content": "" + }, + "link_ua_end": { + "content": "" + }, + "link_ua_start": { + "content": "" + }, + "link_terms_end": { + "content": "" + }, + "link_terms_start": { + "content": "" + } + } } } diff --git a/app/panel/components/CreateAccount.jsx b/app/panel/components/CreateAccount.jsx index bf18bb460..918d6fa81 100644 --- a/app/panel/components/CreateAccount.jsx +++ b/app/panel/components/CreateAccount.jsx @@ -32,6 +32,7 @@ class CreateAccount extends React.Component { confirmEmailError: false, firstName: '', lastName: '', + legalConsentChecked: false, password: '', promotionsChecked: true, loading: false, @@ -129,7 +130,7 @@ class CreateAccount extends React.Component { */ render() { const { - email, confirmEmail, firstName, lastName, password, promotionsChecked, loading, emailError, confirmEmailError, passwordInvalidError, passwordLengthError + email, confirmEmail, firstName, lastName, password, promotionsChecked, legalConsentChecked, loading, emailError, confirmEmailError, passwordInvalidError, passwordLengthError } = this.state; const buttonClasses = ClassNames('button ghostery-button', { loading }); return ( @@ -205,6 +206,14 @@ class CreateAccount extends React.Component { +
+
+ +
+
diff --git a/app/scss/partials/_account.scss b/app/scss/partials/_account.scss index 3d7ab7f11..771005c54 100644 --- a/app/scss/partials/_account.scss +++ b/app/scss/partials/_account.scss @@ -227,6 +227,13 @@ p.warning { font-weight: 500; } } + #create-account-legal-consent-checkbox { + margin-bottom: 10px; + label { + font-size: 13px; + font-weight: 500; + } + } #create-account-privacy-container { p#accept-privacy-label { font-size: 12px; From 5a1f223413042a353cca9067dfd6affd7c743267 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 1 Jul 2019 19:16:35 -0400 Subject: [PATCH 02/13] Add Public License and Privacy Policy links --- _locales/en/messages.json | 27 +++++---------------------- 1 file changed, 5 insertions(+), 22 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 4faedcef2..cb18f5460 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -2235,34 +2235,17 @@ "message": "I accept the Terms and Conditions, the Public License Agreement, and consent to data practices found in the Privacy Policy" }, "create_account_form_legal_consent_checkbox_label": { - "message": "I accept the $LINK_TERMS_START$Terms and Conditions$LINK_TERMS_END$, the", + "message": "I accept the $LINK_TERMS_START$Terms and Conditions$LINK_END$, the $LINK_LICENSE_START$Public License Agreement$LINK_END$, and consent to data practices found in the $LINK_PRIVACY_START$Privacy Policy$LINK_END$.", "placeholders": { - "link_terms_end": { + "link_end": { "content": "" }, - "link_terms_start": { - "content": "" - } - } - }, - "account_creation_privacy_statement": { - "message": "Our general $LINK_TERMS_START$Terms and Conditions$LINK_TERMS_END$ and our $LINK_UA_START$License Agreement$LINK_UA_END$ apply. You will find our Privacy Statement $LINK_PS_START$here$LINK_PS_END$.", - "placeholders": { - "link_ps_end": { - "content": "" + "link_license_start": { + "content": "" }, - "link_ps_start": { + "link_privacy_start": { "content": "" }, - "link_ua_end": { - "content": "" - }, - "link_ua_start": { - "content": "" - }, - "link_terms_end": { - "content": "" - }, "link_terms_start": { "content": "" } From 466dd63beaacb073d17da4cfabb7287c07586c72 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 1 Jul 2019 19:18:50 -0400 Subject: [PATCH 03/13] Remove old legal disclaimer from account creation form --- app/panel/components/CreateAccount.jsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/app/panel/components/CreateAccount.jsx b/app/panel/components/CreateAccount.jsx index 918d6fa81..d74fb16dd 100644 --- a/app/panel/components/CreateAccount.jsx +++ b/app/panel/components/CreateAccount.jsx @@ -216,9 +216,6 @@ class CreateAccount extends React.Component {
-
-

-

From 84e44bbcdc5e947830e74dc1085a04f694114a4f Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Mon, 1 Jul 2019 19:38:05 -0400 Subject: [PATCH 04/13] Fix account creation form legal consent checkbox formatting --- app/scss/partials/_account.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/scss/partials/_account.scss b/app/scss/partials/_account.scss index 771005c54..97717f33e 100644 --- a/app/scss/partials/_account.scss +++ b/app/scss/partials/_account.scss @@ -223,15 +223,18 @@ p.warning { #create-account-promotions { margin-bottom: 10px; label { - font-size: 13px; + font-size: 11px; font-weight: 500; } } #create-account-legal-consent-checkbox { margin-bottom: 10px; label { - font-size: 13px; + font-size: 11px; font-weight: 500; + vertical-align: top; + margin-right: 0; + max-width: 94%; } } #create-account-privacy-container { From 52767326cc620e149d54a71f24f9160c4f30d6a0 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 3 Jul 2019 16:16:37 -0400 Subject: [PATCH 05/13] Disable linting for legal terms checkbox label because linter is confused by dangerouslySetInnerHTML --- app/panel/components/CreateAccount.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/panel/components/CreateAccount.jsx b/app/panel/components/CreateAccount.jsx index 5a82fd443..db2c42a82 100644 --- a/app/panel/components/CreateAccount.jsx +++ b/app/panel/components/CreateAccount.jsx @@ -213,6 +213,7 @@ class CreateAccount extends React.Component {
From 2f8662d607991e973001aa15f7d4f92a37db07b0 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 3 Jul 2019 16:28:01 -0400 Subject: [PATCH 06/13] Block account creation in extension if legal consent checkbox is unchecked. Implement red text error state. --- app/panel/components/CreateAccount.jsx | 15 ++++++++++++--- app/scss/partials/_account.scss | 5 +++++ 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/app/panel/components/CreateAccount.jsx b/app/panel/components/CreateAccount.jsx index db2c42a82..4a1b295e0 100644 --- a/app/panel/components/CreateAccount.jsx +++ b/app/panel/components/CreateAccount.jsx @@ -33,6 +33,7 @@ class CreateAccount extends React.Component { firstName: '', lastName: '', legalConsentChecked: false, + legalConsentNotCheckedError: false, password: '', promotionsChecked: true, loading: false, @@ -68,7 +69,7 @@ class CreateAccount extends React.Component { e.preventDefault(); this.setState({ loading: true }, () => { const { - email, confirmEmail, firstName, lastName, password, promotionsChecked + email, confirmEmail, firstName, lastName, legalConsentChecked, password, promotionsChecked } = this.state; this.setState({ loading: true }, () => { if (!validateEmail(email)) { @@ -99,10 +100,18 @@ class CreateAccount extends React.Component { } return; } + if (!legalConsentChecked) { + this.setState({ + legalConsentNotCheckedError: true, + loading: false, + }); + return; + } this.setState({ emailError: false, confirmEmailError: false, + legalConsentNotCheckedError: false, passwordInvalidError: false, passwordLengthError: false, }, () => { @@ -130,7 +139,7 @@ class CreateAccount extends React.Component { */ render() { const { - email, confirmEmail, firstName, lastName, password, promotionsChecked, legalConsentChecked, loading, emailError, confirmEmailError, passwordInvalidError, passwordLengthError + email, confirmEmail, firstName, lastName, password, promotionsChecked, legalConsentChecked, loading, emailError, confirmEmailError, legalConsentNotCheckedError, passwordInvalidError, passwordLengthError } = this.state; const buttonClasses = ClassNames('button ghostery-button', { loading }); return ( @@ -211,7 +220,7 @@ class CreateAccount extends React.Component {
-
From 77992381ffb3a5611ac4beea5bca7d9f689bb273 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 17 Jul 2019 09:00:19 -0400 Subject: [PATCH 08/13] Swap in correct legal consent string for hub account creation form. Add and pass through checkbox state bool. --- .../Views/CreateAccountView/CreateAccountView.jsx | 12 ++++++++---- .../CreateAccountView/CreateAccountViewContainer.jsx | 4 ++++ 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/app/hub/Views/CreateAccountView/CreateAccountView.jsx b/app/hub/Views/CreateAccountView/CreateAccountView.jsx index 81f74d564..7031fd69f 100644 --- a/app/hub/Views/CreateAccountView/CreateAccountView.jsx +++ b/app/hub/Views/CreateAccountView/CreateAccountView.jsx @@ -33,6 +33,7 @@ const CreateAccountView = (props) => { password, passwordInvalidError, passwordLengthError, + legalConsentChecked, promotionsChecked, handleInputChange, handleCheckboxChange, @@ -167,12 +168,14 @@ const CreateAccountView = (props) => {
- - {t('hub_create_account_checkbox_promotions')} - +
Date: Wed, 17 Jul 2019 09:40:57 -0400 Subject: [PATCH 09/13] Implement legal consent checkbox state change handling --- .../CreateAccountView/CreateAccountView.jsx | 18 +++++++++------ .../CreateAccountViewContainer.jsx | 23 +++++++++++++------ 2 files changed, 27 insertions(+), 14 deletions(-) diff --git a/app/hub/Views/CreateAccountView/CreateAccountView.jsx b/app/hub/Views/CreateAccountView/CreateAccountView.jsx index 7031fd69f..c4b0474b6 100644 --- a/app/hub/Views/CreateAccountView/CreateAccountView.jsx +++ b/app/hub/Views/CreateAccountView/CreateAccountView.jsx @@ -36,7 +36,8 @@ const CreateAccountView = (props) => { legalConsentChecked, promotionsChecked, handleInputChange, - handleCheckboxChange, + handleLegalConsentCheckboxChange, + handlePromotionsCheckboxChange, handleSubmit, } = props; @@ -168,21 +169,23 @@ const CreateAccountView = (props) => {
- + {t('hub_create_account_checkbox_promotions')}
@@ -224,13 +227,14 @@ CreateAccountView.propTypes = { confirmEmailError: PropTypes.bool.isRequired, firstName: PropTypes.string.isRequired, lastName: PropTypes.string.isRequired, + legalConsentChecked: PropTypes.bool.isRequired, password: PropTypes.string.isRequired, passwordInvalidError: PropTypes.bool.isRequired, passwordLengthError: PropTypes.bool.isRequired, - legalConsentChecked: PropTypes.bool.isRequired, promotionsChecked: PropTypes.bool.isRequired, handleInputChange: PropTypes.func.isRequired, - handleCheckboxChange: PropTypes.func.isRequired, + handleLegalConsentCheckboxChange: PropTypes.func.isRequired, + handlePromotionsCheckboxChange: PropTypes.func.isRequired, handleSubmit: PropTypes.func.isRequired, }; diff --git a/app/hub/Views/CreateAccountView/CreateAccountViewContainer.jsx b/app/hub/Views/CreateAccountView/CreateAccountViewContainer.jsx index dac09eed8..db95d7236 100644 --- a/app/hub/Views/CreateAccountView/CreateAccountViewContainer.jsx +++ b/app/hub/Views/CreateAccountView/CreateAccountViewContainer.jsx @@ -37,10 +37,10 @@ class CreateAccountViewContainer extends Component { confirmEmailError: false, firstName: '', lastName: '', + legalConsentChecked: false, password: '', passwordInvalidError: false, passwordLengthError: false, - legalConsentChecked: false, promotionsChecked: true, validateInput: false, }; @@ -94,9 +94,17 @@ class CreateAccountViewContainer extends Component { } /** - * Update input checkbox values by updating state. + * Update legal consetnt checkbox value by updating state + */ + _handleLegalConsentCheckboxChange = () => { + const legalConsentChecked = !this.state.legalConsentChecked; + this.setState({ legalConsentChecked }); + } + + /** + * Update promotions checkbox value by updating state */ - _handleCheckboxChange = () => { + _handlePromotionsCheckboxChange = () => { const promotionsChecked = !this.state.promotionsChecked; this.setState({ promotionsChecked }); } @@ -112,8 +120,8 @@ class CreateAccountViewContainer extends Component { confirmEmail, firstName, lastName, - password, legalConsentChecked, + password, promotionsChecked } = this.state; const emailIsValid = email && validateEmail(email); @@ -168,10 +176,10 @@ class CreateAccountViewContainer extends Component { confirmEmailError, firstName, lastName, + legalConsentChecked, password, passwordInvalidError, passwordLengthError, - legalConsentChecked, promotionsChecked, } = this.state; const createAccountChildProps = { @@ -181,13 +189,14 @@ class CreateAccountViewContainer extends Component { confirmEmailError, firstName, lastName, + legalConsentChecked, password, passwordInvalidError, passwordLengthError, - legalConsentChecked, promotionsChecked, handleInputChange: this._handleInputChange, - handleCheckboxChange: this._handleCheckboxChange, + handleLegalConsentCheckboxChange: this._handleLegalConsentCheckboxChange, + handlePromotionsCheckboxChange: this._handlePromotionsCheckboxChange, handleSubmit: this._handleCreateAccountAttempt }; const signedInChildProps = { From e8232ac8a7f6b289d8be0ae4cf6a11778c601c32 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 17 Jul 2019 12:02:40 -0400 Subject: [PATCH 10/13] Improve and tidy legal consent checkbox UI in hub --- .../Views/CreateAccountView/CreateAccountView.jsx | 14 +++++++++----- .../CreateAccountView/CreateAccountView.scss | 15 ++++++++++++--- .../CreateAccountViewContainer.jsx | 6 +++++- .../ToggleCheckbox/ToggleCheckbox.scss | 5 +++++ 4 files changed, 31 insertions(+), 9 deletions(-) diff --git a/app/hub/Views/CreateAccountView/CreateAccountView.jsx b/app/hub/Views/CreateAccountView/CreateAccountView.jsx index c4b0474b6..432463ee7 100644 --- a/app/hub/Views/CreateAccountView/CreateAccountView.jsx +++ b/app/hub/Views/CreateAccountView/CreateAccountView.jsx @@ -34,6 +34,7 @@ const CreateAccountView = (props) => { passwordInvalidError, passwordLengthError, legalConsentChecked, + legalConsentNotCheckedError, promotionsChecked, handleInputChange, handleLegalConsentCheckboxChange, @@ -47,6 +48,9 @@ const CreateAccountView = (props) => { const confirmInputClassNames = ClassNames('CreateAccountView__inputBox', { error: confirmEmailError, }); + const legalConsentCheckboxInputLabelClassNames = ClassNames('CreateAccountView__inputLabel clickable', { + error: legalConsentNotCheckedError, + }); const passwordInputClassNames = ClassNames('CreateAccountView__inputBox', { error: passwordInvalidError || passwordLengthError, }); @@ -167,22 +171,22 @@ const CreateAccountView = (props) => { )}
-
+
-
+
diff --git a/app/hub/Views/CreateAccountView/CreateAccountView.scss b/app/hub/Views/CreateAccountView/CreateAccountView.scss index bc3b7012c..489e3ecbe 100644 --- a/app/hub/Views/CreateAccountView/CreateAccountView.scss +++ b/app/hub/Views/CreateAccountView/CreateAccountView.scss @@ -11,6 +11,8 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ +$color-create-account-form-error-red: #e74055; + // Create Account View .CreateAccountView { padding-top: 80px; @@ -54,17 +56,17 @@ } .CreateAccountView__inputBox.error { margin-bottom: 8px; - border-color: #e74055; + border-color: $color-create-account-form-error-red; } .CreateAccountView__inputBox:focus { // Foundation Overrides box-shadow: none; - border-color: #4a4a4a; + border-color: $color-create-account-form-error-red; } .CreateAccountView__inputError { font-size: 12; line-height: 14px; - color: #e74055; + color: $color-create-account-form-error-red; margin-bottom: 13px; } .CreateAccountView__link { @@ -77,6 +79,13 @@ .CreateAccountView__button { min-width: 180px; } +.CreateAccountView__inputLabel { + flex-grow: 1; // ensure left-justify alignment in single column layout + padding-top: 10px; // align with checkbox top +} +.CreateAccountView__inputLabel.error{ + color: $color-create-account-form-error-red; +} @media only screen and (max-width: 740px) { .CreateAccountView { padding-top: 20px; diff --git a/app/hub/Views/CreateAccountView/CreateAccountViewContainer.jsx b/app/hub/Views/CreateAccountView/CreateAccountViewContainer.jsx index db95d7236..39e7a5857 100644 --- a/app/hub/Views/CreateAccountView/CreateAccountViewContainer.jsx +++ b/app/hub/Views/CreateAccountView/CreateAccountViewContainer.jsx @@ -38,6 +38,7 @@ class CreateAccountViewContainer extends Component { firstName: '', lastName: '', legalConsentChecked: false, + legalConsentNotCheckedError: false, password: '', passwordInvalidError: false, passwordLengthError: false, @@ -133,12 +134,13 @@ class CreateAccountViewContainer extends Component { this.setState({ emailError: !emailIsValid, confirmEmailError: !confirmIsValid, + legalConsentNotCheckedError: !legalConsentChecked, passwordInvalidError: invalidChars, passwordLengthError: invalidLength, validateInput: true, }); - if (!emailIsValid || !confirmIsValid || !passwordIsValid) { + if (!emailIsValid || !confirmIsValid || !legalConsentChecked || !passwordIsValid) { return; } this.props.actions.setToast({ @@ -177,6 +179,7 @@ class CreateAccountViewContainer extends Component { firstName, lastName, legalConsentChecked, + legalConsentNotCheckedError, password, passwordInvalidError, passwordLengthError, @@ -190,6 +193,7 @@ class CreateAccountViewContainer extends Component { firstName, lastName, legalConsentChecked, + legalConsentNotCheckedError, password, passwordInvalidError, passwordLengthError, diff --git a/app/shared-components/ToggleCheckbox/ToggleCheckbox.scss b/app/shared-components/ToggleCheckbox/ToggleCheckbox.scss index 179335ff4..07999cbe5 100644 --- a/app/shared-components/ToggleCheckbox/ToggleCheckbox.scss +++ b/app/shared-components/ToggleCheckbox/ToggleCheckbox.scss @@ -17,6 +17,7 @@ width: 48px; padding: 12px; cursor: pointer; + flex-shrink: 0; } .ToggleCheckbox path { fill: #6d6d6d; @@ -24,3 +25,7 @@ .ToggleCheckbox.ToggleCheckbox--active path { fill: #1dafed; } +.ToggleCheckbox--flush-left { + width: 36px; + padding-left: 0px; +} From da542fa53bb6ad8766a2f154caf307945f5b5b02 Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 17 Jul 2019 12:04:46 -0400 Subject: [PATCH 11/13] Update hub account creation form snapshots --- .../CreateAccountView.test.jsx.snap | 58 ++++++++++++++++--- 1 file changed, 50 insertions(+), 8 deletions(-) diff --git a/app/hub/Views/CreateAccountView/__tests__/__snapshots__/CreateAccountView.test.jsx.snap b/app/hub/Views/CreateAccountView/__tests__/__snapshots__/CreateAccountView.test.jsx.snap index 7c9fd68cb..521f262e7 100644 --- a/app/hub/Views/CreateAccountView/__tests__/__snapshots__/CreateAccountView.test.jsx.snap +++ b/app/hub/Views/CreateAccountView/__tests__/__snapshots__/CreateAccountView.test.jsx.snap @@ -145,11 +145,33 @@ exports[`app/hub/Views/CreateAccount component Snapshot tests with react-test-re className="columns small-12 medium-5" >
+ + + +
+ +
+
+
hub_create_account_checkbox_promotions @@ -388,11 +409,33 @@ exports[`app/hub/Views/CreateAccount component Snapshot tests with react-test-re className="columns small-12 medium-5" >
+ + + +
+ +
+
+
hub_create_account_checkbox_promotions From b5a99d3e9fa6a6643295d1481819d12aaff6176c Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Wed, 17 Jul 2019 12:11:46 -0400 Subject: [PATCH 12/13] Reverse order of checkboxes in extension account creation form to match spec --- app/panel/components/CreateAccount.jsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/app/panel/components/CreateAccount.jsx b/app/panel/components/CreateAccount.jsx index 4a1b295e0..fab828e02 100644 --- a/app/panel/components/CreateAccount.jsx +++ b/app/panel/components/CreateAccount.jsx @@ -212,18 +212,18 @@ class CreateAccount extends React.Component {
-
- - +
-
From 9eaa3ae583f0a92d5dc2b927af29a491b62832de Mon Sep 17 00:00:00 2001 From: ilyazarembsky Date: Thu, 18 Jul 2019 11:56:45 -0400 Subject: [PATCH 13/13] Change setState to use callback in hub account creation form checkbox click handlers --- .../Views/CreateAccountView/CreateAccountViewContainer.jsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/app/hub/Views/CreateAccountView/CreateAccountViewContainer.jsx b/app/hub/Views/CreateAccountView/CreateAccountViewContainer.jsx index 39e7a5857..f44f9cf34 100644 --- a/app/hub/Views/CreateAccountView/CreateAccountViewContainer.jsx +++ b/app/hub/Views/CreateAccountView/CreateAccountViewContainer.jsx @@ -98,16 +98,14 @@ class CreateAccountViewContainer extends Component { * Update legal consetnt checkbox value by updating state */ _handleLegalConsentCheckboxChange = () => { - const legalConsentChecked = !this.state.legalConsentChecked; - this.setState({ legalConsentChecked }); + this.setState(prevState => ({ legalConsentChecked: !prevState.legalConsentChecked })); } /** * Update promotions checkbox value by updating state */ _handlePromotionsCheckboxChange = () => { - const promotionsChecked = !this.state.promotionsChecked; - this.setState({ promotionsChecked }); + this.setState(prevState => ({ promotionsChecked: !prevState.promotionsChecked })); } /**