Skip to content

Commit 3c5586a

Browse files
author
riteshsangwan
committed
forgot password UI
1 parent e111cfb commit 3c5586a

File tree

1 file changed

+113
-62
lines changed

1 file changed

+113
-62
lines changed

‎src/routes/Home/components/LoginModal/LoginModal.jsx

Lines changed: 113 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ import Button from 'components/Button';
77
import Checkbox from 'components/Checkbox';
88
import TextField from 'components/TextField';
99
import styles from './LoginModal.scss';
10+
import APIService from '../../../../services/APIService';
11+
import {toastr} from 'react-redux-toastr';
12+
import {browserHistory} from 'react-router';
1013
/*
1114
* customStyles
1215
*/
@@ -50,10 +53,11 @@ FormField.propTypes = {
5053
*/
5154

5255
class LogInModal extends React.Component {
53-
constructor() {
54-
super();
56+
constructor(props) {
57+
super(props);
5558
this.state = {
5659
modalLoginIsOpen: false,
60+
showForgetPassword: false,
5761
};
5862
}
5963

@@ -62,7 +66,7 @@ class LogInModal extends React.Component {
6266
}
6367

6468
closeLoginModal() {
65-
this.setState({modalLoginIsOpen: false});
69+
this.setState({modalLoginIsOpen: false, showForgetPassword: false});
6670
}
6771

6872
login() {
@@ -81,9 +85,27 @@ class LogInModal extends React.Component {
8185
}, 100);
8286
}
8387

88+
forgetPassword() {
89+
this.setState({showForgetPassword: true});
90+
}
91+
92+
/**
93+
* This method is invoked when reset password request is submitted
94+
*/
95+
handleForgetPassword(data) {
96+
APIService.forgotPassword({email: data.emailUp}).then((result) => {
97+
toastr.success('', 'Reset password link emailed to your email address');
98+
this.closeLoginModal();
99+
}).catch((reason) => {
100+
const message = reason.response.body.error || 'something went wrong, please try again';
101+
toastr.error(`${message}`);
102+
this.closeLoginModal();
103+
});
104+
}
105+
84106
render() {
107+
const _self = this;
85108
const {handleSubmit, fields, handleLoggedIn, loggedUser, hasError, errorText} = this.props;
86-
87109
return (
88110
<div styleName="signin-modal">
89111
<div styleName="login-signup">
@@ -100,71 +122,88 @@ class LogInModal extends React.Component {
100122

101123
<div styleName="modal-header">
102124
<div onClick={this.closeLoginModal.bind(this)} styleName="icon-close-modal" />
103-
<div styleName="title">Login to Your Account</div>
125+
{this.state.showForgetPassword === false && <div styleName="title">Login to Your Account</div>}
126+
{this.state.showForgetPassword === true && <div styleName="title">Reset forgotten password</div>}
104127
</div>
128+
{this.state.showForgetPassword === false &&
129+
<form styleName="login-form" onSubmit={handleSubmit}>
130+
<div styleName="login-with-fb">
131+
<a href="javascript:;">
132+
<i styleName="icon-facebook" />
133+
<span>Log In with Facebook</span>
134+
</a>
135+
</div>
105136

106-
<form styleName="login-form" onSubmit={handleSubmit}>
107-
<div styleName="login-with-fb">
108-
<a href="javascript:;">
109-
<i styleName="icon-facebook" />
110-
<span>Log In with Facebook</span>
111-
</a>
112-
</div>
113-
114-
<div styleName="login-with-gplus">
115-
<a href="javascript:;">
116-
<i styleName="icon-gplus" />
117-
<span>Log In with Google Plus</span>
118-
</a>
119-
</div>
120-
{/* login with end */}
121-
<div styleName="or-border">
122-
<div styleName="left-line" />
123-
<div styleName="or">or</div>
124-
<div styleName="right-line" />
125-
</div>
126-
{/* or end */}
127-
<div>
128-
{hasError && <span className="error-msg">{errorText.error}</span>}
129-
<div styleName="email-input">
130-
<FormField {...fields.email}>
131-
<TextField {...fields.email} login type="email" label="Email" />
132-
</FormField>
137+
<div styleName="login-with-gplus">
138+
<a href="javascript:;">
139+
<i styleName="icon-gplus" />
140+
<span>Log In with Google Plus</span>
141+
</a>
142+
</div>
143+
{/* login with end */}
144+
<div styleName="or-border">
145+
<div styleName="left-line" />
146+
<div styleName="or">or</div>
147+
<div styleName="right-line" />
133148
</div>
149+
{/* or end */}
134150
<div>
135-
<FormField {...fields.password}>
136-
<TextField {...fields.password} login type="password" label="Password" />
137-
</FormField>
151+
{hasError && <span className="error-msg">{errorText.error}</span>}
152+
<div styleName="email-input">
153+
<FormField {...fields.email}>
154+
<TextField {...fields.email} login type="email" label="Email" />
155+
</FormField>
156+
</div>
157+
<div>
158+
<FormField {...fields.password}>
159+
<TextField {...fields.password} login type="password" label="Password" />
160+
</FormField>
161+
</div>
138162
</div>
139-
</div>
140-
{/* input end */}
141-
<div styleName="rem-forget">
142-
<div styleName="rem-checkbox">
143-
<Checkbox
144-
checked={!this.props.fields.remember.value}
145-
onChange={() => this.props.fields.remember.onChange(!this.props.fields.remember.value)}
146-
id="remember"
163+
{/* input end */}
164+
<div styleName="rem-forget">
165+
<div styleName="rem-checkbox">
166+
<Checkbox
167+
checked={!this.props.fields.remember.value}
168+
onChange={() => this.props.fields.remember.onChange(!this.props.fields.remember.value)}
169+
id="remember"
170+
>
171+
Remember me
172+
</Checkbox>
173+
</div>
174+
<div styleName="forget"><a href="javascript:;" onClick={this.forgetPassword.bind(this)}>Forget Password?</a></div>
175+
</div>
176+
<div styleName="login-btn">
177+
<Button
178+
type="submit" color="black"
179+
className={styles.btnLogin} onClick={() => this.handleLogin(handleLoggedIn, loggedUser)}
147180
>
148-
Remember me
149-
</Checkbox>
181+
Log In
182+
</Button>
183+
</div>
184+
<div styleName="dont-have">
185+
Don&#8217;t have an account? <a href="javascript:;" className="singup">Sign Up</a>
150186
</div>
151-
<div styleName="forget"><a href="javascript:;">Forget Password?</a></div>
152-
</div>
153-
<div styleName="login-btn">
154-
<Button
155-
type="submit" color="black"
156-
className={styles.btnLogin} onClick={() => this.handleLogin(handleLoggedIn, loggedUser)}
157-
>
158-
Log In
159-
</Button>
160-
</div>
161-
<div styleName="dont-have">
162-
Don&#8217;t have an account? <a href="javascript:;" className="singup" >Sign Up</a>
163-
</div>
164-
</form>
187+
</form>
188+
}
189+
{ this.state.showForgetPassword === true &&
190+
<form styleName="login-form" onSubmit={handleSubmit((data) => _self.handleForgetPassword(data))}>
191+
<div>
192+
{hasError && <span className="error-msg">{errorText.error}</span>}
193+
<div styleName="email-input">
194+
<FormField {...fields.emailUp}>
195+
<TextField {...fields.emailUp} login type="email" label="Email" />
196+
</FormField>
197+
</div>
198+
</div>
199+
<div styleName="login-btn">
200+
<Button type="submit" color="black" className={styles.btnLogin}>
201+
Reset Password
202+
</Button>
203+
</div>
204+
</form>
205+
}
165206
</Modal>
166-
167-
168207
</div>
169208
);
170209
}
@@ -181,8 +220,20 @@ LogInModal.propTypes = {
181220

182221
const fields = ['remember', 'email', 'password', 'emailUp', 'passwordUp'];
183222

184-
const validate = (values) => {
223+
const validate = (values, props) => {
185224
const errors = {};
225+
if (!values.emailUp && !values.email) {
226+
errors.emailUp = 'Email is required';
227+
} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.emailUp) && !values.email) {
228+
errors.emailUp = 'Invalid email address';
229+
}
230+
231+
if (errors.emailUp && (values.emailUp || values.email)) {
232+
return errors;
233+
} else if (values.emailUp) {
234+
return errors;
235+
}
236+
186237
if (!values.email) {
187238
errors.email = 'Email is required';
188239
} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {

0 commit comments

Comments
 (0)