bug fixes and create account page

app/components/Account.jsx

@@ -32,7 +32,7 @@ class Account extends React.Component {
             <label>Account Email</label><p>{user.email}</p>
           </div>
 
-          <Link to="/addProduct">Add a DJ</Link>
+          <Link to="/addProduct">List a DJ</Link>
           <div className="col-md-4">
             <label>Your Reviews</label>
             { this.state.reviews.map((review, i)=>{

app/components/CreateAccount.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import axios from 'axios';
+
+class CreateAccount extends React.Component{
+  render() {
+    return(
+      <div>
+      <form onSubmit={(event) => this.props.handleSubmit(event)}>
+
+        <div className="form-group">
+          <label>Name</label>
+          <input type="text"
+          value={this.props.user.name}
+          name="name"
+          onChange={(event) => this.props.handleChange(event)}
+          className="form-control"/>
+        </div>
+
+        <div className="form-group">
+          <label>Email</label>
+          <input
+            name="email"
+            type="text"
+            value={this.props.user.email}
+            onChange={(event) => this.props.handleChange(event)}
+            className="form-control" />
+        </div>
+
+        <div className="form-group">
+          <label>Password</label>
+          <input
+            type="text"
+            className="form-control"
+            name="password"
+            value={this.props.user.password}
+            onChange={(event) => this.props.handleChange(event)}
+            />
+        </div>
+
+        <button className="btn btn-primary" type="submit">SUBMIT</button>
+        <button className="btn btn-reset" type="reset">RESET</button>
+    </form>
+  </div>
+    );
+  }
+}
+
+export default CreateAccount;

app/components/Login.jsx

@@ -7,7 +7,7 @@ export const Login = ({ login }) => (
   } }>
     <input name="username" />
     <input name="password" type="password" />
-    <input type="submit" value="Login" />
+    <input type="submit" value="Log in" />
   </form>
 )
 

app/components/NavBar.jsx

@@ -36,7 +36,7 @@ const NavBar = (props) =>{
 
                   <li>
                     <Link to="/account">
-                    {props.user.name}'s Account
+                    {`${props.user.name}'s`} Account
                     </Link>
                   </li>
                   <li>
@@ -52,7 +52,14 @@ const NavBar = (props) =>{
                   <Link to="/shoppingcart" className="col-md-3">
                     View Cart
                   </Link>
-                  <div className="col-md-5"> <a href='/api/auth/google/login' > Log in with Gmail </a> </div>
+                  <div className="col-md-5">
+                    <a href='/api/auth/google/login'>
+                      Log in with Gmail
+                    </a>
+                  </div>
+                  <Link to="/createaccount" className="col-md-3">
+                    Create Account
+                  </Link>
                 </div>
               }
               <div className="g-signin2" data-onsuccess="onSignIn"></div>

app/components/ProductDetail.jsx

@@ -18,17 +18,17 @@ class ProductDetail extends React.Component{
     this.setState({updatedProduct: this.props.selectedProduct});
   }
 
-updateQuantity(event){
-  event.preventDefault();
-  const temp = this.state.updatedProduct;
-    temp.quantity = event.target.value;
-    this.setState({updatedProduct: temp})
-}
+  updateQuantity(event){
+    event.preventDefault();
+    const temp = this.state.updatedProduct;
+      temp.quantity = event.target.value;
+      this.setState({updatedProduct: temp})
+  }
 
-addToCart(event,obj){
-  event.preventDefault();
-  this.props.addToCart_func(obj)
-}
+  addToCart(event,obj){
+    event.preventDefault();
+    this.props.addToCart_func(obj)
+  }
 
 
   getQuantityArray(){

app/containers/CreateAccountContainer.jsx

@@ -0,0 +1,85 @@
+import React, { Component } from 'react';
+import { browserHistory } from 'react-router';
+import { connect } from 'react-redux';
+import CreateAccount from '../components/CreateAccount.jsx';
+import axios from 'axios';
+const mapStateToProps = state => {
+  return {};
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {};
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(
+  class extends React.Component{
+    constructor(){
+      super();
+      this.state={
+        user:{
+          name:'',
+          email:'',
+          password:''
+        }
+      }
+      this.handleSubmit=this.handleSubmit.bind(this);
+      this.handleChange=this.handleChange.bind(this);
+    }
+
+    componentDidMount(){
+      // let temp=this.state.newProduct;
+      // temp.genre=this.props.genresList.genresList[0];
+      // temp.location=this.props.locationList.locationList[0];
+      // this.setState({
+      //   newProduct:temp
+      // })
+    }
+
+    handleSubmit(e) {
+      e.preventDefault();
+      console.log(this.state);
+      axios.post('/api/users', this.state.user)
+      .then((response) => {
+        browserHistory.push("/");
+      });
+    }
+
+    handleChange(e){
+      let temp=this.state.user;
+      if (e.target.name==="name") {
+        temp.name=e.target.value;
+        this.setState({
+          user: temp
+        })
+      }
+
+      if (e.target.name==="email") {
+        temp.email=e.target.value;
+        this.setState({
+          user: temp
+        })
+      }
+
+      if (e.target.name==="password") {
+        temp.password=e.target.value;
+        this.setState({
+          user: temp
+        })
+      }
+    }
+
+    render(){
+      return(
+        <CreateAccount
+          {...this.state}
+          {...this.props}
+          handleSubmit={this.handleSubmit}
+          handleChange={this.handleChange}
+        />
+      );
+    }
+  }
+)

app/main.jsx

@@ -18,7 +18,7 @@ import Confirmation from './components/confirmation'
 import AccountContainer from './containers/AccountContainer.jsx';
 
 import CreateProductContainer from './containers/CreateProductContainer.jsx';
-
+import CreateAccountContainer from './containers/CreateAccountContainer.jsx';
 
 render(
   <Provider store={store}>
@@ -34,6 +34,7 @@ render(
 
         <Route path='/addProduct' component={CreateProductContainer} />
         <Route path='/account' component={AccountContainer} />
+        <Route path='/createaccount' component={CreateAccountContainer} />
       </Route>
     </Router>
   </Provider>,

public/style.css

@@ -1,3 +1,7 @@
+body {
+  padding-top: 70px;
+}
+
 .btn-primary{
   margin:5px
 }

server/auth.js

@@ -9,26 +9,26 @@ const auth = require('express').Router()
 
 /*************************
  * Auth strategies
- * 
+ *
  * The OAuth model knows how to configure Passport middleware.
  * To enable an auth strategy, ensure that the appropriate
  * environment variables are set.
- * 
+ *
  * You can do it on the command line:
- * 
+ *
  *   FACEBOOK_CLIENT_ID=abcd FACEBOOK_CLIENT_SECRET=1234 npm start
- * 
+ *
  * Or, better, you can create a ~/.$your_app_name.env.json file in
  * your home directory, and set them in there:
- * 
+ *
  * {
  *   FACEBOOK_CLIENT_ID: 'abcd',
  *   FACEBOOK_CLIENT_SECRET: '1234',
  * }
- * 
+ *
  * Concentrating your secrets this way will make it less likely that you
  * accidentally push them to Github, for example.
- * 
+ *
  * When you deploy to production, you'll need to set up these environment
  * variables with your hosting provider.
  **/
@@ -108,11 +108,11 @@ passport.use(new (require('passport-local').Strategy) (
         return user.authenticate(password)
           .then(ok => {
             if (!ok) {
-              debug('authenticate user(email: "%s") did fail: bad password')              
+              debug('authenticate user(email: "%s") did fail: bad password')
               return done(null, false, { message: 'Login incorrect' })
             }
             debug('authenticate user(email: "%s") did ok: user.id=%d', user.id)
-            done(null, user)              
+            done(null, user)
           })
       })
       .catch(done)
@@ -123,11 +123,15 @@ auth.get('/whoami', (req, res) => res.send(req.user))
 
 auth.get('/:strategy/login', (req, res, next) =>
   passport.authenticate(req.params.strategy, {
-    scope: 'email', 
+    scope: 'email',
     successRedirect: '/'
   })(req, res, next)
+)
 
-
+auth.post('/:strategy/login', (req, res, next) =>
+  passport.authenticate(req.params.strategy, {
+    successRedirect: '/'
+  })(req, res, next)
 )
 
 auth.post('/logout', (req, res, next) => {
@@ -136,4 +140,3 @@ auth.post('/logout', (req, res, next) => {
 })
 
 module.exports = auth
-

server/users.js

@@ -16,13 +16,25 @@ customUserRoutes.get('/', function (request, response, next) {
 
 customUserRoutes.post('/', function (request, response, next) {
     const newUserToCreate = {
+        name: request.body.name,
         email: request.body.email,
         password: request.body.password
     }
-   User.create(newUserToCreate)
-     .then((user) => {
-       response.sendStatus(201);
-     }).catch(next);
+   User.findOrCreate({
+     where: {
+       email: request.body.email
+     }
+   })
+   .spread((user, created) => {
+     user.name=request.body.name;
+     user.password=request.body.password;
+     return user.save();
+    })
+    .then(user=>{
+      console.log(user);
+      response.json(user);
+    })
+    .catch(next);
 });
 
 customUserRoutes.delete('/:userId', function (request, response, next) {