From 866d7b1d1eaf2697cb179cc22030ead279f2e924 Mon Sep 17 00:00:00 2001 From: KylePancamo <50267605+KylePancamo@users.noreply.github.com> Date: Fri, 25 Mar 2022 14:26:06 -0500 Subject: [PATCH 1/5] Simple cookeis and session implementation - might use a different method depending on simplicity going forward with other web pages. For now, this is a simple implementation for cookies and keeping a session for a user --- server.js | 71 ++++++++++++++++++------------ src/Pages/SignInPage/SignInPage.js | 17 ++++++- 2 files changed, 60 insertions(+), 28 deletions(-) diff --git a/server.js b/server.js index 98949af..ab6ff9a 100644 --- a/server.js +++ b/server.js @@ -3,21 +3,35 @@ const cors = require('cors'); const express = require('express'); const app = express(); // create express app const http = require('http'); + +const bodyParser = require("body-parser"); +const cookieParser = require("cookie-parser"); +const session = require("express-session"); + const mysql = require('mysql'); const bcrypt = require('bcrypt'); const saltRounds = 10; -app.use(cors()); -const bodyParser = require('body-parser'); -app.use(bodyParser.json()); +app.use(express.json()); +app.use(cors({ + origin: ["http://localhost:3000"], + methods: ["GET", "POST"], + credentials: true, +})); + +app.use(cookieParser()); +app.use(bodyParser.urlencoded({ extended: true })); -// add middlewares -const root = require('path').join(__dirname, 'build'); -app.use(express.static(root)); +app.use(session({ + key: "userId", + secret: "test", + resave: false, + saveUninitialized: false, + cookie: { + expires: 60 * 60 * 60 * 24, + }, +})); -//app.use('/*', (req, res) => { -// res.sendFile(path.join(__dirname, 'build', 'index.html')); -//}); const server = http.createServer(app); @@ -88,35 +102,38 @@ app.post("/register", (req, res) => { ) }); -app.post('/signin', (req, res) => -{ + +app.get("/signin", (req, res) => { + if (req.session.user) { + res.send({ loggedIn: true, user: req.session.user }) + } else { + res.send({ loggedIn: false }) + } +}) + +app.post('/signin', (req, res) => { const username = req.body.username; const password = req.body.password; db.query( "SELECT * FROM account WHERE username = ?", username, - (err, result) => - { - if(err) - { - res.send({err: err}) + (err, result) => { + if (err) { + res.send({ err: err }) } - - if (result.length > 0) - { - bcrypt.compare(password, result[0].password, (error, response) => - { - if(response) - { + + if (result.length > 0) { + bcrypt.compare(password, result[0].password, (error, response) => { + if (response) { + req.session.user = result; + console.log(req.session.user) res.send(result) - } else - { + } else { res.send({ message: "Incorrect username or password" }) } }) - } else - { + } else { res.send({ message: "Incorrect username" }) } } diff --git a/src/Pages/SignInPage/SignInPage.js b/src/Pages/SignInPage/SignInPage.js index 298e877..34dca18 100644 --- a/src/Pages/SignInPage/SignInPage.js +++ b/src/Pages/SignInPage/SignInPage.js @@ -1,6 +1,9 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import Axios from "axios"; import './SignInPage.css'; +import { useHistory } from "react-router-dom"; + + function SignIn() { const [username, setUsername] = useState(""); @@ -8,6 +11,10 @@ function SignIn() { const [loginStatus, setLoginStatus] = useState(""); + Axios.defaults.withCredentials = true; + + let history = useHistory(); + const login = () => { Axios.post("http://localhost:5000/signin", { @@ -23,6 +30,14 @@ function SignIn() { }); }; + useEffect(() => { + Axios.get("http://localhost:5000/signin").then((response) => { + if (response.data.user) { + console.log(response.data.user); + } + }) + }, []) + return (
From a66fc7493792bdd0819cce848cbcd1919eec2f42 Mon Sep 17 00:00:00 2001 From: Crypticaz Date: Sat, 26 Mar 2022 00:24:33 -0500 Subject: [PATCH 2/5] backend route for registration GET method --- server.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/server.js b/server.js index ab6ff9a..d3f4c6e 100644 --- a/server.js +++ b/server.js @@ -44,6 +44,7 @@ const db = mysql.createConnection({ db.connect((err) => { if (err) { + console.log("\x1b[41m", "MySQL Connection Error:") throw err; } @@ -111,6 +112,14 @@ app.get("/signin", (req, res) => { } }) +app.get("/register", (req, res) => { + if (req.session.user) { + res.send({ loggedIn: true, user: req.session.user }) + } else { + res.send({ loggedIn: false }) + } +}) + app.post('/signin', (req, res) => { const username = req.body.username; const password = req.body.password; From da87684c7f392c934ba713bd889f7caf0de19ae1 Mon Sep 17 00:00:00 2001 From: Crypticaz Date: Sat, 26 Mar 2022 00:25:35 -0500 Subject: [PATCH 3/5] frontend GET request to backend for Route links - If a user is logged in, the routes registration and login will not longer display --- src/App.js | 69 ++++++++++++++++++++++++++++++------------------------ 1 file changed, 39 insertions(+), 30 deletions(-) diff --git a/src/App.js b/src/App.js index f8e6efd..8f0207a 100644 --- a/src/App.js +++ b/src/App.js @@ -1,8 +1,11 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import Registration from "./Pages/RegistrationPage/RegistrationPage"; import Home from "./Pages/HomePage/HomePage" +import Axios from "axios"; import Product from "./Pages/ProductPage/ProductPage" +import Login from "./Pages/SignInPage/SignInPage" import "./GeneralStyles.css"; +import "./App.css" import home from "../src/images/homebutton.png" import { @@ -12,38 +15,44 @@ import { Link } from "react-router-dom"; function App() { - const basename = process.env.REACT_APP_BASENAME || null; - return ( - -
- + const [loginState, setLoginState] = useState(false); + Axios.defaults.withCredentials = true; + useEffect(() => { + Axios.get("http://localhost:5000/signin").then((response) => { + if (response.data.user) { + setLoginState(true); + } + }) + }, []) + + return ( +
+ +
+
+ + + + Product + {!loginState && ( + <> + Register + Sign In + + )} +
+
- - - - - - - - - + + + + -
- + +
); } From cc19184f6b5366a832b08e16459bda9e2a10ee3b Mon Sep 17 00:00:00 2001 From: Crypticaz Date: Sat, 26 Mar 2022 00:26:02 -0500 Subject: [PATCH 4/5] Reload and redirect after login --- src/Pages/SignInPage/SignInPage.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/Pages/SignInPage/SignInPage.js b/src/Pages/SignInPage/SignInPage.js index 34dca18..b946cca 100644 --- a/src/Pages/SignInPage/SignInPage.js +++ b/src/Pages/SignInPage/SignInPage.js @@ -25,6 +25,8 @@ function SignIn() { setLoginStatus(response.data.message); } else { setLoginStatus(response.data[0].username); + window.location.reload(true); + history.push("/"); } }); @@ -33,7 +35,7 @@ function SignIn() { useEffect(() => { Axios.get("http://localhost:5000/signin").then((response) => { if (response.data.user) { - console.log(response.data.user); + history.push("/"); } }) }, []) From 49bbe18870fb3381a9f0c8121c04a0c03d40eb1e Mon Sep 17 00:00:00 2001 From: Crypticaz Date: Sat, 26 Mar 2022 00:38:12 -0500 Subject: [PATCH 5/5] Move navbar CSS to App.jss - More specific with CSS so it's not all over the place. - Search bar prettier - When screen is less than 600px wide, move search bar so it doesn't cover up navigation links - import font-awesome library --- src/App.css | 42 +++++++ src/Pages/HomePage/HomePage.css | 200 +++++++++++++++----------------- src/Pages/HomePage/HomePage.js | 15 ++- 3 files changed, 140 insertions(+), 117 deletions(-) diff --git a/src/App.css b/src/App.css index e69de29..93bb931 100644 --- a/src/App.css +++ b/src/App.css @@ -0,0 +1,42 @@ +.App { + width: 100%; + height: auto; +} + + +/* NAVBAR */ +.navbar { + background-color: dodgerblue; + display: flex; + font-family: Arial, Helvetica, sans-serif; +} + +.navbar .links { + height: 100%; + display: flex; + align-items: center; +} + +.navbar a { + margin-left: 20px; + text-decoration: none; + color: white; +} + +.navbar a:hover { + color: greenyellow; +} + +/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */ +@media screen and (max-width: 600px) { + .navbar .links { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + width: 100%; + margin: 0; + padding: 14px; + } + +} \ No newline at end of file diff --git a/src/Pages/HomePage/HomePage.css b/src/Pages/HomePage/HomePage.css index 373d9f1..39594a2 100644 --- a/src/Pages/HomePage/HomePage.css +++ b/src/Pages/HomePage/HomePage.css @@ -1,138 +1,120 @@ .App { - min-height: 100vh; - background-color: rgb(211, 254, 255); - font-family: 'Times New Roman', Times, serif; - margin: 0; - padding: 0; + min-height: 100vh; + background-color: rgb(211, 254, 255); + font-family: 'Times New Roman', Times, serif; + margin: 0; + padding: 0; } header { - text-align: left; - background-image: url(../../images/oceanimage.jpg); - background-blend-mode: lighten; - background-position: center; - background-size: cover; - opacity: 1; - color: black; - font-size: x-large; - margin: none; - border-radius: none; - padding: 10%; + text-align: left; + background-image: url(../../images/oceanimage.jpg); + background-blend-mode: lighten; + background-position: center; + background-size: cover; + opacity: 1; + color: black; + font-size: x-large; + margin: none; + border-radius: none; + padding: 10%; } h2 { - font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; - text-align: center; - background-color: rgb(184, 227, 240); - color: black; - font-size: large; - margin: none; - border-radius: none; - padding: 1%; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + text-align: center; + background-color: rgb(184, 227, 240); + color: black; + font-size: large; + margin: none; + border-radius: none; + padding: 1%; } h3 { - font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; - text-align: justify; - color: black; - font-size: large; - margin: none; - border-radius: none; - padding: 1%; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + text-align: justify; + color: black; + font-size: large; + margin: none; + border-radius: none; + padding: 1%; } -.Frames{ - display: flex; - flex-direction: column; - color: black; - font-size: large; - margin: 5%; - align-items: left; - text-align: center; +.Frames { + display: flex; + flex-direction: column; + color: black; + font-size: large; + margin: 5%; + align-items: left; + text-align: center; } .Frames button { - height: 100; - width: 100; - + height: 100; + width: 100; + } .hotbar-button { - color: black; - padding: 5px 5px; - text-decoration: none; - font-size: large; - border: none; - margin: 1%; + color: black; + padding: 5px 5px; + text-decoration: none; + font-size: large; + border: none; + margin: 1%; } .hotbar-button:hover { - cursor: pointer; + cursor: pointer; } .Topright { - position: absolute; - top: -3px; - right: 16px; - font-size: 18px + position: absolute; + top: -3px; + right: 16px; + font-size: 18px } -.Middleright { - position: absolute; - top: -3px; - right: 100px; +/* Add a black background color to the top navigation bar */ +.searchbar { + position: absolute; + display: flex; + align-items: center; + background-color: lightseagreen; + padding: 0.5rem; + border: none; + border-radius: 0.5rem; + width: 200px; + color: white; + right: 100px; + top: 0.6rem; } -/* Add a black background color to the top navigation bar */ -.topnav { - overflow: hidden; - background-color: lightgrey; - } - - /* Style the links inside the navigation bar */ - .topnav a { - float: left; - display: block; - color: black; - text-align: center; - padding: 14px 16px; - text-decoration: none; - font-size: 17px; - } - - /* Change the color of links on hover */ - .topnav a:hover { - background-color: #ddd; - color: black; - } - - /* Style the "active" element to highlight the current page */ - .topnav a.active { - background-color: #2196F3; - color: white; - } - - /* Style the search box inside the navigation bar */ - .topnav input[type=text] { - float: right; - padding: 6px; - border: none; - margin-top: 8px; - margin-right: 16px; - font-size: 17px; +/* Style the "active" element to highlight the current page */ +.searchbar a.active { + background-color: #2196F3; + color: white; +} + +/* Style the search box inside the navigation bar */ +.searchbar input { + padding: 6px; + border: none; + outline: none; + margin: 0 0.5rem 0 0.5rem; + width: 100%; + height: 2px; + background-color: lightseagreen; + font-size: 17px; +} + +/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */ +@media screen and (max-width: 630px) { + .searchbar { + position: inherit; + border-radius: 0; + width: 98%; } - - /* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */ - @media screen and (max-width: 600px) { - .topnav a, .topnav input[type=text] { - float: none; - display: block; - text-align: left; - width: 100%; - margin: 0; - padding: 14px; - } - .topnav input[type=text] { - border: 1px solid #ccc; - } - } \ No newline at end of file +} \ No newline at end of file diff --git a/src/Pages/HomePage/HomePage.js b/src/Pages/HomePage/HomePage.js index a524939..7510f74 100644 --- a/src/Pages/HomePage/HomePage.js +++ b/src/Pages/HomePage/HomePage.js @@ -2,22 +2,24 @@ import "./HomePage.css" import React from "react"; import cartImage from "../../images/cartimage.png" +import 'font-awesome/css/font-awesome.min.css'; function Home() { - return (
- + />
-
+
+
+
@@ -27,7 +29,7 @@ function Home() {

Deals of the Day

- +
@@ -39,11 +41,8 @@ function Home() {
-
); - } - export default Home; \ No newline at end of file