components/Profil/ChangePasswordModal.js

import React, { Component } from 'react';
import SVGComponent from '../SVG/SVGComponent';
import { SVG_ICONS } from '../../constants';
import validateFields from '../../utils/validation';
/**
 * @module Profil/ChangePasswordModal
 */
/**
 * @typedef {object} props
 * @property {Function} setOpenModal
 * @property {Function} changePwd
 */
export default class ChangePasswordModal extends Component {
  constructor() {
    super();
    /**
     * @member {object}
     * @property {string} oldPwd
     * @property {string} newPwd
     * @property {string} confirmNewPwd
     * @property {object} errorMgs
     */
    this.state = {
      oldPwd: '',
      newPwd: '',
      confirmNewPwd: '',
      errorMgs: {},
    };
  }

  /**
   * Clear form data and close modal
   *
   * @returns {void}
   */
  closeModal = () => {
    this.setState({
      oldPwd: '',
      newPwd: '',
      confirmNewPwd: '',
    });
    this.props.setOpenModal({ modal: '' });
  };

  /**
   * Change password
   *
   * @function
   * @returns {void}
   */
  handleChangePassword = () => {
    const validationParams = [
      {
        label: 'Old Password',
        fieldName: 'oldPwd',
        value: this.state.oldPwd,
        rules: ['mandatory'],
      },
      {
        label: 'New Password',
        fieldName: 'newPwd',
        value: this.state.newPwd,
        rules: ['mandatory', 'regExp'],
        expression: '(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[@#$%^&+=])(?=\\S+$)(?=.{8,})',
      },
      {
        label: 'Confirm Password',
        fieldName: 'confirmNewPwd',
        value: this.state.confirmNewPwd,
        rules: ['mandatory', 'equal'],
        equalToIndex: 1,
      },
    ];
    validateFields(validationParams)
      .then(() => {
        this.props.changePwd({
          oldPassword: this.state.oldPwd,
          newPassword: this.state.newPwd,
        });
        this.closeModal();
      })
      .catch((errorMgs) => {
        this.setState({ errorMgs });
      });
  };

  /**
   * Updating state fields
   *
   * @param {string} field
   * @param {Event} e
   * @returns {void}
   */
  updateField(field, e) {
    const value = e.target.value;
    const change = {};
    change[field] = value;
    this.setState(change);
    this.setState({ errorMgs: {} });
  }

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <div className="dialog trm open">
        <div className="p-20">
          <div className="dialog__heading">
            <span className="dialog-title">Change Password</span>
            <SVGComponent
              className="icon-xxs dialog__close"
              src={`${SVG_ICONS.utility}#close`}
              onClick={this.closeModal}
            />
          </div>
        </div>
        <div className="dialog__wrapper">
          <div className="dialog__row">
            <div className="dialog__fields">
              <label className="style-2">Old Password :</label>
              <input
                id="changePasswordModal_oldPassword"
                type="password"
                className="form-control"
                placeholder="******"
                value={this.state.oldPwd}
                onChange={this.updateField.bind(this, 'oldPwd')}
              />
              {this.state.errorMgs.oldPwd}
            </div>
          </div>
          <div className="dialog__row">
            <div className="dialog__fields">
              <label className="style-2">New Password :</label>
              <div className="dialog__fields-holder">
                <input
                  id="changePasswordModal_newPassword"
                  type="password"
                  className="form-control"
                  placeholder="******"
                  value={this.state.newPwd}
                  onChange={this.updateField.bind(this, 'newPwd')}
                />
                <div className="warning">
                  <SVGComponent className="icon-info" src={`${SVG_ICONS.utility}#info`} />
                  <div className="warning-info">
                    Password should be at least 8 character long and must contain at least one digit, at least a lower
                    case and an upper case character, a special character @#$%^&+= and contains no whitespace.
                  </div>
                </div>
              </div>
              {this.state.errorMgs.newPwd}
            </div>
          </div>
          <div className="dialog__row">
            <div className="dialog__fields">
              <label className="style-2">Confirm Password :</label>
              <input
                id="changePasswordModal_confirmNewPassword"
                type="password"
                className="form-control"
                placeholder="******"
                value={this.state.confirmNewPwd}
                onChange={this.updateField.bind(this, 'confirmNewPwd')}
              />
              {this.state.errorMgs.confirmNewPwd}
            </div>
          </div>
        </div>
        <div className="p-20">
          <div className="dialog__button-wrapper">
            <button
              id="chandePasswordModal_cancel"
              type="button"
              className="btn btn-secondary"
              onClick={this.closeModal}
            >
              Cancel
            </button>
            <button
              id="changePasswordModal_save"
              type="button"
              className="btn btn-primary ml-10"
              onClick={this.handleChangePassword}
            >
              Save
            </button>
          </div>
        </div>
      </div>
    );
  }
}