Add handlers for log in view and replace strings

app/hub/Views/BrowserCreateAccountForm/BrowserCreateAccountForm.scss

@@ -30,13 +30,17 @@
 	color: red;
 }
 .BrowserCreateAccountForm__promoString {
+	font-size: 14px;
 	margin-top: 15px;
 	@include breakpoint(small down) {
 		margin-top: 0;
 	}
 }
 .BrowserCreateAccountForm__legalConsentCheckedLabel {
 	font-size: 14px;
+	@include breakpoint(small down) {
+		width: 258px;
+	}
 
 	&.error {
 		color: red;

app/hub/Views/BrowserCreateAccountView/BrowserCreateAccountView.jsx

@@ -71,7 +71,7 @@ const renderFAQListItem = (icon, label, description) => (
  */
 const BrowserCreateAccountView = () => {
 	const [expanded, setExpanded] = useState(false);
-	const [view, setView] = useState(CREATE_ACCOUNT);
+	const [view, setView] = useState(SIGN_IN);
 
 	const arrowClassNames = ClassNames('BrowserCreateAccountView__arrow', {
 		up: expanded,
@@ -90,7 +90,12 @@ const BrowserCreateAccountView = () => {
 
 	return (
 		<div className="BrowserCreateAccountView">
-			<div className="BrowserCreateAccountView__title">{ t('hub_browser_create_a_ghostery_account') }</div>
+			{view === CREATE_ACCOUNT && (
+				<div className="BrowserCreateAccountView__title">{t('hub_browser_create_a_ghostery_account')}</div>
+			)}
+			{view === SIGN_IN && (
+				<div className="BrowserCreateAccountView__title">{t('sign_in')}</div>
+			)}
 			<div className="BrowserCreateAccountView__subtitle">{ t('hub_browser_sync_settings') }</div>
 			<div className="row align-center-middle">
 				{view === CREATE_ACCOUNT && (

app/hub/Views/BrowserLoginForm/BrowserLogInForm.jsx

@@ -94,7 +94,7 @@ const BrowserLogInForm = (props) => {
 				</div>
 			</div>
 			<div className="BrowserLogInForm__ctaButtonContainer">
-				<button type="submit" className="BrowserLogInForm__ctaButton">{t('create_account')}</button>
+				<button type="submit" className="BrowserLogInForm__ctaButton">{t('sign_in')}</button>
 			</div>
 			<div className="row align-center-middle">
 				<div className="columns small-10 medium-5" />

app/hub/Views/BrowserLoginForm/BrowserLogInFormContainer.jsx

@@ -0,0 +1,160 @@
+/**
+ * Browser Log In Form Container
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2019 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { validateEmail } from '../../../panel/utils/utils';
+import BrowserLogInForm from './BrowserLogInForm';
+import SignedInView from '../SignedInView';
+/**
+ * @class Implement the Browser Log In Form for the Ghostery Hub
+ * @extends Component
+ * @memberof HubContainers
+ */
+class BrowserLogInFormContainer extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			email: '',
+			password: '',
+			emailError: false,
+			passwordError: false,
+			validateInput: false,
+		};
+
+		const { actions } = this.props;
+		actions.setToast({
+			toastMessage: '',
+			toastClass: '',
+		});
+	}
+
+	/**
+	 * Update input values by updating state.
+	 * @param  {Object} event the 'change' event
+	 */
+	_handleInputChange = (event) => {
+		const { name, value } = event.target;
+		this.setState({ [name]: value });
+
+		const { validateInput } = this.state;
+		if (!validateInput) {
+			return;
+		}
+
+		switch (name) {
+			case 'email': {
+				const emailIsValid = value && validateEmail(value);
+				this.setState({
+					emailError: !emailIsValid,
+				});
+				break;
+			}
+			case 'password': {
+				this.setState({
+					passwordError: !value,
+				});
+				break;
+			}
+			default: break;
+		}
+	}
+
+	/**
+	 * Handle logging in, but validate the data first.
+	 * @param  {Object} event the 'submit' event
+	 */
+	_handleLoginAttempt = (event) => {
+		event.preventDefault();
+		const { email, password } = this.state;
+		const emailIsValid = email && validateEmail(email);
+
+		this.setState({
+			emailError: !emailIsValid,
+			passwordError: !password,
+			validateInput: true,
+		});
+
+		if (!emailIsValid || !password) {
+			return;
+		}
+
+		const { actions, history } = this.props;
+		actions.setToast({
+			toastMessage: '',
+			toastClass: ''
+		});
+		actions.login(email, password).then((success) => {
+			if (success) {
+				const { origin, pathname, hash } = window.location;
+				window.history.pushState({}, '', `${origin}${pathname}${hash}`);
+
+				actions.getUser();
+				actions.getUserSettings()
+					.then((settings) => {
+						const { current_theme } = settings;
+						return actions.getTheme(current_theme);
+					});
+				actions.setToast({
+					toastMessage: t('hub_login_toast_success'),
+					toastClass: 'success'
+				});
+				// Move to second screen
+			} else {
+				actions.setToast({
+					toastMessage: t('no_such_email_password_combo'),
+					toastClass: 'alert'
+				});
+			}
+		});
+	}
+
+	/**
+	 * React's required render function. Returns JSX
+	 * @return {JSX} JSX for rendering the Log In View of the Hub app
+	 */
+	render() {
+		const { loggedIn, user } = this.props;
+		const {
+			email,
+			password,
+			emailError,
+			passwordError,
+		} = this.state;
+
+		return loggedIn ? (
+			<SignedInView email={(user && user.email) || 'email'} />
+		) : (
+			<BrowserLogInForm
+				email={email}
+				password={password}
+				emailError={emailError}
+				passwordError={passwordError}
+				handleInputChange={this._handleInputChange}
+				handleSubmit={this._handleLoginAttempt}
+			/>
+		);
+	}
+}
+
+// PropTypes ensure we pass required props of the correct type
+BrowserLogInFormContainer.propTypes = {
+	actions: PropTypes.shape({
+		setToast: PropTypes.func.isRequired,
+		login: PropTypes.func.isRequired,
+		getUser: PropTypes.func.isRequired,
+		getUserSettings: PropTypes.func.isRequired,
+	}).isRequired,
+};
+
+export default BrowserLogInFormContainer;

app/hub/Views/BrowserLoginForm/index.js

@@ -1,3 +1,46 @@
-import BrowserLoginForm from './BrowserLogInForm';
+/**
+ * Point of entry index.js file for Browser Log In Form
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2019 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
 
-export default BrowserLoginForm;
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import BrowserLogInFormContainer from './BrowserLogInFormContainer';
+import { login, getUser, getUserSettings } from '../../../Account/AccountActions';
+import { getTheme } from '../../../panel/actions/PanelActions';
+import { setToast } from '../AppView/AppViewActions';
+
+/**
+ * Map redux store state properties to the component's own properties.
+ * @param  {Object} state    entire Redux store's state
+ * @return {function}        this function returns a plain object, which will be merged into the component's props
+ * @memberof HubContainers
+ */
+const mapStateToProps = state => ({ ...state.account });
+
+/**
+ * Bind the component's action creators using Redux's bindActionCreators.
+ * @param  {function} dispatch redux store method which dispatches actions
+ * @return {function}          to be used as an argument in redux connect call
+ * @memberof SetupContainers
+ */
+const mapDispatchToProps = dispatch => ({
+	actions: bindActionCreators({
+		setToast,
+		login,
+		getUser,
+		getUserSettings,
+		getTheme
+	}, dispatch),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(BrowserLogInFormContainer);