diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 8f73944d9..258982fe9 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/Step0_WelcomeView/WelcomeView.jsx b/app/dawn-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx index 897a2a95b..b8f7a9a41 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 { ONBOARDING, WELCOME, SETUP_STARTED } from '../../OnboardingView/OnboardingConstants'; @@ -24,12 +24,36 @@ import { ONBOARDING, WELCOME, SETUP_STARTED } from '../../OnboardingView/Onboard const WelcomeView = (props) => { const { actions } = props; const { setSetupStep } = actions; + + const [getUserResolved, setGetUserResolved] = useState(false); + + const gateSetupStep = (e) => { + if (getUserResolved) { + setSetupStep({ + setup_step: WELCOME, + dawn_setup_number: SETUP_STARTED, + origin: ONBOARDING + }); + } else { + e.preventDefault(); + } + }; + + useEffect(() => { + actions.getUser(); + const timer = setTimeout(() => setGetUserResolved(true), 1000); + + return () => { + clearTimeout(timer); + }; + }, []); + return (
{t('ghostery_dawn_onboarding_welcome')}
{t('ghostery_dawn_onboarding_welcome_message')}
- setSetupStep({ setup_step: WELCOME, dawn_setup_number: SETUP_STARTED, origin: ONBOARDING })}> + {t('ghostery_dawn_onboarding_lets_do_this')}
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 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); 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 1d78f02a7..47f28353e 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(() => { + setView(SIGN_IN); + setToast({ + toastMessage: '', + toastClass: 'logout' + }); + }); + }; + const renderSkipLink = () => (
@@ -126,6 +136,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 66cfce277..c55e3baf2 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; @@ -133,6 +134,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 2fd7f1ba4..2aaf1543b 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx +++ b/app/dawn-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx @@ -203,16 +203,15 @@ class BlockSettingsView extends Component { const { enable_ad_block, kindsOfTrackers, enable_anti_tracking, enable_smart_block } = this.state; - const { actions } = this.props; - const { logout } = actions; const recommendedChoicesActive = this.recommendedChoicesActive(); + return (
- logout()}> + {t('ghostery_dawn_onboarding_back')}
@@ -263,7 +262,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 6392f43ed..e725689c6 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, setBlockSetupSeen } 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); }