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

// TODO proptypes
/* eslint-disable react/prop-types */
import React from "react"; // eslint-disable-line no-unused-vars
import PropTypes from "prop-types";
import classNames from "classnames";
import Modal from "react-modal";
import { Map } from "immutable";
import Confirm from "../../core/confirm";
import { Tooltip } from "../../core";

class AuthProvider extends React.Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = { modalOpen: false };
    this.openModal = this.openModal.bind(this);
    this.simpleCloseModal = this.simpleCloseModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }
  toggle(e) {
    const { disableProvider, enableProvider } = this.props;
    return e.target.checked ? enableProvider() : disableProvider();
  }
  openModal() {
    this.setState({ modalOpen: true });
  }
  simpleCloseModal() {
    this.setState({ modalOpen: false });
  }
  closeModal(e) {
    e.stopPropagation();
    const { providerInput, discard } = this.props.children.props;
    if ((providerInput || Map()).toJS().dirty) {
      Confirm.confirm("You have unsaved changes. Discard them now?").then(
        () => {
          this.setState({ modalOpen: false });
          return discard();
        },
        () => Promise.resolve()
      );
    } else {
      this.setState({ modalOpen: false });
    }
  }
  render() {
    const {
      title,
      open,
      enableProvider,
      confirmBeforeClose,
      tooltip
    } = this.props;
    const close = confirmBeforeClose ? this.closeModal : this.simpleCloseModal;
    return (
      <tr className="plain-table-row plain-table-row-is-hoverable">
        <td className="plain-table-cell">
          {title}
        </td>
        <td className="plain-table-cell">
          <span
            className={classNames({
              "plain-table-cell-is-enabled": open,
              "plain-table-cell-is-disabled": !open
            })}
          >
            {open ? "Enabled" : "Disabled"}
          </span>
        </td>
        <td className="plain-table-cell">
          <button
            name="edit"
            className="button button-is-default button-is-small"
            onClick={this.openModal}
          >
            Edit
          </button>
        </td>

        <Modal
          ref={ref => (this.modal = ref)}
          isOpen={this.state.modalOpen}
          onRequestClose={close}
          contentLabel="Edit Auth Provider"
          className="view-modal-dialog"
          overlayClassName="view-modal-overlay"
        >
          <div className="view-modal-content">
            <div className="view-modal-header">
              <button className="view-modal-close" onClick={close}>
                ×
              </button>
              <h2 className="view-modal-title">Edit Provider</h2>
              <p className="view-modal-description">
                Allow your users to sign in with {title}
              </p>
              <div className="auth-provider-panel-header">
                <h3 className="auth-provider-name">
                  {title}
                  {tooltip &&
                    <Tooltip
                      dataFor="auth-provider-tooltip"
                      place="top"
                      classNames="tooltip-indicator tooltip-indicator-small tooltip-indicator-primary"
                      effect="float"
                    >
                      {tooltip}
                    </Tooltip>}
                </h3>
                {enableProvider &&
                  <div className="view-modal-header-auth-toggle">
                    <div className="switch">
                      <input
                        id={`enable-${title}`}
                        type="checkbox"
                        checked={open}
                        onChange={this.toggle}
                        className="slide-toggle-round"
                      />
                      <label htmlFor={`enable-${title}`} />
                    </div>
                  </div>}
              </div>
            </div>
            {this.props.children}
          </div>
        </Modal>
      </tr>
    );
  }
}

AuthProvider.propTypes = {
  title: PropTypes.string.isRequired,
  open: PropTypes.bool.isRequired
};

export default AuthProvider;