Move ForgotPassword to shared-components

app/shared-components/ForgotPassword/ForgotPassword.jsx

@@ -0,0 +1,118 @@
+/**
+ * Forgot Password Component
+ *
+ * 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 { Link } from 'react-router-dom';
+import ClassNames from 'classnames';
+import { validateEmail } from '../../../src/utils/utils';
+/**
+ * @class Implement Forgot Password view which opens from the link on Sign In panel.
+ * @memberof PanelClasses
+ */
+class ForgotPassword extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			email: '',
+			loading: false,
+			emailError: false,
+		};
+	}
+
+	/**
+	 * Update state with changed values.
+	 * @param {Object}  event 	'change' event
+	 */
+	handleInputChange = (e) => {
+		const { name, value } = e.target;
+		this.setState({ [name]: value });
+	}
+
+	/**
+	 * Validate entered data, notify user if validation fails,
+	 * This action is one the PanelActions.
+	 */
+	handleSubmit = (e) => {
+		e.preventDefault();
+		this.setState({ loading: true }, () => {
+			const { email } = this.state;
+
+			// validate the email and password
+			if (!validateEmail(email)) {
+				this.setState({
+					emailError: true,
+					loading: false,
+				});
+				return;
+			}
+
+			this.props.actions.resetPassword(email)
+				.then((success) => {
+					this.setState({ loading: false });
+					if (success) {
+						this.props.history.push('/login');
+					}
+				});
+		});
+	}
+
+	/**
+	 * Render Forgot Password panel.
+	 * @return {ReactComponent}   ReactComponent instance
+	 */
+	render() {
+		const { email, loading, emailError } = this.state;
+		const buttonClasses = ClassNames('button ghostery-button', { loading });
+		return (
+			<div id="forgot-password-panel">
+				<div className="row align-center">
+					<div className="small-11 medium-8 columns">
+						<form onSubmit={this.handleSubmit}>
+							<h4 id="forgot-password-message">
+								{ t('forgot_password_message') }
+							</h4>
+							<div id="forgot-email" className={(emailError ? 'panel-error invalid-email' : '')}>
+								<label htmlFor="forgot-input-email">
+									{ 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 />
+								</label>
+								<p className="invalid-email warning">
+									{ t('invalid_email_forgot') }
+								</p>
+								<p className="not-found-error warning">
+									{ t('error_email_forgot') }
+								</p>
+							</div>
+							<div className="buttons-container row">
+								<div className="small-6 columns text-center">
+									<Link to="/login" id="forgot-password-cancel" className="cancel button hollow">
+										{ t('button_cancel') }
+									</Link>
+								</div>
+								<div className="small-6 columns text-center">
+									<button type="submit" id="send-button" className={buttonClasses}>
+										<span className="title">{ t('send_button_label') }</span>
+										<span className="loader" />
+									</button>
+								</div>
+							</div>
+						</form>
+					</div>
+				</div>
+			</div>
+		);
+	}
+}
+
+export default ForgotPassword;

app/shared-components/ForgotPassword/ForgotPassword.scss

@@ -0,0 +1,31 @@
+/* FORGOT PASSWORD PANEL */
+#forgot-password-panel{
+	margin-top: 75px;
+	h4#forgot-password-message {
+		font-size:14px;
+		font-weight: normal;
+		color: #333333;
+		margin-bottom: 50px;
+	}
+	#forgot-email {
+		&.not-found-error {
+			p.warning.invalid-email {
+				opacity: 0;
+			}
+		}
+		&.invalid-email {
+			p.warning.not-found-error {
+				opacity: 0;
+			}
+		}
+	}
+	.buttons-container {
+		margin-top: 60px;
+		#send-button {
+			width:126px;
+		}
+	}
+}
+
+/* FORGOT PASSWORD HUB */
+

app/shared-components/ForgotPassword/ForgotPasswordContainer.js

@@ -0,0 +1,45 @@
+/**
+ * Forgot Password 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 { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import ForgotPassword from './ForgotPassword';
+import * as actions from '../../panel/actions/PanelActions'; // get shared actions from Panel
+import { resetPassword } from '../../Account/AccountActions';
+/**
+ * Map redux store state properties to ForgotPassword component own properties.
+ * @memberOf PanelContainers
+ * @param  {Object} state    entire Redux store's state
+ * @param  {Object} ownProps props passed to the connected component
+ * @return {function}        this function returns plain object, which will be merged into ForgotPassword component props
+ * @todo  We are not using ownProps, so we better not specify it explicitly,
+ * in this case it won't be passed by React (see https://github.com/reactjs/react-redux/blob/master/docs/api.md).
+ */
+const mapStateToProps = () => Object.assign({});
+/**
+ * Bind ForgotPassword component action creators using Redux's bindActionCreators
+ * @memberOf PanelContainers
+ * @param  {function} 	dispatch  redux store method which dispatches actions
+ * @param  {Object} 	ownProps  ForgotPassword component own props
+ * @return {function}          	  to be used as an argument in redux connect call
+ */
+const mapDispatchToProps = dispatch => ({ actions: bindActionCreators(Object.assign(actions, { resetPassword }), dispatch) });
+/**
+ * Connect ForgotPassword component to the Redux store.
+ * @memberOf PanelContainers
+ * @param {function} mapStateToProps 		maps redux store state properties to ForgotPassword component own properties
+ * @param {function} mapDispatchToProps 	binds ForgotPassword component action creators
+ * @return {Object}  						A higher-order React component class that passes state and action
+ *                           				creators into ForgotPassword component. Used by React framework.
+ */
+export default connect(mapStateToProps, mapDispatchToProps)(ForgotPassword);

app/shared-components/ForgotPassword/index.js

@@ -0,0 +1,17 @@
+/**
+ * Point of entry index.js file for ForgotPassword
+ *
+ *
+ * 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 ForgotPassword from './ForgotPassword';
+
+export default ForgotPassword;