Fixed passport local and Dashboard

client/src/actions/index.js

@@ -1,39 +1,47 @@
-import axios from 'axios';
-import { FETCH_USER,
-         FETCH_EXPLORE_QUOTES,
-         SAVE_QUOTE_TO_PROFILE,
-         REMOVE_QUOTE_FROM_PROFILE } from '../constants/constants';
+import axios from "axios";
+import {
+  FETCH_USER,
+  FETCH_EXPLORE_QUOTES,
+  SAVE_QUOTE_TO_PROFILE,
+  REMOVE_QUOTE_FROM_PROFILE,
+} from "../constants/constants";
 
 export const fetchUser = (user) => {
-    return dispatch => {
-        axios.get('/api/user', {withCredentials: 'include'})
-            .then(res => res.data)
-            .then(user => dispatch({ type: FETCH_USER, payload: user}))
-            .catch(err => console.log(err))
-    }
-}
+  return (dispatch) => {
+    axios
+      .get("/api/user", { withCredentials: "include" })
+      .then((res) => res.data)
+      .then((user) => dispatch({ type: FETCH_USER, payload: user }))
+      .catch((err) => console.log(err));
+  };
+};
 
 export const fetchExploreQuotes = () => {
-    return dispatch => {
-        axios.get('/api/quotes')
-            .then(res => res.data)
-            .then(data => dispatch({type: FETCH_EXPLORE_QUOTES, payload: data}))
-            .catch(err => console.log(err))
-    } 
-}
+  return (dispatch) => {
+    axios
+      .get("/api/quotes")
+      .then((res) => res.data)
+      .then((data) => dispatch({ type: FETCH_EXPLORE_QUOTES, payload: data }))
+      .catch((err) => console.log(err));
+  };
+};
 
 export const saveQuoteToProfile = (quote) => {
-    return dispatch => {
-        axios.post('/api/saved', quote)
-            .then(data => dispatch({ type: SAVE_QUOTE_TO_PROFILE, payload: data }))
-            .catch(err => console.log(err))
-    }
-}
+  return (dispatch) => {
+    axios
+      .post("/api/quotes/save", quote)
+      .then((data) => dispatch({ type: SAVE_QUOTE_TO_PROFILE, payload: data }))
+      .catch((err) => console.log(err));
+  };
+};
 
 export const removeQuoteFromProfile = (id) => {
-    return dispatch => {
-        axios.delete(`/api/saved/${id}`)
-            .then(data => dispatch({ type: REMOVE_QUOTE_FROM_PROFILE, payload: data }))
-            .catch(err => console.log(err))
-    }
-}
+  return (dispatch) => {
+    axios
+      .delete(`/api/saved/${id}`)
+      .then((data) =>
+        dispatch({ type: REMOVE_QUOTE_FROM_PROFILE, payload: data })
+      )
+      .catch((err) => console.log(err));
+  };
+};

client/src/components/App.js

@@ -1,13 +1,13 @@
 import React, { Component } from "react";
 import { BrowserRouter as Router, Route } from "react-router-dom";
-
 import LandingPage from "../pages/LandingPage";
 import Header from "./Header";
 import Dashboard from "../pages/Dashboard";
 import ExplorePage from "../pages/ExplorePage";
 import MindfulnessPage from "../pages/MindfulnessPage";
 import JournalingPage from "../pages/JournalingPage";
 import SignUpPage from "../pages/SignUpPage";
+import LoginPage from "../pages/LoginPage";
 
 class App extends Component {
   render() {
@@ -18,6 +18,7 @@ class App extends Component {
           <div className="container">
             <Route exact path="/" component={LandingPage} />
             <Route path="/signup" component={SignUpPage} />
+            <Route path="/login" component={LoginPage} />
             <Route path="/quotes" component={ExplorePage} />
             <Route path="/dashboard" component={Dashboard} />
             <Route path="/journal" component={JournalingPage} />

client/src/components/Header.js

@@ -33,10 +33,10 @@ const Header = ({ user }) => {
           ) : (
             <>
               <li>
-                <a href="/api/logout">Login</a>
+                <Link to="/login">Login</Link>
               </li>
               <li>
-                <a href="/signup">Sign Up</a>
+                <Link to="/signup">Sign Up</Link>
               </li>
             </>
           )}

client/src/pages/Dashboard.js

@@ -11,26 +11,27 @@ class Dashboard extends Component {
     this.props.fetchUser();
   }
 
-  renderSavedQuotes = () => {
-    const { user } = this.props;
+  renderSavedQuotes = (user) => {
     return user.savedQuotes.reverse().map((quote, i) => {
       return <Card key={i} {...quote} />;
     });
   };
 
   render() {
     const { user } = this.props;
+    console.log(user);
     return (
       <div id="dashboard-page">
         <section>
-          {user.savedQuotes === undefined ? (
+          <h1>Hello {user.username}</h1>
+          {user.savedQuotes && user.savedQuotes.length ? (
+            this.renderSavedQuotes(user)
+          ) : (
             <p>
               {" "}
               You don't have any quotes yet.
               <Link to="/explore"> Click here</Link> to start!
             </p>
-          ) : (
-            this.renderSavedQuotes()
           )}
         </section>
       </div>

client/src/pages/LoginPage.js

@@ -0,0 +1,64 @@
+import React, { Component } from "react";
+import { Redirect } from "react-router-dom";
+import axios from "axios";
+
+class LoginPage extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      username: "",
+      password: "",
+      errors: {},
+    };
+  }
+
+  handleChange = (e) => {
+    this.setState({
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  handleSubmit = (e) => {
+    const { username, password } = this.state;
+    e.preventDefault();
+
+    axios
+      .post("/auth/local", { username, password })
+      .then(() => <Redirect to="/dashboard" />)
+      .catch((error) => {
+        if (error.response) {
+          console.log(this.state);
+          this.setState({ ...this.state, errors: error.response.data });
+        }
+      });
+  };
+
+  render() {
+    const { username, password, errors } = this.state;
+    return (
+      <div>
+        <form onSubmit={this.handleSubmit}>
+          <input
+            type="text"
+            value={username}
+            name="username"
+            placeholder="username"
+            onChange={this.handleChange}
+          />
+          <input
+            type="password"
+            value={password}
+            name="password"
+            placeholder="password"
+            onChange={this.handleChange}
+          />
+          {errors.length ? <p style={{ color: "red" }}>{errors}</p> : null}
+          <input type="Submit" value="Submit" />
+        </form>
+      </div>
+    );
+  }
+}
+
+export default LoginPage;

client/src/pages/SignUpPage.js

@@ -14,20 +14,18 @@ class SignUpPage extends Component {
   }
 
   handleChange = (e) => {
-    this.setState(
-      {
-        [e.target.name]: e.target.value,
-      },
-      () => console.log(this.state)
-    );
+    this.setState({
+      [e.target.name]: e.target.value,
+    });
   };
 
   checkPassword = () => {
     return this.state.password === this.state.confirmPassword;
   };
 
   handleSubmit = (e) => {
-    const { username, password } = this.state;
+    let { username, password } = this.state;
+    username = username.toLowerCase();
     e.preventDefault();
 
     this.checkPassword();
@@ -78,7 +76,7 @@ class SignUpPage extends Component {
           {errors ? (
             <p style={{ color: "red" }}>Passwords don't match</p>
           ) : null}
-          <input type="Submit" value="Submit" />
+          <input type="Submit" defaultValue="Submit" />
         </form>
       </div>
     );

client/src/reducers/authReducer.js

@@ -3,7 +3,6 @@ import { FETCH_USER } from "../constants/constants";
 export const authReducer = (state = {}, action) => {
   switch (action.type) {
     case FETCH_USER:
-      console.log(action.payload);
       return action.payload || null;
     default:
       return state;

index.js

@@ -32,6 +32,8 @@ app.use(
   })
 );
 
+app.use(express.static(`${__dirname}/client/public`));
+
 // Passport middleware
 
 app.use(passport.initialize());

models/User.js

@@ -4,7 +4,7 @@ const mongoose = require("mongoose"),
 
 const userSchema = new Schema(
   {
-    username: String,
+    username: { type: String, unique: true },
     password: String,
     avatar: String,
     savedQuotes: [quoteSchema],

routes/genRoutes.js

@@ -2,15 +2,15 @@ const express = require("express"),
   passport = require("passport"),
   app = express();
 
-module.exports = app => {
-  app.use(function(req, res, next) {
-    res.header("Access-Control-Allow-Origin", "*");
-    res.header(
-      "Access-Control-Allow-Headers",
-      "Origin, X-Requested-With, Content-Type, Accept"
-    );
-    next();
-  });
+module.exports = (app) => {
+  // app.use(function(req, res, next) {
+  //   res.header("Access-Control-Allow-Origin", "*");
+  //   res.header(
+  //     "Access-Control-Allow-Headers",
+  //     "Origin, X-Requested-With, Content-Type, Accept"
+  //   );
+  //   next();
+  // });
 
   app.get("/api/user", (req, res) => {
     res.send(req.user);

routes/localRoutes.js

@@ -5,10 +5,19 @@ const express = require("express"),
 module.exports = (app) => {
   app.post(
     "/auth/local",
-    passport.authenticate("local", { failureRedirect: "/signup" }),
+    passport.authenticate(
+      "local"
+      // {
+      //   successRedirect: "/dashboard",
+      //   failureRedirect: "/signup",
+      // }
+    ),
     (req, res) => {
-      console.log(res);
-      res.redirect("/dashboard");
+      if (req.user) {
+        res.redirect("/dashboard");
+      } else {
+        res.redirect("/login");
+      }
     }
   );
 };

routes/quotesRoutes.js

@@ -1,39 +1,39 @@
-const express = require('express'),
-      User = require('../models/User'),
-      fetch = require('node-fetch')
-      app = express();
+const express = require("express"),
+  User = require("../models/User"),
+  fetch = require("node-fetch");
+app = express();
 
 module.exports = (app) => {
+  app.get("/api/quotes", async (req, res) => {
+    const result = await fetch(
+      "https://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json&lang=en"
+    );
+    const json = await result.json();
 
-    app.get('/api/quotes', async (req, res) => {
-        const result = await fetch('https://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json&lang=en')
-        const json = await result.json();
-
-        res.send(json)
-    })
-
-    // Add Quote
-    app.post('/api/saved', (req, res) => {
-        const {author, quote} = req.body;
-
-        const newQuote = User.findOne({ id: req.user.id }, (err, user) => {
-            user.savedQuotes.push({
-                author,
-                quote,
-                isSaved: true
-            });
-            user.save();
-        });
-
-    })
+    res.send(json);
+  });
 
-    // Remove Quote
-    app.delete('/api/saved/:id', (req, res, next) => {
+  // Add Quote
+  app.post("/api/quotes/save", (req, res) => {
+    const { author, quote } = req.body;
+    const { _id } = req.user;
 
-        const user = User.findOne({ _id: req.user._id}, (err, user) => {
-            user.savedQuotes.id(req.params.id).remove();
+    const newQuote = User.findOne({ _id }, (err, user) => {
+      user.savedQuotes.push({
+        author,
+        quote,
+        isSaved: true,
+      });
+      user.save();
+    });
+  });
 
-            user.save();
-        });
-    })
-}
+  // Remove Quote
+  app.delete("/api/saved/:id", (req, res, next) => {
+    const user = User.findOne({ _id: req.user._id }, (err, user) => {
+      user.savedQuotes.id(req.params.id).remove();
+
+      user.save();
+    });
+  });
+};