From d3f24ae59f687c76fe6876c9a2f5fc0160fe4700 Mon Sep 17 00:00:00 2001
From: Ben <benjamin.strumeyer@gmail.com>
Date: Thu, 23 Apr 2020 17:35:59 -0400
Subject: [PATCH 1/3] Cancel button brings you back to log in page

---
 .../ForgotPassword/ForgotPassword.jsx         | 43 +++++++++++++------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/app/shared-components/ForgotPassword/ForgotPassword.jsx b/app/shared-components/ForgotPassword/ForgotPassword.jsx
index 1c4fe6621..059b75de8 100644
--- a/app/shared-components/ForgotPassword/ForgotPassword.jsx
+++ b/app/shared-components/ForgotPassword/ForgotPassword.jsx
@@ -47,6 +47,8 @@ class ForgotPassword extends React.Component {
 		this.setState({ loading: true }, () => {
 			const { email } = this.state;
 			const { locale } = this.props;
+			const isInPanel = locale === 'panel';
+			const isInHub = locale === 'hub';
 
 			// validate the email and password
 			if (!validateEmail(email)) {
@@ -60,20 +62,24 @@ class ForgotPassword extends React.Component {
 			this.props.actions.resetPassword(email)
 				.then((success) => {
 					this.setState({ loading: false });
-					if (success && locale === 'hub') {
-						this.props.history.push('/log-in');
+					if (success && isInHub) {
+						this.navigateToLogIn();
 
 						this.props.actions.setToast({
 							toastMessage: t('banner_check_your_email_title'),
 							toastClass: 'success',
 						});
-					} else if (success && locale === 'panel') {
+					} else if (success && isInPanel) {
 						this.props.history.push('/login');
 					}
 				});
 		});
 	}
 
+	navigateToLogIn = () => {
+		this.props.history.push('/log-in');
+	}
+
 	/**
 	 * Render Forgot Password panel.
 	 * @return {ReactComponent}   ReactComponent instance
@@ -81,24 +87,26 @@ class ForgotPassword extends React.Component {
 	render() {
 		const { email, loading, emailError } = this.state;
 		const { locale } = this.props;
+		const isInPanel = locale === 'panel';
+		const isInHub = locale === 'hub';
 		const buttonClasses = ClassNames('button ghostery-button', { loading });
 
 		const ContainerClassNames = ClassNames('', {
-			'forgot-password-panel': locale === 'panel',
-			ForgotPasswordView: locale === 'hub',
+			'forgot-password-panel': isInPanel,
+			ForgotPasswordView: isInHub,
 		});
 		const MessageClassNames = ClassNames('', {
-			'forgot-password-message': locale === 'panel',
-			ForgotPasswordMessage: locale === 'hub',
+			'forgot-password-message': isInPanel,
+			ForgotPasswordMessage: isInHub,
 		});
 		const EmailClassNames = ClassNames('', {
-			'forgot-input-email': locale === 'panel',
-			ForgotPasswordMessage: locale === 'hub',
+			'forgot-input-email': isInPanel,
+			ForgotPasswordMessage: isInHub,
 		});
 
 		const ButtonsContainerClassNames = ClassNames('row', {
-			'buttons-container': locale === 'panel',
-			ForgotPasswordButtonsContainer: locale === 'hub',
+			'buttons-container': isInPanel,
+			ForgotPasswordButtonsContainer: isInHub,
 		});
 		return (
 			<div id={ContainerClassNames}>
@@ -123,9 +131,16 @@ class ForgotPassword extends React.Component {
 							</div>
 							<div className={ButtonsContainerClassNames}>
 								<div className="small-6 columns text-center">
-									<Link to="/login" id="forgot-password-cancel" className="cancel button hollow">
-										{ t('button_cancel') }
-									</Link>
+									{isInPanel && (
+										<Link to="/login" id="forgot-password-cancel" className="cancel button hollow">
+											{t('button_cancel')}
+										</Link>
+									)}
+									{isInHub && (
+										<div id="forgot-password-cancel" className="cancel button hollow" onClick={this.navigateToLogIn}>
+											{t('button_cancel')}
+										</div>
+									)}
 								</div>
 								<div className="small-6 columns text-center">
 									<button type="submit" id="send-button" className={buttonClasses}>

From 1908c12bb21bb061f5756c9b1789da03162e343f Mon Sep 17 00:00:00 2001
From: Ben <benjamin.strumeyer@gmail.com>
Date: Fri, 24 Apr 2020 11:36:11 -0400
Subject: [PATCH 2/3] Add error toast message in hub and minor style changes

---
 app/Account/AccountActions.js                          | 10 ++++++++++
 .../ForgotPassword/ForgotPassword.scss                 |  5 ++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/app/Account/AccountActions.js b/app/Account/AccountActions.js
index a3851dd40..37e2bd009 100644
--- a/app/Account/AccountActions.js
+++ b/app/Account/AccountActions.js
@@ -29,6 +29,7 @@ import {
 	GET_USER_SUBSCRIPTION_DATA_FAIL,
 	GET_USER_SUBSCRIPTION_DATA_SUCCESS
 } from './AccountConstants';
+import { SET_TOAST } from '../hub/Views/AppView/AppViewConstants';
 
 export const getUserSettings = () => dispatch => (
 	sendMessageInPromise('account.getUserSettings')
@@ -170,10 +171,19 @@ export const resetPassword = email => dispatch => (
 		.then((res) => {
 			const { errors } = res;
 			if (errors) {
+				// Panel toast message
 				dispatch({
 					type: RESET_PASSWORD_FAIL,
 					payload: { errors },
 				});
+				// Hub toast message
+				dispatch({
+					type: SET_TOAST,
+					data: {
+						toastMessage: t('banner_email_not_in_system_message'),
+						toastClass: 'alert',
+					},
+				});
 				return false;
 			}
 			dispatch({ type: RESET_PASSWORD_SUCCESS });
diff --git a/app/shared-components/ForgotPassword/ForgotPassword.scss b/app/shared-components/ForgotPassword/ForgotPassword.scss
index 78ea1ef31..2d8644993 100644
--- a/app/shared-components/ForgotPassword/ForgotPassword.scss
+++ b/app/shared-components/ForgotPassword/ForgotPassword.scss
@@ -31,10 +31,9 @@
 
 /* FORGOT PASSWORD HUB */
 #ForgotPasswordView {
-	margin: 40px auto;
-	padding-bottom: 40px;
+	margin: 70px 0 70px 182px;
 	#forgot-email {
-		margin-top: 40px;
+		margin: 25px auto;
 	}
 	#ForgotPasswordMessage {
 		width: 456px;

From a1074f8bc6f0862d41d126a485ea94573da2d346 Mon Sep 17 00:00:00 2001
From: Ben <benjamin.strumeyer@gmail.com>
Date: Fri, 24 Apr 2020 13:49:35 -0400
Subject: [PATCH 3/3] Move loader to a partials scss file to be used in panel
 and hub

---
 app/scss/hub.scss                             |  1 +
 app/scss/panel.scss                           |  1 +
 app/scss/partials/_account.scss               | 80 ----------------
 app/scss/partials/_loader.scss                | 79 +++++++++++++++
 .../ForgotPassword/ForgotPassword.scss        | 96 +------------------
 5 files changed, 82 insertions(+), 175 deletions(-)
 create mode 100644 app/scss/partials/_loader.scss

diff --git a/app/scss/hub.scss b/app/scss/hub.scss
index ad804d16a..2c220f43d 100644
--- a/app/scss/hub.scss
+++ b/app/scss/hub.scss
@@ -54,6 +54,7 @@ html, body, #root {
 @import './partials/_hub_svgs';
 @import './partials/_shared_components_svgs';
 @import './partials/_fonts';
+@import './partials/_loader';
 
 // Imports from ../hub directory
 @import '../hub/Views/SideNavigationView/SideNavigationView.scss';
diff --git a/app/scss/panel.scss b/app/scss/panel.scss
index dc511bf62..b0cb28133 100644
--- a/app/scss/panel.scss
+++ b/app/scss/panel.scss
@@ -76,6 +76,7 @@ html body {
 @import './partials/_stats';
 @import './partials/_stats_graph';
 @import './partials/_modal_exit_button';
+@import './partials/_loader';
 
 // Imports from ../shared-components directory
 @import '../shared-components/Modal/Modal.scss';
diff --git a/app/scss/partials/_account.scss b/app/scss/partials/_account.scss
index c2bd0b137..78a3d4f1b 100644
--- a/app/scss/partials/_account.scss
+++ b/app/scss/partials/_account.scss
@@ -93,86 +93,6 @@ p.warning {
 	}
 }
 
-.button {
-	.loader {
-		display: none;
-	}
-	&.loading {
-		pointer-events: none;
-		.loader {
-			display: inline-block;
-			height: 12px;
-			width: 12px;
-		}
-		.title {
-			display: none;
-		}
-	}
-}
-
-.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: #00AEF0;
-	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);
-	}
-}
-
 /* FORGOT PASSWORD PANEL */
 #forgot-password-panel{
 	margin-top: 75px;
diff --git a/app/scss/partials/_loader.scss b/app/scss/partials/_loader.scss
new file mode 100644
index 000000000..cf3aa0d42
--- /dev/null
+++ b/app/scss/partials/_loader.scss
@@ -0,0 +1,79 @@
+.button {
+	.loader {
+		display: none;
+	}
+	&.loading {
+		pointer-events: none;
+		.loader {
+			display: inline-block;
+			height: 12px;
+			width: 12px;
+		}
+		.title {
+			display: none;
+		}
+	}
+}
+.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: #00AEF0;
+	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);
+	}
+}
+
diff --git a/app/shared-components/ForgotPassword/ForgotPassword.scss b/app/shared-components/ForgotPassword/ForgotPassword.scss
index 2d8644993..bd679244e 100644
--- a/app/shared-components/ForgotPassword/ForgotPassword.scss
+++ b/app/shared-components/ForgotPassword/ForgotPassword.scss
@@ -12,7 +12,7 @@
  */
 
 /* FORGOT PASSWORD PANEL */
-#forgot-password-panel{
+#forgot-password-panel {
 	margin-top: 75px;
 	h4#forgot-password-message {
 		font-size:14px;
@@ -85,97 +85,3 @@ span.asterisk {
 		color: #CC5F5A;
 	}
 }
-
-/* Loading icon */
-.button.ghostery-button {
-	.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: 10px;
-	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;
-	}
-}