p5.js-web-editor/client/modules/User/components/APIKeyForm.jsx
2019-05-29 12:51:50 -04:00

71 lines
1.8 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) {
// TODO
console.log('addKey');
this.props.updateSettings();
event.preventDefault();
return false;
}
removeKey(k) {
// TODO
console.log(k);
}
render() {
return (
<div>
<h2 className="form__label">Key label</h2>
<form className="form" onSubmit={this.addKey}>
<input
type="text"
className="form__input"
id="keyLabel"
onChange={(event) => { this.setState({ keyLabel: event.target.value }); }}
/><br />
<input
type="submit"
value="Create new Key"
disabled={this.state.keyLabel === ''}
/>
</form>
<table className="form__table">
<tbody>
{[{
id: 1,
label: 'MyFirstAPI',
createdAt: new Date(),
lastUsedAt: new Date()
}, {
id: 2,
label: 'MyOtherAPI',
createdAt: new Date(),
lastUsedAt: new Date()
}].map(v => (
<tr key={v.id}>
<td><b>{v.label}</b><br />Created on: {v.createdAt.toLocaleDateString()} {v.createdAt.toLocaleTimeString()}</td>
<td>Last used on:<br /> {v.lastUsedAt.toLocaleDateString()} {v.lastUsedAt.toLocaleTimeString()}</td>
<td><button className="form__button-remove" onClick={() => this.removeKey(v)}>Delete</button></td>
</tr>))}
</tbody>
</table>
</div>
);
}
}
APIKeyForm.propTypes = {
updateSettings: PropTypes.func.isRequired,
};
export default APIKeyForm;