diff --git a/.env b/.env index 7dbacbf..4f5e3ff 100644 --- a/.env +++ b/.env @@ -1,2 +1,3 @@ -MONGODB_CONNECTION_STRING = mongodb+srv://admin:ABxXFUBs5FMiAaDJ@form.iynew.mongodb.net/?retryWrites=true&w=majority \ No newline at end of file +MONGODB_CONNECTION_STRING = mongodb+srv://admin:ABxXFUBs5FMiAaDJ@form.iynew.mongodb.net/form?retryWrites=true&w=majority +JWT_SECRET = eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c \ No newline at end of file diff --git a/.gitignore b/.gitignore index 990fab4..08a4367 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,7 @@ /.pnp /.env .pnp.js + # testing /coverage diff --git a/auth/config/default.json b/auth/config/default.json index d29ae4a..ac4ed5b 100644 --- a/auth/config/default.json +++ b/auth/config/default.json @@ -1,4 +1,4 @@ { - "mongoURI": "mongodb+srv://admin:admin@form.iynew.mongodb.net/?retryWrites=true&w=majority", + "mongoURI": "mongodb+srv://admin:ABxXFUBs5FMiAaDJ@form.iynew.mongodb.net/?retryWrites=true&w=majority", "jwtSecret": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c" } \ No newline at end of file diff --git a/auth/routes/users.js b/auth/routes/users.js index 60f952a..bb51065 100644 --- a/auth/routes/users.js +++ b/auth/routes/users.js @@ -2,7 +2,8 @@ const router = require("express").Router(); const bcrypt = require("bcryptjs"); const jwt = require("jsonwebtoken"); const auth = require("../middleware/auth"); -const User = require("../models/userModel"); +const User = require("../schemas/User"); +const config = require("config"); router.post("/register", async (req, res) => { try { @@ -10,16 +11,12 @@ router.post("/register", async (req, res) => { // validate - if (!email || !password || !passwordCheck) + if (!email || !password ) return res.status(400).json({ msg: "Not all fields have been entered." }); if (password.length < 5) return res .status(400) .json({ msg: "The password needs to be at least 5 characters long." }); - if (password !== passwordCheck) - return res - .status(400) - .json({ msg: "Enter the same password twice for verification." }); const existingUser = await User.findOne({ email: email }); if (existingUser) @@ -62,7 +59,7 @@ router.post("/login", async (req, res) => { const isMatch = await bcrypt.compare(password, user.password); if (!isMatch) return res.status(400).json({ msg: "Invalid credentials." }); - const token = jwt.sign({ id: user._id }, process.env.JWT_SECRET); + const token = jwt.sign({ id: user._id },config.get('jwtSecret')); res.json({ token, user: { diff --git a/auth/server.js b/auth/server.js index e4c52d3..1c4994b 100644 --- a/auth/server.js +++ b/auth/server.js @@ -1,5 +1,5 @@ -require("dotenv").config(); const express = require("express"); +const config = require("config"); const mongoose = require("mongoose"); const cors = require("cors"); @@ -16,7 +16,7 @@ app.listen(PORT, () => console.log(`The server has started on port: ${PORT}`)); // set up mongoose mongoose.connect( - process.env.MONGODB_CONNECTION_STRING, + config.get('mongoURI'), { useNewUrlParser: true, useUnifiedTopology: true, @@ -30,4 +30,4 @@ mongoose.connect( // set up routes -app.use("/users", require("./routes/userRouter")); \ No newline at end of file +app.use("/users", require("./routes/users")); \ No newline at end of file diff --git a/src/App.js b/src/App.js index 3e47be5..a262d31 100644 --- a/src/App.js +++ b/src/App.js @@ -1,19 +1,55 @@ -import React, { Component } from 'react'; +import React, { useEffect, useState } from 'react'; +import Axios from 'axios'; import HomePage from "./components/HomePage"; -import Login from "./components/SignIn"; import PricingPlan from "./components/PricingPlan"; import LogInContainer from "./components/LogInContainer"; import { BrowserRouter, Route, Switch } from 'react-router-dom'; -class App extends Component { - render(){ +import UserContext from "./context/UserContext"; + +export default function App() { + const [userData, setUserData ] = useState({ + token: undefined, + user: undefined + }); + useEffect(() => { + const checkLoggedIn = async () => { + let token = localStorage.getItem("auth-token"); + if (token == null) { + localStorage.setItem("auth-token",""); + token =""; + } + const tokenRes = await Axios.post( + "http://localhost:5000/users/tokenIsValid", + null, + {headers: {"x-auth-token": token }} + + ); + if (tokenRes.data) { + const userRes = await Axios.get("http://localhost:5000/users/", + {headers:{"x-auth-token":token}, + }); + setUserData({ + token, + user: userRes.data, + }); + } + + }; + + + checkLoggedIn(); + + },[]) return (
+ + @@ -21,6 +57,5 @@ class App extends Component { ); } -} -export default App; + diff --git a/src/components/AuthOptions.js b/src/components/AuthOptions.js new file mode 100644 index 0000000..4b5ae6f --- /dev/null +++ b/src/components/AuthOptions.js @@ -0,0 +1,32 @@ +import React, { useContext } from "react"; +import { useHistory } from "react-router-dom"; +import UserContext from "../../context/UserContext"; + +export default function AuthOptions() { + const { userData, setUserData } = useContext(UserContext); + + const history = useHistory(); + + const register = () => history.push("/register"); + const login = () => history.push("/login"); + const logout = () => { + setUserData({ + token: undefined, + user: undefined, + }); + localStorage.setItem("auth-token", ""); + }; + + return ( + + ); +} \ No newline at end of file diff --git a/src/components/LogInContainer.js b/src/components/LogInContainer.js index a5da05a..b4fc1ab 100644 --- a/src/components/LogInContainer.js +++ b/src/components/LogInContainer.js @@ -1,14 +1,14 @@ import React, { Component } from 'react'; -import { HashRouter as BrowserRouter, Route, Link, NavLink, Switch } from 'react-router-dom'; -import SignUpForm from './SignUp'; -import SignInForm from './SignIn'; +import { BrowserRouter, Route, NavLink, Switch } from 'react-router-dom'; +import Register from './Register'; +import Login from './Login'; import '../login_reg.css'; class LogInContainer extends Component { render() { return ( - +
@@ -18,21 +18,21 @@ class LogInContainer extends Component {
- Sign In - Sign Up + Sign In + Sign Up
- Sign In or Sign Up + Sign In or Sign Up
+ + + + - - - -
- + ); } } diff --git a/src/components/SignIn.js b/src/components/Login.js similarity index 95% rename from src/components/SignIn.js rename to src/components/Login.js index 7d5cd47..cc49353 100644 --- a/src/components/SignIn.js +++ b/src/components/Login.js @@ -6,7 +6,7 @@ import Axios from "axios"; import { Link } from "react-router-dom"; import ErrorNotice from "./ErrorNotice"; -const SignInForm = () => { +const Login = () => { const [email, setEmail] = useState(); const [password, setPassword] = useState(); @@ -58,4 +58,4 @@ const SignInForm = () => { ); } -export default SignInForm; \ No newline at end of file +export default Login; \ No newline at end of file diff --git a/src/components/NavBar.js b/src/components/NavBar.js index 854db91..9699f68 100644 --- a/src/components/NavBar.js +++ b/src/components/NavBar.js @@ -1,66 +1,54 @@ -import React, { useState, useEffect, Component} from 'react'; +import React, { useState, useEffect, useContext } from 'react'; +import { useHistory } from "react-router-dom"; import '../navbar.css'; import Axios from "axios"; +import UserContext from "../context/UserContext"; export default function NavBar() { - const [userData, setUserData] = useState({ - token: undefined, - user: undefined, - }); + const { userData, setUserData } = useContext(UserContext); - useEffect(() => { - const checkLoggedIn = async () => { - let token = localStorage.getItem("auth-token"); - if (token === null) { - localStorage.setItem("auth-token", ""); - token = ""; - } - const tokenRes = await Axios.post( - "http://localhost:5000/users/tokenIsValid", - null, - { headers: { "x-auth-token": token } } - ); - if (tokenRes.data) { - const userRes = await Axios.get("http://localhost:5000/users/", { - headers: { "x-auth-token": token }, - }); - setUserData({ - token, - user: userRes.data, - }); - } - }; + const history = useHistory(); - checkLoggedIn(); - }, []); + const register = () => history.push("/register"); + const login = () => history.push("/login"); + const logout = () => { + setUserData({ + token: undefined, + user: undefined, + }); + localStorage.setItem("auth-token", ""); + }; + window.addEventListener("scroll", () => { + var header = document.querySelector("header"); + header.classList.toggle("sticky", window.scrollY > 0); - window.addEventListener("scroll", () =>{ - var header = document.querySelector("header"); - header.classList.toggle("sticky",window.scrollY > 0); - - }) - return( -
-
- - + }) + return ( +
+
+ + - - - -
-
- - ) - } + + + +
+
+ + ) +} diff --git a/src/components/Register.js b/src/components/Register.js new file mode 100644 index 0000000..f1a34fa --- /dev/null +++ b/src/components/Register.js @@ -0,0 +1,102 @@ +import React, { Component, 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"; + + const Register = () => { + const [email, setEmail] = useState(); + const [password, setPassword] = useState(); + const [phonenumber, setPhonenumber] = useState(); + const [username, setUsername] = useState(); + const [error, setError] = useState(); + + const { setUserData } = useContext(UserContext); + const history = useHistory(); + + const submit = async (e) => { + e.preventDefault(); + + try { + const newUser = { username,email,phonenumber,password}; + await Axios.post("http://localhost:5000/users/register", newUser); + const loginRes = await Axios.post("http://localhost:5000/users/login", { + email, + password, + }); + setUserData({ + token: loginRes.data.token, + user: loginRes.data.user, + }); + localStorage.setItem("auth-token", loginRes.data.token); + history.push("/"); + } catch (err) { + err.response.data.msg && setError(err.response.data.msg); + } + }; + + + return ( +
+ {error && ( + setError(undefined)} /> + )} +
+
+ + setUsername(e.target.value)} + /> +
+
+ + setPassword(e.target.value)} + /> +
+
+ + setEmail(e.target.value)} + + /> +
+
+ + setPhonenumber(e.target.value)} + /> +
+ +
+ +
+ +
+ already a member? +
+
+
+ ); +} + +export default Register; diff --git a/src/components/SignUp.js b/src/components/SignUp.js deleted file mode 100644 index 4dac277..0000000 --- a/src/components/SignUp.js +++ /dev/null @@ -1,72 +0,0 @@ -import React, { Component } from 'react'; -import { Link } from 'react-router-dom'; - -class SignUpForm extends Component { - constructor() { - super(); - - this.state = { - email: '', - password: '', - name: '', - hasAgreed: false - }; - - this.handleChange = this.handleChange.bind(this); - this.handleSubmit = this.handleSubmit.bind(this); - } - - handleChange(e) { - let target = e.target; - let value = target.type === 'checkbox' ? target.checked : target.value; - let name = target.name; - - this.setState({ - [name]: value - }); - } - - handleSubmit(e) { - e.preventDefault(); - - console.log('The form was submitted with the following data:'); - console.log(this.state); - } - - render() { - return ( -
-
-
- - -
-
- - -
-
- - -
-
- - -
- -
- -
- -
- already a member? -
-
-
- ); - } -} - -export default SignUpForm; \ No newline at end of file diff --git a/src/login_reg.css b/src/login_reg.css index 557a341..124325a 100644 --- a/src/login_reg.css +++ b/src/login_reg.css @@ -169,4 +169,4 @@ display: inline-block; padding-bottom: 2px; margin-left: 5px; -} \ No newline at end of file +}