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