auth complete

auth/middleware/auth.js

@@ -1,4 +1,5 @@
 const jwt = require("jsonwebtoken");
+const config = require("config");
 
 const auth = (req, res, next) => {
   try {
@@ -8,7 +9,7 @@ const auth = (req, res, next) => {
         .status(401)
         .json({ msg: "No authentication token, authorization denied." });
 
-    const verified = jwt.verify(token, process.env.JWT_SECRET);
+    const verified = jwt.verify(token, config.get("jwtSecret") );
     if (!verified)
       return res
         .status(401)

auth/routes/users.js

@@ -5,13 +5,6 @@ const auth = require("../middleware/auth");
 const User = require("../schemas/User");
 const config = require("config");
 
-router.get("/", async(req,res) => {
-
-  console.log(config.get('jwtSecret'));
-  return "<h1>asdf<h1/>";
-
-  
-});
 
 router.post("/register", async (req, res) => {
   try {
@@ -68,8 +61,8 @@ router.post("/login", async (req, res) => {
     if (!isMatch) return res.status(400).json({ msg: "Invalid credentials." });
 
     const token = jwt.sign({ id: user._id },config.get('jwtSecret'));
-    if(token) return res.json
+    if(token) return res
-    res.json({
+    .json({
       token,
       user: {
         id: user._id,
@@ -93,14 +86,14 @@ router.delete("/delete", auth, async (req, res) => {
 router.post("/tokenIsValid", async (req, res) => {
   try {
     const token = req.header("x-auth-token");
-    if (!token) return res.json({error: qwer});
+    if (!token) return res.json({error: message});
 
     const verified = jwt.verify(token, config.get("jwtSecret"));
 
-    if (!verified) return res.json({error: asdf});
+    if (!verified) return res.json({error: message});
 
     const user = await User.findById(verified.id);
-    if (!user) return res.json({error: zxcv});
+    if (!user) return res.json({error: message});
 
     return res.json(true);
   } catch (err) {
@@ -110,6 +103,7 @@ router.post("/tokenIsValid", async (req, res) => {
 
 router.get("/", auth, async (req, res) => {
   const user = await User.findById(req.user);
+  console.log(user);
   res.json({
     username: user.username,
     id: user._id,

src/App.js

@@ -3,10 +3,11 @@ import Axios from 'axios';
 import HomePage from "./components/HomePage";
 import PricingPlan from "./components/PricingPlan";
 import LogInContainer from "./components/LogInContainer";
-import { Router,BrowserRouter, Route, Switch } from 'react-router-dom';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import UserContext from "./context/UserContext";
 import Options from "./components/Options";
 import Stepper from './components/Stepper';
+import NavBar from "./components/NavBar";
 
 export default function App() {
   const [userData, setUserData ] = useState({
@@ -43,21 +44,25 @@ export default function App() {
 
   },[])
     return (
+      <>
       <div className="App">
         <BrowserRouter>
         <UserContext.Provider value= {{userData, setUserData}}>
           <Switch>
             <Route exact path="/" component={HomePage} />
+            <Route exact path="asdf" component={NavBar} />
             <Route path="/user" component={LogInContainer} />
             <Route path="/pricing" component={PricingPlan} />
             <Route path="/track" component={Stepper} />
             <Route path="/options" component={Options} />
+            <Route path="/" render={() => <div>404</div>}/>
           </Switch>
           </UserContext.Provider>
         </BrowserRouter>
 
         
       </div>
+      </>
 
     );
   }

src/components/ErrorNotice.js

@@ -1,10 +1,34 @@
 import React from "react";
+import styled from 'styled-components';
+
 
 export default function ErrorNotice(props) {
+  const ErrorNotice = styled.div`
+  margin: 1rem 0;
+  padding: 0.5rem;
+  border: 1px solid #e07c7c;
+  border-radius: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #f8d6d6;
+`;
+  const ErrorMessage = styled.div`
+color: #000000;
+`;
+
+  const ErrorButton = styled.button
+    `
+  width: 17px;
+  height: 28px;
+  display:flex;
+  background-color: #df4343;
+  color: #ffffff;
+`;
   return (
-    <div className="error-notice">
+    <ErrorNotice>
-      <span>{props.message}</span>
+      <ErrorMessage>{props.message}</ErrorMessage>
-      <button onClick={props.clearError}>X</button>
+      <ErrorButton onClick={props.clearError}>x</ErrorButton>
-    </div>
+    </ErrorNotice>
   );
 }

src/components/HomePage.js

@@ -1,13 +1,13 @@
-import React, { Component } from 'react';
+import React  from 'react';
 import '../homepage.css';
-import LogInContainer from './LogInContainer';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import Navbar from './NavBar';
 import NavBar from './NavBar';
+import { useHistory } from "react-router-dom";
 
 
-class  HomePage extends Component {
+export default function  HomePage(){
-  render(){
+  const history = useHistory();
+   
        return (
       
       <div className="HomePage">
@@ -21,9 +21,11 @@ class  HomePage extends Component {
         
         <div className="col-lg-6">
           <h1 className="big-heading">Adapt to a new place easy peasy.</h1>
-          <button type="button" className = "btn btn-info login mr-1">Log In</button>
+          <button type="button" onClick={() => {
+            history.push("/user/login")
+          }} className = "btn btn-info login mr-1">Log In</button>
           
-          <button type="button" className="btn btn-info loginb" >Sign Up</button>
+          <button type="button" className="btn btn-info loginb" onClick={() => history.push("/user/register")} >Sign Up</button>
 
         </div>
         
@@ -162,6 +164,4 @@ class  HomePage extends Component {
 
     );
   }
-}
 
-export default HomePage;

src/components/LogInContainer.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { BrowserRouter, Route, NavLink, Switch } from 'react-router-dom';
+import { BrowserRouter, Route, NavLink, Switch,withRouter } from 'react-router-dom';
 import Register from './Register';
 import Login from './Login';
 
@@ -37,5 +37,5 @@ class LogInContainer extends Component {
   }
 }
 
-export default LogInContainer;
+export default withRouter(LogInContainer);
 

src/components/Login.js

@@ -1,10 +1,9 @@
 
 import React, { useState, useContext } from "react";
-import { useHistory } from "react-router-dom";
 import UserContext from "../context/UserContext";
 import Axios from "axios";
-import { Link } from "react-router-dom";
 import ErrorNotice from "./ErrorNotice";
+import { Link, useHistory, withRouter } from "react-router-dom";
 
 const Login = () => {
     
@@ -12,7 +11,7 @@ const Login = () => {
   const [password, setPassword] = useState();
   const [error, setError] = useState();
 
-  const { setUserData } = useContext(UserContext);
+ const { userData,setUserData } = useContext(UserContext);
   
   const history = useHistory();
 
@@ -24,13 +23,13 @@ const Login = () => {
         "http://localhost:5000/users/login",
         loginUser
       );
-      console.log(loginRes);
       setUserData({
         token: loginRes.data.token,
         user: loginRes.data.user,
       });
       localStorage.setItem("auth-token", loginRes.data.token);
-      history.push("/register");
+      console.log(userData);
+      history.push("/");
     } catch (err) {
       err.response.data.msg && setError(err.response.data.msg);
     }
@@ -38,6 +37,9 @@ const Login = () => {
         return (
           
         <div className="FormCenter">
+          {error && (
+        <ErrorNotice message={error} clearError={() => setError(undefined)} />
+      )}
             <form  className="FormFields" onSubmit={submit}>
             <div className="FormField">
                 <label className="FormField__Label" htmlFor="email">E-Mail Address</label>
@@ -53,11 +55,9 @@ const Login = () => {
                   <button className="FormField__Button mr-20" >Sign In</button> <Link exact to="/sign-up" className="FormField__Link">Not a member?</Link>
               </div>
             </form>
-            {error && (
+            
-        <ErrorNotice message={error} clearError={() => setError(undefined)} />
-      )}
           </div>
         );
     }
 
-export default Login;
+export default withRouter(Login);

src/components/NavBar.js

@@ -1,16 +1,13 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, {  useContext } from 'react';
-import { useHistory } from "react-router-dom";
+import { Link } from "react-router-dom";
 import '../navbar.css';
-import Axios from "axios";
 import UserContext from "../context/UserContext";
 
 export default function NavBar() {
   const { userData, setUserData } = useContext(UserContext);
   
-  const history = useHistory();
 
-  const register = () => history.push("/user/register");
+
-  const login = () => history.push("/home");
   const logout = () => {
     setUserData({
       token: undefined,
@@ -33,18 +30,18 @@ export default function NavBar() {
         </label>
 
 
-        <a href="/home" className="logo">locaft</a>
+        <a href="/" className="logo">locaft</a>
         <ul>
-          <li><a href="#">Home</a></li>
+          <li><a href="/">Home</a></li>
-          <li><a href="#">About</a></li>
+          <li><a href="/#about-us">About</a></li>
-          <li><a href="#">Services</a></li>
+          <li><a href="/#features">Services</a></li>
-          <li><a href="#">Contact us</a></li>
+          <li><a href="/#footer">Contact us</a></li>
           {userData.user ? (
-            <li><a href="#" onClick={logout}>Log Out</a></li>
+            <li><Link onClick={logout}>{userData.user.username}</Link></li>
           ) : (
               <React.Fragment>
-              <li><a href="#" onClick={register}>Register</a></li>
+              <li><Link to="/user/register">Register</Link></li>
-              <li><a  href="#" onClick={login}>login</a></li>
+              <li><Link  to="/user/login">login</Link></li>
               </React.Fragment>
             )}
         </ul>

src/components/Register.js

@@ -1,4 +1,4 @@
-import React, { Component, useState, useContext } from "react";
+import React, {  useState, useContext } from "react";
 import { useHistory } from "react-router-dom";
 import UserContext from "../context/UserContext";
 import Axios from "axios";
@@ -87,7 +87,7 @@ import ErrorNotice from "./ErrorNotice";
 
         <div className="FormField">
           <label className="FormField__CheckboxLabel">
-            <input className="FormField__Checkbox" type="checkbox" name="hasAgreed" /> I agree all statements in <a href="" className="FormField__TermsLink">terms of service</a>
+            <input className="FormField__Checkbox" type="checkbox" name="hasAgreed" /> I agree all statements in <a href="/" className="FormField__TermsLink">terms of service</a>
           </label>
         </div>
 

src/components/Stepper.js

@@ -1,51 +1,46 @@
-import React, {useState} from 'react';
+import React  from 'react';
-import styles from '../stepper.module.css';
+import  '../stepper.css';
-import classNames from 'classnames';
 
 export default function Stepper() {
 
-  const[next,setNext] = useState(false);
-  const[clear,setClear] = useState(false);
-
   document.addEventListener('DOMContentLoaded', () => {
     var list = document.getElementById('progress'),
-      next = document.getElementById('next'),
+    next = document.getElementById('next'),
-      clear = document.getElementById('clear'),
+    clear = document.getElementById('clear'),
-      children = [...document.querySelectorAll('ele')],
+    children = list.children,
-      completed = 0;
+    completed = 0;
-      console.log(children);
 
-    // simulate activating a node
+// simulate activating a node
-    if(next === true){
+next.addEventListener('click', function() {
     
-      // count the number of completed nodes.
+    // count the number of completed nodes.
-      completed = (completed === 0) ? 1 : completed + 2;
+    completed = (completed === 0) ? 1 : completed + 2;
-      if (completed > children.length) return;
+    if (completed > children.length) return;
     
-      // for each node that is completed, reflect the status
+    // for each node that is completed, reflect the status
-      // and show a green color!
+    // and show a green color!
-      for (var i = 0; i < completed; i++) {
+    for (var i = 0; i < completed; i++) {
-        children[i].children[0].classNameList.remove(styles['grey']);
+        children[i].children[0].classList.remove('grey');
-        children[i].children[0].classNameList.add(styles['green']);
+        children[i].children[0].classList.add('green');
         
         // if this child is a node and not divider, 
         // make it shine a little more
         if (i % 2 === 0) {
-          children[i].children[0].classNameList.add('activated');
+            children[i].children[0].classList.add('activated');            
         }
-      }
-
     }
     
-    // clear the activated state of the markers
+}, false);
-    if(clear === true){
+
-      for (var i = 0; i < children.length; i++) {
+// clear the activated state of the markers
-        children[i].children[0].classNameList.remove('green');
+clear.addEventListener('click', function() {
-        children[i].children[0].classNameList.remove('activated');
+    for (var i = 0; i < children.length; i++) {
-        children[i].children[0].classNameList.add('grey');
+        children[i].children[0].classList.remove('green');
-      }
+        children[i].children[0].classList.remove('activated');
-      completed = 0;
+        children[i].children[0].classList.add('grey');
     }
+    completed = 0;
+}, false);
   });
 
   return (
@@ -55,16 +50,16 @@ export default function Stepper() {
       <br />
       <br />
       <ul id="progress">
-        <li className="ele"><div className={classNames({'node':true,'grey': true })}></div><p>Transport tickets confirmed</p></li>
+        <li className="ele"><div className="node grey"></div><p>Transport tickets confirmed</p></li>
-        <li  className="ele" ><div className={classNames({'divider':true, 'grey':true})}></div></li>
+        <li  className="ele" ><div className="divider grey"></div></li>
         <li className="ele"  ><div className="node grey"></div><p>Packers & movers due to come in a day</p></li>
         <li className="ele"><div className="divider grey"></div></li>
         <li className="ele"><div className="node grey"></div><p>school admission being confirmed</p></li>
         <li className = "ele"><div className="divider grey"></div></li>
         <li className = "ele"><div className="node grey"></div><p>House is empty</p></li>
       </ul>
-      <input type="button" onClick={() => setNext(true)} value="Next" id="next" />
+      <input type="button" value="Next" id="next" />
-      <input type="button" onClick={ () => setNext(true)} value="Clear" id="clear" />
+      <input type="button" value="Clear" id="clear" />
     </div>
   )
 

src/homepage.css

@@ -6,6 +6,11 @@ div {
 
 h1, h2, h3, h4, h5, h6 {
   font-family: "Montserrat-Bold";
+  color: white;
+
+}
+h1 {
+  color: white !important;
 }
 
 p {
@@ -51,31 +56,7 @@ p {
 }
 
 /* Navigation Bar */
-.header{
-  position:sticky;
-  top:0;
-}
 
-.navbar {
-  padding: 0 0 4.5rem;
-  position: sticky;
-  top: 0;
-}
-
-.navbar-brand {
-  font-family: "Ubuntu";
-  font-size: 2.5rem;
-  font-weight: bold;
-}
-
-.nav-item {
-  padding: 0 18px;
-}
-
-.nav-link {
-  font-size: 1.2rem;
-  font-family: "Montserrat-Light";
-}
 
 /* Buttons */
 
@@ -192,11 +173,3 @@ p {
   }
 }
 
-/* Login Page */
-
-.login-heading{
-  margin: 3% 5%;
-}
-.signup .signin{
-  margin: 10% 3%;
-}

src/stepper.css

@@ -1,6 +1,5 @@
 *, *:after, *:before { margin:0; padding:0; }
 body { 
-    padding: 15px; 
     font-family: Helvetica, sans-serif;
 }