[org admin] user: rewrote it with react (#3936)

frontend/src/components/dialog/set-org-user-contact-email.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; 
+import { gettext } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+
+const propTypes = {
+  orgID: PropTypes.string.isRequired,
+  email: PropTypes.string.isRequired,
+  contactEmail: PropTypes.string.isRequired,
+  updateContactEmail: PropTypes.func.isRequired,
+  toggleDialog: PropTypes.func.isRequired
+};
+
+class SetOrgUserContactEmail extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      inputValue: this.props.contactEmail,
+      submitBtnDisabled: false
+    };
+  }
+
+  handleInputChange = (e) => {
+    this.setState({
+      inputValue: e.target.value 
+    });
+  }
+
+  formSubmit = () => {
+    const { orgID, email } = this.props;
+    const contactEmail = this.state.inputValue.trim();
+
+    this.setState({
+      submitBtnDisabled: true 
+    });
+
+    seafileAPI.setOrgUserContactEmail(orgID, email, contactEmail).then((res) => {
+      const newContactEmail = contactEmail ? res.data.contact_email : '';
+      this.props.updateContactEmail(newContactEmail);
+      this.props.toggleDialog();
+    }).catch((error) => {
+      let errorMsg = Utils.getErrorMsg(error);
+      this.setState({
+        formErrorMsg: errorMsg,
+        submitBtnDisabled: false
+      }); 
+    });
+  }
+
+  render() {
+    const { inputValue, formErrorMsg, submitBtnDisabled } = this.state;
+    return (
+      <Modal isOpen={true} centered={true} toggle={this.props.toggleDialog}>
+        <ModalHeader toggle={this.props.toggleDialog}>{gettext('Set user contact email')}</ModalHeader>
+        <ModalBody>
+          <React.Fragment>
+            <input type="text" className="form-control" value={inputValue} onChange={this.handleInputChange} />
+            {formErrorMsg && <p className="error m-0 mt-2">{formErrorMsg}</p>}
+          </React.Fragment>
+        </ModalBody>
+        <ModalFooter>
+          <button className="btn btn-secondary" onClick={this.props.toggleDialog}>{gettext('Cancel')}</button>
+          <button className="btn btn-primary" disabled={submitBtnDisabled} onClick={this.formSubmit}>{gettext('Submit')}</button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+SetOrgUserContactEmail.propTypes = propTypes;
+
+export default SetOrgUserContactEmail;