Hook up redux. Start merging panel and hub jsx and scss

app/hub/index.jsx

@@ -28,7 +28,7 @@ import PlusView from './Views/PlusView';
 import RewardsView from './Views/RewardsView';
 import ProductsView from './Views/ProductsView';
 import CreateAccountView from './Views/CreateAccountView';
-import ForgotPasswordView from './Views/ForgotPasswordView';
+import ForgotPasswordView from '../shared-components/ForgotPassword/ForgotPasswordContainer';
 import LogInView from './Views/LogInView';
 
 const store = createStore();
@@ -46,7 +46,7 @@ const Hub = () => (
 		<Route exact path="/rewards" component={RewardsView} />
 		<Route exact path="/products" component={ProductsView} />
 		<Route exact path="/create-account" component={CreateAccountView} />
-		<Route exact path="/forgot-password" component={ForgotPasswordView} />
+		<Route exact path="/forgot-password" render={() => <ForgotPasswordView location="hub" />} />
 		<Route exact path="/log-in" component={LogInView} />
 	</AppView>
 );

app/panel/index.jsx

@@ -25,7 +25,7 @@ import Settings from './containers/SettingsContainer';
 import Subscription from './containers/SubscriptionContainer';
 import Login from './containers/LoginContainer';
 import CreateAccount from './containers/CreateAccountContainer';
-import ForgotPassword from './containers/ForgotPasswordContainer';
+import ForgotPassword from '../shared-components/ForgotPassword/ForgotPasswordContainer';
 import AccountSuccess from './containers/AccountSuccessContainer';
 import configureStore from './store/configureStore';
 import Help from './components/Help';
@@ -51,7 +51,7 @@ const Ghostery = () => (
 		<Route path="/subscribe/:loggedIn" component={Subscribe} />
 		<Route path="/login" component={Login} />
 		<Route path="/create-account" component={CreateAccount} />
-		<Route path="/forgot-password" component={ForgotPassword} />
+		<Route path="/forgot-password" render={() => <ForgotPassword location="panel" />} />
 		<Route path="/account-success" component={AccountSuccess} />
 	</Panel>
 );

app/scss/hub.scss

@@ -82,3 +82,4 @@ html, body, #root {
 @import '../shared-components/ToastMessage/ToastMessage.scss';
 @import '../shared-components/ToggleCheckbox/ToggleCheckbox.scss';
 @import '../shared-components/ToggleSwitch/ToggleSwitch.scss';
+@import '../shared-components/ForgotPassword/ForgotPassword.scss';

app/scss/panel.scss

@@ -80,3 +80,4 @@ html body {
 // Imports from ../shared-components directory
 @import '../shared-components/Modal/Modal.scss';
 @import '../shared-components/PremiumPromoModal/PremiumPromoModal.scss';
+@import '../shared-components/ForgotPassword/ForgotPassword.scss'

app/shared-components/ForgotPassword/ForgotPassword.jsx

@@ -60,7 +60,8 @@ class ForgotPassword extends React.Component {
 				.then((success) => {
 					this.setState({ loading: false });
 					if (success) {
-						this.props.history.push('/login');
+						// this.props.history.push('/login');
+						// go back to hub sign in screen
 					}
 				});
 		});
@@ -72,20 +73,39 @@ class ForgotPassword extends React.Component {
 	 */
 	render() {
 		const { email, loading, emailError } = this.state;
+		const { location } = this.props;
 		const buttonClasses = ClassNames('button ghostery-button', { loading });
+
+		const ContainerClassNames = ClassNames('', {
+			'forgot-password-panel': location === 'panel',
+			ForgotPasswordView: location === 'hub',
+		});
+		const MessageClassNames = ClassNames('', {
+			'forgot-password-message': location === 'panel',
+			ForgotPasswordMessage: location === 'hub',
+		});
+		const EmailClassNames = ClassNames('', {
+			'forgot-input-email': location === 'panel',
+			ForgotPasswordMessage: location === 'hub',
+		});
+
+		const ButtonsContainerClassNames = ClassNames('row', {
+			'buttons-container': location === 'panel',
+			ForgotPasswordButtonsContainer: location === 'hub',
+		});
 		return (
-			<div id="forgot-password-panel">
+			<div id={ContainerClassNames}>
 				<div className="row align-center">
 					<div className="small-11 medium-8 columns">
 						<form onSubmit={this.handleSubmit}>
-							<h4 id="forgot-password-message">
+							<h4 id={MessageClassNames}>
 								{ t('forgot_password_message') }
 							</h4>
 							<div id="forgot-email" className={(emailError ? 'panel-error invalid-email' : '')}>
-								<label htmlFor="forgot-input-email">
+								<label htmlFor={EmailClassNames}>
 									{ t('email_colon') }
 									<span className="asterisk">*</span>
-									<input onChange={this.handleInputChange} value={email} id="forgot-input-email" type="text" name="email" pattern=".{1,}" autoComplete="off" required />
+									<input onChange={this.handleInputChange} value={email} id={EmailClassNames} type="text" name="email" pattern=".{1,}" autoComplete="off" required />
 								</label>
 								<p className="invalid-email warning">
 									{ t('invalid_email_forgot') }
@@ -94,7 +114,7 @@ class ForgotPassword extends React.Component {
 									{ t('error_email_forgot') }
 								</p>
 							</div>
-							<div className="buttons-container row">
+							<div className={ButtonsContainerClassNames}>
 								<div className="small-6 columns text-center">
 									<Link to="/login" id="forgot-password-cancel" className="cancel button hollow">
 										{ t('button_cancel') }

app/shared-components/ForgotPassword/ForgotPassword.scss

@@ -28,4 +28,171 @@
 }
 
 /* FORGOT PASSWORD HUB */
+#ForgotPasswordView {
+	margin: 40px auto;
+	padding-bottom: 40px;
+	#ForgotPasswordMessage {
+		width: 456px;
+	}
+	#forgot-email {
+		&.not-found-error {
+			p.warning.invalid-email {
+				opacity: 0;
+			}
+		}
+		&.invalid-email {
+			p.warning.not-found-error {
+				opacity: 0;
+			}
+		}
+	}
+	.ForgotPasswordButtonsContainer {
+		width: 456px;
+	}
+}
+
+
+.ForgotPasswordView--addPaddingTop {
+	padding-top: 40px;
+}
+.ForgotPasswordView__inputLabel {
+	font-size: 14px;
+	font-weight: 500;
+	line-height: 40px;
+	color: #4a4a4a;
+	&.error {
+		color: #e74055;
+	}
+}
+.ForgotPasswordView__asterisk {
+	display: none;
+	&.error {
+		display: inline;
+		color: #e74055;
+	}
+}
+.ForgotPasswordView__inputBox {
+	font-size: 14;
+	line-height: 24px;
+	color: #4a4a4a;
+	margin-bottom: 35px;
+	width: 456px;
 
+	// Foundation Overrides
+	border-radius: 0;
+	box-shadow: none;
+	border: 1px solid #c8c7c2;
+}
+.ForgotPasswordView__inputBox.error {
+	margin-bottom: 8px;
+	border-color: #e74055;
+}
+.ForgotPasswordView__inputBox:focus {
+	// Foundation Overrides
+	box-shadow: none;
+	border-color: #4a4a4a;
+}
+.ForgotPasswordView__inputError {
+	font-size: 12;
+	line-height: 14px;
+	color: #e74055;
+	margin-bottom: 13px;
+	font-style: italic;
+}
+.ForgotPasswordView__link {
+	font-size: 14px;
+	line-height: 30px;
+	margin: 4px 0 0 40px;
+}
+.ForgotPasswordView__button {
+	min-width: 180px;
+	.loader {
+		display: none;
+	}
+	&.loading {
+		pointer-events: none;
+		.loader {
+			display: inline-block;
+			height: 12px;
+			width: 12px;
+		}
+		.title {
+			display: none;
+		}
+	}
+	&:focus {
+		outline: 0;
+
+		.loader:after {
+			background: #760176;
+		}
+	}
+}
+.loader {
+	font-size: 10px;
+	text-indent: -9999em;
+	width: 10rem;
+	height: 10rem;
+	border-radius: 50%;
+	background: #ffffff;
+	background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+	background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+	background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+	background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+	background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+	position: relative;
+	-webkit-animation: load3 1.4s infinite linear;
+	animation: load3 1.4s infinite linear;
+	-webkit-transform: translateZ(0);
+	-ms-transform: translateZ(0);
+	transform: translateZ(0);
+}
+.loader:before {
+	width: 50%;
+	height: 50%;
+	background: #ffffff;
+	border-radius: 100% 0 0 0;
+	position: absolute;
+	top: 0;
+	left: 0;
+	content: '';
+}
+.loader:after {
+	background: #930194;
+	width: 75%;
+	height: 75%;
+	border-radius: 50%;
+	content: '';
+	margin: auto;
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+}
+
+@-webkit-keyframes load3 {
+	0% {
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+	100% {
+		-webkit-transform: rotate(360deg);
+		transform: rotate(360deg);
+	}
+}
+@keyframes load3 {
+	0% {
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+	100% {
+		-webkit-transform: rotate(360deg);
+		transform: rotate(360deg);
+	}
+}
+@media only screen and (max-width: 740px)  {
+	.ForgotPasswordView__header {
+		flex-direction: column;
+	}
+}

app/shared-components/index.js

@@ -22,6 +22,7 @@ import SteppedNavigation from './SteppedNavigation';
 import ToastMessage from './ToastMessage';
 import ToggleCheckbox from './ToggleCheckbox';
 import ToggleSwitch from './ToggleSwitch';
+import ForgotPassword from './ForgotPassword';
 
 export {
 	ExitButton,
@@ -30,5 +31,6 @@ export {
 	SteppedNavigation,
 	ToastMessage,
 	ToggleCheckbox,
-	ToggleSwitch
+	ToggleSwitch,
+	ForgotPassword
 };