priyatham
/
Locaft
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

auth complete

This commit is contained in:
Priyatham-sai-chand 2020-12-07 23:19:14 +05:30
parent f5542b610e
commit e34f9035ff
12 changed files with 114 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
auth/middleware/auth.js
View File

@ -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)

18
auth/routes/users.js
View File

@ -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,

7
src/App.js
View File

@ -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>
</>
);
}

32
src/components/ErrorNotice.js
View File

@ -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>
);
}

18
src/components/HomePage.js
View File

@ -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;

4
src/components/LogInContainer.js
View File

@ -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);

18
src/components/Login.js
View File

@ -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);

25
src/components/NavBar.js
View File

@ -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>

4
src/components/Register.js
View File

@ -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>

67
src/components/Stepper.js
View File

@ -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);
next = document.getElementById('next'),
clear = document.getElementById('clear'),
children = list.children,
completed = 0;
// simulate activating a node
if(next === true){
// 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;
// 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']);
// 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');
}
}
}
// 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;
}, false);
// 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>
)

37
src/homepage.css
View File

@ -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
src/stepper.module.css → src/stepper.css
View File

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