72 lines
1.8 KiB
React
72 lines
1.8 KiB
React
|
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;
|