ChangePassword.js

import React, { Component } from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { CircularProgress } from 'material-ui';
import Modal from 'react-responsive-modal';
import { CHANGE_PASSWORD } from '../../../constants/feedbackMessages';

import Submit from '../../../components/Button/Submit';
import InputText from '../../../components/InputText/InputText';
import InputPassword from '../../../components/InputText/InputPassword';

const titleStyle = {
  fontFamily: 'Dharma ELight',
  display: 'flex',
  justifyContent: 'flex-start',
  fontSize: '30px',
};

const Error = styled.p`
  color: red;
`;

class ChangePassword extends Component {
  constructor(props) {
    super(props);

    this.state = {
      password: '',
      newPassword: '',
      newPasswordConfirm: '',
      error: '',
      disabled: true,
    };

    this.validateForm = this.validateForm.bind(this);
  }

  handleInput = (field, e) => {
    this.setState({ [field]: e.target.value });
    const disableData = { ...this.state };
    this.setState({
      disabled: !(
        disableData.newPassword &&
        disableData.newPasswordConfirm &&
        disableData.password
      ),
    });
  };

  async validateForm() {
    this.setState({ error: '' });
    const formData = { ...this.state };
    delete formData.error;
    delete formData.open;
    delete formData.typePassword;
    delete formData.disabled;

    Object.keys(formData).forEach((key) => {
      if (!formData[key]) {
        this.setState({ error: CHANGE_PASSWORD.field });
        return; // eslint-disable-line
      }
    });

    if (formData.newPassword !== formData.newPasswordConfirm) {
      this.setState({ error: CHANGE_PASSWORD.newpassword });
      return;
    }

    delete formData.newPasswordConfirm;

    await this.props.handleUpdatePass(formData);
  }

  // validate

  render() {
    const {
      password,
      newPassword,
      newPasswordConfirm,
      error,
      disabled,
    } = this.state;

    return (
      <Modal
        little
        open={this.props.openChangePasswordModal}
        showCloseIcon={false}
        styles={{
          modal: {
            padding: 30,
          },
        }}
        onClose={() => {}}
      >
        <div style={titleStyle}>
          Digite sua senha antiga e a nova senha desejada
        </div>
        <InputPassword
          label="Senha Atual"
          color="black"
          value={password}
          onChange={e => this.handleInput('password', e)}
          errorText={this.state.error}
        />
        <InputText
          type="password"
          label="Nova Senha"
          color="black"
          value={newPassword}
          onChange={e => this.handleInput('newPassword', e)}
          errorText={error}
        />
        <InputText
          type="password"
          label="Confirmar Nova Senha"
          color="black"
          value={newPasswordConfirm}
          onChange={e => this.handleInput('newPasswordConfirm', e)}
          errorText={error}
        />

        <Error>{this.props.error}</Error>
        {this.props.loading ? (
          <CircularProgress color="#ed2024" />
        ) : (
          <div
            style={{
              display: 'flex',
              flexDirection: 'row',
              justifyContent: 'space-around',
              marginTop: 30,
            }}
          >
            <Submit
              label="Cancelar"
              margin="0px 10px 20px"
              onClick={this.props.toggleChangePasswordModal}
            />
            <Submit
              disabled={disabled}
              label="Confirmar"
              margin="0px 10px 20px"
              onClick={this.validateForm}
              backgroundColor="#ed2024"
            />
          </div>
        )}
      </Modal>
    );
  }
}

ChangePassword.propTypes = {
  error: PropTypes.string.isRequired,
  openChangePasswordModal: PropTypes.bool.isRequired,
  loading: PropTypes.bool.isRequired,

  toggleChangePasswordModal: PropTypes.func.isRequired,
  handleUpdatePass: PropTypes.func.isRequired,
};

export default ChangePassword;