parent
ffe3cba510
commit
a5df76d7e9
13 changed files with 364 additions and 16 deletions
@ -0,0 +1,98 @@ |
||||
import React, { Component } from "react"; |
||||
import { connect } from "react-redux"; |
||||
import { Link, Redirect } from "react-router-dom"; |
||||
import { Button, Container, Form, Header, Message } from "semantic-ui-react"; |
||||
|
||||
import { |
||||
clearAuthRequestError, |
||||
clearAuthRequestSuccess, |
||||
setFormEmail |
||||
} from "../../actions/auth/reducer.actions"; |
||||
import { sendForgotPasswordRequest } from "../../actions/auth/saga.actions"; |
||||
import Error from "../Shared/Error"; |
||||
|
||||
class ForgotPassword extends Component { |
||||
componentWillMount() { |
||||
this.props.dispatch(clearAuthRequestError()); |
||||
this.props.dispatch(clearAuthRequestSuccess()); |
||||
} |
||||
|
||||
changeEmail = event => { |
||||
this.props.dispatch(setFormEmail(event.target.value)); |
||||
}; |
||||
|
||||
onSubmitForgotPassword = event => { |
||||
event.preventDefault(); |
||||
const { dispatch, email } = this.props; |
||||
dispatch(sendForgotPasswordRequest({ email })); |
||||
}; |
||||
|
||||
render() { |
||||
const { |
||||
isSendingAuthRequest, |
||||
authRequestError, |
||||
authRequestSuccess, |
||||
email, |
||||
userToken |
||||
} = this.props; |
||||
if (userToken) return <Redirect to={"/"} />; |
||||
return ( |
||||
<ForgotPasswordView |
||||
isSendingAuthRequest={isSendingAuthRequest} |
||||
authRequestError={authRequestError} |
||||
authRequestSuccess={authRequestSuccess} |
||||
email={email} |
||||
changeEmail={this.changeEmail} |
||||
onSubmitForgotPassword={this.onSubmitForgotPassword} |
||||
/> |
||||
); |
||||
} |
||||
} |
||||
|
||||
function mapStateToProps(state) { |
||||
return { ...state.auth }; |
||||
} |
||||
|
||||
const ForgotPasswordView = ({ |
||||
isSendingAuthRequest, |
||||
authRequestError, |
||||
authRequestSuccess, |
||||
email, |
||||
changeEmail, |
||||
onSubmitForgotPassword |
||||
}) => ( |
||||
<Container> |
||||
<Header>Forgot Password</Header> |
||||
<p>Enter your email and we will send you a link to reset your password.</p> |
||||
<Form |
||||
loading={isSendingAuthRequest} |
||||
onSubmit={onSubmitForgotPassword} |
||||
error={!!authRequestError} |
||||
success={!!authRequestSuccess} |
||||
> |
||||
<Form.Field> |
||||
<label>Email</label> |
||||
<input |
||||
placeholder="bob@gmail.com" |
||||
type="email" |
||||
value={email} |
||||
onChange={changeEmail} |
||||
/> |
||||
</Form.Field> |
||||
<Error |
||||
header="Forgot Password Request failed!" |
||||
error={authRequestError} |
||||
/> |
||||
<Message success> |
||||
<Message.Header>Password Reset Sent!</Message.Header> |
||||
<p>If the email exists, a password reset link will be sent to it.</p> |
||||
</Message> |
||||
<Button.Group> |
||||
<Button type="submit" primary>Request Password Reset</Button> |
||||
<Button as={Link} to="/auth/login" secondary>Login</Button> |
||||
</Button.Group> |
||||
</Form> |
||||
</Container> |
||||
); |
||||
|
||||
export default connect(mapStateToProps)(ForgotPassword); |
@ -0,0 +1,118 @@ |
||||
import React, { Component } from "react"; |
||||
import { connect } from "react-redux"; |
||||
import { Link, Redirect } from "react-router-dom"; |
||||
import { Container, Form, Header, Message } from "semantic-ui-react"; |
||||
|
||||
import { |
||||
clearAuthRequestError, |
||||
clearAuthRequestSuccess, |
||||
setFormPassword, |
||||
setFormPasswordConfirmation |
||||
} from "../../actions/auth/reducer.actions"; |
||||
import { sendResetPasswordRequest } from "../../actions/auth/saga.actions"; |
||||
import Error from "../Shared/Error"; |
||||
|
||||
class ResetPassword extends Component { |
||||
componentWillMount() { |
||||
this.props.dispatch(clearAuthRequestError()); |
||||
this.props.dispatch(clearAuthRequestSuccess()); |
||||
} |
||||
|
||||
changePassword = event => { |
||||
this.props.dispatch(setFormPassword(event.target.value)); |
||||
}; |
||||
|
||||
changePasswordConfirmation = event => { |
||||
this.props.dispatch(setFormPasswordConfirmation(event.target.value)); |
||||
}; |
||||
|
||||
onSubmitResetPassword = event => { |
||||
event.preventDefault(); |
||||
const { dispatch, password, passwordConfirmation } = this.props; |
||||
const { uid, token } = this.props.match.params; |
||||
dispatch( |
||||
sendResetPasswordRequest({ |
||||
uid, |
||||
token, |
||||
new_password1: password, |
||||
new_password2: passwordConfirmation |
||||
}) |
||||
); |
||||
}; |
||||
|
||||
render() { |
||||
const { |
||||
isSendingAuthRequest, |
||||
authRequestError, |
||||
authRequestSuccess, |
||||
password, |
||||
passwordConfirmation, |
||||
userToken |
||||
} = this.props; |
||||
if (userToken) return <Redirect to={"/"} />; |
||||
return ( |
||||
<ResetPasswordView |
||||
isSendingAuthRequest={isSendingAuthRequest} |
||||
authRequestError={authRequestError} |
||||
authRequestSuccess={authRequestSuccess} |
||||
password={password} |
||||
passwordConfirmation={passwordConfirmation} |
||||
changePassword={this.changePassword} |
||||
changePasswordConfirmation={this.changePasswordConfirmation} |
||||
onSubmitResetPassword={this.onSubmitResetPassword} |
||||
/> |
||||
); |
||||
} |
||||
} |
||||
|
||||
function mapStateToProps(state) { |
||||
return { ...state.auth }; |
||||
} |
||||
|
||||
const ResetPasswordView = ({ |
||||
isSendingAuthRequest, |
||||
authRequestError, |
||||
authRequestSuccess, |
||||
password, |
||||
passwordConfirmation, |
||||
changePassword, |
||||
changePasswordConfirmation, |
||||
onSubmitResetPassword |
||||
}) => ( |
||||
<Container> |
||||
<Header>Reset Password</Header> |
||||
<Form |
||||
loading={isSendingAuthRequest} |
||||
onSubmit={onSubmitResetPassword} |
||||
error={!!authRequestError} |
||||
success={!!authRequestSuccess} |
||||
> |
||||
<Form.Field> |
||||
<label>New Password</label> |
||||
<input |
||||
placeholder="••••••••" |
||||
type="password" |
||||
value={password} |
||||
onChange={changePassword} |
||||
/> |
||||
</Form.Field> |
||||
<Form.Field> |
||||
<label>Confirm New Password</label> |
||||
<input |
||||
placeholder="••••••••" |
||||
type="password" |
||||
value={passwordConfirmation} |
||||
onChange={changePasswordConfirmation} |
||||
/> |
||||
</Form.Field> |
||||
<Error header="Reset Password failed!" error={authRequestError} /> |
||||
<Message success> |
||||
<Message.Header>Password Reset!</Message.Header> |
||||
<p>You may now <Link to="/auth/login">log in</Link> with the new credentials.</p> |
||||
</Message> |
||||
<Form.Button primary>Reset Password</Form.Button>{" "} |
||||
</Form> |
||||
</Container> |
||||
); |
||||
|
||||
export default connect(mapStateToProps)(ResetPassword); |
Loading…
Reference in new issue