Removes AdvancedSettingsView as functionality now in AccountView

client/modules/User/pages/AccountView.jsx

@@ -3,13 +3,15 @@ import React from 'react';
 import { reduxForm } from 'redux-form';
 import { bindActionCreators } from 'redux';
 import { Link, browserHistory } from 'react-router';
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import InlineSVG from 'react-inlinesvg';
 import axios from 'axios';
 import { Helmet } from 'react-helmet';
-import { updateSettings, initiateVerification } from '../actions';
+import { updateSettings, initiateVerification, createApiKey, removeApiKey  } from '../actions';
 import AccountForm from '../components/AccountForm';
 import { validateSettings } from '../../../utils/reduxFormUtils';
 import GithubButton from '../components/GithubButton';
+import APIKeyForm from '../components/APIKeyForm';
 
 const exitUrl = require('../../../images/exit.svg');
 const logoUrl = require('../../../images/p5js-logo.svg');
@@ -36,7 +38,7 @@ class AccountView extends React.Component {
 
   render() {
     return (
-      <div className="form-container">
+      <section className="account form-container">
         <Helmet>
           <title>p5.js Web Editor | Account</title>
         </Helmet>
@@ -50,12 +52,24 @@ class AccountView extends React.Component {
         </div>
         <div className="form-container__content">
           <h2 className="form-container__title">My Account</h2>
-          <AccountForm {...this.props} />
-          <Link to="/account/advanced">Advanced Settings</Link>
-          <h2 className="form-container__divider">Or</h2>
-          <GithubButton buttonText="Login with Github" />
+          <Tabs>
+            <TabList>
+              <div className="preference__subheadings">
+                <Tab><h4 className="preference__subheading">Account</h4></Tab>
+                <Tab><h4 className="preference__subheading">Access Tokens</h4></Tab>
+              </div>
+            </TabList>
+            <TabPanel>
+              <AccountForm {...this.props} />
+              <h2 className="form-container__divider">Or</h2>
+              <GithubButton buttonText="Login with Github" />
+            </TabPanel>
+            <TabPanel>
+              <APIKeyForm {...this.props} />
+            </TabPanel>
+          </Tabs>
         </div>
-      </div>
+      </section>
     );
   }
 }
@@ -64,12 +78,15 @@ function mapStateToProps(state) {
   return {
     initialValues: state.user, // <- initialValues for reduxForm
     user: state.user,
+    apiKeys: state.user.apiKeys,
     theme: state.preferences.theme
   };
 }
 
 function mapDispatchToProps(dispatch) {
-  return bindActionCreators({ updateSettings, initiateVerification }, dispatch);
+  return bindActionCreators({
+    updateSettings, initiateVerification, createApiKey, removeApiKey
+  }, dispatch);
 }
 
 function asyncValidate(formProps, dispatch, props) {

client/modules/User/pages/AdvancedSettingsView.jsx

@@ -1,74 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import { browserHistory } from 'react-router';
-import InlineSVG from 'react-inlinesvg';
-import { Helmet } from 'react-helmet';
-import { createApiKey, removeApiKey } from '../actions';
-import APIKeyForm from '../components/APIKeyForm';
-
-const exitUrl = require('../../../images/exit.svg');
-const logoUrl = require('../../../images/p5js-logo.svg');
-
-class AdvancedSettingsView extends React.Component {
-  constructor(props) {
-    super(props);
-    this.closeAccountPage = this.closeAccountPage.bind(this);
-    this.gotoHomePage = this.gotoHomePage.bind(this);
-  }
-
-  componentDidMount() {
-    document.body.className = this.props.theme;
-  }
-
-  closeAccountPage() {
-    browserHistory.goBack();
-  }
-
-  gotoHomePage() {
-    browserHistory.push('/');
-  }
-
-  render() {
-    return (
-      <div className="form-container">
-        <Helmet>
-          <title>p5.js Web Editor | Advanced Settings</title>
-        </Helmet>
-        <div className="form-container__header">
-          <button className="form-container__logo-button" onClick={this.gotoHomePage}>
-            <InlineSVG src={logoUrl} alt="p5js Logo" />
-          </button>
-          <button className="form-container__exit-button" onClick={this.closeAccountPage}>
-            <InlineSVG src={exitUrl} alt="Close Account Page" />
-          </button>
-        </div>
-        <div className="form-container__content">
-          <h2 className="form-container__title">Advanced Settings</h2>
-          <APIKeyForm {...this.props} />
-        </div>
-      </div>
-    );
-  }
-}
-
-function mapStateToProps(state) {
-  return {
-    initialValues: state.user, // <- initialValues for reduxForm
-    user: state.user,
-    apiKeys: state.user.apiKeys,
-    previousPath: state.ide.previousPath,
-    theme: state.preferences.theme
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return bindActionCreators({ createApiKey, removeApiKey }, dispatch);
-}
-
-AdvancedSettingsView.propTypes = {
-  theme: PropTypes.string.isRequired
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(AdvancedSettingsView);

client/routes.jsx

@@ -9,7 +9,6 @@ import ResetPasswordView from './modules/User/pages/ResetPasswordView';
 import EmailVerificationView from './modules/User/pages/EmailVerificationView';
 import NewPasswordView from './modules/User/pages/NewPasswordView';
 import AccountView from './modules/User/pages/AccountView';
-import AdvancedSettingsView from './modules/User/pages/AdvancedSettingsView';
 // import SketchListView from './modules/Sketch/pages/SketchListView';
 import { getUser } from './modules/User/actions';
 import { stopSketch } from './modules/IDE/actions/ide';
@@ -39,7 +38,6 @@ const routes = store => (
     <Route path="/sketches" component={IDEView} />
     <Route path="/assets" component={IDEView} />
     <Route path="/account" component={AccountView} />
-    <Route path="/account/advanced" component={AdvancedSettingsView} />
     <Route path="/:username/sketches/:project_id" component={IDEView} />
     <Route path="/:username/sketches" component={IDEView} />
     <Route path="/about" component={IDEView} />

server/routes/server.routes.js

@@ -87,14 +87,6 @@ router.get('/account', (req, res) => {
   }
 });
 
-router.get('/account/advanced', (req, res) => {
-  if (req.user) {
-    res.send(renderIndex());
-  } else {
-    res.redirect('/login');
-  }
-});
-
 router.get('/about', (req, res) => {
   res.send(renderIndex());
 });