ganz viel merge und so

index.js

@@ -23,6 +23,32 @@ app.use(bodyParser.json());
 app.use(express.static(__dirname + "/static"));
 
 // Authentication Handlers
+
+// Check if user is authenticated and NO redirect
+function authNoRedirectHandler(req, res, next){
+    const authcookie = req.cookies.authcookie; // Get authcookie from cookie
+
+    jwt.verify(authcookie, SECRET_KEY, (err, data) =>{  // Verify authcookie
+        if(err){ // If authcookie is invalid
+            console.log(err);
+            next();
+        } else if(data.user){ // If authcookie is valid
+            req.user = data.user; // Set user to data.user
+            mysql_handler.con.query(`SELECT * FROM users WHERE id = "${req.user}"`, (err, result) => { // Get user from database
+                if(err) console.log(err);
+                let user = JSON.parse(JSON.stringify(result))[0]; // Parse user from database
+                // Set user to req.user
+                req.isAdmin = user.isAdmin;
+                req.username = user.username;
+                req.firstname = user.firstname;
+                req.lastname = user.lastname;
+                next(); // Continue to next handler
+            });
+        }
+    });
+}
+
+
 // Check if user is authenticated and redirect to login if not
 function authenticatedHandler(req, res, next){
     const authcookie = req.cookies.authcookie; // Get authcookie from cookie
@@ -62,32 +88,70 @@ function notAuthenticatedHandler(req, res, next){
 }
 
 // Homepage
-app.get("/", authenticatedHandler, (req, res) => { 
+app.get("/", authNoRedirectHandler, (req, res) => { 
-    let dict = {
+    mysql_handler.con.query("SELECT * FROM products", function(err, result){
-        title: "Hallo",
+        if(err) throw err;
-        isAdmin: req.isAdmin
-    }
 
-    res.render('index', dict)
+        let dict = {
+            title: "Startseite",
+            user: req.user,
+            products: JSON.parse(JSON.stringify(result))
+        }
+        res.render('index', dict)
+    });
 });
 
 // Product Page
 app.get("/product/:productId", (req, res) => {
     let productId = req.params.productId;
-    console.log(productId);
     
-    mysql_handler.con.query(`SELECT * FROM products WHERE id=${productId}` , function(err, result){
+    mysql_handler.con.query(`SELECT s.name AS sellerName, p.name AS productName, p.description AS productDescription, p.id AS id, price,quantity, delivery_time, p.categoryId
+     FROM products AS p LEFT JOIN  sellers AS s ON p.sellerId= s.id WHERE p.id=${productId}` , function(err, result){
         if(err) throw err;
 
         let product = JSON.parse(JSON.stringify(result))[0];
-        let dict = {
+        
-            title: "product",
+        mysql_handler.con.query(`SELECT title, content ,rating, u.username AS name FROM reviews AS r LEFT JOIN users AS u ON r.userId = u.id WHERE productId=${productId}`,function(err,result){
-            product: product
+            if(err) throw err;
-        }
+            let reviews = JSON.parse(JSON.stringify(result));
-        res.render('product', dict)
+            console.log(product)
+            mysql_handler.con.query(`SELECT * FROM categories WHERE id='${product.categoryId}'`,function(err,result){
+                if(err) throw err;
+                let category = JSON.parse(JSON.stringify(result))[0];
+
+                let dict = {
+                    title: product.productName,
+                    product: product,
+                    shippingDays: 3,
+                    stockAmount: 50,
+                    productDescription: "ez",
+                    loggedIn: true,
+                    reviews: reviews,
+                    category: category,                    
+                }
+                res.render('product', dict)
+            });
+        });
+        
     });
 });
 
+// Reviews
+app.post("/review/create/:productId", authenticatedHandler,(req, res) => {
+    let productId = req.params.productId;
+    let rating = req.body.rating;
+    let title = req.body.title;
+    let content = req.body.content;
+    
+
+    mysql_handler.con.query(`INSERT INTO reviews(title, content, rating, userId, productId)
+     VALUES('${title}', '${content}', '${rating}', (SELECT id FROM users WHERE id = ${req.user}), (SELECT id FROM products WHERE id = ${productId}))`, (err, result) => {
+        if(err) throw err;
+        res.redirect("/product/" + productId);
+    });
+
+});
+
 // Search Page
 app.get("/search", (req, res) => {
     var products = [
@@ -304,4 +368,4 @@ app.post("/auth/login", notAuthenticatedHandler, (req, res) =>{
 
 app.listen(port, () =>{ // Start server
     console.log("Listining to " + port)
-})
+});

static/css/header.css

@@ -0,0 +1,92 @@
+/* UTIL */
+ .vertical-center {
+    float: left;
+    top: 50%;
+    position: relative;
+    transform: translateY(-50%);
+}
+
+body {
+    margin: 0;
+}
+
+/* BACKGROUND */
+.headerDIV > div {
+    height: 100%;
+    text-align: center;
+    display: inline-block;
+    vertical-align: top;
+}
+
+/* LOGO PART */
+.headerDIVLogo {
+    width: 20%;
+}
+.headerDIVLogo > img {
+    float: left;
+    height: 80%;
+    position: relative;
+    top: 10%;
+}
+
+/* SEARCH PART */
+.headerDIVSearch {
+    width: 60%;
+}
+.headerDIVSearch > input {
+    left: 10%;
+    width: calc(80% - 60px);
+    border-radius: 5px;
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+    height: 20px;
+    padding: 3px 10px;
+}
+.headerDIVSearch > button {
+    width: 40px;
+    left: 10%;
+    border-radius: 5px;
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+    height: 30px;
+}
+
+/* BUTTON PART */
+.headerDIVButton {
+    width: 20%;
+}
+.headerDIVButton > button {
+    height: 30px;
+    float: right;
+    margin-right: 10px;
+    height: 35px;
+    border-radius: 5px;
+    border: 3px solid rgb(6, 70, 107);
+    background-color: rgb(0, 99, 156);
+    transition: 0.1s;
+    transition-timing-function: linear;
+    cursor: pointer;
+    color:white;
+    font-weight: bold;
+}
+
+#headerBtnLogout{
+    background-color: rgb(172, 38, 38);
+    border-color: rgb(145, 35, 35);
+}
+
+#headerBtnLogout:hover{
+    background-color: rgb(206, 50, 50);
+}
+
+
+.headerDIVButton > button:hover {
+    background-color: rgb(23, 114, 167);
+}
+
+.headerDIV {
+    width: 100%;
+    height: 65px;
+    background-color: #414854;
+    margin: 0;
+}

static/css/order.css

@@ -3,8 +3,15 @@
     margin-left: auto;
     margin-right: auto;
     width: 500px;
+    margin-top: 60px;
+    margin-bottom: 60px;
 }
 
+#order-info p{
+    height: 30px;
+}
+
+
 form input[type="submit"]{
     color: rgb(255, 255, 255);
     font-weight: bold;
@@ -28,3 +35,12 @@ form input[type="submit"]{
 h3{
     text-align: center;
 }
+
+hr{
+    width: 100%;
+    border: 0px;
+    background-color:rgba(51, 51, 51, 0.337);
+    height: 2px;
+    margin-top: 20px;
+    margin-bottom: 20px;    
+}

static/css/product.css

@@ -0,0 +1,238 @@
+*{
+    padding:0;
+}
+
+h1, h2{
+    margin-left: 0px;
+    text-align: left;
+    padding-bottom: 0;
+    margin-bottom: 0px;
+}
+
+.seller{
+    display: block;
+    height: 30px;
+    margin-top:10px;
+    padding: 0;
+    font-weight: bold;
+    font-size: 10pt;
+}
+
+.badge{
+    background-color: rgb(224, 224, 224);
+    color: black;
+    height: 15px;
+    padding-left: 3px;
+    padding-right: 3px;
+    font-size: 9pt;
+    display: block;
+    margin-top: -5;
+    border-radius: 5px;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: -10px;
+    border: 2px solid rgb(143, 143, 143);
+    float:left;
+}
+#content
+{
+    width: 1000px;
+    height:3000px;  
+    background-color: rgb(244, 244, 244);
+    margin:auto;
+    padding-top: 10px;
+}
+#productPicture
+{
+    width: 40%;
+    height: 400px;
+    /*background-color: rgb(85, 85, 85);*/
+    display: block;
+    float: left;
+    border-bottom: 2px solid rgb(104, 117, 151);
+}
+
+#productPicture img
+{
+    width: 90%;
+    display: block;
+}
+#info
+{
+    width: 60%;
+    height: 400px;
+    display: block;
+    float: right;
+    /*background-color: rgb(121, 170, 182);*/
+    border-bottom: 2px solid rgb(104, 117, 151);;
+}
+
+.order-button{
+    color: rgb(255, 255, 255);
+    font-weight: bold;
+    letter-spacing: 1.5px;
+    padding-left: 20px;
+    padding-right: 20px;
+    display:block;
+    float:left;
+    height: 35px;
+    border-radius: 5px;
+    border: 2px solid rgb(0, 99, 156);
+    background-color: rgb(0, 99, 156);
+    transition: 0.1s;
+    transition-timing-function: linear;
+    outline: none !important;
+    cursor:pointer;
+    margin-right: 30px;
+    margin-top: 10px;
+}
+
+#description
+{
+    width: 100%;
+    display: block;
+    float: left;
+    background-color: rgba(103, 187, 183, 0);
+    border-bottom: 2px solid rgb(104, 117, 151);
+}
+
+#description p,h2 {
+    padding-left: 30px;
+    padding-right: 30px;
+}
+
+#newReview{
+    width: 100%;
+    display: block;
+    float: left;
+    background-color: rgba(45, 66, 94, 0);
+    padding-bottom: 20px;
+    border-bottom: 2px solid rgb(104, 117, 151);;
+}
+#reviews{
+    width: 100%;
+    height: 1600px;
+    display: block;
+    float: left;
+    background-color: rgba(39, 39, 39, 0);
+
+}
+#reviewTemplate
+{
+    width: 100%;
+    float: left;
+    margin-bottom: 20px;
+}
+#reviewTemplatePicture
+{
+    width: 200px;
+    height: 200px;
+    display: block;
+    float: left;
+    background-color: rgb(85, 158, 255);
+}
+
+
+#data
+{
+    width: 100%;
+    height: 50px;
+    display: block;
+    float: left;
+    background-color: rgb(124, 142, 212);
+    
+}
+#text
+{
+    width: 100%;
+    height: 150px;
+    display: block;
+    float: left;
+    background-color: rgb(211, 196, 247);
+}
+#reviewTemplateText
+{
+    background-color: rgb(235, 196, 228);
+}
+
+form{
+    display:block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 500px;
+}
+
+form label{
+    display:block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 80%;
+    margin-top: 20px;
+}
+
+form label p{
+    width: 100%;
+    display:block;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 0px;
+    font-weight: bold;
+    letter-spacing: 1.5px;
+}
+form label input{
+    width: 100%;
+    display:block;
+    margin-left: auto;
+    margin-right: auto;
+    height: 35px;
+    border-radius: 5px;
+    border: 2px solid rgb(0, 99, 156);
+    background-color: rgb(255, 255, 255);
+    transition: 0.1s;
+    transition-timing-function: linear;
+    outline: none !important;
+}
+/* Submit button with blue background horizontal center*/
+form input[type="submit"]{
+    color: rgb(255, 255, 255);
+    font-weight: bold;
+    letter-spacing: 1.5px;
+    width: 100%;
+    display:block;
+    margin-top: 20px;
+    margin-left: auto;
+    margin-right: auto;
+    height: 35px;
+    border-radius: 5px;
+    border: 2px solid rgb(0, 99, 156);
+    background-color: rgb(0, 99, 156);
+    transition: 0.1s;
+    transition-timing-function: linear;
+    outline: none !important;
+    cursor:pointer;
+}
+
+
+/* Hover */
+
+form label input:hover{
+    border: 2px solid rgb(1, 197, 246);
+}
+
+form label input:focus{
+    border: 2px solid rgb(1, 197, 246);
+    box-shadow: 0 0 5px #719ece62;
+}
+
+form input[type="submit"]:hover{
+    border: 2px solid rgb(7, 130, 200);
+    background-color: rgb(7, 130, 200);
+}
+
+textarea{
+    resize: vertical;
+    width: 100%;
+    display:block;
+    margin-left: auto;
+    margin-right: auto;
+}

static/css/style.css

@@ -2,10 +2,17 @@
     font-family: Arial, Helvetica, sans-serif;
 }
 
+html,body{
+    min-height: 100% !important;
+    height: 100%;
+}
+
 h1{
     text-align: center;
 }
 
+
+
 #error-text{
     color: red;
     font-weight: bold;

views/index.ejs

@@ -1,10 +1,103 @@
-
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="">
-<head>
+	<head>
-    <%- include('partials/head'); %>
+		<%- include('partials/head'); %>
 </head>
-<body>
+	<body style="">
-    <h1>isAdmin: <%= isAdmin %></h1>
+		<%- include('partials/header'); %>
+			<style>
+				html {
+				height: 100%;
+				overflow-x: auto;
+				overflow-y: scroll;
+				margin: 0;
+				background-color: white;
+				}
+				body {
+				min-height: 100%;
+				}
+				.grid-container {				
+				display: flex;
+				gap: 20px;
+				margin: 0 auto;
+				grid-template-columns: auto auto auto auto;
+				padding: 20px;
+				}
+				.grid-item {
+				background-color: white;
+				border: 10px;
+				border-color: rgba(111,111,111,0.2) transparent transparent;
+				padding: 20px;
+				font-size: 20px;
+				height: 320px;
+				width: 280px;
+				text-align: left;
+				
+				}
+
+				.grid-item p{
+					display:block;
+					height: 50px;
+				}
+				.middle-content {
+				background: linear-gradient(to bottom left, #313c48, white);
+				background-repeat: no-repeat;
+				width: 80%;
+				margin: auto;
+				margin-top: 50px;
+				}
+			</style>
+			<div class="middle-content">
+				<div id="headlineTop">
+					<h2 style="padding-left:20px; padding-top:50px">Top Angebote</h2>
+				</div>
+				<div class="grid-container" >
+					<% for (let i=0; i < products.length && i <=4; i++){ %>
+					<div class="grid-item">
+						<p><%= products[i].name %></p>
+						
+						<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/<%- products[i].id%>','_self')">
+					</div>
+					<%}%>
+				</div>
+				<div id="headlineTop">
+					<h2 style="padding-left:20px;">Unsere Empfehlungen für Sie</h2>
+				</div>
+				<div class="grid-container">
+					<div class="grid-item">
+					<% let randomNr = Math.floor(Math.random() * products.length); %>
+					<%= products[randomNr].name %>
+						<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/<%- products[randomNr].id%>','_self')">
+					</div>
+					<div class="grid-item">
+						<% let randomNr2 = Math.floor(Math.random() * products.length); %>
+					<%= products[randomNr2].name %>
+						<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/"<%- products[randomNr2].id%>','_self')">
+					
+					</div>
+					<div class="grid-item">
+						<% let randomNr3 = Math.floor(Math.random() * products.length); %>
+					<%= products[randomNr3].name %>
+						<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/"<%- products[randomNr3].id%>','_self')">
+					
+					</div>
+					<div class="grid-item">
+						<% let randomNr4 = Math.floor(Math.random() * products.length); %>
+					<%= products[randomNr4].name %>
+						<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/"<%- products[randomNr4].id%>','_self')">
+					
+					</div>
+				</div>
+				<div class="grid-container" style="margin-bottom: 100px;">
+					<% for (let i=0; i < products.length && i <=4; i++){ %>
+					<div class="grid-item">
+						<%= products[i].name %>
+						<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/<%- products[i].id%>','_self')">
+					
+					</div>
+					<%}%>
+				</div>
+			</div>
+		<%- include('partials/footer'); %>
 </body>
 </html>

views/login.ejs

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <%- include('partials/head'); %>
-    <link rel="stylesheet" href="/auth.css">
+    <link rel="stylesheet" href="/css/auth.css">
 </head>
 <body>
     <h1>Login</h1>

views/order.ejs

@@ -2,9 +2,10 @@
 <html lang="en">
 <head>
     <%- include('partials/head'); %>
-    <link rel="stylesheet" href="/order.css">
+    <link rel="stylesheet" href="/css/order.css">
 </head>
 <body>
+    <%- include('partials/header'); %>
     <h1>Ihre Bestellung</h1>
     <p id="error-text"><%- error %></p>
 
@@ -19,10 +20,12 @@
     <!--submit button-->
     <form action="/order" method="POST">
         <input hidden type="text" name="productId" value="<%= product.id %>">
-        <input hidden type="text" name="quantity" value="<%= quantity %>">
+        <input hidden   type="text" name="quantity" value="<%= quantity %>">
         <!-- Price is calculated on backend ;) -->
 
         <input type="submit" value="Bestellen">
     </form>
+
 </body>
+
 </html>

views/order_success.ejs

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <%- include('partials/head'); %>
-    <link rel="stylesheet" href="/order.css">
+    <link rel="stylesheet" href="/css/order.css">
 </head>
 <body>
     <h1 style="color:rgb(6, 170, 6)">Ihre Bestellung wurde in Auftrag gegeben!</h1>

views/partials/footer.ejs

@@ -7,10 +7,11 @@
 <style type="text/css">
 	.footerDIV {
 	width: 100%;
-	height:65px;
-	position: absolute;
-	bottom:-65px;
 	background-color: #414854;
+	clear: both;
+	position: relative;
+	height: 65px;
+	margin-top: -56px;
 	}
 	/* LOGO PART */
 	.footerDIVLogo {

views/partials/head.ejs

@@ -3,4 +3,5 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Shop - <%= title %></title>
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-<link rel="stylesheet" href="/style.css">
+<link rel="stylesheet" href="/css/header.css">
+<link rel="stylesheet" href="/css/style.css">

views/partials/header.ejs

@@ -1,82 +1,16 @@
 <div class="headerDIV">
-    <div class="headerDIVLogo">
+    <div class="headerDIVLogo" style="cursor:pointer"onclick="window.open('/', '_self')">
         <img src="https://bock-drauf.com/wp-content/uploads/2019/09/amazon-logo-1024x576.png">
     </div><div class="headerDIVSearch">
         <input placeholder="Suche" class="vertical-center"></input
         ><button class="vertical-center"><i class="material-icons">search</i></button>
-    </div><div class="headerDIVLogin">
+    </div><div class="headerDIVButton">
-        <button class="vertical-center">Login</button>
+        <% if(user){ %>
+        <button class="vertical-center" id="headerBtnLogout" onclick="window.open('/logout', '_self')">Log out</button>
+            <button class="vertical-center" onclick="window.open('/account', '_self')">Ihr Konto</button>
+        <%} else{%>
+            <button class="vertical-center" onclick="window.open('/register', '_self')">Registrieren</button>
+            <button class="vertical-center" onclick="window.open('/login', '_self')">Login</button>
+        <% } %>
     </div>
 </div>
-
-<style type="text/css">
-    /* UTIL */
-    .vertical-center {
-        float: left;
-        top: 50%;
-        position: relative;
-        transform: translateY(-50%);
-    }
-
-    body {
-        margin: 0;
-    }
-
-    /* BACKGROUND */
-    .headerDIV > div {
-        height: 100%;
-        text-align: center;
-        display: inline-block;
-        vertical-align: top;
-    }
-
-    /* LOGO PART */
-    .headerDIVLogo {
-        width: 20%;
-    }
-    .headerDIVLogo > img {
-        float: left;
-        height: 80%;
-        position: relative;
-        top: 10%;
-    }
-
-    /* SEARCH PART */
-    .headerDIVSearch {
-        width: 60%;
-    }
-    .headerDIVSearch > input {
-        left: 10%;
-        width: calc(80% - 60px);
-        border-radius: 5px;
-        border-top-right-radius: 0px;
-        border-bottom-right-radius: 0px;
-        height: 20px;
-        padding: 3px 10px;
-    }
-    .headerDIVSearch > button {
-        width: 40px;
-        left: 10%;
-        border-radius: 5px;
-        border-top-left-radius: 0px;
-        border-bottom-left-radius: 0px;
-        height: 30px;
-    }
-
-    /* LOGIN PART */
-    .headerDIVLogin {
-        width: 20%;
-    }
-    .headerDIVLogin > button {
-        height: 30px;
-        float: right;
-        margin-right: 10px;
-    }
-
-    .headerDIV {
-        width: 100%;
-        height: 65px;
-        background-color: #414854;
-        margin: 0;
-    }
-</style>

views/product.ejs

@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <%- include('partials/head'); %>
+    <link rel="stylesheet" href="/css/product.css">
 </head>
 
 <body>
@@ -13,156 +14,84 @@
 
         <div id="top">
             <div id="productPicture">
-                <!--BILD-->
+                <img src="/images/examples.jpg" alt="">
             </div>
             <div id="info">
-                <h1 id="title"><%= product.name %></h1>
+                <h2><%= product.productName %></h2><br>
+                <p class="badge">Nr.:<%= product.id %></p><br>
+
+                <p class="seller">Verkäufer: <%= product.sellerName%></p><br>
+
+                <p class="product-detail"><b>Preis:</b> <%= product.price %> € / Stück</h2>
+                <p class="product-detail"><b>Kategorie:</b> <%= category.name %></h2>
                 <p style="word-wrap: break-word;"></p>
                 <div>
-                    <label style="margin-right: 30px; margin-left: 30px; 
+                    <label style="margin-right: 30px; margin-left: 0px;
-                    <% if(stockAmount > 0){%>
+
+                    <% if(product.quantity > 0){%>
                         color: green;">
-                        lieferbar in <%= shippingDays %> - <%= shippingDays + 1 %> Tagen</label>
+                        Lieferbar in <%= product.delivery_time %> - <%= product.delivery_time + 1 %> Tagen</label><br><br>
-                        <span><input type="number" id="quantity" min="1" max="<%= stockAmount %>" style="width: 30px;" value="1" ></span>
+                        <div style=" float:right;">
-                        
+                            <span><input type="number" id="quantity" min="1" max="<%= product.quantity %>" style="width: 30px; margin-left: 20px" value="1" ></span>
-                        <label>/<%= stockAmount %></label>
+                            <label>/<%= product.quantity %></label><br>
+                            <button class ="order-button"onclick="window.open('/order/<%= product.id %>/' + document.getElementById('quantity').value, '_self')">Bestellen</button>    
+                        </div>
                     <% } else { %>
-                        color: red;">
+                        color: red; font-weight:bold;">
-                        nicht lieferbar</label>
+                        Aktuell nicht lieferbar!</label>
                         <% } %>
-                
-
                 </div>
             </div>
         </div>
 
         <div id="description">
-            <h1 style="margin-left: 30px;">Beschreibung</h1>
+            <h2>Beschreibung</h2>
-            <p style="margin-left: 30px;"><%= productDescription %></p>
+            <p><%= product.productDescription %> </p>
         </div>
         <% if(loggedIn){ %>
         <div id="newReview">
-            <h1 style="padding-left: 30px;">Bewertung</h1>
+            <h2 style="padding-left: 30px;">Rezensionen</h2>
-            <textarea name="review" id="" cols="60" rows="5" style="margin-left: 30px; resize: none;"></textarea>
+            <form action="/review/create/<%= product.id %>" method="post">
-            <button>Post</button>
+                <label for="title">
+                    <p>Titel: </p>
+                    <input type="text" name="title">
+                </label>
+
+                <label for="rating">
+                    <p>Bewertung (0-10): </p>
+                    <input type="number" name="rating" max="10" min="0">
+                </label>
+
+                <label for="content">
+                    <textarea name="content" id="" max="500" cols="30" rows="10"></textarea>
+                </label>
+                
+                <input style="width: 150px" type="submit" value="Senden">
+            </form>
         </div>
         <% } %>
         <div id="reviews">
-            <% if(reviews > 0){ %>
+            <% if(reviews.length > 0){ %>
-        <div id="reviewTemplate">
+                <% for(let i = 0; i < reviews.length; i++){ %>
-            <div style="width: 100%; height: 200px; display: block; float: left;">
+                    <div id="reviewTemplate">
-                <div id= data >
+                        <div style="width: 100%; display: block; float: left;">
-                    <h3 style="padding-left: 30px; width: 100%;">187Boii  12.12.12 12:12</h3>
+                            <div id= data >
-                </div>
+                                <h3 style="padding-left: 20px; float:left"><%= reviews[i].name %></h3>
-                <div id="text" >
+                                <p style="float:right; padding-right: 20px;">Bewertung: <%= reviews[i].rating %></p>
-                    <p style="padding-left: 30px;";">junge geiler text junge geiler text junge geiler text junge geiler text junge geiler text junge geiler text junge geiler text junge geiler text junge geiler text junge geiler text junge geiler text </p>
+                            </div>
+                            <div id="text" >
+                                <h3 style="padding-left: 20px; padding-right: 20px; width: 100%;"><%= reviews[i].title %></h3>
+                                <p style="padding-left: 20px; padding-right: 20px;"><%= reviews[i].content %></p>
                             
-                </div>
+                            </div>
-            </div>
+                        </div>
-            
+                    </div>
-            
+        <% } %>
-
-        </div>
         <% }else{ %>
             <div style="width: 100%; height: 100px;">Leider hat dieses Produkt noch keine Bewertung. :(</div>
             <% } %>
         </div>
     </div> 
-    <style>
-        *{
-            padding:0;
-        }
-        #content
-        {
-            width: 1000px;
-            height:3000px;
-            
-            background-color: rgb(59, 59, 59);
-            margin:auto;
-        }
-        #productPicture
-        {
-            width: 40%;
-            height: 400px;
-            background-color: rgb(85, 85, 85);
-            display: block;
-            float: left;
-        }
-        #info
-        {
-            width: 60%;
-            height: 400px;
-            display: block;
-            float: right;
-            background-color: rgb(121, 170, 182);
-        }
-        #description
-        {
-            width: 100%;
-            height: 250px;
-            display: block;
-            float: left;
-            background-color: rgb(103, 187, 183);
-        }
-        #title
-        {
-            margin-left: 30px;
-
-        }
-        #newReview{
-            width: 100%;
-            height: 200px;
-            display: block;
-            float: left;
-            background-color: rgb(45, 66, 94);
-
-        }
-        #reviews{
-            width: 100%;
-            height: 1600px;
-            display: block;
-            float: left;
-            background-color: rgb(39, 39, 39);
-
-        }
-        #reviewTemplate
-        {
-            width: 100%;
-            height: 200px;
-            float: left;
-        }
-        #reviewTemplatePicture
-        {
-            width: 200px;
-            height: 200px;
-            display: block;
-            float: left;
-            background-color: rgb(85, 158, 255);
-        }
-
-
-        #data
-        {
-            width: 100%;
-            height: 50px;
-            display: block;
-            float: left;
-            background-color: rgb(58, 94, 97);
-        }
-        #text
-        {
-            width: 100%;
-            height: 150px;
-            display: block;
-            float: left;
-            background-color: rgb(78, 129, 133);
-        }
-        #reviewTemplateText
-        {
-            background-color: rgb(235, 196, 228);
-        }
-
-    </style>  
     <%- include('partials/footer'); %>
 </body>
 </html>

views/register.ejs

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <%- include('partials/head'); %>
-    <link rel="stylesheet" href="/auth.css">
+    <link rel="stylesheet" href="/css/auth.css">
 </head>
 <body>
     <h1>Register</h1>