Implemented some of api keys

This commit is contained in:
Jori Lallo
2016-08-24 00:37:54 -07:00
parent 29665621b3
commit a2aea2abfc
12 changed files with 342 additions and 35 deletions

View File

@ -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>
);