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

// TODO proptypes
/* eslint-disable react/prop-types */
import React from "react"; // eslint-disable-line no-unused-vars
import PropTypes from "prop-types";
import APIKeyModel from "../../models/APIKey";
import { Button, Confirm } from "../../core";

class APIKey extends React.Component {
  constructor(props) {
    super(props);
    this.delete = this.delete.bind(this);
    this.toggleEnabled = this.toggleEnabled.bind(this);
  }
  toggleEnabled(e) {
    return e.target.checked
      ? this.props.enableAPIKey()
      : this.props.disableAPIKey();
  }
  delete() {
    return Confirm.confirm(
      "Are you sure you want to delete this API key?"
    ).then(() => this.props.deleteAPIKey(), () => Promise.resolve());
  }
  render() {
    return (
      <div className="api-key">
        <div className="api-key-switch">
          <div className="api-key-switch-enabled">
            <input
              defaultChecked={!this.props.apiKey.disabled}
              id={`enable-${this.props.apiKey._id}`}
              type="checkbox"
              onChange={this.toggleEnabled}
              className="slide-toggle-round"
            />
            <label htmlFor={`enable-${this.props.apiKey._id}`} />
          </div>
        </div>
        <span className="api-key-name">
          <span className="api-key-name-content">
            {this.props.apiKey.name}
          </span>
        </span>
        {!this.props.apiKey.hidden &&
          <div className="api-key-showing">
            <code>
              {this.props.apiKey.key}
            </code>
            <div
              onClick={() => this.props.setAPIKeyHidden(true)}
              className="api-key-showing-hide"
            >
              hide
            </div>
          </div>}
        {this.props.apiKey.hidden &&
          <div
            className="api-key-hidden"
            onClick={() =>
              this.props
                .getAPIKey()
                .then(() => this.props.setAPIKeyHidden(false))}
          >
            Show Key…
          </div>}
        <div className="api-key-delete">
          <Button
            small
            circle
            name="deleteAPIKey"
            className="delible-input-button"
            onClick={this.delete}
          >
            <i className="fa fa-minus" />
          </Button>
        </div>
      </div>
    );
  }
}

APIKey.propTypes = {
  enableAPIKey: PropTypes.func.isRequired,
  disableAPIKey: PropTypes.func.isRequired,
  getAPIKey: PropTypes.func.isRequired,
  deleteAPIKey: PropTypes.func.isRequired,
  apiKey: PropTypes.instanceOf(APIKeyModel).isRequired,
  setAPIKeyHidden: PropTypes.func.isRequired
};

export default APIKey;