From af4bc6a70baa1de929cc85337c072a066b40e35b Mon Sep 17 00:00:00 2001 From: miketitan58 Date: Tue, 22 Mar 2022 11:06:17 -0500 Subject: [PATCH 01/11] fixed the button issue all buttons are now centered properly --- src/Pages/ProductPage/ProductPage.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Pages/ProductPage/ProductPage.css b/src/Pages/ProductPage/ProductPage.css index f15f721..37b17b3 100644 --- a/src/Pages/ProductPage/ProductPage.css +++ b/src/Pages/ProductPage/ProductPage.css @@ -38,7 +38,7 @@ text-align: left; } -button { +.button { position: relative; left: 25%; width: 15%; From d9c00c7aacae27673f3c141c62a65dc2537311e4 Mon Sep 17 00:00:00 2001 From: miketitan58 Date: Tue, 22 Mar 2022 11:40:48 -0500 Subject: [PATCH 02/11] working on printing variables doesnt work but the framework is there --- src/Pages/ProductPage/ProductPage.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/Pages/ProductPage/ProductPage.js b/src/Pages/ProductPage/ProductPage.js index c8bc0a6..9321158 100644 --- a/src/Pages/ProductPage/ProductPage.js +++ b/src/Pages/ProductPage/ProductPage.js @@ -1,8 +1,19 @@ import "./ProductPage.css" function Product(){ + + /* temo variables */ + let test_name = "glasses01"; + let test_manufacturer = "Stark Industries"; + let test_cost = 99.99; + return(
+
WorldWide Frames - See A Better World @@ -10,9 +21,9 @@ function Product(){ {/* create an overall panel, with header 2, the image, and the button inside of it */}
-

Name:

-

Manufacturer:

-

Cost:

+

Name: name

+

Manufacturer: manufacturer

+

Cost: cost

From 13604f84ef7796d14b2ea4a103bf0bf1c6bc9060 Mon Sep 17 00:00:00 2001 From: miketitan58 Date: Wed, 23 Mar 2022 11:33:33 -0500 Subject: [PATCH 03/11] Revert "fixed the button issue" This reverts commit af4bc6a70baa1de929cc85337c072a066b40e35b. --- src/Pages/ProductPage/ProductPage.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Pages/ProductPage/ProductPage.css b/src/Pages/ProductPage/ProductPage.css index 37b17b3..f15f721 100644 --- a/src/Pages/ProductPage/ProductPage.css +++ b/src/Pages/ProductPage/ProductPage.css @@ -38,7 +38,7 @@ text-align: left; } -.button { +button { position: relative; left: 25%; width: 15%; From 9c5f02600890836cd02c6095a5e4e6b022041969 Mon Sep 17 00:00:00 2001 From: miketitan58 Date: Wed, 23 Mar 2022 11:33:37 -0500 Subject: [PATCH 04/11] Revert "working on printing variables" This reverts commit d9c00c7aacae27673f3c141c62a65dc2537311e4. --- src/Pages/ProductPage/ProductPage.js | 17 +++-------------- 1 file changed, 3 insertions(+), 14 deletions(-) diff --git a/src/Pages/ProductPage/ProductPage.js b/src/Pages/ProductPage/ProductPage.js index 9321158..c8bc0a6 100644 --- a/src/Pages/ProductPage/ProductPage.js +++ b/src/Pages/ProductPage/ProductPage.js @@ -1,19 +1,8 @@ import "./ProductPage.css" function Product(){ - - /* temo variables */ - let test_name = "glasses01"; - let test_manufacturer = "Stark Industries"; - let test_cost = 99.99; - return(
-
WorldWide Frames - See A Better World @@ -21,9 +10,9 @@ function Product(){ {/* create an overall panel, with header 2, the image, and the button inside of it */}
-

Name: name

-

Manufacturer: manufacturer

-

Cost: cost

+

Name:

+

Manufacturer:

+

Cost:

From dc4661b8064d1e481bce3a85dc7adbad76b0affc Mon Sep 17 00:00:00 2001 From: miketitan58 Date: Wed, 23 Mar 2022 12:33:53 -0500 Subject: [PATCH 05/11] Product Page - added image - fixed header and button location issues --- src/Pages/ProductPage/ProductPage.css | 9 +++++++++ src/Pages/ProductPage/ProductPage.js | 16 +++++++++++++--- 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/src/Pages/ProductPage/ProductPage.css b/src/Pages/ProductPage/ProductPage.css index 40599c3..7de889d 100644 --- a/src/Pages/ProductPage/ProductPage.css +++ b/src/Pages/ProductPage/ProductPage.css @@ -7,6 +7,13 @@ text-align: center; } +.image1{ + position: relative; + right: 450px; + top: 100px; + border-radius: 100px; +} + .panel1 { height: 500px; font-family: 'Times New Roman', Times, serif; @@ -29,6 +36,7 @@ */ .header2 { position: relative; + top: -350px; left: 55%; height: 500px; width: 40%; @@ -41,6 +49,7 @@ .panel1 button { position: relative; + top: -350px; left: 25%; width: 15%; } \ No newline at end of file diff --git a/src/Pages/ProductPage/ProductPage.js b/src/Pages/ProductPage/ProductPage.js index 55b28b6..685dc71 100644 --- a/src/Pages/ProductPage/ProductPage.js +++ b/src/Pages/ProductPage/ProductPage.js @@ -1,6 +1,10 @@ import "./ProductPage.css" +import image from "../../images/testglasses.jpg"; function Product() { + let name = "Test Glasses"; + let manufacturer = "Stark Industries" + let cost = 99.99; return (
@@ -9,10 +13,16 @@ function Product() {
{/* create an overall panel, with header 2, the image, and the button inside of it */}
+
+ +
-

Name:

-

Manufacturer:

-

Cost:

+

Name: {name}

+

Manufacturer: {manufacturer}

+

Cost: {cost}

From 718939982fe0b92d75c8754ec540225289449d71 Mon Sep 17 00:00:00 2001 From: KylePancamo <50267605+KylePancamo@users.noreply.github.com> Date: Wed, 23 Mar 2022 15:37:31 -0500 Subject: [PATCH 06/11] Implement more registration preventions - prevent registration if user account already exists - prevent registration if not all fields filled out - display registration status - todo: check for existing email --- server.js | 59 ++++++++++++------- .../RegistrationPage/RegistrationPage.js | 14 ++++- 2 files changed, 50 insertions(+), 23 deletions(-) diff --git a/server.js b/server.js index d38c2bf..4e26b01 100644 --- a/server.js +++ b/server.js @@ -46,31 +46,46 @@ app.post("/register", (req, res) => { const lastname = req.body.lastname; const phone = req.body.phone; - bcrypt.hash(password, saltRounds, (err, hash) => { - if (err) { - console.log(err); - } + db.query( + "SELECT * FROM account WHERE username = ?", + username, + (err, result) => { + if (err) { + console.log(err); + } + if (result.length > 0) { + return res.send({ message: "User account already exists!" }); - const data = [ - username, - email, - address, - hash, - firstname, - lastname, - phone - ]; + } else { + bcrypt.hash(password, saltRounds, (err, hash) => { + if (err) { + console.log(err); + } - const query = "INSERT INTO account (username, email, address, password, first_name, last_name, phone_num) VALUES (?, ?, ?, ?, ?, ?, ?);"; - db.query( - query, data, - (err, result) => { - if (err) { - res.send({ err: err }); - } + const data = [ + username, + email, + address, + hash, + firstname, + lastname, + phone + ]; + + const query = "INSERT INTO account (username, email, address, password, first_name, last_name, phone_num) VALUES (?, ?, ?, ?, ?, ?, ?);"; + db.query( + query, data, + (err, result) => { + if (err) { + res.send({ err: err }); + } + res.send({ message: "You have been successfully registered!" }); + } + ); + }); } - ); - }); + } + ) }); // start express server on port 5000 server.listen(5000, () => { diff --git a/src/Pages/RegistrationPage/RegistrationPage.js b/src/Pages/RegistrationPage/RegistrationPage.js index d845f8e..ddfcfb9 100644 --- a/src/Pages/RegistrationPage/RegistrationPage.js +++ b/src/Pages/RegistrationPage/RegistrationPage.js @@ -12,6 +12,8 @@ function Registration() { const [lastname, setLastname] = useState(0); const [phone, setPhone] = useState(""); + const [registrationStatus, setRegistrationStatus] = useState(""); + let history = useHistory(); const registerUser = () => { @@ -24,12 +26,21 @@ function Registration() { lastname: lastname, phone: phone }; + + let emptyField = Object.values(data).includes(""); + if (emptyField) { + setRegistrationStatus("You must fill out all fields before continuing"); + return; + } + Axios.post("http://localhost:5000/register", data).then((response) => { if (response.data.error) { alert(response.data.error); console.log("error!"); } else { - console.log(response); + if (response.data.message) { + setRegistrationStatus(response.data.message); + } /*history.push("/");*/ } }); @@ -80,6 +91,7 @@ function Registration() { }} /> +

{registrationStatus}

); } From a046d38e3e7f5ad3527a7b8e787fc5f43ef799b3 Mon Sep 17 00:00:00 2001 From: michelle <90795143+michellebarrows@users.noreply.github.com> Date: Fri, 25 Mar 2022 11:11:50 -0500 Subject: [PATCH 07/11] Login functionality (#20) * Create Profile.js * moving machiens * Login functionality Added a signin page that checks against the account database. For now, all it does is display the username below if login succeeds. --- server.js | 36 ++++++++++++++++++ src/App.js | 6 +++ src/Pages/SignInPage/SignInPage.css | 28 ++++++++++++++ src/Pages/SignInPage/SignInPage.js | 58 +++++++++++++++++++++++++++++ 4 files changed, 128 insertions(+) create mode 100644 src/Pages/SignInPage/SignInPage.css create mode 100644 src/Pages/SignInPage/SignInPage.js diff --git a/server.js b/server.js index 4e26b01..98949af 100644 --- a/server.js +++ b/server.js @@ -87,6 +87,42 @@ app.post("/register", (req, res) => { } ) }); + +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}) + } + + if (result.length > 0) + { + bcrypt.compare(password, result[0].password, (error, response) => + { + if(response) + { + res.send(result) + } else + { + res.send({ message: "Incorrect username or password" }) + } + }) + } else + { + res.send({ message: "Incorrect username" }) + } + } + ); +}) + // start express server on port 5000 server.listen(5000, () => { console.log('NodeJS server running'); diff --git a/src/App.js b/src/App.js index 7da904f..d5e4d89 100644 --- a/src/App.js +++ b/src/App.js @@ -2,6 +2,7 @@ import React from "react"; import Registration from "./Pages/RegistrationPage/RegistrationPage"; import Home from "./Pages/HomePage/HomePage" import Product from "./Pages/ProductPage/ProductPage" +import SignIn from "./Pages/SignInPage/SignInPage" import "./GeneralStyles.css"; import { BrowserRouter as Router, @@ -21,9 +22,14 @@ function App() { Register   Product +   + Sign In + + + diff --git a/src/Pages/SignInPage/SignInPage.css b/src/Pages/SignInPage/SignInPage.css new file mode 100644 index 0000000..2b1556d --- /dev/null +++ b/src/Pages/SignInPage/SignInPage.css @@ -0,0 +1,28 @@ +.signin-wrapper { + display: flex; + flex-direction: column; + width: 100%; + justify-content: center; + align-items: center; + background-color:aqua; + } + + input { + width: 250px; + height: 50px; + font-size: 20px; + padding-left: 10px; + margin: 5px; + + } + + button { + width: 320px; + height: 50px; + margin-top: 15px; + } + + button:hover { + cursor: pointer; + } + \ No newline at end of file diff --git a/src/Pages/SignInPage/SignInPage.js b/src/Pages/SignInPage/SignInPage.js new file mode 100644 index 0000000..d204f9d --- /dev/null +++ b/src/Pages/SignInPage/SignInPage.js @@ -0,0 +1,58 @@ +import React, { useState } from 'react'; +import Axios from "axios"; +import './SignInPage.css'; + +function SignIn() +{ + const [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); + + const [loginStatus, setLoginStatus] = useState(""); + + const login = () => + { + Axios.post("http://localhost:5000/signin", + { + username: username, + password: password, + }).then((response) => + { + if(response.data.message) + { + setLoginStatus(response.data.message); + } else + { + setLoginStatus(response.data[0].username); + } + + }); + }; + + return ( +
+

Sign In

+ + { + setUsername(e.target.value); + }} + /> + + + { + setPassword(e.target.value); + }} + /> +
+ +
+

{loginStatus}

+
+ ); +} +export default SignIn; \ No newline at end of file From 8618bc940de40f800e5e3d819d1f5004bd300b77 Mon Sep 17 00:00:00 2001 From: KylePancamo <50267605+KylePancamo@users.noreply.github.com> Date: Fri, 25 Mar 2022 11:23:21 -0500 Subject: [PATCH 08/11] Formatting and button specific div --- src/Pages/SignInPage/SignInPage.css | 49 +++++++++++++---------------- 1 file changed, 22 insertions(+), 27 deletions(-) diff --git a/src/Pages/SignInPage/SignInPage.css b/src/Pages/SignInPage/SignInPage.css index 2b1556d..4394f33 100644 --- a/src/Pages/SignInPage/SignInPage.css +++ b/src/Pages/SignInPage/SignInPage.css @@ -1,28 +1,23 @@ .signin-wrapper { - display: flex; - flex-direction: column; - width: 100%; - justify-content: center; - align-items: center; - background-color:aqua; - } - - input { - width: 250px; - height: 50px; - font-size: 20px; - padding-left: 10px; - margin: 5px; - - } - - button { - width: 320px; - height: 50px; - margin-top: 15px; - } - - button:hover { - cursor: pointer; - } - \ No newline at end of file + display: flex; + flex-direction: column; + width: 100%; + justify-content: center; + align-items: center; + background-color: aqua; +} + +.signin-wrapper input { + width: 250px; + height: 50px; + font-size: 20px; + padding-left: 10px; + margin: 5px; + +} + +.signin-wrapper button { + width: 320px; + height: 50px; + margin-top: 15px; +} \ No newline at end of file From 1df73fbb9415b48231712a55a995647229aea108 Mon Sep 17 00:00:00 2001 From: KylePancamo <50267605+KylePancamo@users.noreply.github.com> Date: Fri, 25 Mar 2022 11:36:27 -0500 Subject: [PATCH 09/11] SIgnIn page formatting and CSS height --- src/Pages/SignInPage/SignInPage.css | 2 +- src/Pages/SignInPage/SignInPage.js | 71 ++++++++++++++--------------- 2 files changed, 34 insertions(+), 39 deletions(-) diff --git a/src/Pages/SignInPage/SignInPage.css b/src/Pages/SignInPage/SignInPage.css index 4394f33..62ef674 100644 --- a/src/Pages/SignInPage/SignInPage.css +++ b/src/Pages/SignInPage/SignInPage.css @@ -5,6 +5,7 @@ justify-content: center; align-items: center; background-color: aqua; + min-height: 100vh; } .signin-wrapper input { @@ -13,7 +14,6 @@ font-size: 20px; padding-left: 10px; margin: 5px; - } .signin-wrapper button { diff --git a/src/Pages/SignInPage/SignInPage.js b/src/Pages/SignInPage/SignInPage.js index d204f9d..298e877 100644 --- a/src/Pages/SignInPage/SignInPage.js +++ b/src/Pages/SignInPage/SignInPage.js @@ -2,56 +2,51 @@ import React, { useState } from 'react'; import Axios from "axios"; import './SignInPage.css'; -function SignIn() -{ +function SignIn() { const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [loginStatus, setLoginStatus] = useState(""); - const login = () => - { - Axios.post("http://localhost:5000/signin", - { - username: username, - password: password, - }).then((response) => - { - if(response.data.message) + const login = () => { + Axios.post("http://localhost:5000/signin", { - setLoginStatus(response.data.message); - } else - { - setLoginStatus(response.data[0].username); - } - - }); + username: username, + password: password, + }).then((response) => { + if (response.data.message) { + setLoginStatus(response.data.message); + } else { + setLoginStatus(response.data[0].username); + } + + }); }; return ( -
-

Sign In

- - { - setUsername(e.target.value); - }} - /> - - - { - setPassword(e.target.value); - }} - /> +
+
+

Sign In

+ { + setUsername(e.target.value); + }} + /> + + { + setPassword(e.target.value); + }} + />
-

{loginStatus}

+

{loginStatus}

+
); } From 3acde077cda72149ae225e53c700883ef59b2eae Mon Sep 17 00:00:00 2001 From: KylePancamo <50267605+KylePancamo@users.noreply.github.com> Date: Fri, 25 Mar 2022 11:36:51 -0500 Subject: [PATCH 10/11] Fix registration page background color height --- src/Pages/RegistrationPage/RegistrationPage.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Pages/RegistrationPage/RegistrationPage.css b/src/Pages/RegistrationPage/RegistrationPage.css index d1a52e6..291bd12 100644 --- a/src/Pages/RegistrationPage/RegistrationPage.css +++ b/src/Pages/RegistrationPage/RegistrationPage.css @@ -1,6 +1,6 @@ .information { display: flex; - height: 100%; + min-height: 100vh; width: 100%; flex-direction: column; justify-content: center; From 60511c81a0acf5e8dd1334472cb18fd6e9e7861f Mon Sep 17 00:00:00 2001 From: KylePancamo <50267605+KylePancamo@users.noreply.github.com> Date: Fri, 25 Mar 2022 11:52:25 -0500 Subject: [PATCH 11/11] Fix capitalization --- src/Pages/RegistrationPage/RegistrationPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Pages/RegistrationPage/RegistrationPage.js b/src/Pages/RegistrationPage/RegistrationPage.js index ddfcfb9..2229dbe 100644 --- a/src/Pages/RegistrationPage/RegistrationPage.js +++ b/src/Pages/RegistrationPage/RegistrationPage.js @@ -60,7 +60,7 @@ function Registration() { setPassword(event.target.value); }} /> - + { setEmail(event.target.value);