From 8d439a8ab57b555bbde97c7508d3da8ab0cf4828 Mon Sep 17 00:00:00 2001 From: miketitan58 Date: Mon, 28 Feb 2022 12:48:49 -0600 Subject: [PATCH 01/10] Update App.js added button --- src/App.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/App.js b/src/App.js index 8c0878f..5d9f591 100644 --- a/src/App.js +++ b/src/App.js @@ -9,6 +9,7 @@ function App() { +
From 0f6f8770132ee04cd9acc0a35972754605906de2 Mon Sep 17 00:00:00 2001 From: miketitan58 Date: Mon, 7 Mar 2022 12:20:42 -0600 Subject: [PATCH 02/10] Revert "Update App.js" This reverts commit 8d439a8ab57b555bbde97c7508d3da8ab0cf4828. --- src/App.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/App.js b/src/App.js index 5d9f591..8c0878f 100644 --- a/src/App.js +++ b/src/App.js @@ -9,7 +9,6 @@ function App() { -
From 73d847aef685c91d50e6b577e818b23bab47fba6 Mon Sep 17 00:00:00 2001 From: miketitan58 Date: Mon, 21 Mar 2022 12:25:37 -0500 Subject: [PATCH 03/10] Added Basic Product Page --- src/App.css | 40 ++++++++++++++++++++++++ src/App.js | 9 +++++- src/Pages/ProductPage/ProductPage.css | 45 +++++++++++++++++++++++++++ src/Pages/ProductPage/ProductPage.js | 14 +++++++++ 4 files changed, 107 insertions(+), 1 deletion(-) create mode 100644 src/App.css create mode 100644 src/Pages/ProductPage/ProductPage.css create mode 100644 src/Pages/ProductPage/ProductPage.js diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..b6eaa35 --- /dev/null +++ b/src/App.css @@ -0,0 +1,40 @@ +.App { + min-height: 100vh; + background-color: rgb(211, 254, 255); + font-family: 'Times New Roman', Times, serif; + margin: 0; + padding: 0; + text-align: center; +} + +header { + text-align: center; + background-color: rgb(180, 255, 214); + color: black; + font-size:x-large; + margin: none; + border-radius: none; + padding: 10%; +} + +button { + color: black; + padding: 20px 60px; + text-decoration: none; + font-size: large; + border: none; + margin: 5%; + background-color: rgb(183,255,207); +} + +button:hover { + background-color: rgb(0,141,141); + color: white; +} + +.Topright { + position: absolute; + top: 8px; + right: 16px; + font-size:18px; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index c0dc8e3..661ff21 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,7 @@ import React from "react"; import Registration from "./Pages/LoginPage/LoginPage"; import Home from "./Pages/HomePage/HomePage" +import Product from "./Pages/ProductPage/ProductPage" import { BrowserRouter as Router, Switch, @@ -17,11 +18,17 @@ function App() { Home   Register - +   + Product + + + + + diff --git a/src/Pages/ProductPage/ProductPage.css b/src/Pages/ProductPage/ProductPage.css new file mode 100644 index 0000000..57a9431 --- /dev/null +++ b/src/Pages/ProductPage/ProductPage.css @@ -0,0 +1,45 @@ +.App { + min-height: 100vh; + background-color: rgb(211, 254, 255); + font-family: 'Times New Roman', Times, serif; + margin: 0; + padding: 0; + text-align: center; + } + + header { + text-align: left; + background-color:aqua; + color: black; + font-size:x-large; + margin: none; + border-radius: none; + padding: 10%; + } + + button { + color: black; + padding: 20px 60px; + text-decoration: none; + font-size: large; + border: none; + margin: 5%; + background-color: rgb(183,255,207); + } + + button:hover { + background-color: rgb(0,141,141); + color: white; + } + + 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%; + } + diff --git a/src/Pages/ProductPage/ProductPage.js b/src/Pages/ProductPage/ProductPage.js new file mode 100644 index 0000000..acb5048 --- /dev/null +++ b/src/Pages/ProductPage/ProductPage.js @@ -0,0 +1,14 @@ +import "./ProductPage.css" + +function Product(){ + return( +
+
+
PRODUCT NAME HERE
+ +
+
+ ); +} + +export default Product; \ No newline at end of file From 266560a8e2ed250409e94cd8ea10b39fe6804cea Mon Sep 17 00:00:00 2001 From: KylePancamo <50267605+KylePancamo@users.noreply.github.com> Date: Mon, 21 Mar 2022 12:47:16 -0500 Subject: [PATCH 04/10] Fix css conflicts --- src/Pages/HomePage/HomePage.js | 20 ++++++------ src/Pages/ProductPage/ProductPage.css | 47 +++++---------------------- src/Pages/ProductPage/ProductPage.js | 10 +++--- 3 files changed, 22 insertions(+), 55 deletions(-) diff --git a/src/Pages/HomePage/HomePage.js b/src/Pages/HomePage/HomePage.js index cdf06e9..195ee6c 100644 --- a/src/Pages/HomePage/HomePage.js +++ b/src/Pages/HomePage/HomePage.js @@ -5,16 +5,16 @@ function Home() { return (
-
WorldWide Frames - See A Better World
-

Items on Sale

-

Deals of the Day

- - - -

Sunglasses

- - -
+
WorldWide Frames - See A Better World
+

Items on Sale

+

Deals of the Day

+ + + +

Sunglasses

+ + +
-
-
PRODUCT NAME HERE
- -
-
+
+ PRODUCT NAME HERE + +
); } From 2a783bf9f3258301480ee8e1c7e7681faa926d3d Mon Sep 17 00:00:00 2001 From: miketitan58 Date: Mon, 21 Mar 2022 14:38:39 -0500 Subject: [PATCH 05/10] updated product page --- src/Pages/ProductPage/ProductPage.css | 66 +++++++++++++-------------- src/Pages/ProductPage/ProductPage.js | 18 ++++++-- 2 files changed, 48 insertions(+), 36 deletions(-) diff --git a/src/Pages/ProductPage/ProductPage.css b/src/Pages/ProductPage/ProductPage.css index 57a9431..fe38f87 100644 --- a/src/Pages/ProductPage/ProductPage.css +++ b/src/Pages/ProductPage/ProductPage.css @@ -1,4 +1,4 @@ -.App { +.App1 { min-height: 100vh; background-color: rgb(211, 254, 255); font-family: 'Times New Roman', Times, serif; @@ -6,40 +6,40 @@ padding: 0; text-align: center; } - - header { - text-align: left; - background-color:aqua; - color: black; - font-size:x-large; - margin: none; - border-radius: none; - padding: 10%; + .panel1 { + font-family: 'Times New Roman', Times, serif; + margin: 0; + padding: 0; + text-align: center; } - button { - color: black; - padding: 20px 60px; - text-decoration: none; - font-size: large; - border: none; - margin: 5%; - background-color: rgb(183,255,207); - } +.header1{ + min-height: 10vh; + background-color: aqua; + font-family: 'Times New Roman', Times, serif; + margin: 0; + padding: 0; + text-align: center; +} - button:hover { - background-color: rgb(0,141,141); - color: white; - } +.header2{ + position: fixed; + top: 110px; + left: 750px; + height: 500px; + width: 500px; + background-color: rgb(189, 207, 209); + font-family: 'Times New Roman', Times, serif; + margin: 0; + padding: 0; + text-align: left; +} - 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%; - } +button{ + position: fixed; + left: 550px; + top: 550px; +} + + diff --git a/src/Pages/ProductPage/ProductPage.js b/src/Pages/ProductPage/ProductPage.js index acb5048..c9909fc 100644 --- a/src/Pages/ProductPage/ProductPage.js +++ b/src/Pages/ProductPage/ProductPage.js @@ -3,9 +3,21 @@ import "./ProductPage.css" function Product(){ return(
-
-
PRODUCT NAME HERE
- +
+
+ WorldWide Frames - See A Better World +
+ {/* create an overall panel, with header 2, the image, and the button inside of it */} +
+
+ +

Name:

+

Manufacturer:

+

Cost:

+ +
+ +
); From 11845d6878b4223199802535ffc7e56a7c37ada3 Mon Sep 17 00:00:00 2001 From: KylePancamo <50267605+KylePancamo@users.noreply.github.com> Date: Mon, 21 Mar 2022 16:05:44 -0500 Subject: [PATCH 06/10] fix css issues --- src/Pages/ProductPage/ProductPage.css | 21 ++++++++++++--------- src/Pages/ProductPage/ProductPage.js | 4 +--- 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/src/Pages/ProductPage/ProductPage.css b/src/Pages/ProductPage/ProductPage.css index 55995ed..f15f721 100644 --- a/src/Pages/ProductPage/ProductPage.css +++ b/src/Pages/ProductPage/ProductPage.css @@ -7,10 +7,10 @@ text-align: center; } .panel1 { + height: 500px; font-family: 'Times New Roman', Times, serif; margin: 0; padding: 0; - text-align: center; } .header1{ @@ -22,12 +22,15 @@ text-align: center; } +/* +* percentage's are used to scale items according to browser resizing +* can possibly use flex containers for buttons +*/ .header2{ - position: fixed; - top: 110px; - left: 750px; + position: relative; + left: 55%; height: 500px; - width: 500px; + width: 40%; background-color: rgb(189, 207, 209); font-family: 'Times New Roman', Times, serif; margin: 0; @@ -35,8 +38,8 @@ text-align: left; } -button{ - position: fixed; - left: 550px; - top: 550px; +button { + position: relative; + 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 c9909fc..c8bc0a6 100644 --- a/src/Pages/ProductPage/ProductPage.js +++ b/src/Pages/ProductPage/ProductPage.js @@ -10,11 +10,9 @@ function Product(){ {/* create an overall panel, with header 2, the image, and the button inside of it */}
-

Name:

Manufacturer:

-

Cost:

- +

Cost:

From 53fdfaa4a108b9b8ecddec76d605513a1e37a5c0 Mon Sep 17 00:00:00 2001 From: KylePancamo <50267605+KylePancamo@users.noreply.github.com> Date: Tue, 22 Mar 2022 14:22:31 -0500 Subject: [PATCH 07/10] Reorganization - Fix indentations - Rename login page to registration page - Fix CSS class specific styles - Created generic CSS styles file and move general button styles into their --- src/App.css | 40 --------- src/App.js | 3 +- src/GeneralStyles.css | 12 +++ src/Pages/HomePage/HomePage.css | 84 +++++++++---------- src/Pages/HomePage/HomePage.js | 47 ++++++----- src/Pages/LoginPage/LoginPage.css | 48 ----------- src/Pages/LoginPage/LoginPage.js | 80 ------------------ src/Pages/ProductPage/ProductPage.css | 69 +++++++-------- src/Pages/ProductPage/ProductPage.js | 30 +++---- .../RegistrationPage/RegistrationPage.css | 24 ++++++ .../RegistrationPage/RegistrationPage.js | 79 +++++++++++++++++ 11 files changed, 236 insertions(+), 280 deletions(-) create mode 100644 src/GeneralStyles.css delete mode 100644 src/Pages/LoginPage/LoginPage.css delete mode 100644 src/Pages/LoginPage/LoginPage.js create mode 100644 src/Pages/RegistrationPage/RegistrationPage.css create mode 100644 src/Pages/RegistrationPage/RegistrationPage.js diff --git a/src/App.css b/src/App.css index b6eaa35..e69de29 100644 --- a/src/App.css +++ b/src/App.css @@ -1,40 +0,0 @@ -.App { - min-height: 100vh; - background-color: rgb(211, 254, 255); - font-family: 'Times New Roman', Times, serif; - margin: 0; - padding: 0; - text-align: center; -} - -header { - text-align: center; - background-color: rgb(180, 255, 214); - color: black; - font-size:x-large; - margin: none; - border-radius: none; - padding: 10%; -} - -button { - color: black; - padding: 20px 60px; - text-decoration: none; - font-size: large; - border: none; - margin: 5%; - background-color: rgb(183,255,207); -} - -button:hover { - background-color: rgb(0,141,141); - color: white; -} - -.Topright { - position: absolute; - top: 8px; - right: 16px; - font-size:18px; -} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 661ff21..7da904f 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,8 @@ import React from "react"; -import Registration from "./Pages/LoginPage/LoginPage"; +import Registration from "./Pages/RegistrationPage/RegistrationPage"; import Home from "./Pages/HomePage/HomePage" import Product from "./Pages/ProductPage/ProductPage" +import "./GeneralStyles.css"; import { BrowserRouter as Router, Switch, diff --git a/src/GeneralStyles.css b/src/GeneralStyles.css new file mode 100644 index 0000000..72aab57 --- /dev/null +++ b/src/GeneralStyles.css @@ -0,0 +1,12 @@ +button { + border: none; + margin-left: 1%; + background-color: rgb(102, 255, 0); + border-radius: 10px; +} + +button:hover { + background-color: rgb(0, 141, 141); + color: white; + cursor: pointer; +} \ No newline at end of file diff --git a/src/Pages/HomePage/HomePage.css b/src/Pages/HomePage/HomePage.css index 1d04a1c..1b53236 100644 --- a/src/Pages/HomePage/HomePage.css +++ b/src/Pages/HomePage/HomePage.css @@ -4,80 +4,80 @@ font-family: 'Times New Roman', Times, serif; margin: 0; padding: 0; - text-align: center; - } - - header { +} + +header { text-align: left; background-image: url(../../images/oceanimage.jpg); - background-blend-mode:lighten; + background-blend-mode: lighten; background-position: center; - background-size:cover; - opacity:1; + background-size: cover; + opacity: 1; color: black; - font-size:x-large; + 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; +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; + 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; +} + +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; + font-size: large; margin: none; border-radius: none; padding: 1%; - } +} - - button { +.Frames{ + display: flex; + flex-direction: column; color: black; - padding: 20px 60px; - text-decoration: none; font-size: large; - border: none; margin: 5%; - background-color: rgb(102, 255, 0); - } + align-items: left; + text-align: center; +} + +.Frames button { + height: 30px; + width: 20%; +} - .hotbar-button { +.hotbar-button { color: black; padding: 5px 5px; text-decoration: none; font-size: large; border: none; margin: 1%; - } - .hotbar-button:hover { - cursor:pointer; - } - - button:hover { - background-color: rgb(0,141,141); - color: white; - } +} - .Topright { +.hotbar-button:hover { + cursor: pointer; +} + +.Topright { position: absolute; top: 30px; right: 16px; - font-size:18px - } - - .Middleright { + font-size: 18px +} + +.Middleright { position: absolute; - top:30px; - right:80px; - } \ No newline at end of file + top: 30px; + right: 80px; +} \ No newline at end of file diff --git a/src/Pages/HomePage/HomePage.js b/src/Pages/HomePage/HomePage.js index 195ee6c..ca64a87 100644 --- a/src/Pages/HomePage/HomePage.js +++ b/src/Pages/HomePage/HomePage.js @@ -1,37 +1,44 @@ import "./HomePage.css" -import image from "../../images/cartimage.png" +import image from "../../images/cartimage.png" import image2 from "../../images/searchbar.png" function Home() { - return ( -
-
-
WorldWide Frames - See A Better World
-

Items on Sale

+ + return ( +
+
+
WorldWide Frames - See A Better World
+

Items on Sale

+
+

Deals of the Day

+
+

Sunglasses

-
-
- -
-
-
- -
+
+
+
+
- - ); +
+
+ +
+
+
+ + ); } export default Home; \ No newline at end of file diff --git a/src/Pages/LoginPage/LoginPage.css b/src/Pages/LoginPage/LoginPage.css deleted file mode 100644 index 489d561..0000000 --- a/src/Pages/LoginPage/LoginPage.css +++ /dev/null @@ -1,48 +0,0 @@ -.information { - 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; - } - - .employees { - display: flex; - align-items: center; - flex-direction: column; - width: 100%; - } - - .employee { - width: 700px; - height: auto; - border: 1px solid black; - margin: 10px; - display: flex; - padding: 10px; - font-family: 'Courier New', Courier, monospace; - } - - .employee h3 { - margin: 20px; - } \ No newline at end of file diff --git a/src/Pages/LoginPage/LoginPage.js b/src/Pages/LoginPage/LoginPage.js deleted file mode 100644 index 40d45ef..0000000 --- a/src/Pages/LoginPage/LoginPage.js +++ /dev/null @@ -1,80 +0,0 @@ -import { useState } from "react"; -import "./LoginPage.css" -import Axios from "axios"; - -function Registration() { - const [username, setUsername] = useState(""); - const [email, setEmail] = useState(""); - const [address, setAddress] = useState(""); - const [password, setPassword] = useState(""); - const [firstname, setFirstname] = useState(""); - const [lastname, setLastname] = useState(0); - const [phone, setPhone] = useState(""); - - const addEmployee = () => { - Axios.post("/create", { - username: username, - email: email, - address: address, - password: password, - firstname: firstname, - lastname: lastname, - phone: phone, - }).then((response) =>{ - if (response.data.message) { - console.log(response.data.message) - } - }); - }; - - return ( -
- - { - setUsername(event.target.value); - }} - /> - - { - setPassword(event.target.value); - }} - /> - - { - setEmail(event.target.value); - }} - /> - - { - setAddress(event.target.value); - }} - /> - - { - setFirstname(event.target.value); - }} - /> - - { - setLastname(event.target.value); - }} - /> - - { - setPhone(event.target.value); - }} - /> - - -
- ); -} - -export default Registration; diff --git a/src/Pages/ProductPage/ProductPage.css b/src/Pages/ProductPage/ProductPage.css index f15f721..40599c3 100644 --- a/src/Pages/ProductPage/ProductPage.css +++ b/src/Pages/ProductPage/ProductPage.css @@ -1,45 +1,46 @@ .App1 { - min-height: 100vh; - background-color: rgb(211, 254, 255); - font-family: 'Times New Roman', Times, serif; - margin: 0; - padding: 0; - text-align: center; - } - .panel1 { - height: 500px; - 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; + text-align: center; +} + +.panel1 { + height: 500px; + font-family: 'Times New Roman', Times, serif; + margin: 0; + padding: 0; +} -.header1{ - min-height: 10vh; - background-color: aqua; - font-family: 'Times New Roman', Times, serif; - margin: 0; - padding: 0; - text-align: center; +.header1 { + min-height: 10vh; + background-color: aqua; + font-family: 'Times New Roman', Times, serif; + margin: 0; + padding: 0; + text-align: center; } /* * percentage's are used to scale items according to browser resizing * can possibly use flex containers for buttons */ -.header2{ - position: relative; - left: 55%; - height: 500px; - width: 40%; - background-color: rgb(189, 207, 209); - font-family: 'Times New Roman', Times, serif; - margin: 0; - padding: 0; - text-align: left; +.header2 { + position: relative; + left: 55%; + height: 500px; + width: 40%; + background-color: rgb(189, 207, 209); + font-family: 'Times New Roman', Times, serif; + margin: 0; + padding: 0; + text-align: left; } -button { - position: relative; - left: 25%; - width: 15%; +.panel1 button { + position: relative; + 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 c8bc0a6..55b28b6 100644 --- a/src/Pages/ProductPage/ProductPage.js +++ b/src/Pages/ProductPage/ProductPage.js @@ -1,23 +1,23 @@ import "./ProductPage.css" -function Product(){ - return( -
-
-
- WorldWide Frames - See A Better World -
- {/* create an overall panel, with header 2, the image, and the button inside of it */} -
-
-

Name:

-

Manufacturer:

-

Cost:

-
- +function Product() { + return ( +
+
+
+ WorldWide Frames - See A Better World +
+ {/* create an overall panel, with header 2, the image, and the button inside of it */} +
+
+

Name:

+

Manufacturer:

+

Cost:

+
+
); } diff --git a/src/Pages/RegistrationPage/RegistrationPage.css b/src/Pages/RegistrationPage/RegistrationPage.css new file mode 100644 index 0000000..d1a52e6 --- /dev/null +++ b/src/Pages/RegistrationPage/RegistrationPage.css @@ -0,0 +1,24 @@ +.information { + display: flex; + height: 100%; + width: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: aqua; +} + +.information input { + width: 250px; + height: 50px; + font-size: 20px; + padding-left: 10px; + margin: 5px; +} + +.information button { + height: 30px; + width: 250px; + font-size: 20px; + margin: 10px; +} \ No newline at end of file diff --git a/src/Pages/RegistrationPage/RegistrationPage.js b/src/Pages/RegistrationPage/RegistrationPage.js new file mode 100644 index 0000000..c77ff94 --- /dev/null +++ b/src/Pages/RegistrationPage/RegistrationPage.js @@ -0,0 +1,79 @@ +import { useState } from "react"; +import "./RegistrationPage.css" +import Axios from "axios"; + +function Registration() { + const [username, setUsername] = useState(""); + const [email, setEmail] = useState(""); + const [address, setAddress] = useState(""); + const [password, setPassword] = useState(""); + const [firstname, setFirstname] = useState(""); + const [lastname, setLastname] = useState(0); + const [phone, setPhone] = useState(""); + + const registerUser = () => { + Axios.post("http://localhost:5000/create", { + username: username, + email: email, + address: address, + password: password, + firstname: firstname, + lastname: lastname, + phone: phone, + }).then((response) => { + if (response.data.message) { + console.log(response.data.message) + } + }); + }; + + return ( +
+ + { + setUsername(event.target.value); + }} + /> + + { + setPassword(event.target.value); + }} + /> + + { + setEmail(event.target.value); + }} + /> + + { + setAddress(event.target.value); + }} + /> + + { + setFirstname(event.target.value); + }} + /> + + { + setLastname(event.target.value); + }} + /> + + { + setPhone(event.target.value); + }} + /> + +
+ ); +} + +export default Registration; From a07096d23f99525ca830b2a15d4d17e13bed9af1 Mon Sep 17 00:00:00 2001 From: KylePancamo <50267605+KylePancamo@users.noreply.github.com> Date: Wed, 23 Mar 2022 08:29:55 -0500 Subject: [PATCH 08/10] Fix order of data being sent to backend --- .../RegistrationPage/RegistrationPage.js | 20 +++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/Pages/RegistrationPage/RegistrationPage.js b/src/Pages/RegistrationPage/RegistrationPage.js index c77ff94..d845f8e 100644 --- a/src/Pages/RegistrationPage/RegistrationPage.js +++ b/src/Pages/RegistrationPage/RegistrationPage.js @@ -1,6 +1,7 @@ import { useState } from "react"; import "./RegistrationPage.css" import Axios from "axios"; +import { useHistory } from "react-router-dom"; function Registration() { const [username, setUsername] = useState(""); @@ -11,18 +12,25 @@ function Registration() { const [lastname, setLastname] = useState(0); const [phone, setPhone] = useState(""); + let history = useHistory(); + const registerUser = () => { - Axios.post("http://localhost:5000/create", { + const data = { username: username, + password: password, email: email, address: address, - password: password, firstname: firstname, lastname: lastname, - phone: phone, - }).then((response) => { - if (response.data.message) { - console.log(response.data.message) + phone: phone + }; + Axios.post("http://localhost:5000/register", data).then((response) => { + if (response.data.error) { + alert(response.data.error); + console.log("error!"); + } else { + console.log(response); + /*history.push("/");*/ } }); }; From 6efcf8b417619611940fdc5d67bbcb7a15868003 Mon Sep 17 00:00:00 2001 From: KylePancamo <50267605+KylePancamo@users.noreply.github.com> Date: Wed, 23 Mar 2022 08:30:41 -0500 Subject: [PATCH 09/10] formatting --- server.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/server.js b/server.js index 61563f8..e276169 100644 --- a/server.js +++ b/server.js @@ -26,12 +26,12 @@ const db = mysql.createConnection({ database: "account_information" }); -db.connect( (err) => { - if (err) { - throw err; - } +db.connect((err) => { + if (err) { + throw err; + } - console.log("Connected to MySQL server."); + console.log("Connected to MySQL server."); }); app.post("/create", (req, res) => { @@ -55,5 +55,5 @@ app // start express server on port 5000 server.listen(5000, () => { - console.log('NodeJS server running'); -}); + console.log('NodeJS server running'); +}); \ No newline at end of file From 02827849cb41c741f338201c9fd5a379cd258b14 Mon Sep 17 00:00:00 2001 From: KylePancamo <50267605+KylePancamo@users.noreply.github.com> Date: Wed, 23 Mar 2022 08:31:20 -0500 Subject: [PATCH 10/10] Hash password on registration --- server.js | 53 ++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 36 insertions(+), 17 deletions(-) diff --git a/server.js b/server.js index e276169..d38c2bf 100644 --- a/server.js +++ b/server.js @@ -4,6 +4,8 @@ const express = require('express'); const app = express(); // create express app const http = require('http'); const mysql = require('mysql'); +const bcrypt = require('bcrypt'); +const saltRounds = 10; app.use(cors()); const bodyParser = require('body-parser'); @@ -34,25 +36,42 @@ db.connect((err) => { console.log("Connected to MySQL server."); }); -app.post("/create", (req, res) => { - const username = req.body.username; - const password = req.body.password; - const email = req.body.email; - const address = req.body.address; - const firstname = req.body.firstname; - const lastname = req.body.lastname; - const phone = req.body.phone; - - const query = "INSERT INTO account (username, email, address, password, first_name, last_name, phone_num) VALUES (?, ?, ?, ?, ?, ?, ?);"; - db.query( - query, - [username, email, address, password, firstname, lastname, phone], - ); - return res.json(200); -}); +app.post("/register", (req, res) => { + + const username = req.body.username; + const password = req.body.password; + const email = req.body.email; + const address = req.body.address; + const firstname = req.body.firstname; + const lastname = req.body.lastname; + const phone = req.body.phone; -app + bcrypt.hash(password, saltRounds, (err, hash) => { + if (err) { + console.log(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 }); + } + } + ); + }); +}); // start express server on port 5000 server.listen(5000, () => { console.log('NodeJS server running');