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

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