Add ForgotPassword view to hub. Move related code from panel to share…

…d folder

_locales/en/messages.json

@@ -505,7 +505,7 @@
 			}
 		}
 	},
-	"panel_forgot_password": {
+	"forgot_password": {
 		"message": "Forgot Password?"
 	},
 	"panel_help_panel_header": {

app/Account/AccountReducer.js

@@ -18,7 +18,9 @@ import {
 	GET_USER_SUCCESS,
 	GET_USER_SETTINGS_SUCCESS,
 	GET_USER_SUBSCRIPTION_DATA_FAIL,
-	GET_USER_SUBSCRIPTION_DATA_SUCCESS
+	GET_USER_SUBSCRIPTION_DATA_SUCCESS,
+	RESET_PASSWORD_SUCCESS,
+	RESET_PASSWORD_FAIL
 } from './AccountConstants';
 import { UPDATE_PANEL_DATA } from '../panel/constants/constants';
 
@@ -28,6 +30,8 @@ const initialState = {
 	user: null,
 	userSettings: null,
 	subscriptionData: null,
+	toastMessage: '',
+	resetPasswordError: false
 };
 
 export default (state = initialState, action) => {
@@ -84,6 +88,31 @@ export default (state = initialState, action) => {
 				subscriptionData
 			});
 		}
+		case RESET_PASSWORD_SUCCESS: {
+			const toastMessage = t('banner_check_your_email_title');
+			return Object.assign({}, state, {
+				toastMessage,
+				resetPasswordError: false
+			});
+		}
+		case RESET_PASSWORD_FAIL: {
+			const { errors } = action.payload;
+			let errorText = t('server_error_message');
+			errors.forEach((err) => {
+				switch (err.code) {
+					case '10050':
+					case '10110':
+						errorText = t('banner_email_not_in_system_message');
+						break;
+					default:
+						errorText = t('server_error_message');
+				}
+			});
+			return Object.assign({}, state, {
+				toastMessage: errorText,
+				resetPasswordError: true
+			});
+		}
 
 		default: return state;
 	}

app/hub/Views/CreateAccountView/CreateAccountViewContainer.jsx

@@ -18,7 +18,7 @@ import {
 	validatePassword,
 	validateEmailsMatch,
 	validateConfirmEmail
-} from '../../../panel/utils/utils';
+} from '../../../../src/utils/utils';
 import CreateAccountView from './CreateAccountView';
 import SignedInView from '../SignedInView';
 

app/hub/Views/ForgotPasswordView/ForgotPasswordView.jsx

@@ -0,0 +1,102 @@
+/**
+ * Forgot Password View
+ *
+ * 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 from 'react';
+import PropTypes from 'prop-types';
+import { NavLink } from 'react-router-dom';
+import ClassNames from 'classnames';
+/**
+ * @class Implement Forgot Password view which opens from the link on log-in page in the intro hub.
+ * @memberof HubComponents
+ */
+const ForgotPasswordView = (props) => {
+	const {
+		email,
+		emailError,
+		handleInputChange,
+		handleSubmit,
+		loading
+	} = props;
+	const emailLabelClassNames = ClassNames('ForgotPasswordView__inputLabel', {
+		error: emailError
+	});
+	const emailInputClassNames = ClassNames('ForgotPasswordView__inputBox', {
+		error: emailError
+	});
+	const emailAsteriskClassNames = ClassNames('ForgotPasswordView__asterisk', {
+		error: emailError
+	});
+	const buttonClasses = ClassNames('ForgotPasswordView__button button success', { loading });
+	return (
+		<div className="ForgotPasswordView">
+			<div className="ForgotPasswordView--addPaddingTop row align-center">
+				<div className="columns">
+					<div className="ForgotPasswordView__header flex-container align-center-middle">
+						<div className="ForgotPasswordView__headerTitle text-center">
+							<h3>
+								{t('forgot_password_message')}
+							</h3>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div className="ForgotPasswordView--addPaddingTop row align-center">
+				<div>
+					<form onSubmit={handleSubmit}>
+						<label htmlFor="login-email" className={emailLabelClassNames}>
+							{t('email_colon')}
+							<span className={emailAsteriskClassNames}>*</span>
+						</label>
+						<input
+							id="login-email"
+							className={emailInputClassNames}
+							name="email"
+							type="text"
+							value={email}
+							onChange={handleInputChange}
+							pattern=".{1,}"
+							autoComplete="off"
+						/>
+						{props.emailError && (
+							<div className="ForgotPasswordView__inputError">
+								{t('invalid_email_forgot')}
+							</div>
+						)}
+						<div className="ForgotPasswordView--addPaddingTop row align-spaced">
+							<div className="ForgotPasswordView__linkContainer">
+								<p className="ForgotPasswordView__link">
+									<NavLink to="/log-in">
+										{t('button_cancel')}
+									</NavLink>
+								</p>
+							</div>
+							<button type="submit" className={buttonClasses}>
+								<span className="title">{t('send_button_label')}</span>
+								<span className="loader" />
+							</button>
+						</div>
+					</form>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+// PropTypes ensure we pass required props of the correct type
+ForgotPasswordView.propTypes = {
+	email: PropTypes.string.isRequired,
+	emailError: PropTypes.bool.isRequired,
+	loading: PropTypes.bool.isRequired,
+};
+
+export default ForgotPasswordView;

app/hub/Views/ForgotPasswordView/ForgotPasswordView.scss

@@ -0,0 +1,172 @@
+/**
+ * Log In View Sass
+ *
+ * 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
+ */
+
+// Log In View
+.ForgotPasswordView {
+	margin-top: 40px;
+	padding-bottom: 40px;
+}
+.ForgotPasswordView--addPaddingTop {
+	padding-top: 40px;
+}
+.ForgotPasswordView__headerImage {
+	max-width: 180px;
+}
+.ForgotPasswordView__headerTitle h3 {
+	font-size: 20px;
+	line-height: 1.5;
+	color: #4a4a4a;
+	margin: 20px 25px 0;
+	width: 500px;
+}
+.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;
+	}
+}