application/components/developer.js

import React from 'react';
import {connect} from 'react-redux';
import {Link, browserHistory} from 'react-router';

import Config from './../config';
import CurrentUser from './../current-user';

import {Row, Col} from './flexbox';
import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField';
import Divider from 'material-ui/Divider';
import FlatButton from 'material-ui/FlatButton';

class Developer extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="opps-root">
                <Row>
                    <Col offsetXs={2} xs={8}>
                        <Row>
                            <Col xs={4}>
                                <Paper className='padded'>
                                    <p>
                                        These are your API keys. Protect them as you would a password.
                                    </p>

                                    <TextField
                                        floatingLabelText='Public API Key'
                                        readOnly={true}
                                        value={CurrentUser.getPublicToken()}
                                        fullWidth={true} />

                                    <TextField
                                        floatingLabelText='Private API Key'
                                        readOnly={true}
                                        value={CurrentUser.getPrivateToken()}
                                        fullWidth={true} />

                                    {
                                        this.props.application.settings.get('developerExports')
                                        ? (
                                            <div className="clear-top">
                                                <FlatButton
                                                    href="/sys/export"
                                                    primary={true}
                                                    label="Download Content Export" />
                                            </div>
                                        )
                                        : ''
                                    }

                                </Paper>
                            </Col>
                            <Col xs={8}>
                                <Paper className='padded'>
                                    <h1 className='first'>Developer Access</h1>
                                    <section className='clear-bottom'>
                                        <h3 className='first'>API</h3>
                                        <a href="http://static.getsnworks.com/ceo/">CEO API Documentation</a>
                                        <p className='clear-top'>
                                            The CEO API is the core of the system. All products are built on top of the CEO API, including this interface and both Creative Cloud plugins.
                                        </p>
                                    </section>
                                    <Divider />
                                    <section className='clear-top clear-bottom'>
                                        <h3 className='first'>CEO Server</h3>
                                        <a href="http://static.getsnworks.com/ceo/ceo-api">CEO Server Documention</a>
                                        <p className='clear-top'>
                                            The internal API used to create plugins that work directly within the API, including new MetaProperty fields.
                                        </p>
                                    </section>
                                    <Divider />
                                    <section className='clear-top clear-bottom'>
                                        <h3 className='first'>CEO Application</h3>
                                        <a href="http://static.getsnworks.com/ceo/react">CEO Application Documention</a>
                                        <p className='clear-top'>
                                            This thing that you're using right now. To extend the application, you must understand how it's built.
                                        </p>
                                    </section>
                                </Paper>
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        application: state.application
    }
}

export default connect(mapStateToProps)(Developer);