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

// TODO proptypes
/* eslint-disable react/prop-types */
import React from "react"; // eslint-disable-line no-unused-vars
import { Banner, FormRow, FormRowInputGroup, Button } from "../../core";
import APIKey from "./APIKey";

export default class APIKeys extends React.Component {
  constructor(props) {
    super(props);
    this.createAPIKey = this.createAPIKey.bind(this);
  }
  createAPIKey() {
    return this.props
      .createAPIKey({ name: this.props.newKeyName })
      .then(this.props.closeNewKeyForm)
      .then(this.props.loadAPIKeys);
  }

  render() {
    const {
      apiKeys,
      getAPIKey,
      deleteAPIKey,
      enableAPIKey,
      loadAPIKeys,
      disableAPIKey,
      showNewKeyForm,
      openNewKeyForm,
      newKeyName,
      setAPIKeyHidden,
      setNewKeyName,
      apiKeyError
    } = this.props;

    // TODO hook up enterPressedCaller to new key form.
    return (
      <div className="view-modal-body">
        <Banner message={apiKeyError} error />
        <FormRow>
          <FormRowInputGroup>
            {apiKeys
              .map(k =>
                <APIKey
                  key={k._id}
                  apiKey={k}
                  deleteAPIKey={() => deleteAPIKey(k._id).then(loadAPIKeys)}
                  enableAPIKey={() => enableAPIKey(k._id).then(loadAPIKeys)}
                  disableAPIKey={() => disableAPIKey(k._id).then(loadAPIKeys)}
                  getAPIKey={() => getAPIKey(k._id)}
                  setAPIKeyHidden={v => setAPIKeyHidden(k._id, v)}
                />
              )
              .toArray()}
          </FormRowInputGroup>
        </FormRow>
        {!showNewKeyForm &&
          <FormRow>
            <FormRowInputGroup>
              <Button
                small
                default
                onClick={openNewKeyForm}
                name="createAPIKey"
              >
                Create API Key
              </Button>
            </FormRowInputGroup>
          </FormRow>}
        {showNewKeyForm &&
          <FormRow>
            <FormRowInputGroup>
              <div>
                <input
                  type="text"
                  name="newKeyName"
                  placeholder="Name"
                  value={newKeyName}
                  className="text-input"
                  onChange={e => setNewKeyName(e.target.value)}
                />
                <Button small primary onClick={this.createAPIKey}>
                  Save
                </Button>
              </div>
            </FormRowInputGroup>
          </FormRow>}
      </div>
    );
  }
}