Implemented some of api keys
This commit is contained in:
@ -2,6 +2,7 @@ import React from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
|
||||
import { Flex } from 'reflexbox';
|
||||
import { Input, ButtonOutline, InlineForm } from 'rebass';
|
||||
import Layout, { Title } from 'components/Layout';
|
||||
import CenteredContent from 'components/CenteredContent';
|
||||
import SlackAuthLink from 'components/SlackAuthLink';
|
||||
@ -19,6 +20,11 @@ class Settings extends React.Component {
|
||||
this.store = new SettingsStore();
|
||||
}
|
||||
|
||||
onKeyCreate = (e) => {
|
||||
e.preventDefault();
|
||||
this.store.createApiKey();
|
||||
}
|
||||
|
||||
render() {
|
||||
const title = (
|
||||
<Title>
|
||||
@ -34,19 +40,57 @@ class Settings extends React.Component {
|
||||
loading={ this.store.isFetching }
|
||||
>
|
||||
<CenteredContent>
|
||||
<h2 className={ styles.sectionHeader }>Slack</h2>
|
||||
<div className={ styles.section }>
|
||||
<h2 className={ styles.sectionHeader }>Slack</h2>
|
||||
<p>
|
||||
Connect Atlas to your Slack to instantly search for your documents
|
||||
using <code>/atlas</code> command.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Connect Atlas to your Slack to instantly search for your documents
|
||||
using <code>/atlas</code> command.
|
||||
</p>
|
||||
|
||||
<SlackAuthLink
|
||||
scopes={ ['commands'] }
|
||||
redirectUri={ `${URL}/auth/slack/commands` }
|
||||
>
|
||||
<img alt="Add to Slack" height="40" width="139" src="https://platform.slack-edge.com/img/add_to_slack.png" srcSet="https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x" />
|
||||
</SlackAuthLink>
|
||||
<SlackAuthLink
|
||||
scopes={ ['commands'] }
|
||||
redirectUri={ `${URL}/auth/slack/commands` }
|
||||
>
|
||||
<img alt="Add to Slack" height="40" width="139" src="https://platform.slack-edge.com/img/add_to_slack.png" srcSet="https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x" />
|
||||
</SlackAuthLink>
|
||||
</div>
|
||||
|
||||
<div className={ styles.section }>
|
||||
<h2 className={ styles.sectionHeader }>API access</h2>
|
||||
<p>
|
||||
Create API tokens to hack on your Atlas.
|
||||
Learn more in <a href>API documentation</a>.
|
||||
</p>
|
||||
|
||||
{ this.store.apiKeys && (
|
||||
<table className={ styles.apiKeyTable }>
|
||||
{ this.store.apiKeys.map(key => (
|
||||
<tr>
|
||||
<td>{ key.name }</td>
|
||||
<td><code>{ key.secret }</code></td>
|
||||
{/* <td>
|
||||
<span className={ styles.deleteAction }>Delete</span>
|
||||
</td> */}
|
||||
</tr>
|
||||
)) }
|
||||
</table>
|
||||
) }
|
||||
|
||||
<div>
|
||||
<InlineForm
|
||||
placeholder="Token name"
|
||||
buttonLabel="Create token"
|
||||
label="InlineForm"
|
||||
name="inline_form"
|
||||
value={ this.store.keyName }
|
||||
onChange={ this.store.setKeyName }
|
||||
onClick={ this.onKeyCreate }
|
||||
style={{ width: '100%' }}
|
||||
disabled={ this.store.isFetching }
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</CenteredContent>
|
||||
</Layout>
|
||||
);
|
||||
|
Reference in New Issue
Block a user