import PropTypes from 'prop-types'; import React from 'react'; import Button from '../../../common/Button'; import { PlusIcon } from '../../../common/icons'; import CopyableInput from '../../IDE/components/CopyableInput'; import APIKeyList from './APIKeyList'; export const APIKeyPropType = PropTypes.shape({ id: PropTypes.object.isRequired, token: PropTypes.object, label: PropTypes.string.isRequired, createdAt: PropTypes.string.isRequired, lastUsedAt: PropTypes.string, }); class APIKeyForm extends React.Component { constructor(props) { super(props); this.state = { keyLabel: '' }; this.addKey = this.addKey.bind(this); this.removeKey = this.removeKey.bind(this); this.renderApiKeys = this.renderApiKeys.bind(this); } addKey(event) { event.preventDefault(); const { keyLabel } = this.state; this.setState({ keyLabel: '' }); this.props.createApiKey(keyLabel); return false; } removeKey(key) { const message = `Are you sure you want to delete "${key.label}"?`; if (window.confirm(message)) { this.props.removeApiKey(key.id); } } renderApiKeys() { const hasApiKeys = this.props.apiKeys && this.props.apiKeys.length > 0; if (hasApiKeys) { return ( ); } return

You have no exsiting tokens.

; } render() { const keyWithToken = this.props.apiKeys.find(k => !!k.token); return (

Personal Access Tokens act like your password to allow automated scripts to access the Editor API. Create a token for each script that needs access.

Create new token

{ this.setState({ keyLabel: event.target.value }); }} placeholder="What is this token for? e.g. Example import script" type="text" value={this.state.keyLabel} />
{ keyWithToken && (

Your new access token

Make sure to copy your new personal access token now. You won’t be able to see it again!

) }

Existing tokens

{this.renderApiKeys()}
); } } APIKeyForm.propTypes = { apiKeys: PropTypes.arrayOf(PropTypes.shape(APIKeyPropType)).isRequired, createApiKey: PropTypes.func.isRequired, removeApiKey: PropTypes.func.isRequired, }; export default APIKeyForm;