stitch-ui/src/auth/components/AllowedRequestOrigins.js

/* eslint-disable react/no-array-index-key */
import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import Modal from "react-modal";
import { addAlert, AlertContainer } from "../../alert";
import {
  Banner,
  FormRow,
  FormRowInputGroup,
  FormRowLabelGroup,
  Button
} from "../../core";
import {
  loadAllowedRequestOrigins,
  addAllowedRequestOrigin,
  removeAllowedRequestOrigin,
  setAllowedRequestOriginInput,
  saveAllowedRequestOrigins,
  cancelEditingAllowedRequestOrigins
} from "../actions";
import { AllowedRequestOriginsEditPropType } from "../models/AllowedRequestOrigins";

class AllowedRequestOrigins extends React.Component {
  constructor(props) {
    super(props);
    this.state = { modalOpen: false };
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }
  openModal() {
    if (!this.props.allowedRequestOrigins.status.get("dirty")) {
      this.props.loadAllowedRequestOrigins();
    }
    this.setState({ modalOpen: true });
  }
  closeModal(e) {
    if (e) {
      e.stopPropagation();
    }
    this.setState({ modalOpen: false });
  }

  render() {
    const alertKey = "allowedRequestOrigins";
    return (
      <tr className="plain-table-row plain-table-row-is-hoverable">
        <td className="plain-table-cell">Allowed Request Origins</td>
        <td className="plain-table-cell">
          <Button name="edit" default small onClick={this.openModal}>
            Edit
          </Button>
        </td>

        <Modal
          isOpen={this.state.modalOpen}
          onRequestClose={this.closeModal}
          contentLabel="Edit Allowed Request Origins"
          className="view-modal-dialog"
          overlayClassName="view-modal-overlay"
        >
          <div className="view-modal-content">
            <div className="view-modal-header">
              <button className="view-modal-close" onClick={this.closeModal}>
                ×
              </button>
              <h2 className="view-modal-title">Edit Allowed Request Origins</h2>
              <p>
                Restrict the domains from which browsers can send requests to
                your app.
              </p>
            </div>
            <div className="view-modal-body">
              <Banner
                message={this.props.allowedRequestOrigins.status.get(
                  "loadError"
                )}
                error
              />
              <Banner
                message={this.props.allowedRequestOrigins.status.get(
                  "saveError"
                )}
                error
              />
              <span>
                <FormRow>
                  <FormRowLabelGroup>
                    <label
                      htmlFor="allowedRequestOrigins"
                      className="form-row-label"
                    >
                      Allowed Origins
                    </label>
                  </FormRowLabelGroup>
                  <FormRowInputGroup>
                    {this.props.allowedRequestOrigins.local.map((p, i) =>
                      <div className="delible-input" key={`${i}`}>
                        <input
                          type="text"
                          className="text-input form-row-text-input"
                          placeholder="Origin"
                          name={`origin/${i}`}
                          value={p}
                          onChange={e =>
                            this.props.setAllowedRequestOriginInput(
                              i,
                              e.target.value
                            )}
                        />
                        <Button
                          small
                          circle
                          className="delible-input-button"
                          onClick={() =>
                            this.props.removeAllowedRequestOrigin(i)}
                        >
                          <i className="fa fa-minus" />
                        </Button>
                      </div>
                    )}
                    <Button
                      small
                      default
                      onClick={() => this.props.addAllowedRequestOrigin()}
                      name="addAllowedRequestOrigin"
                    >
                      Add
                    </Button>
                  </FormRowInputGroup>
                </FormRow>
              </span>
            </div>
            <footer className="view-modal-footer">
              <div className="view-modal-actions">
                <Button
                  default
                  footer
                  onClick={() => {
                    this.props.cancelEditingAllowedRequestOrigins();
                    this.closeModal();
                  }}
                  name="cancelEditingAllowedRequestOrigins"
                >
                  Cancel
                </Button>
                {this.props.allowedRequestOrigins.status.get("dirty") &&
                  <span>You have unsaved changes</span>}
                <AlertContainer alertKey={alertKey} />
                <Button
                  primary
                  footer
                  onClick={() =>
                    this.props
                      .saveAllowedRequestOrigins(
                        this.props.allowedRequestOrigins.local
                      )
                      .then(() => this.props.addAlert(alertKey, "Saved"))
                      .catch(() => {})}
                  name="saveAllowedRequestOrigins"
                >
                  Save
                </Button>
              </div>
            </footer>
          </div>
        </Modal>
      </tr>
    );
  }
}

const mapStateToProps = state => {
  const { allowedRequestOrigins } = state.auth.security;
  return {
    allowedRequestOrigins
  };
};

const mapDispatchToProps = (dispatch, ownProps) => ({
  addAlert: (key, message) => dispatch(addAlert(key, message)),
  loadAllowedRequestOrigins: () =>
    dispatch(loadAllowedRequestOrigins(ownProps.app.groupId, ownProps.app._id)),
  addAllowedRequestOrigin: () => dispatch(addAllowedRequestOrigin()),
  removeAllowedRequestOrigin: index =>
    dispatch(removeAllowedRequestOrigin({ index })),
  setAllowedRequestOriginInput: (index, input) =>
    dispatch(setAllowedRequestOriginInput({ index, input })),
  saveAllowedRequestOrigins: newOrigins =>
    dispatch(
      saveAllowedRequestOrigins(
        ownProps.app.groupId,
        ownProps.app._id,
        newOrigins
      )
    ),
  cancelEditingAllowedRequestOrigins: () =>
    dispatch(cancelEditingAllowedRequestOrigins())
});

AllowedRequestOrigins.propTypes = {
  allowedRequestOrigins: AllowedRequestOriginsEditPropType.isRequired,
  addAlert: PropTypes.func.isRequired,
  loadAllowedRequestOrigins: PropTypes.func.isRequired,
  addAllowedRequestOrigin: PropTypes.func.isRequired,
  removeAllowedRequestOrigin: PropTypes.func.isRequired,
  setAllowedRequestOriginInput: PropTypes.func.isRequired,
  saveAllowedRequestOrigins: PropTypes.func.isRequired,
  cancelEditingAllowedRequestOrigins: PropTypes.func.isRequired
};

export default connect(mapStateToProps, mapDispatchToProps)(
  AllowedRequestOrigins
);