53 lines
1.4 KiB
JavaScript
53 lines
1.4 KiB
JavaScript
import React from 'react';
|
|
import copy from 'copy-to-clipboard';
|
|
import { connect } from 'react-redux';
|
|
import styles from './profileSettings.module.css';
|
|
import { Form, Input, Button } from 'UI';
|
|
|
|
@connect(state => ({
|
|
apiKey: state.getIn([ 'user', 'account', 'apiKey' ]),
|
|
loading: state.getIn([ 'user', 'updateAccountRequest', 'loading' ]) ||
|
|
state.getIn([ 'user', 'putClientRequest', 'loading' ]),
|
|
}))
|
|
export default class Api extends React.PureComponent {
|
|
state = { copied: false }
|
|
|
|
copyHandler = () => {
|
|
const { apiKey } = this.props;
|
|
this.setState({ copied: true });
|
|
copy(apiKey);
|
|
setTimeout(() => {
|
|
this.setState({ copied: false });
|
|
}, 1000);
|
|
};
|
|
|
|
render() {
|
|
const { apiKey } = this.props;
|
|
const { copied } = this.state;
|
|
|
|
return (
|
|
<Form onSubmit={ this.handleSubmit } className={ styles.form }>
|
|
<Form.Field>
|
|
<label htmlFor="apiKey">{ 'Organization API Key' }</label>
|
|
<Input
|
|
name="apiKey"
|
|
id="apiKey"
|
|
type="text"
|
|
readOnly={ true }
|
|
value={ apiKey }
|
|
leadingButton={
|
|
<Button
|
|
type="button"
|
|
variant="text-primary"
|
|
role="button"
|
|
onClick={ this.copyHandler }
|
|
>
|
|
{ copied ? 'copied' : 'copy' }
|
|
</Button>
|
|
}
|
|
/>
|
|
</Form.Field>
|
|
</Form>
|
|
);
|
|
}
|
|
}
|