mirror of
https://github.com/DerTyp7/shop-ejs-expressjs.git
synced 2025-10-29 04:22:10 +01:00
better error handling register
This commit is contained in:
Janis M
27
index.js
27
index.js
@@ -8,6 +8,7 @@ const uuid = require("uuid");
|
||||
|
||||
// Import Modules
|
||||
const mysql_handler = require("./mysql_handler");
|
||||
const validator = require("./validators")
|
||||
|
||||
// Global Variables
|
||||
const app = express();
|
||||
@@ -332,7 +333,29 @@ app.post("/auth/register", notAuthenticatedHandler,(req, res) =>{
|
||||
let cityName = req.body.cityName;
|
||||
let country = req.body.country;
|
||||
|
||||
let error = ""; // Error message
|
||||
let error = "";
|
||||
/*
|
||||
0: No error
|
||||
error_username_dup
|
||||
error_email_dup
|
||||
error_password_length_short
|
||||
error_password_length_long
|
||||
error_password_emismatch
|
||||
error_email_invalid
|
||||
error_username_invalid
|
||||
error_firstname_invalid
|
||||
error_lastname_invalid
|
||||
error_street_invalid
|
||||
error_housenumber_invalid
|
||||
error_postcode_invalid
|
||||
error_cityname_invalid
|
||||
error_country_invalid
|
||||
*/
|
||||
|
||||
|
||||
if(!validator.validate_password(password1)){
|
||||
error += "Passwort muss mindestens 8 Zeichen lang sein!\n";
|
||||
}
|
||||
|
||||
if(password1 != password2){ // If passwords don't match
|
||||
error += "Passwörter sind unterschiedlich!";
|
||||
@@ -346,7 +369,7 @@ app.post("/auth/register", notAuthenticatedHandler,(req, res) =>{
|
||||
}
|
||||
|
||||
if(error != ""){ // If there is an error
|
||||
res.redirect(`/register/${error}`); // Redirect to register page with error message
|
||||
res.send("ERROR") // Redirect to register page with error message
|
||||
}else{
|
||||
bcrypt.genSalt(10, function(err, salt) { // Generate salt
|
||||
bcrypt.hash(password1, salt, function(err, hash){ // Hash password
|
||||
|
||||
@@ -1,15 +1,11 @@
|
||||
h1{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form{
|
||||
.auth_form{
|
||||
display:block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
form label{
|
||||
.auth_form label{
|
||||
display:block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@@ -17,7 +13,7 @@ form label{
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
form label p{
|
||||
.auth_form label p{
|
||||
width: 100%;
|
||||
display:block;
|
||||
margin-left: auto;
|
||||
@@ -26,7 +22,7 @@ form label p{
|
||||
font-weight: bold;
|
||||
letter-spacing: 1.5px;
|
||||
}
|
||||
form label input{
|
||||
.auth_form label input{
|
||||
width: 100%;
|
||||
display:block;
|
||||
margin-left: auto;
|
||||
@@ -37,16 +33,18 @@ form label input{
|
||||
background-color: rgb(255, 255, 255);
|
||||
transition: 0.1s;
|
||||
transition-timing-function: linear;
|
||||
padding-left:5px;
|
||||
padding-right: 5px;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
form h4{
|
||||
.auth_form h4{
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
/* Submit button with blue background horizontal center*/
|
||||
form input[type="submit"]{
|
||||
.auth_form input[type="button"]{
|
||||
color: rgb(255, 255, 255);
|
||||
font-weight: bold;
|
||||
letter-spacing: 1.5px;
|
||||
@@ -68,16 +66,16 @@ form input[type="submit"]{
|
||||
|
||||
/* Hover */
|
||||
|
||||
form label input:hover{
|
||||
.auth_form label input:hover{
|
||||
border: 2px solid rgb(1, 197, 246);
|
||||
}
|
||||
|
||||
form label input:focus{
|
||||
.auth_form label input:focus{
|
||||
border: 2px solid rgb(1, 197, 246);
|
||||
box-shadow: 0 0 5px #719ece62;
|
||||
}
|
||||
|
||||
form input[type="submit"]:hover{
|
||||
.auth_form input[type="submit"]:hover{
|
||||
border: 2px solid rgb(7, 130, 200);
|
||||
background-color: rgb(7, 130, 200);
|
||||
}
|
||||
|
||||
33
static/css/auth_header.css
Normal file
33
static/css/auth_header.css
Normal file
@@ -0,0 +1,33 @@
|
||||
/* Header */
|
||||
.auth-header {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 50px;
|
||||
background-color: rgb(97, 102, 141);
|
||||
margin-top: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.auth-header p{
|
||||
float:left;
|
||||
color:white;
|
||||
font-weight: bold;
|
||||
font-size: 14pt;
|
||||
padding:0;
|
||||
margin-left: 10px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.auth-header .auth-header-image-container{
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.auth-header .auth-header-image-container img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -6,10 +6,6 @@
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND */
|
||||
.headerDIV > div {
|
||||
height: 100%;
|
||||
|
||||
@@ -11,8 +11,7 @@
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
|
||||
form input[type="submit"]{
|
||||
.order_form input[type="submit"]{
|
||||
color: rgb(255, 255, 255);
|
||||
font-weight: bold;
|
||||
letter-spacing: 1.5px;
|
||||
@@ -29,14 +28,9 @@ form input[type="submit"]{
|
||||
transition-timing-function: linear;
|
||||
outline: none !important;
|
||||
cursor:pointer;
|
||||
|
||||
}
|
||||
|
||||
h3{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
hr{
|
||||
#order-info hr{
|
||||
width: 100%;
|
||||
border: 0px;
|
||||
background-color:rgba(51, 51, 51, 0.337);
|
||||
|
||||
@@ -1,14 +1,3 @@
|
||||
*{
|
||||
padding:0;
|
||||
}
|
||||
|
||||
h1, h2{
|
||||
margin-left: 0px;
|
||||
text-align: left;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.seller{
|
||||
display: block;
|
||||
height: 30px;
|
||||
@@ -34,37 +23,6 @@ h1, h2{
|
||||
border: 2px solid rgb(143, 143, 143);
|
||||
float:left;
|
||||
}
|
||||
#content
|
||||
{
|
||||
width: 1000px;
|
||||
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);
|
||||
@@ -85,50 +43,47 @@ h1, h2{
|
||||
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;
|
||||
/* Info header*/
|
||||
.product-header{
|
||||
height: 400px;
|
||||
border-bottom: 2px solid rgb(104, 117, 151);;
|
||||
}
|
||||
#reviews{
|
||||
width: 100%;
|
||||
height: 1600px;
|
||||
#product-image
|
||||
{
|
||||
width: 40%;
|
||||
height: 400px;
|
||||
display: block;
|
||||
float: left;
|
||||
background-color: rgba(39, 39, 39, 0);
|
||||
}
|
||||
|
||||
#product-image img
|
||||
{
|
||||
width: 90%;
|
||||
display: block;
|
||||
}
|
||||
#reviewTemplate
|
||||
|
||||
#product-info
|
||||
{
|
||||
width: 60%;
|
||||
height: 400px;
|
||||
display: block;
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
section
|
||||
{
|
||||
width: 100%;
|
||||
float: left;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#reviewTemplatePicture
|
||||
{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: block;
|
||||
float: left;
|
||||
background-color: rgb(85, 158, 255);
|
||||
background-color: rgba(103, 187, 183, 0);
|
||||
border-bottom: 2px solid rgb(104, 117, 151);
|
||||
padding-top:20px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
section p, h2 {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
|
||||
@@ -137,31 +92,40 @@ h1, h2{
|
||||
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);
|
||||
/* review */
|
||||
.review-container{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
form{
|
||||
.review-header{
|
||||
padding-top:10px;
|
||||
padding-bottom:10px;
|
||||
background-color: rgb(124, 142, 212);
|
||||
display:block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.review-content{
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: rgb(204, 214, 255);
|
||||
padding-top:10px;
|
||||
padding-bottom:20px;
|
||||
}
|
||||
|
||||
|
||||
.product-form{
|
||||
display:block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
form label{
|
||||
.product-form label{
|
||||
display:block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@@ -169,7 +133,7 @@ form label{
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
form label p{
|
||||
.product-form label p{
|
||||
width: 100%;
|
||||
display:block;
|
||||
margin-left: auto;
|
||||
@@ -178,7 +142,7 @@ form label p{
|
||||
font-weight: bold;
|
||||
letter-spacing: 1.5px;
|
||||
}
|
||||
form label input{
|
||||
.product-form label input{
|
||||
width: 100%;
|
||||
display:block;
|
||||
margin-left: auto;
|
||||
@@ -192,7 +156,7 @@ form label input{
|
||||
outline: none !important;
|
||||
}
|
||||
/* Submit button with blue background horizontal center*/
|
||||
form input[type="submit"]{
|
||||
.product-form input[type="submit"]{
|
||||
color: rgb(255, 255, 255);
|
||||
font-weight: bold;
|
||||
letter-spacing: 1.5px;
|
||||
@@ -214,21 +178,21 @@ form input[type="submit"]{
|
||||
|
||||
/* Hover */
|
||||
|
||||
form label input:hover{
|
||||
.product-form label input:hover{
|
||||
border: 2px solid rgb(1, 197, 246);
|
||||
}
|
||||
|
||||
form label input:focus{
|
||||
.product-form label input:focus{
|
||||
border: 2px solid rgb(1, 197, 246);
|
||||
box-shadow: 0 0 5px #719ece62;
|
||||
}
|
||||
|
||||
form input[type="submit"]:hover{
|
||||
.product-form input[type="submit"]:hover{
|
||||
border: 2px solid rgb(7, 130, 200);
|
||||
background-color: rgb(7, 130, 200);
|
||||
}
|
||||
|
||||
textarea{
|
||||
.product-form textarea{
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
display:block;
|
||||
@@ -237,9 +201,3 @@ textarea{
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 1030px) {
|
||||
#content
|
||||
{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,7 @@
|
||||
*{
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html,body{
|
||||
@@ -7,11 +9,16 @@ html,body{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h1{
|
||||
text-align: center;
|
||||
h1, h2{
|
||||
margin-left: 0px;
|
||||
text-align: left;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
|
||||
.text-center{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#error-text{
|
||||
color: red;
|
||||
@@ -35,4 +42,21 @@ h1{
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.content{
|
||||
background-color: rgb(244, 244, 244);
|
||||
width: 1000px;
|
||||
display: block;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
padding-top:10px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1030px) {
|
||||
.content
|
||||
{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
2
static/js/jquery.min.js
vendored
Normal file
2
static/js/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
52
static/js/register.js
Normal file
52
static/js/register.js
Normal file
@@ -0,0 +1,52 @@
|
||||
/*const error_text_elem_username = document.getElementById('error_text_username');
|
||||
const error_text_elem_password1 = document.getElementById('error_text_password1');
|
||||
const error_text_elem_password2 = document.getElementById('error_text_password2');
|
||||
const error_text_elem_email = document.getElementById('error_text_email');
|
||||
const error_text_elem_first_name = document.getElementById('error_text_first_name');
|
||||
const error_text_elem_last_name = document.getElementById('error_text_last_name');
|
||||
const error_text_elem_street = document.getElementById('error_text_street');
|
||||
const error_text_elem_city = document.getElementById('error_text_city');
|
||||
const error_text_elem_postcode = document.getElementById('error_text_postcode');
|
||||
const error_text_elem_country = document.getElementById('error_text_country');
|
||||
const error_text_elem_housenumber = document.getElementById('error_text_housenumber');*/
|
||||
|
||||
function handleError(error){
|
||||
console.log(error)
|
||||
}
|
||||
|
||||
function submitForm(){
|
||||
formObj = {
|
||||
username: document.getElementById('username').value,
|
||||
password1: document.getElementById('password1').value,
|
||||
password2: document.getElementById('password2').value,
|
||||
email: document.getElementById('email').value,
|
||||
first_name: document.getElementById('firstname').value,
|
||||
last_name: document.getElementById('lastname').value,
|
||||
street: document.getElementById('street').value,
|
||||
city: document.getElementById('city').value,
|
||||
postcode: document.getElementById('postcode').value,
|
||||
country: document.getElementById('country').value,
|
||||
housenumber: document.getElementById('housenumber').value,
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url : "/auth/register",
|
||||
type: "POST",
|
||||
data : formObj,
|
||||
success: function(data)
|
||||
{
|
||||
if(data == 0){
|
||||
window.location.href = "/login";
|
||||
}else{
|
||||
handleError(data);
|
||||
}
|
||||
},
|
||||
error: function (jqXHR, textStatus, errorThrown)
|
||||
{
|
||||
console.log(jqXHR);
|
||||
console.log(textStatus);
|
||||
console.log(errorThrown);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
15
validators.js
Normal file
15
validators.js
Normal file
@@ -0,0 +1,15 @@
|
||||
|
||||
function validate_password(password) {
|
||||
var re = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
|
||||
|
||||
if(re.test(password)){
|
||||
if(password.length > 8 && password.length < 255){
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
validate_password
|
||||
}
|
||||
@@ -5,23 +5,26 @@
|
||||
<link rel="stylesheet" href="/css/auth.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Login</h1>
|
||||
<%- include('partials/auth_header'); %>
|
||||
<div class="content">
|
||||
<h1 class="text-center">Login</h1>
|
||||
|
||||
<form action="/auth/login" method="POST">
|
||||
<p id="error-text"><%- error %></p>
|
||||
|
||||
<label for="username">
|
||||
<p>Benutzername:</p>
|
||||
<input required type="text" name="username" id="usernameInput" placeholder="Geben Sie Ihren Benutzernamen ein">
|
||||
</label>
|
||||
|
||||
<label for="password">
|
||||
<p>Passwort:</p>
|
||||
<input required type="password" name="password" id="password1Input" placeholder="Geben Sie Ihr Passwort ein">
|
||||
</label>
|
||||
|
||||
<input style="width: 40%;cursor:pointer;" type="submit" value="Login">
|
||||
<a class="text-redirect" href="/register">Sie haben keinen Account?</a>
|
||||
</form>
|
||||
<form class="auth_form" action="/auth/login" method="POST">
|
||||
<p id="error-text"><%- error %></p>
|
||||
|
||||
<label for="username">
|
||||
<p>Benutzername:</p>
|
||||
<input required type="text" name="username" id="usernameInput" placeholder="Geben Sie Ihren Benutzernamen ein">
|
||||
</label>
|
||||
|
||||
<label for="password">
|
||||
<p>Passwort:</p>
|
||||
<input required type="password" name="password" id="password1Input" placeholder="Geben Sie Ihr Passwort ein">
|
||||
</label>
|
||||
|
||||
<input style="width: 40%;cursor:pointer;" type="submit" value="Login">
|
||||
<a class="text-redirect" href="/register">Sie haben keinen Account?</a>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,7 +18,7 @@
|
||||
</div>
|
||||
|
||||
<!--submit button-->
|
||||
<form action="/order" method="POST">
|
||||
<form class="order_form" action="/order" method="POST">
|
||||
<input hidden type="text" name="productId" value="<%= product.id %>">
|
||||
<input hidden type="text" name="quantity" value="<%= quantity %>">
|
||||
<!-- Price is calculated on backend ;) -->
|
||||
|
||||
6
views/partials/auth_header.ejs
Normal file
6
views/partials/auth_header.ejs
Normal file
@@ -0,0 +1,6 @@
|
||||
<header class="auth-header">
|
||||
<p>OnlineShop | <%= title %></p>
|
||||
<div class="auth-header-image-container">
|
||||
<img src="/images/logo.png">
|
||||
</div>
|
||||
</header>
|
||||
@@ -4,4 +4,5 @@
|
||||
<title>Shop - <%= title %></title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
<link rel="stylesheet" href="/css/header.css">
|
||||
<link rel="stylesheet" href="/css/auth_header.css">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
@@ -10,13 +10,12 @@
|
||||
<%- include('partials/header'); %>
|
||||
</header>
|
||||
|
||||
<div id="content">
|
||||
|
||||
<div id="top">
|
||||
<div id="productPicture">
|
||||
<div class="content">
|
||||
<section class="product-header">
|
||||
<div id="product-image">
|
||||
<img src="/images/examples.jpg" alt="">
|
||||
</div>
|
||||
<div id="info">
|
||||
<div id="product-info">
|
||||
<h2><%= product.productName %></h2><br>
|
||||
<p class="badge">Nr.:<%= product.id %></p><br>
|
||||
|
||||
@@ -24,34 +23,36 @@
|
||||
|
||||
<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: 0px;
|
||||
|
||||
<% if(product.quantity > 0){%>
|
||||
color: green;">
|
||||
Lieferbar in <%= product.delivery_time %> - <%= product.delivery_time + 1 %> Tagen</label><br><br>
|
||||
<label style="margin-right: 30px; margin-left: 0px;color: green;">
|
||||
Lieferbar in <%= product.delivery_time %> - <%= product.delivery_time + 1 %> Tagen
|
||||
</label><br><br>
|
||||
|
||||
|
||||
<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>/<%= 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; font-weight:bold;">
|
||||
Aktuell nicht lieferbar!</label>
|
||||
<% } %>
|
||||
<label style="margin-right: 30px; margin-left: 0px;color: red; font-weight:bold;">
|
||||
Aktuell nicht lieferbar!
|
||||
</label>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="description">
|
||||
<section>
|
||||
<h2>Beschreibung</h2>
|
||||
<p><%= product.productDescription %> </p>
|
||||
</div>
|
||||
<% if(loggedIn){ %>
|
||||
<div id="newReview">
|
||||
</section>
|
||||
|
||||
<% if(user){ %>
|
||||
<section>
|
||||
<h2 style="padding-left: 30px;">Rezensionen</h2>
|
||||
<form action="/review/create/<%= product.id %>" method="post">
|
||||
<form class="product-form" action="/review/create/<%= product.id %>" method="post">
|
||||
<label for="title">
|
||||
<p>Titel: </p>
|
||||
<input type="text" name="title">
|
||||
@@ -68,29 +69,24 @@
|
||||
|
||||
<input style="width: 150px" type="submit" value="Senden">
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<% } %>
|
||||
<div id="reviews">
|
||||
<section>
|
||||
<% if(reviews.length > 0){ %>
|
||||
<% for(let i = 0; i < reviews.length; i++){ %>
|
||||
<div id="reviewTemplate">
|
||||
<div style="width: 100%; display: block; float: left;">
|
||||
<div id= data >
|
||||
<h3 style="padding-left: 20px; float:left"><%= reviews[i].name %></h3>
|
||||
<p style="float:right; padding-right: 20px;">Bewertung: <%= reviews[i].rating %></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 class="review-container">
|
||||
<div class="review-header">
|
||||
<p>(<%= reviews[i].rating %>) <b><%= reviews[i].name %>: </b> <%= reviews[i].title %></p>
|
||||
</div>
|
||||
<div class="review-content">
|
||||
<p><%= reviews[i].content %></p>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
<% }else{ %>
|
||||
<div style="width: 100%; height: 100px;">Leider hat dieses Produkt noch keine Bewertung. :(</div>
|
||||
<% } %>
|
||||
<% }else{ %>
|
||||
<h2 style="color:rgb(158, 51, 51);">Leider hat dieses Produkt noch keine Bewertung. :(</h2>
|
||||
<% } %>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<%- include('partials/footer'); %>
|
||||
</body>
|
||||
|
||||
@@ -5,78 +5,84 @@
|
||||
<link rel="stylesheet" href="/css/auth.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Register</h1>
|
||||
<%- include('partials/auth_header'); %>
|
||||
<div class="content">
|
||||
<h1 class="text-center">Register</h1>
|
||||
|
||||
<form action="/auth/register" method="POST">
|
||||
<p id="error-text"><%- error %></p>
|
||||
<form class="auth_form" action="" method="POST">
|
||||
<p id="error-text"></p>
|
||||
|
||||
<h4>Account Informationen:</h4>
|
||||
|
||||
<label for="username">
|
||||
<p>Benutzername:</p>
|
||||
<input required type="text" name="username" id="username" placeholder="Geben Sie Ihren Benutzernamen ein">
|
||||
</label>
|
||||
|
||||
<label for="email">
|
||||
<p>E-Mail:</p>
|
||||
<input required type="email" name="email" id="email" placeholder="Geben Sie Ihre E-Mail-Adresse ein">
|
||||
</label>
|
||||
|
||||
<label for="password1">
|
||||
<p>Passwort:</p>
|
||||
<input required type="password" name="password1" id="password1" placeholder="Geben Sie Ihr Passwort ein">
|
||||
</label>
|
||||
|
||||
<label for="password2">
|
||||
<p>Passwort wiederholen:</p>
|
||||
<input required type="password" name="password2" id="password2" placeholder="wiederholen Sie Ihr Passwort">
|
||||
</label>
|
||||
|
||||
<h4>Persönliche Informationen:</h4>
|
||||
<label for="firstname">
|
||||
<p>Vorname:</p>
|
||||
<input required type="text" name="firstname" id="firstname" placeholder="Geben Sie Ihren Vornamen ein">
|
||||
</label>
|
||||
|
||||
<label for="lastname">
|
||||
<p>Nachname:</p>
|
||||
<input required type="text" name="lastname" id="lastname" placeholder="Geben Sie Ihren Nachnamen ein">
|
||||
</label>
|
||||
|
||||
<label for="gender">
|
||||
<p>Anrede (z.B. Herr, Frau):</p>
|
||||
<input required type="text" name="gender" id="gender" placeholder="Wie lautet Ihre Anrede?">
|
||||
</label>
|
||||
|
||||
<h4>Lieferadresse:</h4>
|
||||
<label for="street">
|
||||
<p>Straße:</p>
|
||||
<input required type="text" name="street" id="street" placeholder="Geben Sie Ihre Straße ein">
|
||||
</label>
|
||||
|
||||
<label for="housenumber">
|
||||
<p>Hausnummer:</p>
|
||||
<input required type="number" min="1" name="housenumber" id="housenumber" placeholder="Geben Sie Ihre Hausnummer ein">
|
||||
</label>
|
||||
|
||||
<label for="postcode">
|
||||
<p>Postleitzahl:</p>
|
||||
<input required type="text" name="postcode" id="postcode" placeholder="Geben Sie die Postleitzahl ein">
|
||||
</label>
|
||||
|
||||
<label for="cityName">
|
||||
<p>Stadt:</p>
|
||||
<input required type="text" name="cityName" id="city" placeholder="Geben Sie die Stadt ein">
|
||||
</label>
|
||||
|
||||
<label for="country">
|
||||
<p>Land:</p>
|
||||
<input required type="text" name="country" id="country" placeholder="Geben Sie das Land ein">
|
||||
</label>
|
||||
|
||||
<input style="width: 40%;cursor:pointer;" type="button" value="Registrieren" onclick="submitForm()">
|
||||
<!-- Already have an account?-->
|
||||
<a class="text-redirect" href="/login">Sie haben bereits einen Account?</a>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<h4>Account Informationen:</h4>
|
||||
|
||||
<label for="username">
|
||||
<p>Benutzername:</p>
|
||||
<input required type="text" name="username" id="usernameInput" placeholder="Geben Sie Ihren Benutzernamen ein">
|
||||
</label>
|
||||
|
||||
<label for="email">
|
||||
<p>E-Mail:</p>
|
||||
<input required type="email" name="email" id="emailInput" placeholder="Geben Sie Ihre E-Mail-Adresse ein">
|
||||
</label>
|
||||
|
||||
<label for="password1">
|
||||
<p>Passwort:</p>
|
||||
<input required type="password" name="password1" id="password1Input" placeholder="Geben Sie Ihr Passwort ein">
|
||||
</label>
|
||||
|
||||
<label for="password2">
|
||||
<p>Passwort wiederholen:</p>
|
||||
<input required type="password" name="password2" id="password2Input" placeholder="wiederholen Sie Ihr Passwort">
|
||||
</label>
|
||||
|
||||
<h4>Persönliche Informationen:</h4>
|
||||
<label for="firstname">
|
||||
<p>Vorname:</p>
|
||||
<input required type="text" name="firstname" id="firstnameInput" placeholder="Geben Sie Ihren Vornamen ein">
|
||||
</label>
|
||||
|
||||
<label for="lastname">
|
||||
<p>Nachname:</p>
|
||||
<input required type="text" name="lastname" id="lastnameInput" placeholder="Geben Sie Ihren Nachnamen ein">
|
||||
</label>
|
||||
|
||||
<label for="gender">
|
||||
<p>Anrede (z.B. Herr, Frau):</p>
|
||||
<input required type="text" name="gender" id="genderInput" placeholder="Wie lautet Ihre Anrede?">
|
||||
</label>
|
||||
|
||||
<h4>Lieferadresse:</h4>
|
||||
<label for="street">
|
||||
<p>Straße:</p>
|
||||
<input required type="text" name="street" id="streetInput" placeholder="Geben Sie Ihre Straße ein">
|
||||
</label>
|
||||
|
||||
<label for="housenumber">
|
||||
<p>Hausnummer:</p>
|
||||
<input required type="number" min="1" name="housenumber" id="housenumberInput" placeholder="Geben Sie Ihre Hausnummer ein">
|
||||
</label>
|
||||
|
||||
<label for="postcode">
|
||||
<p>Postleitzahl:</p>
|
||||
<input required type="text" name="postcode" id="postcodeInput" placeholder="Geben Sie die Postleitzahl ein">
|
||||
</label>
|
||||
|
||||
<label for="cityName">
|
||||
<p>Stadt:</p>
|
||||
<input required type="text" name="cityName" id="cityInput" placeholder="Geben Sie die Stadt ein">
|
||||
</label>
|
||||
|
||||
<label for="country">
|
||||
<p>Land:</p>
|
||||
<input required type="text" name="country" id="countryInput" placeholder="Geben Sie das Land ein">
|
||||
</label>
|
||||
|
||||
<input style="width: 40%;cursor:pointer;" type="submit" value="Registrieren">
|
||||
<!-- Already have an account?-->
|
||||
<a class="text-redirect" href="/login">Sie haben bereits einen Account?</a>
|
||||
</form>
|
||||
<script src="/js/jquery.min.js"></script>
|
||||
<script src="/js/register.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user