Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GH-2032 Style Forgot Password in Hub #535

Merged
merged 10 commits into from Apr 28, 2020
@@ -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>
);
@@ -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>
);
@@ -56,6 +56,9 @@
bottom: 0;
right: 0;
}
.loader.success:after {
background: #930194;
}
@-webkit-keyframes load3 {
0% {
-webkit-transform: rotate(0deg);
@@ -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>
);
@@ -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;
}
}

ProTip! Use n and p to navigate between commits in a pull request.