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

import React, { Component } from "react";
import { connect } from "react-redux";
import { Container, Form, Header, Message, Segment } from "semantic-ui-react";

import {
  clearAuthRequestError,
  clearAuthRequestSuccess,
  setFormPassword,
  setFormPasswordConfirmation,
  setFormOldPassword
} from "../../actions/auth/reducer.actions";
import { sendChangePasswordRequest } from "../../actions/auth/saga.actions";
import Error from "../Shared/Error";

class Settings extends Component {
  constructor(props) {
    super(props);
    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));
  };

  changeOldPassword = event => {
    this.props.dispatch(setFormOldPassword(event.target.value));
  };

  onSubmitChangePassword = event => {
    event.preventDefault();
    const {
      dispatch,
      password,
      passwordConfirmation,
      oldPassword
    } = this.props;
    dispatch(
      sendChangePasswordRequest({
        new_password1: password,
        new_password2: passwordConfirmation,
        old_password: oldPassword
      })
    );
  };

  render() {
    const {
      isSendingAuthRequest,
      authRequestError,
      authRequestSuccess,
      password,
      passwordConfirmation,
      oldPassword
    } = this.props;
    return (
      <SettingsView
        isSendingAuthRequest={isSendingAuthRequest}
        authRequestError={authRequestError}
        authRequestSuccess={authRequestSuccess}
        password={password}
        passwordConfirmation={passwordConfirmation}
        oldPassword={oldPassword}
        changePassword={this.changePassword}
        changePasswordConfirmation={this.changePasswordConfirmation}
        changeOldPassword={this.changeOldPassword}
        onSubmitChangePassword={this.onSubmitChangePassword}
      />
    );
  }
}

function mapStateToProps(state) {
  return { ...state.auth };
}

const SettingsView = ({
  isSendingAuthRequest,
  authRequestError,
  authRequestSuccess,
  password,
  passwordConfirmation,
  oldPassword,
  changePassword,
  changePasswordConfirmation,
  changeOldPassword,
  onSubmitChangePassword
}) => (
  <Container>
    <Header>Settings</Header>
    <Header attached="top"> Change Password </Header>
    <Segment attached>
      <Form
        loading={isSendingAuthRequest}
        onSubmit={onSubmitChangePassword}
        error={!!authRequestError}
        success={!!authRequestSuccess}
      >
        <Form.Field>
          <label>Old Password</label>
          <input
            placeholder="••••••••"
            type="password"
            value={oldPassword}
            onChange={changeOldPassword}
          />
        </Form.Field>
        <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="Change Password failed!" error={authRequestError} />
        <Message success>
          <Message.Header>Password Successfully Changed!</Message.Header>
          <p>New password has been set.</p>
        </Message>
        <Form.Button>Change Password</Form.Button>
      </Form>
    </Segment>
  </Container>
);

export default connect(mapStateToProps)(Settings);