header-ui/src/components/profile/modal.jsx

Header UI

import React from 'react';
import {
  Table,
  TableBody,
  TableRow,
  TableCell,
  Button,
} from '@material-ui/core';
import ReactTooltip from 'react-tooltip';
import { Modal } from 'react-bootstrap';

import ChangeField from './ChangeField.jsx';

require('./style.css');

const profileStyle = {
  dialogStyle: {
    width: 500,
  },
  profileLabel: {
    fontWeight: 400,
    fontSize: 16,
    color: 'rgba(0,0,0,.5)',
    lineHeight: '24px',
    textAlign: 'left',
    letterSpacing: 0.03,
    paddingRight: 0,
    paddingLeft: 0,
    width: 140,
  },
  profileLabelOutput: {
    fontWeight: 400,
    fontSize: 16,
    color: '#222',
    lineHeight: '24px',
    textAlign: 'left',
    letterSpacing: 0.03,
    paddingRight: 0,
    paddingLeft: 10,
  },
  cutPadding: {
    paddingLeft: 0,
    paddingRight: 0,
  },
};

export class Profile extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      oldPassword: '',
      newPassword: '',
      confirmPassword: '',
      name:
        this.props.currentUser && this.props.currentUser.user
          ? this.props.currentUser.user.name
          : '',
      progress: false,
    };
  }

  changeFile(e) {
    if (e.target.files[0]) this.props.saveUserImage(e.target.files[0]);
  }
  openChangeFile() {
    document.getElementById('fileBox').click();
  }
  deleteFile(fileId) {
    if (fileId) this.props.deleteUserImage(fileId);
  }
  changeUserData() {
    if ((this.state.oldPassword && this.state.newPassword) || this.state.name) {
      if (this.state.newPassword === this.state.confirmPassword) {
        this.setState({ progress: true });
        this.props
          .updateUser(
            this.state.name,
            this.state.oldPassword,
            this.state.newPassword,
          )
          .then(
            () => {
              this.setState({
                oldPassword: '',
                newPassword: '',
                confirmPassword: '',
                progress: false,
              });
              this.props.close(); // Close Profile Edit Modal
              // this.props.showAlert('success', "User Update Success.")
            },
            err => {
              if (err.response) {
                const error = 'User Update Error';
                this.props.showAlert('error', error);
              }
              this.setState({
                oldPassword: '',
                newPassword: '',
                confirmPassword: '',
                progress: false,
              });
            },
          );
      } else {
        this.props.showAlert('error', 'New passwords does not match.');
      }
    } else {
      this.props.showAlert('error', 'Please fill all the fields.');
    }
  }
  changeHandler(which, e) {
    this.state[which] = e.target.value;
    this.setState(this.state);
  }
  keyUpHandler() {
    this.changeUserData();
  }
  render() {
    let userImage = '';
    let fileId = null;
    if (this.props.currentUser && this.props.currentUser.file) {
      userImage = this.props.currentUser.file.document.url;
      fileId = this.props.currentUser.file.document.id;
    }
    const actionsBtn = (
      <Button
        variant="contained"
        size="large"
        color="primary"
        disabled={this.state.progress}
        onClick={this.changeUserData.bind(this)}
        style={{ backgroundColor: '#559afb' }}
      >
        <span style={{ fontSize: '15px' }}>SAVE</span>
      </Button>
    );
    const profilepicobj = (
      <div className="edit-profile-photo">
        <div onClick={this.openChangeFile.bind(this)} role="presentation">
          {this.props.loading ? (
            <div className="profileimageloader">
              <svg
                width="24px"
                height="24px"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 100 100"
                preserveAspectRatio="xMidYMid"
                className="uil-ring"
              >
                <rect
                  x="0"
                  y="0"
                  width="100"
                  height="100"
                  fill="none"
                  className="bk"
                />
                <circle
                  cx="50"
                  cy="50"
                  r="47"
                  strokeDasharray="221.48228207808043 73.82742735936014"
                  stroke="#43bdff"
                  fill="none"
                  strokeWidth="6"
                >
                  <animateTransform
                    attributeName="transform"
                    type="rotate"
                    values="0 50 50;180 50 50;360 50 50;"
                    keyTimes="0;0.5;1"
                    dur="1s"
                    repeatCount="indefinite"
                    begin="0s"
                  />
                </circle>
              </svg>
            </div>
          ) : (
            <svg
              version="1.1"
              id="Capa_1"
              xmlns="http://www.w3.org/2000/svg"
              x="0px"
              y="0px"
              width="30px"
              height="30px"
              viewBox="0 0 333.668 333.668"
            >
              <g>
                <path
                  d="M295.101,298.649H38.561C17.295,298.649,0,281.354,0,260.088V103.703c0-21.266,17.295-38.561,38.561-38.561h52.347
		l4.582-15.457c1.87-8.458,9.602-14.666,18.696-14.666h105.297c8.837,0,16.658,6.176,18.728,14.743l0.122,0.527l4.177,14.852h52.597
		c21.266,0,38.561,17.295,38.561,38.561v156.384C333.662,281.354,316.361,298.649,295.101,298.649z M38.561,77.996
		c-14.178,0-25.707,11.53-25.707,25.707v156.384c0,14.178,11.53,25.707,25.707,25.707h256.54c14.178,0,25.707-11.53,25.707-25.707
		V103.703c0-14.178-11.53-25.707-25.707-25.707h-62.327l-7.037-25.097c-0.649-2.918-3.278-5.032-6.26-5.032H114.179
		c-3.027,0-5.598,2.069-6.26,5.039l-7.429,25.09H38.561z M166.841,259.798c-44.981,0-81.576-36.588-81.576-81.563
		c0-44.981,36.594-81.569,81.576-81.569c44.969,0,81.557,36.594,81.557,81.569C248.397,223.204,211.809,259.798,166.841,259.798z
		 M166.841,109.513c-37.893,0-68.722,30.823-68.722,68.716s30.83,68.709,68.722,68.709c37.886,0,68.703-30.823,68.703-68.709
		C235.543,140.336,204.72,109.513,166.841,109.513z M286.804,101.852c-6.555,0-11.858,5.315-11.858,11.858
		c0,6.549,5.302,11.857,11.858,11.857c6.549,0,11.851-5.309,11.851-11.857C298.649,107.167,293.346,101.852,286.804,101.852z"
                />
              </g>
              <g />
              <g />
              <g />
              <g />
              <g />
              <g />
              <g />
              <g />
              <g />
              <g />
              <g />
              <g />
              <g />
              <g />
              <g />
            </svg>
          )}
          <input
            type="file"
            style={{
              visibility: 'collapse',
              width: '0',
              display: 'inline',
            }}
            onChange={this.changeFile.bind(this)}
            id="fileBox"
            accept="image/*"
          />
        </div>
        <span onClick={this.openChangeFile.bind(this)}>Click to Edit</span>
      </div>
    );
    return (
      <Modal show={this.props.open} onHide={this.props.close}>
        <Modal.Header closeButton>
          <Modal.Title>Edit Profile</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Table selectable={false}>
            <TableBody
              displayRowCheckbox={false}
              showRowHover={false}
              className="profile-body"
            >
              <TableRow className="profile-row">
                <TableCell style={profileStyle.profileLabel}>
                  Profile Pic
                </TableCell>
                <TableCell style={profileStyle.cutPadding}>
                  {profilepicobj}
                </TableCell>
              </TableRow>
              <TableRow className="profile-row">
                <TableCell style={profileStyle.profileLabel}>Name</TableCell>
                <TableCell style={profileStyle.cutPadding}>
                  <ChangeField
                    field="name"
                    value={this.state.name}
                    changeHandler={this.changeHandler.bind(this)}
                    keyUpHandler={this.keyUpHandler.bind(this)}
                  />
                </TableCell>
              </TableRow>
              <TableRow className="profile-row">
                <TableCell style={profileStyle.profileLabel}>Email</TableCell>
                <TableCell
                  style={profileStyle.profileLabelOutput}
                  data-tip={
                    this.props.currentUser && this.props.currentUser.user
                      ? this.props.currentUser.user.email
                      : ''
                  }
                >
                  {this.props.currentUser && this.props.currentUser.user
                    ? this.props.currentUser.user.email
                    : ''}
                </TableCell>
              </TableRow>
              <TableRow className="profile-row">
                <TableCell style={profileStyle.profileLabel}>
                  Old Password
                </TableCell>
                <TableCell style={profileStyle.cutPadding}>
                  <ChangeField
                    field="oldPassword"
                    value={this.state.oldPassword}
                    changeHandler={this.changeHandler.bind(this)}
                    keyUpHandler={this.keyUpHandler.bind(this)}
                  />
                </TableCell>
              </TableRow>
              <TableRow className="profile-row">
                <TableCell style={profileStyle.profileLabel}>
                  New Password
                </TableCell>
                <TableCell style={profileStyle.cutPadding}>
                  <ChangeField
                    field="newPassword"
                    value={this.state.newPassword}
                    changeHandler={this.changeHandler.bind(this)}
                    keyUpHandler={this.keyUpHandler.bind(this)}
                  />
                </TableCell>
              </TableRow>
              <TableRow
                className="profile-row"
                style={{
                  borderBottom: '1px solid rgb(224, 224, 224)',
                }}
              >
                <TableCell style={profileStyle.profileLabel}>
                  Confirm Password
                </TableCell>
                <TableCell style={profileStyle.cutPadding}>
                  <ChangeField
                    field="confirmPassword"
                    value={this.state.confirmPassword}
                    changeHandler={this.changeHandler.bind(this)}
                    keyUpHandler={this.keyUpHandler.bind(this)}
                  />
                </TableCell>
              </TableRow>
            </TableBody>
          </Table>
          <ReactTooltip place="bottom" type="dark" delayShow={100} />
        </Modal.Body>
        <Modal.Footer>{actionsBtn}</Modal.Footer>
      </Modal>
    );
  }
}

export default Profile;