Alex.Gaw.Austin1

.eslintrc

@@ -94,7 +94,7 @@
         "no-catch-shadow": 0,
         "no-class-assign": 2,
         "no-cond-assign": 2,
-        "no-console": 1,
+        "no-console": 0,
         "no-const-assign": 2,
         "no-constant-condition": 2,
         "no-continue": 0,

.gitignore

@@ -35,3 +35,5 @@ jspm_packages
 
 # Optional REPL history
 .node_repl_history
+
+.env

client/.eslintrc

@@ -94,7 +94,7 @@
         "no-catch-shadow": 0,
         "no-class-assign": 2,
         "no-cond-assign": 2,
-        "no-console": 1,
+        "no-console": 0,
         "no-const-assign": 2,
         "no-constant-condition": 2,
         "no-continue": 0,

client/package.json

@@ -2,8 +2,26 @@
   "name": "client",
   "version": "0.1.0",
   "private": true,
+  "proxy": "http://localhost:3001",
   "devDependencies": {
-    "react-scripts": "0.9.3"
+    "react-scripts": "0.9.3",
+    "babel": "^6.23.0",
+    "babel-cli": "^6.23.0",
+    "babel-core": "^6.23.1",
+    "babel-eslint": "^7.1.1",
+    "babel-istanbul": "^0.12.2",
+    "babel-plugin-syntax-async-functions": "^6.13.0",
+    "babel-plugin-transform-builtin-extend": "^1.1.2",
+    "babel-plugin-transform-class-properties": "^6.23.0",
+    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-plugin-transform-regenerator": "^6.22.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-stage-0": "^6.22.0",
+    "babel-resolver": "^1.1.0",
+    "eslint": "^3.16.1",
+    "eslint-plugin-babel": "^4.1.0",
+    "eslint-plugin-react": "^6.10.0"
   },
   "dependencies": {
     "axios": "^0.15.2",

client/src/App.js

@@ -1,12 +1,84 @@
 import React, { Component } from 'react';
-import { BrowserRouter, Route } from 'react-router-dom';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import './App.css';
 import SignUpSignIn from './SignUpSignIn';
 import TopNavbar from './TopNavbar';
 import Secret from './Secret';
 import axios from 'axios';
 
 class App extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      signUpSignInError: '',
+      authenticated: Boolean(localStorage.getItem('token'))
+    };
+  }
+
+  handleSignUp(credentials) {
+    const { username, password, confirmPassword } = credentials;
+
+    if ( !username.trim() || !password.trim() || password.trim() !== confirmPassword.trim()) {
+      this.setState({
+        signUpSignInError: 'Must provide all fields'
+      });
+    } else {
+      axios.post('/api/signup', credentials)
+        .then(response => {
+          const { token } = response.data;
+          localStorage.setItem('token', token);
+
+          this.setState({
+            signUpSignInError: '',
+            authenticated: true
+          });
+        })
+        .catch(error => { console.log(error); });
+    }
+  }
+
+  handleSignIn(credentials) {
+    // Handle Sign In
+  }
+
+  handleSignOut() {
+    localStorage.removeItem('token');
+    this.setState({
+      authenticated: false
+    });
+  }
+
+  renderSignUpSignIn() {
+    return <SignUpSignIn
+      error={this.state.signUpSignInError}
+      onSignUp={this.handleSignUp.bind(this)} />;
+  }
+
+  renderApp() {
+    return (
+      <div>
+        <Switch>
+          <Route exact path="/" render={() => <h1>I am protected!</h1>} />
+          <Route exact path="/secret" component={Secret} />
+          <Route render={() => <h1>NOT FOUND!</h1>} />
+        </Switch>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <BrowserRouter>
+        <div className="App">
+          <TopNavbar
+            showNavItems={this.state.authenticated}
+            onSignOut={this.handleSignOut.bind(this)} />
+          {this.state.authenticated ? this.renderApp() : this.renderSignUpSignIn()}
+        </div>
+      </BrowserRouter>
+    );
+  }
 
 }
 

client/src/SignUp.js

@@ -9,7 +9,7 @@ class SignUp extends Component {
       username: '',
       password: '',
       confirmPassword: '',
-    }
+    };
   }
 
   handleSubmit(event) {

client/src/SignUpSignIn.js

@@ -19,15 +19,15 @@ class SignUpSignIn extends Component {
           {this.props.error && this.renderError()}
           <Tabs defaultActiveKey={1} id="signup-signin-tabs">
             <Tab eventKey={1} title="Sign Up">
-              <SignUp onSignUp={this.props.onSignUp}/>
+              <SignUp onSignUp={this.props.onSignUp} />
             </Tab>
             <Tab eventKey={2} title="Sign In">
               Sign In
             </Tab>
           </Tabs>
         </Col>
       </Row>
-    )
+    );
   }
 }
 

client/src/TopNavbar.js

@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react';
 import { Navbar, Nav, NavItem } from 'react-bootstrap';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 
 const TopNavbar = (props) => {
   return (
@@ -20,12 +20,12 @@ const TopNavbar = (props) => {
             <Nav pullRight>
               <Link to="/secret"><Navbar.Text>Secret</Navbar.Text></Link>
             </Nav>
-          </Navbar.Collapse>
-          : null
+          </Navbar.Collapse> :
+          null
       }
     </Navbar>
   );
-}
+};
 
 TopNavbar.propTypes = {
   onSignOut: PropTypes.func.isRequired,