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

82 lines
2.3 KiB
JavaScript

import PropTypes from 'prop-types';
import React from 'react';
class APIKeyForm extends React.Component {
constructor(props) {
super(props);
this.state = { keyLabel: '' };
this.addKey = this.addKey.bind(this);
}
addKey(event) {
event.preventDefault();
document.getElementById('addKeyForm').reset();
this.props.createApiKey(this.state.keyLabel)
.then(newToken => this.setState({ newToken }));
this.state.keyLabel = '';
return false;
}
removeKey(keyId) {
this.props.removeApiKey(keyId);
}
render() {
const { newToken } = this.state;
const content = newToken ?
(
<div>
<p>Here is your new key. Copy it somewhere, you won't be able to see it later !</p>
<input type="text" readOnly value={newToken} />
<button>Copy to clipboard</button>
</div>) :
(<form id="addKeyForm" className="form" onSubmit={this.addKey}>
<h2 className="form__label">Key label</h2>
<input
type="text"
className="form__input"
placeholder="A name you will be able to recognize"
id="keyLabel"
onChange={(event) => { this.setState({ keyLabel: event.target.value }); }}
/><br />
<input
type="submit"
value="Create new Key"
disabled={this.state.keyLabel === ''}
/>
</form>
);
return (
<div>
{content}
<table className="form__table">
<tbody id="form__table_new_key"></tbody>
<tbody>
{this.props.apiKeys && this.props.apiKeys.map(v => (
<tr key={v.id}>
<td><b>{v.label}</b><br />Created on: {v.createdAt}</td>
<td>Last used on:<br /> {v.lastUsedAt}</td>
<td><button className="form__table-button-remove" onClick={() => this.removeKey(v.id)}>Delete</button></td>
</tr>))}
</tbody>
</table>
</div>
);
}
}
APIKeyForm.propTypes = {
createApiKey: PropTypes.func.isRequired,
removeApiKey: PropTypes.func.isRequired,
apiKeys: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.object.isRequired,
label: PropTypes.string.isRequired,
createdAt: PropTypes.object.isRequired,
lastUsedAt: PropTypes.object.isRequired,
})).isRequired
};
export default APIKeyForm;