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 = this.props.t('APIKeyForm.ConfirmDelete', { key_label: 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

{this.props.t('APIKeyForm.NoTokens')}

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

{this.props.t('APIKeyForm.Summary')}

{this.props.t('APIKeyForm.CreateToken')}

{ this.setState({ keyLabel: event.target.value }); }} placeholder={this.props.t('APIKeyForm.TokenPlaceholder')} type="text" value={this.state.keyLabel} />
{ keyWithToken && (

{this.props.t('APIKeyForm.NewTokenTitle')}

{this.props.t('APIKeyForm.NewTokenInfo')}

) }

{this.props.t('APIKeyForm.ExistingTokensTitle')}

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