auth complete
This commit is contained in:
parent
f5542b610e
commit
e34f9035ff
|
@ -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)
|
||||
|
|
|
@ -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
|
||||
res.json({
|
||||
if(token) return res
|
||||
.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,
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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">
|
||||
<span>{props.message}</span>
|
||||
<button onClick={props.clearError}>X</button>
|
||||
</div>
|
||||
<ErrorNotice>
|
||||
<ErrorMessage>{props.message}</ErrorMessage>
|
||||
<ErrorButton onClick={props.clearError}>x</ErrorButton>
|
||||
</ErrorNotice>
|
||||
);
|
||||
}
|
|
@ -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 {
|
||||
render(){
|
||||
export default function HomePage(){
|
||||
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;
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -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);
|
|
@ -1,16 +1,13 @@
|
|||
import React, { useState, useEffect, useContext } from 'react';
|
||||
import { useHistory } from "react-router-dom";
|
||||
import React, { useContext } from 'react';
|
||||
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="#">About</a></li>
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Contact us</a></li>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/#about-us">About</a></li>
|
||||
<li><a href="/#features">Services</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><a href="#" onClick={login}>login</a></li>
|
||||
<li><Link to="/user/register">Register</Link></li>
|
||||
<li><Link to="/user/login">login</Link></li>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</ul>
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -1,51 +1,46 @@
|
|||
import React, {useState} from 'react';
|
||||
import styles from '../stepper.module.css';
|
||||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import '../stepper.css';
|
||||
|
||||
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'),
|
||||
clear = document.getElementById('clear'),
|
||||
children = [...document.querySelectorAll('ele')],
|
||||
completed = 0;
|
||||
console.log(children);
|
||||
|
||||
// simulate activating a node
|
||||
if(next === true){
|
||||
|
||||
// count the number of completed nodes.
|
||||
completed = (completed === 0) ? 1 : completed + 2;
|
||||
if (completed > children.length) return;
|
||||
|
||||
// for each node that is completed, reflect the status
|
||||
// and show a green color!
|
||||
for (var i = 0; i < completed; i++) {
|
||||
children[i].children[0].classNameList.remove(styles['grey']);
|
||||
children[i].children[0].classNameList.add(styles['green']);
|
||||
next = document.getElementById('next'),
|
||||
clear = document.getElementById('clear'),
|
||||
children = list.children,
|
||||
completed = 0;
|
||||
|
||||
// simulate activating a node
|
||||
next.addEventListener('click', function() {
|
||||
|
||||
// count the number of completed nodes.
|
||||
completed = (completed === 0) ? 1 : completed + 2;
|
||||
if (completed > children.length) return;
|
||||
|
||||
// for each node that is completed, reflect the status
|
||||
// and show a green color!
|
||||
for (var i = 0; i < completed; i++) {
|
||||
children[i].children[0].classList.remove('grey');
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}, false);
|
||||
|
||||
// clear the activated state of the markers
|
||||
if(clear === true){
|
||||
for (var i = 0; i < children.length; i++) {
|
||||
children[i].children[0].classNameList.remove('green');
|
||||
children[i].children[0].classNameList.remove('activated');
|
||||
children[i].children[0].classNameList.add('grey');
|
||||
}
|
||||
completed = 0;
|
||||
// clear the activated state of the markers
|
||||
clear.addEventListener('click', function() {
|
||||
for (var i = 0; i < children.length; i++) {
|
||||
children[i].children[0].classList.remove('green');
|
||||
children[i].children[0].classList.remove('activated');
|
||||
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={classNames({'divider':true, 'grey':true})}></div></li>
|
||||
<li className="ele"><div className="node grey"></div><p>Transport tickets confirmed</p></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" onClick={ () => setNext(true)} value="Clear" id="clear" />
|
||||
<input type="button" value="Next" id="next" />
|
||||
<input type="button" value="Clear" id="clear" />
|
||||
</div>
|
||||
)
|
||||
|
||||
|
|
|
@ -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%;
|
||||
}
|
|
@ -1,6 +1,5 @@
|
|||
*, *:after, *:before { margin:0; padding:0; }
|
||||
body {
|
||||
padding: 15px;
|
||||
font-family: Helvetica, sans-serif;
|
||||
}
|
||||
|
Loading…
Reference in New Issue