Include logout option, add toast on logout

ghostery · christophertino · Mar 16, 2021 · Feb 16, 2021 · Feb 16, 2021 · Mar 5, 2021
commit de38297177c2ea921e80970053bba051799dc3ae
@@ -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."
 	},

@@ -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 = () => (
 		<div className="row align-center-middle">
 			<div className="columns small-10 medium-6" />
@@ -125,6 +135,12 @@ const Step1_CreateAccountView = (props) => {
 					</div>
 				)}
 			</div>
+			<div className="Step1_CreateAccountView__signOutContainer">
+				{t('ghostery_dawn_onboarding_or').toLocaleLowerCase()}
+				<div className="Step1_CreateAccountView__signOut" onClick={() => handleLogout()}>
+					<span>{t('sign_out')}</span>
+				</div>
+			</div>
 		</div>
 	) : (
 		<div className="Step1_CreateAccountView">

@@ -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;

@@ -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);
@@ -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 (
 			<Fragment>
 				<div className="BlockSettingsView__relativeContainer">
 					<div className="BlockSettingsView__backContainer">
 						<span className="BlockSettingsView__caret left" />
-						<NavLink to="/onboarding/1" onClick={() => logout()}>
+						<NavLink to="/onboarding/1">
 							<span className="BlockSettingsView__back">{t('ghostery_dawn_onboarding_back')}</span>
 						</NavLink>
 					</div>
@@ -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,

@@ -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,

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+    <defs>
+        <path id="shb53jtila" d="M11.011 22c0 .6-.4 1-1.001 1H5.004C3.302 23 2 21.7 2 20V4c0-1.7 1.302-3 3.004-3h5.006c.6 0 1.001.4 1.001 1s-.4 1-1.001 1H5.004c-.601 0-1.001.4-1.001 1v16c0 .6.4 1 1 1h5.007c.6 0 1.001.4 1.001 1zm10.914-9.6c.1-.2.1-.5 0-.8-.1-.1-.1-.2-.2-.3l-4.005-4c-.4-.4-1.002-.4-1.402 0-.4.4-.4 1 0 1.4L18.62 11H9.009c-.601 0-1.001.4-1.001 1s.4 1 1 1h9.613l-2.303 2.3c-.4.4-.4 1 0 1.4.2.2.5.3.7.3.201 0 .501-.1.702-.3l4.005-4c.1-.1.2-.2.2-.3z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g transform="translate(-165 -71) translate(165 71)">
+                <mask id="w4yjt6ryhb" fill="#fff">
+                    <use xlink:href="#shb53jtila"/>
+                </mask>
+                <use fill="#000" fill-rule="nonzero" xlink:href="#shb53jtila"/>
+                <g fill="#4A4A4A" mask="url(#w4yjt6ryhb)">
+                    <path d="M0 0H24V24H0z"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
@@ -31,7 +31,7 @@ const ToastMessage = ({
 
 	return (
 		<div className={`ToastMessage full-width ${dawnHubClass}`}>
-			{toastText && (
+			{(toastText || dawnToastText) && (
 				<div className="callout-container">
 					<div className={`callout toast ${toastClass}`}>
 						<div className={`flex-container ${dawnLayout}`}>

@@ -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);
 		}