From 2c75a312b6f7c86539689bfec3927b3695aef55d Mon Sep 17 00:00:00 2001 From: leuryr Date: Tue, 16 Feb 2021 11:51:00 -0500 Subject: [PATCH 1/5] Fix login not propagating to Dawn onboarding --- .../Step0_WelcomeView/WelcomeView.jsx | 24 +++++++++++++++++-- .../Step0_WelcomeView/index.js | 2 ++ 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/app/dawn-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx b/app/dawn-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx index 1abfe815e..a663a0328 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx +++ b/app/dawn-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx @@ -11,7 +11,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { NavLink } from 'react-router-dom'; import { WELCOME } from '../../OnboardingView/OnboardingConstants'; @@ -24,12 +24,32 @@ import { WELCOME } from '../../OnboardingView/OnboardingConstants'; const WelcomeView = (props) => { const { actions } = props; const { setSetupStep } = actions; + + const [getUserResolved, setGetUserResolved] = useState(false); + + const gateSetupStep = (e) => { + if (getUserResolved) { + setSetupStep({ setup_step: WELCOME, origin: WELCOME }); + } else { + e.preventDefault(); + } + }; + + useEffect(() => { + actions.getUser(); + const timer = setTimeout(() => setGetUserResolved(true), 500); + + return () => { + clearTimeout(timer); + }; + }, []); + return (
{t('ghostery_dawn_onboarding_welcome')}
{t('ghostery_dawn_onboarding_welcome_message')}
- setSetupStep({ setup_step: WELCOME, origin: WELCOME })}> + {t('ghostery_dawn_onboarding_lets_do_this')}
diff --git a/app/dawn-hub/Views/OnboardingViews/Step0_WelcomeView/index.js b/app/dawn-hub/Views/OnboardingViews/Step0_WelcomeView/index.js index 58006bd9d..7f75654b7 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step0_WelcomeView/index.js +++ b/app/dawn-hub/Views/OnboardingViews/Step0_WelcomeView/index.js @@ -14,9 +14,11 @@ import { buildReduxHOC } from '../../../../shared-hub/utils'; import WelcomeView from './WelcomeView'; import { setSetupStep } from '../../../../shared-hub/actions/SetupLifecycleActions'; +import { getUser } from '../../../../Account/AccountActions'; const actionCreators = { setSetupStep, + getUser }; export default buildReduxHOC([], actionCreators, WelcomeView); From 8373096317652cdbf4c83fb3658b34af97fd9d2c Mon Sep 17 00:00:00 2001 From: leuryr Date: Tue, 16 Feb 2021 12:05:01 -0500 Subject: [PATCH 2/5] Update snapshot --- .../__tests__/__snapshots__/WelcomeView.test.jsx.snap | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/app/dawn-hub/Views/OnboardingViews/Step0_WelcomeView/__tests__/__snapshots__/WelcomeView.test.jsx.snap b/app/dawn-hub/Views/OnboardingViews/Step0_WelcomeView/__tests__/__snapshots__/WelcomeView.test.jsx.snap index d98093c3e..4c4ccdc84 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step0_WelcomeView/__tests__/__snapshots__/WelcomeView.test.jsx.snap +++ b/app/dawn-hub/Views/OnboardingViews/Step0_WelcomeView/__tests__/__snapshots__/WelcomeView.test.jsx.snap @@ -19,10 +19,11 @@ exports[`app/dawn-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.test.j src="/app/images/hub/welcome/rocketShip.png" /> ghostery_dawn_onboarding_lets_do_this From de38297177c2ea921e80970053bba051799dc3ae Mon Sep 17 00:00:00 2001 From: leuryr Date: Fri, 5 Mar 2021 09:38:19 -0500 Subject: [PATCH 3/5] Include logout option, add toast on logout --- _locales/en/messages.json | 3 +++ .../Step1_CreateAccountView.jsx | 18 +++++++++++++++++- .../Step1_CreateAccountView.scss | 15 +++++++++++++++ .../Step1_CreateAccountView/index.js | 4 +++- .../BlockSettingsView.jsx | 5 +---- .../Step2_BlockSettingsView/index.js | 2 -- app/images/hub/toast/toast-logout.svg | 18 ++++++++++++++++++ .../ToastMessage/ToastMessage.jsx | 2 +- .../ToastMessage/ToastMessage.scss | 4 ++++ 9 files changed, 62 insertions(+), 9 deletions(-) create mode 100644 app/images/hub/toast/toast-logout.svg diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 61de99600..092de4e6c 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1959,6 +1959,9 @@ "ghostery_dawn_onboarding_toast_alert": { "message": "Error: " }, + "ghostery_dawn_onboarding_toast_logout": { + "message": "You are now signed out" + }, "enable_when_paused": { "message": "To use this function, Resume Ghostery." }, diff --git a/app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx b/app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx index 2d8374ef9..ca88b6de5 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx +++ b/app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx @@ -60,7 +60,7 @@ const renderFAQListItem = (icon, label, description) => ( */ const Step1_CreateAccountView = (props) => { const { actions, step, user } = props; - const { setSetupStep, setToast } = actions; + const { setSetupStep, setToast, logout } = actions; const email = user && user.email; const [view, setView] = useState(CREATE_ACCOUNT); @@ -94,6 +94,16 @@ const Step1_CreateAccountView = (props) => { prev(); }; + const handleLogout = () => { + logout().then(() => { + setToast({ + toastMessage: '', + toastClass: 'logout' + }); + setView(SIGN_IN); + }); + }; + const renderSkipLink = () => (
@@ -125,6 +135,12 @@ const Step1_CreateAccountView = (props) => {
)}
+
+ {t('ghostery_dawn_onboarding_or').toLocaleLowerCase()} +
handleLogout()}> + {t('sign_out')} +
+
) : (
diff --git a/app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss b/app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss index 10396b3d7..52f505f9d 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss +++ b/app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss @@ -133,6 +133,21 @@ $color-create-account-form-error-red: #e74055; } } } +.Step1_CreateAccountView__signOutContainer { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 32px; + color: $ghosty-blue; + font-size: 16px; +} +.Step1_CreateAccountView__signOut { + text-decoration: underline; + &:hover { + color: $link-blue; + cursor: pointer; + } +} .Step1_CreateAccountView--addMarginSide { margin-left: 10px; margin-right: 10px; diff --git a/app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountView/index.js b/app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountView/index.js index 2800c1374..818cbdbf8 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountView/index.js +++ b/app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountView/index.js @@ -15,10 +15,12 @@ import { buildReduxHOC } from '../../../../shared-hub/utils'; import Step1_CreateAccountView from './Step1_CreateAccountView'; import { setSetupStep } from '../../../../shared-hub/actions/SetupLifecycleActions'; import setToast from '../../../../shared-hub/actions/ToastActions'; +import { logout } from '../../../../Account/AccountActions'; const actionCreators = { setSetupStep, - setToast + setToast, + logout }; export default buildReduxHOC(['account'], actionCreators, Step1_CreateAccountView); diff --git a/app/dawn-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx b/app/dawn-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx index 594ab7a04..9a0043c08 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx +++ b/app/dawn-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx @@ -145,14 +145,12 @@ class BlockSettingsView extends Component { const { recommendedChoices, enable_ad_block, kindsOfTrackers, enable_anti_tracking, enable_smart_block } = this.state; - const { actions } = this.props; - const { logout } = actions; return (
- logout()}> + {t('ghostery_dawn_onboarding_back')}
@@ -224,7 +222,6 @@ export default BlockSettingsView; // PropTypes ensure we pass required props of the correct type BlockSettingsView.propTypes = { actions: PropTypes.shape({ - logout: PropTypes.func.isRequired, setAntiTracking: PropTypes.func.isRequired, setAdBlock: PropTypes.func.isRequired, setSmartBlocking: PropTypes.func.isRequired, diff --git a/app/dawn-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js b/app/dawn-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js index ec60917d4..908c57686 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js +++ b/app/dawn-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js @@ -14,14 +14,12 @@ import { withRouter } from 'react-router-dom'; import BlockSettingsView from './BlockSettingsView'; import { buildReduxHOC } from '../../../../shared-hub/utils'; -import { logout } from '../../../../Account/AccountActions'; import { setAntiTracking, setAdBlock, setSmartBlocking } from '../../../../shared-hub/actions/AntiSuiteActions'; import setBlockingPolicy from '../../../../shared-hub/actions/BlockingPolicyActions'; import setToast from '../../../../shared-hub/actions/ToastActions'; import { setSetupStep } from '../../../../shared-hub/actions/SetupLifecycleActions'; const actionCreators = { - logout, setAntiTracking, setAdBlock, setSmartBlocking, diff --git a/app/images/hub/toast/toast-logout.svg b/app/images/hub/toast/toast-logout.svg new file mode 100644 index 000000000..f34d1b4ac --- /dev/null +++ b/app/images/hub/toast/toast-logout.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/app/shared-components/ToastMessage/ToastMessage.jsx b/app/shared-components/ToastMessage/ToastMessage.jsx index 95a092ac7..7e4b6c247 100644 --- a/app/shared-components/ToastMessage/ToastMessage.jsx +++ b/app/shared-components/ToastMessage/ToastMessage.jsx @@ -31,7 +31,7 @@ const ToastMessage = ({ return (
- {toastText && ( + {(toastText || dawnToastText) && (
diff --git a/app/shared-components/ToastMessage/ToastMessage.scss b/app/shared-components/ToastMessage/ToastMessage.scss index 81faf55fc..d4d553527 100644 --- a/app/shared-components/ToastMessage/ToastMessage.scss +++ b/app/shared-components/ToastMessage/ToastMessage.scss @@ -32,6 +32,10 @@ background-color: #dff0d8; .callout-text {color: #417505;} } + .logout { + background-color: #f9edbe; + .callout-text { color: #4a4a4a;} + } .ToastMessage__close { background-image: buildIconX(#000000); } From 0865aacba85ce277c4ec6c826fa8d0e56ecd68cd Mon Sep 17 00:00:00 2001 From: leuryr Date: Thu, 11 Mar 2021 11:16:59 -0500 Subject: [PATCH 4/5] Increase setTimeout delay, modify vertical spacing --- .../Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx | 2 +- .../Step1_CreateAccountView/Step1_CreateAccountView.scss | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/app/dawn-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx b/app/dawn-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx index a663a0328..90ce0da95 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx +++ b/app/dawn-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx @@ -37,7 +37,7 @@ const WelcomeView = (props) => { useEffect(() => { actions.getUser(); - const timer = setTimeout(() => setGetUserResolved(true), 500); + const timer = setTimeout(() => setGetUserResolved(true), 1000); return () => { clearTimeout(timer); diff --git a/app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss b/app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss index 52f505f9d..55dab4e55 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss +++ b/app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss @@ -51,7 +51,7 @@ $color-create-account-form-error-red: #e74055; } .Step1_CreateAccountView__alreadySignedIn { - margin-top: 245px; + margin-top: 146px; display: flex; flex-direction: column; justify-content: center; @@ -60,13 +60,14 @@ $color-create-account-form-error-red: #e74055; .Step1_CreateAccountView__email { font-size: 24px; color: $ghosty-blue; + margin-top: 16px; } .Step1_CreateAccountView__ctaButtonContainer { display: flex; justify-content: center; + margin-top: 32px; .Step1_CreateAccountView__ctaButton { - margin: 48px auto 0 auto; min-height: 44px; width: 162px; padding: 7.7px 14px; From 362ce9b45e8f691c5636159bcab33c5e2459fd82 Mon Sep 17 00:00:00 2001 From: leuryr Date: Tue, 16 Mar 2021 08:59:59 -0400 Subject: [PATCH 5/5] Fix sign out toast not showing in some cases --- .../Step1_CreateAccountView/Step1_CreateAccountView.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx b/app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx index 156961bcc..dae51612f 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx +++ b/app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx @@ -96,11 +96,11 @@ const Step1_CreateAccountView = (props) => { const handleLogout = () => { logout().then(() => { + setView(SIGN_IN); setToast({ toastMessage: '', toastClass: 'logout' }); - setView(SIGN_IN); }); };