p5.js-web-editor/client/modules/User/components/APIKeyForm.jsx

120 lines
3.6 KiB
React
Raw Normal View History

2018-10-13 22:14:46 +02:00
import PropTypes from 'prop-types';
import React from 'react';
import Button from '../../../common/Button';
2020-05-26 22:17:24 +02:00
import { PlusIcon } from '../../../common/icons';
2019-05-15 12:11:58 +02:00
import CopyableInput from '../../IDE/components/CopyableInput';
2019-05-15 12:11:58 +02:00
import APIKeyList from './APIKeyList';
2019-05-14 20:12:52 +02:00
2019-05-15 12:11:58 +02:00
export const APIKeyPropType = PropTypes.shape({
id: PropTypes.object.isRequired, // eslint-disable-line
token: PropTypes.object, // eslint-disable-line
2019-05-15 12:11:58 +02:00
label: PropTypes.string.isRequired,
createdAt: PropTypes.string.isRequired,
lastUsedAt: PropTypes.string
2019-05-15 12:11:58 +02:00
});
2018-10-13 22:14:46 +02:00
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);
2018-10-13 22:14:46 +02:00
}
addKey(event) {
event.preventDefault();
const { keyLabel } = this.state;
this.setState({
keyLabel: '',
});
this.props.createApiKey(keyLabel);
2018-10-13 22:14:46 +02:00
return false;
}
removeKey(key) {
const message = this.props.t('APIKeyForm.ConfirmDelete', { key_label: key.label });
if (window.confirm(message)) {
this.props.removeApiKey(key.id);
}
2018-10-13 22:14:46 +02:00
}
renderApiKeys() {
const hasApiKeys = this.props.apiKeys && this.props.apiKeys.length > 0;
if (hasApiKeys) {
return (
<APIKeyList apiKeys={this.props.apiKeys} onRemove={this.removeKey} t={this.props.t} />
);
}
return <p>{this.props.t('APIKeyForm.NoTokens')}</p>;
}
render() {
2019-05-15 12:11:58 +02:00
const keyWithToken = this.props.apiKeys.find(k => !!k.token);
return (
2019-05-15 12:11:58 +02:00
<div className="api-key-form">
2019-05-15 16:25:58 +02:00
<p className="api-key-form__summary">
{this.props.t('APIKeyForm.Summary')}
2019-05-15 16:25:58 +02:00
</p>
2019-05-15 12:11:58 +02:00
<div className="api-key-form__section">
<h3 className="api-key-form__title">{this.props.t('APIKeyForm.CreateToken')}</h3>
2019-05-15 12:11:58 +02:00
<form className="form form--inline" onSubmit={this.addKey}>
<label htmlFor="keyLabel" className="form__label form__label--hidden ">{this.props.t('APIKeyForm.TokenLabel')}</label>
2019-05-15 12:11:58 +02:00
<input
className="form__input"
id="keyLabel"
onChange={(event) => { this.setState({ keyLabel: event.target.value }); }}
placeholder={this.props.t('APIKeyForm.TokenPlaceholder')}
2019-05-15 12:11:58 +02:00
type="text"
value={this.state.keyLabel}
/>
<Button
2019-05-15 12:11:58 +02:00
disabled={this.state.keyLabel === ''}
iconBefore={<PlusIcon />}
label="Create new key"
type="submit"
2019-05-15 12:11:58 +02:00
>
{this.props.t('APIKeyForm.CreateTokenSubmit')}
</Button>
2019-05-15 12:11:58 +02:00
</form>
{
keyWithToken && (
<div className="api-key-form__new-token">
<h4 className="api-key-form__new-token__title">{this.props.t('APIKeyForm.NewTokenTitle')}</h4>
2019-05-15 16:25:58 +02:00
<p className="api-key-form__new-token__info">
{this.props.t('APIKeyForm.NewTokenInfo')}
2019-05-15 16:25:58 +02:00
</p>
2019-05-15 12:11:58 +02:00
<CopyableInput label={keyWithToken.label} value={keyWithToken.token} />
</div>
)
}
</div>
<div className="api-key-form__section">
<h3 className="api-key-form__title">{this.props.t('APIKeyForm.ExistingTokensTitle')}</h3>
2019-05-15 12:11:58 +02:00
{this.renderApiKeys()}
</div>
2018-10-13 22:14:46 +02:00
</div>
);
}
}
APIKeyForm.propTypes = {
2019-05-15 12:11:58 +02:00
apiKeys: PropTypes.arrayOf(PropTypes.shape(APIKeyPropType)).isRequired,
createApiKey: PropTypes.func.isRequired,
removeApiKey: PropTypes.func.isRequired,
t: PropTypes.func.isRequired
2018-10-13 22:14:46 +02:00
};
export default APIKeyForm;