Express js react app

server.js

@@ -46,32 +46,83 @@ 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!" });
+
+            } else {
+                bcrypt.hash(password, saltRounds, (err, hash) => {
+                    if (err) {
+                        console.log(err);
+                    }
+
+                    const data = [
+                        username,
+                        email,
+                        address,
+                        hash,
+                        firstname,
+                        lastname,
+                        phone
+                    ];
 
-        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 });
-                }
+                    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!" });
+                        }
+                    );
+                });
             }
-        );
-    });
+        }
+    )
 });
+
+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');

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() {
           <Link to="/registration">Register</Link>
           &nbsp;
           <Link to="/product">Product</Link>
+          &nbsp;
+          <Link to="/signin">Sign In</Link>
         </nav>
 
         <Switch>
+          <Route path="/signin">
+            <SignIn />
+          </Route>
           <Route path="/registration">
             <Registration />
           </Route>

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%;
 }

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 (
         <div>
             <div className="App1">
@@ -9,10 +13,16 @@ function Product() {
                 </div>
                 {/* create an overall panel, with header 2, the image, and the button inside of it */}
                 <div className="panel1">
+                    <div className="image1">
+                        <img src={image} 
+                            alt=""
+                            width="400"
+                            height="400" />
+                    </div>
                     <div className="header2">
-                        <p>Name: </p>
-                        <p>Manufacturer: </p>
-                        <p>Cost: </p>
+                        <p><b>Name: </b> {name}</p>
+                        <p><b>Manufacturer: </b>{manufacturer} </p>
+                        <p><b>Cost: </b>{cost}</p>
                     </div>
                     <button>Add to Cart</button>
                 </div>

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;

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("/");*/
 			}
 		});
@@ -49,7 +60,7 @@ function Registration() {
 					setPassword(event.target.value);
 				}}
 			/>
-			<label>email:</label>
+			<label>Email:</label>
 			<input type="text"
 				onChange={(event) => {
 					setEmail(event.target.value);
@@ -80,6 +91,7 @@ function Registration() {
 				}}
 			/>
 			<button onClick={registerUser}>Register</button>
+			<h1>{registrationStatus}</h1>
 		</div>
 	);
 }

src/Pages/SignInPage/SignInPage.css

@@ -0,0 +1,23 @@
+.signin-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  background-color: aqua;
+  min-height: 100vh;
+}
+
+.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;
+}

src/Pages/SignInPage/SignInPage.js

@@ -0,0 +1,53 @@
+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 (
+        <div className="signin-webpage">
+            <div className="signin-wrapper">
+                <h1>Sign In</h1>
+                <input
+                    type="text"
+                    placeholder="Username..."
+                    onChange={(e) => {
+                        setUsername(e.target.value);
+                    }}
+                />
+
+                <input
+                    type="password"
+                    placeholder="Password..."
+                    onChange={(e) => {
+                        setPassword(e.target.value);
+                    }}
+                />
+                <div>
+                    <button onClick={login}> Login </button>
+                </div>
+                <h1>{loginStatus}</h1>
+            </div>
+        </div>
+    );
+}
+export default SignIn;