Further refactor.

app/panel/actions/AccountActions.js

@@ -30,7 +30,7 @@ export function getUserSettings() {
 	};
 }
 
-export const accountGetUser = () => dispatch => (
+export const getUser = () => dispatch => (
 	sendMessageInPromise('account.getUser')
 		.then((user) => {
 			dispatch({
@@ -47,11 +47,11 @@ export const accountGetUser = () => dispatch => (
  * @param  {Object} query
  * @return {Object} dispatch
  */
-export const accountLogin = (email, password) => dispatch => (
+export const login = (email, password) => dispatch => (
 	sendMessageInPromise('account.login', { email, password })
 		.then((response) => {
 			if (response.errors) {
-				log('PanelActions accountLogin server error', response);
+				log('PanelActions login server error', response);
 				dispatch({ type: LOGIN_FAILED });
 				response.errors.forEach((err) => {
 					let errorText = '';
@@ -102,7 +102,7 @@ export const accountLogin = (email, password) => dispatch => (
  * @param  {Object} query
  * @return {Object} dispatch
  */
-export function accountLogout() {
+export function logout() {
 	return function (dispatch) {
 		sendMessageInPromise('account.logout', {})
 			.then((data) => {

app/panel/components/Header.jsx

@@ -78,10 +78,10 @@ class Header extends React.Component {
 	 * Handles clicking the sign-in / verify link
 	 */
 	clickSignInVerify() {
-		if (!this.props.logged_in) {
+		if (!this.props.loggedIn) {
 			sendMessage('ping', 'sign_in');
 			this.props.history.push('/login');
-		} else if (!this.props.is_validated) {
+		} else if (!this.props.emailValidated) {
 			sendMessageInPromise('sendVerificationEmail').then((data) => {
 				this.props.actions.showNotification({
 					classes: 'success',
@@ -109,6 +109,7 @@ class Header extends React.Component {
 		const tabDetailedClassNames = ClassNames('header-tab', {
 			active: this.props.is_expert,
 		});
+		const { loggedIn, email, emailValidated } = this.props;
 
 		return (
 			<header id="ghostery-header">
@@ -136,7 +137,7 @@ class Header extends React.Component {
 						<div className="row align-middle collapse">
 							<div className="columns shrink">
 								<div onClick={this.clickSignInVerify} className="header-helper-text">
-									{ !this.props.logged_in ? t('panel_header_sign_in') : (!this.props.is_validated ? t('panel_header_verify_account') : '') }
+									{ !loggedIn ? t('panel_header_sign_in') : (!emailValidated ? t('panel_header_verify_account') : '') }
 								</div>
 							</div>
 							<div
@@ -147,8 +148,8 @@ class Header extends React.Component {
 						</div>
 						{ this.state.dropdownOpen &&
 							<HeaderMenu
-								logged_in={this.props.logged_in}
-								email={this.props.email}
+								loggedIn={loggedIn}
+								email={email}
 								language={this.props.language}
 								tab_id={this.props.tab_id}
 								history={this.props.history}

app/panel/components/HeaderMenu.jsx

@@ -135,13 +135,14 @@ class HeaderMenu extends React.Component {
 	 */
 	clickSignOut() {
 		this.props.toggleDropdown();
-		this.props.actions.userLogout();
+		this.props.actions.logout();
 	}
 	/**
 	 * Render drop-down menu.
 	 * @return {ReactComponent}   ReactComponent instance
 	 */
 	render() {
+		const { loggedIn, email } = this.props;
 		return (
 			<ClickOutside onClickOutside={this.handleClickOutside} excludeEl={this.props.kebab}>
 				<div className="dropdown-pane" id="header-dropdown">
@@ -209,19 +210,19 @@ class HeaderMenu extends React.Component {
 						</li>
 					</ul>
 					<div className="row account-info">
-						<div onClick={this.clickSignedInAs} className={`${!this.props.logged_in ? 'hide' : ''} menu-option signed-in-as small-12 columns`}>
+						<div onClick={this.clickSignedInAs} className={`${!loggedIn ? 'hide' : ''} menu-option signed-in-as small-12 columns`}>
 							<svg width="17px" height="18px" viewBox="0 0 17 18">
 								<g>
 									<path className="menu-icon" d="M11.7415776,7.69057143 C12.6371552,6.81771429 13.0848707,5.76442857 13.0848707,4.53057143 C13.0848707,3.29685714 12.6371552,2.24357143 11.7415776,1.37057143 C10.8461466,0.497714286 9.76547414,0.0612857143 8.49985345,0.0612857143 C7.23423276,0.0612857143 6.15356034,0.497714286 5.25812931,1.37057143 C4.36255172,2.24357143 3.91483621,3.29685714 3.91483621,4.53057143 C3.91483621,5.76442857 4.36255172,6.81771429 5.25812931,7.69057143 C6.1537069,8.56342857 7.23423276,9 8.49985345,9 C9.76576724,9 10.8462931,8.56342857 11.7415776,7.69057143 Z" />
 									<path className="menu-icon" d="M16.8637069,13.7195714 C16.8357155,13.3277143 16.7800259,12.9048571 16.6964914,12.4508571 C16.6129569,11.9968571 16.5072931,11.576 16.3799397,11.188 C16.2525862,10.8001429 16.0814138,10.4218571 15.8664224,10.0532857 C15.6515776,9.68471429 15.4047845,9.37042857 15.1260431,9.11042857 C14.8473017,8.85042857 14.5071552,8.643 14.1053103,8.48785714 C13.7031724,8.33271429 13.2594138,8.255 12.7738879,8.255 C12.7022241,8.255 12.5350086,8.33842857 12.2723879,8.50528571 C12.0097672,8.67214286 11.7132931,8.85842857 11.3829655,9.064 C11.0526379,9.26942857 10.6226552,9.45585714 10.0934569,9.62242857 C9.56411207,9.78928571 9.03286207,9.87271429 8.49941379,9.87271429 C7.96611207,9.87271429 7.43486207,9.78928571 6.90551724,9.62242857 C6.37631897,9.45585714 5.94633621,9.26942857 5.61600862,9.064 C5.28568103,8.85842857 4.9892069,8.67214286 4.72658621,8.50528571 C4.46381897,8.33842857 4.29675,8.255 4.22508621,8.255 C3.73956034,8.255 3.29580172,8.33271429 2.89381034,8.48785714 C2.49181897,8.643 2.15152586,8.85057143 1.87293103,9.11042857 C1.59433621,9.37042857 1.3475431,9.68471429 1.13269828,10.0532857 C0.917853448,10.4218571 0.746681034,10.8002857 0.619327586,11.188 C0.491974138,11.576 0.386456897,11.9968571 0.302922414,12.4508571 C0.219241379,12.9048571 0.163551724,13.3275714 0.135706897,13.7195714 C0.107862069,14.1115714 0.0939396552,14.513 0.0939396552,14.9242857 C0.0939396552,15.8552857 0.384551724,16.5905714 0.96562931,17.1298571 C1.5467069,17.669 2.31888793,17.9385714 3.28202586,17.9385714 L13.717681,17.9385714 C14.680819,17.9385714 15.4528534,17.669 16.0340776,17.1298571 C16.6153017,16.5905714 16.9057672,15.8554286 16.9057672,14.9242857 C16.9057672,14.513 16.8918448,14.1114286 16.8637069,13.7195714 L16.8637069,13.7195714 Z" />
 								</g>
 							</svg>
-							<span title={this.props.email} >{ this.props.email }</span>
+							<span title={email} >{ email }</span>
 						</div>
-						<div onClick={this.clickSignIn} className={`${this.props.logged_in ? 'hide' : ''} menu-option menu-signin small-12 columns`}>
+						<div onClick={this.clickSignIn} className={`${loggedIn ? 'hide' : ''} menu-option menu-signin small-12 columns`}>
 							<span>{ t('panel_menu_signin') }</span>
 						</div>
-						<div onClick={this.clickSignOut} className={`${!this.props.logged_in ? 'hide' : ''} menu-option menu-signout small-12 columns`}>
+						<div onClick={this.clickSignOut} className={`${!loggedIn ? 'hide' : ''} menu-option menu-signout small-12 columns`}>
 							<span>{ t('panel_menu_signout') }</span>
 						</div>
 					</div>

app/panel/components/Login.jsx

@@ -89,11 +89,11 @@ class Login extends React.Component {
 			return;
 		}
 
-		this.props.actions.accountLogin(email, password)
+		this.props.actions.login(email, password)
 			.then((success) => {
 				if (success) {
 					Promise.all([
-						this.props.actions.accountGetUser(),
+						this.props.actions.getUser(),
 						this.props.actions.getUserSettings(),
 					]);
 				}

app/panel/components/Panel.jsx

@@ -158,6 +158,8 @@ class Panel extends React.Component {
 	 * @return {JSX} JSX for rendering the Panel
 	 */
 	render() {
+		const { loggedIn, email, emailValidated } = this.props;
+
 		// this prevents double rendering when waiting for getPanelData() to finish
 		if (!this.props.initialized) {
 			return null;

app/panel/components/Settings/Account.jsx

@@ -51,13 +51,13 @@ class Account extends React.Component {
 	 * Prettify the user's name when signed in.
 	 */
 	updateAccountName(settingsData) {
-		const { logged_in } = settingsData;
+		const { loggedIn } = settingsData;
 
-		if (logged_in) {
-			const { first_name, last_name } = settingsData;
+		if (loggedIn) {
+			const { firstName, lastName } = settingsData;
 
-			if (first_name || last_name) {
-				this.setState({ accountName: (first_name ? (first_name + (` ${last_name}` || '')) : last_name) });
+			if (firstName || lastName) {
+				this.setState({ accountName: (firstName ? (firstName + (` ${lastName}` || '')) : lastName) });
 			}
 		}
 	}
@@ -119,12 +119,12 @@ class Account extends React.Component {
 				<div className="row">
 					<div className="columns">
 						<h3>{ t('settings_account') }</h3>
-						<div className={(settingsData.logged_in ? 's-hide' : '')} >
+						<div className={(settingsData.loggedIn ? 's-hide' : '')} >
 							<p className="s-blue-header" onClick={this.clickSigninCreate} >{ t('settings_signin_create_header') }</p>
 							<p>{ t('settings_sign_create_text') }</p>
 							<div className="s-vgap-46" />
 						</div>
-						<div className={(settingsData.logged_in ? '' : 's-hide')} >
+						<div className={(settingsData.loggedIn ? '' : 's-hide')} >
 							<div className="s-vgap-22" />
 							<h5 className={(this.state.accountName ? '' : 's-hide')} id="settings-account-name">{ t('settings_account_name') }:  <span>{ this.state.accountName }</span></h5>
 							<div className="s-vgap-4" />

app/panel/containers/HeaderContainer.js

@@ -16,6 +16,7 @@ import { withRouter } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
 import Header from '../components/Header';
 import * as actions from '../actions/PanelActions'; // get shared actions from Panel
+import { logout } from '../actions/AccountActions';
 /**
  * Map redux store state properties to Header component own properties.
  * @memberOf PanelContainers
@@ -27,11 +28,11 @@ import * as actions from '../actions/PanelActions'; // get shared actions from P
  */
 const mapStateToProps = (state, ownProps) => Object.assign({}, state.header, {
 	// get properties from panel redux store
+	loggedIn: state.panel.loggedIn,
 	email: state.panel.email,
+	emailValidated: state.panel.emailValidated,
 	is_expert: state.panel.is_expert,
-	is_validated: state.panel.is_validated,
 	language: state.panel.language,
-	logged_in: state.panel.logged_in,
 	tab_id: state.panel.tab_id,
 });
 /**
@@ -41,7 +42,7 @@ const mapStateToProps = (state, ownProps) => Object.assign({}, state.header, {
  * @param  {Object} 	ownProps  Header component own props
  * @return {function}          	  to be used as an argument in redux connect call
  */
-const mapDispatchToProps = (dispatch, ownProps) => ({ actions: bindActionCreators(actions, dispatch) });
+const mapDispatchToProps = (dispatch, ownProps) => ({ actions: bindActionCreators(Object.assign(actions, { logout }), dispatch) });
 /**
  * Connects Header component to the Redux store.
  * @memberOf PanelContainers

app/panel/containers/LoginContainer.js

@@ -29,8 +29,6 @@ const mapStateToProps = (state, ownProps) => Object.assign({}, state.login, {
 	// get properties from panel redux store
 	email: state.panel.email,
 	is_expert: state.panel.is_expert,
-	is_validated: state.panel.is_validated,
-	logged_in: state.panel.logged_in,
 });
 /**
  * Bind Login view component action creators using Redux's bindActionCreators

app/panel/containers/SettingsContainer.js

@@ -30,7 +30,6 @@ const mapStateToProps = (state, ownProps) => Object.assign({}, state.settings, {
 	email: state.panel.email,
 	is_expanded: state.panel.is_expanded,
 	language: state.panel.language,
-	logged_in: state.panel.logged_in,
 	pageHost: state.summary.pageHost,
 	pageUrl: state.summary.pageUrl,
 	reload_banner_status: state.panel.reload_banner_status,

app/panel/reducers/panel.js

@@ -48,6 +48,9 @@ const initialState = {
 	notificationShown: false,
 	reload_banner_status: true,
 	trackers_banner_status: true,
+	loggedIn: false,
+	email: '',
+	emailValidated: false,
 };
 /**
  * Default export for panel view reducer. Handles actions
@@ -71,28 +74,29 @@ export default (state = initialState, action) => {
 			const updated = _closeNotification(state, action);
 			return Object.assign({}, state, updated);
 		}
-		case CREATE_ACCOUNT_SUCCESS:
+		case CREATE_ACCOUNT_SUCCESS: {
 			return Object.assign({}, state, {
-				logged_in: true,
-				email: action.data.email,
-				is_validated: action.data.is_validated
+				loggedIn: true,
 			});
+		}
 		case LOGIN_SUCCESS: {
 			return Object.assign({}, state, {
-				logged_in: true
+				loggedIn: true,
 			});
 		}
 		case LOGIN_DATA_SUCCESS: {
+			const { email, emailValidated } = action.data;
 			return Object.assign({}, state, {
-				email: action.data.email,
-				is_validated: action.data.is_validated
+				email,
+				emailValidated,
 			});
 		}
 		case LOGOUT: {
+			const { loggedIn, email, emailValidated } = initialState;
 			return Object.assign({}, state, {
-				logged_in: false,
-				email: '',
-				is_validated: false
+				loggedIn,
+				email,
+				emailValidated,
 			});
 		}
 		case TOGGLE_CLIQZ_FEATURE: {

src/background.js

@@ -697,16 +697,6 @@ function onMessageHandler(request, sender, callback) {
 			}
 		});
 		return true;
-	} else if (name === 'account.getUserSettings') {
-		account.getUserSettings()
-			.then((settings) => {
-				callback(settings);
-			})
-			.catch((err) => {
-				log('Error getting user settings:', err);
-				callback({ errors: _getJSONAPIErrorsObject(err) });
-			});
-		return true;
 	} else if (name === 'getTrackerDescription') {
 		utils.getJson(message.url).then((result) => {
 			const description = (result) ? ((result.company_in_their_own_words) ? result.company_in_their_own_words : ((result.company_description) ? result.company_description : '')) : '';
@@ -735,6 +725,16 @@ function onMessageHandler(request, sender, callback) {
 				callback(err);
 			});
 		return true;
+	} else if (name === 'account.getUserSettings') {
+		account.getUserSettings()
+			.then((settings) => {
+				callback(settings);
+			})
+			.catch((err) => {
+				log('Error getting user settings:', err);
+				callback({ errors: _getJSONAPIErrorsObject(err) });
+			});
+		return true;
 	} else if (name === 'resetPassword') {
 		account.resetPassword(message)
 			.then((response) => {
@@ -745,7 +745,7 @@ function onMessageHandler(request, sender, callback) {
 				log('RESET PASSWORD ERROR');
 			});
 		return true;
-	} else if (name === 'fetchUser') {
+	} else if (name === 'account.getUser') {
 		account.getUser(message)
 			.then((user) => {
 				callback(user);
@@ -873,7 +873,7 @@ function initializeDispatcher() {
 		button.update();
 		utils.flushChromeMemoryCache();
 	});
-	dispatcher.on('conf.save.login_info', (loginInfo) => {
+	dispatcher.on('conf.save.account', () => {
 		// update PanelData
 		panelData.init();
 	});

src/classes/ABTest.js

@@ -48,7 +48,7 @@ class ABTest {
 			&install_date=${encodeURIComponent(conf.install_date)}
 			&ir=${encodeURIComponent(conf.install_random_number)}
 			&gv=${encodeURIComponent(EXTENSION_VERSION)}
-			&si=${conf.login_info.logged_in ? '1' : '0'}
+			&si=${conf.account ? '1' : '0'}
 			&ua=${encodeURIComponent(BROWSER_INFO.name)}
 			&v=${encodeURIComponent(conf.cmp_version)}
 			&l=${encodeURIComponent(conf.language)}`;