GH-2032 Style Forgot Password in Hub

app/hub/index.jsx

@@ -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" render={() => <ForgotPasswordView locale="hub" />} />
+		<Route exact path="/forgot-password" render={() => <ForgotPasswordView hub />} />
 		<Route exact path="/log-in" component={LogInView} />
 	</AppView>
 );

app/panel/index.jsx

@@ -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" render={() => <ForgotPassword locale="panel" />} />
+		<Route path="/forgot-password" render={() => <ForgotPassword />} />
 		<Route path="/account-success" component={AccountSuccess} />
 	</Panel>
 );

app/scss/partials/_loader.scss

@@ -56,6 +56,9 @@
 	bottom: 0;
 	right: 0;
 }
+.loader.success:after {
+	background: #930194;
+}
 @-webkit-keyframes load3 {
 	0% {
 		-webkit-transform: rotate(0deg);

app/shared-components/ForgotPassword/ForgotPassword.jsx

@@ -46,9 +46,8 @@ class ForgotPassword extends React.Component {
 		e.preventDefault();
 		this.setState({ loading: true }, () => {
 			const { email } = this.state;
-			const { locale } = this.props;
-			const isInPanel = locale === 'panel';
-			const isInHub = locale === 'hub';
+			const { hub } = this.props;
+			const panel = !hub;
 
 			// validate the email and password
 			if (!validateEmail(email)) {
@@ -62,14 +61,14 @@ class ForgotPassword extends React.Component {
 			this.props.actions.resetPassword(email)
 				.then((success) => {
 					this.setState({ loading: false });
-					if (success && isInHub) {
+					if (success && hub) {
 						this.navigateToLogIn();
 
 						this.props.actions.setToast({
 							toastMessage: t('banner_check_your_email_title'),
 							toastClass: 'success',
 						});
-					} else if (success && isInPanel) {
+					} else if (success && panel) {
 						this.props.history.push('/login');
 					}
 				});
@@ -86,71 +85,78 @@ 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 { hub } = this.props;
+		const panel = !hub;
+		const buttonClasses = ClassNames('button ghostery-button', {
+			loading,
+			success: hub
+		});
 		const ContainerClassNames = ClassNames('', {
-			'forgot-password-panel': isInPanel,
-			ForgotPasswordView: isInHub,
+			'forgot-password-panel': panel,
+			ForgotPasswordView: hub,
 		});
 		const MessageClassNames = ClassNames('', {
-			'forgot-password-message': isInPanel,
-			ForgotPasswordMessage: isInHub,
+			'forgot-password-message': panel,
+			ForgotPasswordMessage: hub,
 		});
 		const EmailClassNames = ClassNames('', {
-			'forgot-input-email': isInPanel,
-			ForgotPasswordMessage: isInHub,
+			'forgot-input-email': panel,
+			ForgotPasswordEmail: hub,
 		});
-
 		const ButtonsContainerClassNames = ClassNames('row', {
-			'buttons-container': isInPanel,
-			ForgotPasswordButtonsContainer: isInHub,
+			'buttons-container': panel,
+		});
+		const loaderClassNames = ClassNames('loader', {
+			success: hub
 		});
 		return (
 			<div id={ContainerClassNames}>
 				<div className="row align-center">
-					<div className="small-11 medium-8 columns">
-						<form onSubmit={this.handleSubmit}>
+					<form className="ForgotPasswordForm" onSubmit={this.handleSubmit}>
+						{panel && (
 							<h4 id={MessageClassNames}>
-								{ t('forgot_password_message') }
+								{t('forgot_password_message')}
 							</h4>
-							<div id="forgot-email" className={(emailError ? 'panel-error invalid-email' : '')}>
-								<label htmlFor={EmailClassNames}>
-									{ t('email_colon') }
-									<span className="asterisk">*</span>
-									<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') }
-								</p>
-								<p className="not-found-error warning">
-									{ t('error_email_forgot') }
-								</p>
+						)}
+						{hub && (
+							<h3 id={MessageClassNames} className="text-center">
+								{t('forgot_password_message')}
+							</h3>
+						)}
+						<div id="forgot-email" className={(emailError ? 'panel-error invalid-email' : '')}>
+							<label htmlFor={EmailClassNames}>
+								{t('email_colon')}
+								<span className="asterisk">*</span>
+								<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')}
+							</p>
+							<p className="not-found-error warning">
+								{t('error_email_forgot')}
+							</p>
+						</div>
+						<div className={ButtonsContainerClassNames}>
+							<div className="small-6 columns text-center">
+								{panel && (
+									<Link to="/login" id="forgot-password-cancel" className="cancel button hollow">
+										{t('button_cancel')}
+									</Link>
+								)}
+								{hub && (
+									<div id="forgot-password-cancel" className="cancel button hollow success" onClick={this.navigateToLogIn}>
+										{t('button_cancel')}
+									</div>
+								)}
 							</div>
-							<div className={ButtonsContainerClassNames}>
-								<div className="small-6 columns text-center">
-									{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}>
-										<span className="title">{ t('send_button_label') }</span>
-										<span className="loader" />
-									</button>
-								</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={loaderClassNames} />
+								</button>
 							</div>
-						</form>
-					</div>
+						</div>
+					</form>
 				</div>
 			</div>
 		);

app/shared-components/ForgotPassword/ForgotPassword.scss

@@ -13,14 +13,14 @@
 
 /* FORGOT PASSWORD PANEL */
 #forgot-password-panel {
-	margin-top: 75px;
+	margin: 75px auto 0 auto;
+	width: 356px;
 	h4#forgot-password-message {
 		font-size:14px;
 		font-weight: normal;
 		color: #333333;
 		margin-bottom: 50px;
 	}
-
 	.buttons-container {
 		margin-top: 60px;
 		#send-button {
@@ -31,16 +31,35 @@
 
 /* FORGOT PASSWORD HUB */
 #ForgotPasswordView {
-	margin: 70px 0 70px 182px;
+	height: 100%;
+	margin-top: 100px;
 	#forgot-email {
-		margin: 25px auto;
+		margin: 40px auto;
+	}
+	.ForgotPasswordForm {
+		width: 420px;
 	}
 	#ForgotPasswordMessage {
-		width: 456px;
+		font-size: 1.25rem;
+	}
+	#ForgotPasswordEmail {
+		// Foundation Overrides
+		border: 1px solid #c8c7c2;
+		border-radius: 0;
+		box-shadow: none;
+
+		&:focus {
+			// Foundation Overrides
+			box-shadow: none;
+			border-color: #4a4a4a;
+		}
+	}
+	.panel-error #ForgotPasswordEmail {
+		border-color: #e74055;
+		background-color: white;
 	}
-	.ForgotPasswordButtonsContainer {
-		margin-top: 10px;
-		width: 456px;
+	#send-button {
+		width: 150px;
 	}
 }