caremyway-client/src/components/Auth/ResetPassword.jsx

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);