reworked auth

index.js

@@ -8,7 +8,7 @@ const uuid = require("uuid");
 
 // Import Modules
 const mysql_handler = require("./mysql_handler");
-const validator = require("./validators")
+const validators = require("./validators")
 
 // Global Variables
 const app = express();
@@ -83,6 +83,7 @@ function authenticatedHandler(req, res, next){
 function notAuthenticatedHandler(req, res, next){ 
     const authcookie = req.cookies.authcookie; // Get authcookie from cookie
 
+    if(authcookie){
         jwt.verify(authcookie, SECRET_KEY, (err, data) =>{ // Verify authcookie
             if(err){ // If authcookie is invalid
                 console.log(err);
@@ -91,6 +92,10 @@ function notAuthenticatedHandler(req, res, next){
                 res.redirect("/");      
             }
         });
+    }else{
+        next();
+    }
+    
 }
 
 // Homepage
@@ -330,17 +335,18 @@ app.post("/auth/register", notAuthenticatedHandler,(req, res) =>{
     let street = req.body.street;
     let housenumber = req.body.housenumber;
     let postcode = req.body.postcode;
-    let cityName = req.body.cityName;
+    let city = req.body.city;
     let country = req.body.country;
 
-    let error = "";
+    let error = false;
     /*
     0: No error
-    error_username_dup
+    error_username_duplicate: Username already exists
-    error_email_dup
+    error_email_duplicate: Email already exists
-    error_password_length_short
+    error_password_length_short: Password is too short
-    error_password_length_long
+    error_password_length_long: Password is too long
-    error_password_emismatch
+    error_password_mismatch: Passwords do not match
+    error_password_invalid
     error_email_invalid
     error_username_invalid
     error_firstname_invalid
@@ -352,32 +358,117 @@ app.post("/auth/register", notAuthenticatedHandler,(req, res) =>{
     error_country_invalid
     */
 
-
+    validateUsername = validators.validate_username(username);
-    if(!validator.validate_password(password1)){
+    if(validateUsername != 0){
-        error += "Passwort muss mindestens 8 Zeichen lang sein!\n";
+        console.log(validateUsername);
+        res.send(validateUsername);
+        return;
     }
     
-    if(password1 != password2){ // If passwords don't match
+    
-        error += "Passwörter sind unterschiedlich!";
+    validateEmail = validators.validate_email(email);
-    }else if(password1.length < 8){ // If password is too short
+    if(validateEmail != 0){     
-        error += "Passwort muss mindestens 8 Zeichen lang sein!";
+        console.log(validateEmail);
-    }
+        res.send(validateEmail);
-    if(username.length < 3){ // If username is too short
+        return;
-        error += "<br> Der Benutzername muss mindestens 3 Zeichen lang sein!"; 
-    }else if(username.length > 30){ // If username is too long
-        error += "<br> Der Benutzername darf maximal 30 Zeichen lang sein!";
     }
 
-    if(error != ""){ // If there is an error
+   
-        res.send("ERROR") // Redirect to register page with error message
+    
+    validatePasswords = validators.validate_passwords(password1, password2);
+    if(validatePasswords != 0){
+        console.log(validatePasswords);
+        res.send(validatePasswords);
+        return;
+    }
+
+    validateFirstname = validators.validate_firstname(firstname);
+    if(validateFirstname != 0){
+        console.log(validateFirstname);
+        res.send(validateFirstname);
+        return;
+    }
+
+    validateLastname = validators.validate_lastname(lastname);
+    if(validateLastname != 0){
+        console.log(validateLastname);
+        res.send(validateLastname);
+        return;
+    }
+
+    validateGender = validators.validate_gender(gender);
+    if(validateGender != 0){
+        console.log(validateGender);
+        res.send(validateGender);
+        return;
+    }
+
+    validateStreet = validators.validate_street(street);
+    if(validateStreet != 0){
+        console.log(validateStreet);
+        res.send(validateStreet);
+        return;
+    }
+
+    validateHousenumber = validators.validate_housenumber(housenumber);
+    if(validateHousenumber != 0){
+        console.log(validateHousenumber);
+        res.send(validateHousenumber);
+        return;
+    }
+
+    validatePostcode = validators.validate_postcode(postcode);
+    if(validatePostcode != 0){
+        console.log(validatePostcode);
+        res.send(validatePostcode);
+        return;
+    }
+
+    validateCity = validators.validate_city(city);
+    if(validateCity != 0){
+        console.log(validateCity);
+        res.send(validateCity);
+        return;
+    }
+
+    validateCountry = validators.validate_country(country);
+    if(validateCountry != 0){
+        console.log(validateCountry);
+        res.send(validateCountry);
+        return;
+    }
+
+    
+
+
+
+     // CHECK DUPLICATES
+    // Check email duplicate
+    mysql_handler.con.query(`SELECT * FROM users WHERE email='${email}'`, (err, result) => {
+        if(err) console.log(err);
+        if(result.length > 0){
+            res.send("error_email_duplicate");
         }else{
+
+        
+            // Check username duplicate
+            mysql_handler.con.query(`SELECT * FROM users WHERE username='${username}'`, (err, result) => {
+                if(err) console.log(err);
+                if(result.length > 0){
+                    res.send("error_username_duplicate");
+                }else{
+                    // NO duplicates
                     bcrypt.genSalt(10, function(err, salt) { // Generate salt
                         bcrypt.hash(password1, salt, function(err, hash){ // Hash password
-                mysql_handler.createUser(username, email, hash, firstname, lastname, gender, street, housenumber, postcode, cityName, country);
+                            console.log("create");
-                res.redirect(`/login/`);        
+                            mysql_handler.createUser(username, email, hash, firstname, lastname, gender, street, housenumber, postcode, city, country);
+                            res.send("0");      
                         });
                     });
                 }
+            })
+        }
+    });    
 });
 
 // Login POST Request

static/css/auth.css

@@ -38,13 +38,21 @@
     outline: none !important;
 }
 
+.auth_form label .input_error{
+    border-color: rgb(204, 69, 69);
+}
+
+.auth_form label .input_error:hover{
+    border-color: rgb(236, 103, 103);
+}
+
 .auth_form h4{
     text-align: center;
     margin-top: 30px;
     margin-bottom: 0px;
 }
 /* Submit button with blue background horizontal center*/
-.auth_form input[type="button"]{
+.auth_form input[type="button"], .auth_form input[type="submit"]{
     color: rgb(255, 255, 255);
     font-weight: bold;
     letter-spacing: 1.5px;

static/css/style.css

@@ -20,16 +20,17 @@ h1, h2{
     text-align: center;
 }
 
-#error-text{
+.error-text{
     color: red;
     font-weight: bold;
-    letter-spacing: 1.5px;
+    font-size: 11pt;
     margin-top: 0px;
+    padding-top: 2px;
     margin-left: auto;
     margin-right: auto;
     width: 100%;
     display:block;
-    text-align: center;
+    text-align: left;
 }
 
 .text-redirect{

static/js/register.js

@@ -1,32 +1,307 @@
-/*const error_text_elem_username = document.getElementById('error_text_username');
+const error_text_elem_general = document.getElementById('error_text_general');
+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_firstname = document.getElementById('error_text_firstname');
-const error_text_elem_last_name = document.getElementById('error_text_last_name');
+const error_text_elem_lastname = document.getElementById('error_text_lastname');
 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');*/
+const error_text_elem_housenumber = document.getElementById('error_text_housenumber');
+const error_text_elem_gender = document.getElementById('error_text_gender');
+
+const username_elem = document.getElementById('username');
+const password1_elem = document.getElementById('password1');
+const password2_elem = document.getElementById('password2');
+const email_elem = document.getElementById('email');
+const firstname_elem = document.getElementById('firstname');
+const lastname_elem = document.getElementById('lastname');
+const street_elem = document.getElementById('street');
+const city_elem = document.getElementById('city');
+const postcode_elem = document.getElementById('postcode');
+const country_elem = document.getElementById('country');
+const housenumber = document.getElementById('housenumber');
+const gender = document.getElementById('gender')
 
 function handleError(error){
+    
+    if(!error){
+        error_text_elem_general.textContent = "Fehler beim Registrieren";
+        return;
+    }
+
+    error = error.split("_");
     console.log(error)
+
+    if(error[1] == "username"){
+        str = "";
+
+        switch(error[2]){
+            case "short":
+                str = "Der Benutzername ist zu kurz <br> -> mindestens 3 Zeichen";
+                break;
+            case "long":
+                str = "Der Benutzername ist zu lang <br> -> maximal 30 Zeichen";
+                break;
+            case "invalid":
+                str = "Der Benutzername ist ungültig <br> -> nur Buchstaben und Zahlen";
+                break;
+            case "duplicate":
+                str = "Der Benutzername ist bereits vergeben";
+                break;
+            default:
+                str = error[2];
+                break;
+        }
+        username_elem.classList.add("input_error");
+        error_text_elem_username.innerHTML = str;
+    }
+
+    if(error[1] == "password"){
+        str = "";
+
+        switch(error[2]){
+            case "short":
+                str = "Das Passwort ist zu kurz <br> -> mindestens 8 Zeichen";
+                break;
+            case "long":
+                str = "Das Passwort ist zu lang <br> -> maximal 200 Zeichen";
+                break;
+            case "invalid":
+                str = "Das Passwort ist ungültig <br> -> nur Buchstaben, Zahlen und ausgewählte Sonderzeichen (!@#$%^&*.,;:)";
+                break;
+            case "mismatch":
+                str = "Die Passwörter stimmen nicht überein";
+                password2_elem.classList.add("input_error");
+                break;
+            default:
+                str = error[2];
+                break;
+        }
+        password1_elem.classList.add("input_error");
+        error_text_elem_password1.innerHTML = str;
+    }
+    if(error[1] == "email"){
+        str = "";
+
+        switch(error[2]){
+            case "invalid":
+                str = "Die E-Mail-Adresse ist ungültig";
+                break;
+            case "duplicate":
+                str = "Die E-Mail-Adresse ist bereits vergeben";
+                break;
+            default:
+                str = error[2];
+                break;
+        }
+        email_elem.classList.add("input_error");
+        error_text_elem_email.innerHTML = str;
+    }
+    if(error[1] == "firstname"){
+        str = "";
+
+        switch(error[2]){
+            case "short":
+                str = "Der Vorname ist zu kurz <br> -> mindestens 1 Zeichen";
+                break;
+            case "long":
+                str = "Der Vorname ist zu lang <br> -> maximal 80 Zeichen";
+                break;
+            case "invalid":
+                str = "Der Vorname ist ungültig <br> -> nur Buchstaben und Bindestriche";
+                break;
+            default:
+                str = error[2];
+                break;
+        }
+        firstname_elem.classList.add("input_error");
+        error_text_elem_firstname.innerHTML = str;
+    }
+    if(error[1] == "lastname"){
+        str = "";
+
+        switch(error[2]){
+            case "short":
+                str = "Der Nachname ist zu kurz <br> -> mindestens 1 Zeichen";
+                break;
+            case "long":
+                str = "Der Nachname ist zu lang <br> -> maximal 80 Zeichen";
+                break;
+            case "invalid":
+                str = "Der Nachname ist ungültig <br> -> nur Buchstaben und Bindestriche";
+                break;
+            default:
+                str = error[2];
+                break;
+        }
+        lastname_elem.classList.add("input_error");
+        error_text_elem_lastname.innerHTML = str;
+    }
+    if(error[1] == "street"){
+        str = "";
+
+        switch(error[2]){
+            case "short":
+                str = "Die Straße ist zu kurz <br> -> mindestens 2 Zeichen";
+                break;
+            case "long":
+                str = "Die Straße ist zu lang <br> -> maximal 80 Zeichen";
+                break;
+            case "invalid":
+                str = "Die Straße ist ungültig <br> -> nur Buchstaben, Zahlen uns Leerzeichen";
+                break;
+            default:
+                str = error[2];
+                break;
+        }
+        street_elem.classList.add("input_error");
+        error_text_elem_street.innerHTML = str;
+    }
+    if(error[1] == "city"){
+        str = "";
+
+        switch(error[2]){
+            case "short":
+                str = "Die Stadt ist zu kurz <br> -> mindestens 1 Zeichen";
+                break;
+            case "long":
+                str = "Die Stadt ist zu lang <br> -> maximal 80 Zeichen";
+                break;
+            case "invalid":
+                str = "Die Stadt ist ungültig <br> -> nur Buchstaben, Zahlen und Leerzeichen";
+                break;
+            default:
+                str = error[2];
+                break;
+        }
+        city_elem.classList.add("input_error");
+        error_text_elem_city.innerHTML = str;
+    }
+    if(error[1] == "postcode"){
+        str = "";
+        
+        switch(error[2]){
+            case "short":
+                str = "Die Postleitzahl ist zu kurz <br> -> mindestens 1 Zeichen";
+                break;
+            case "long":
+                str = "Die Postleitzahl ist zu lang <br> -> maximal 20 Zeichen";
+                break;
+            case "invalid":
+                str = "Die Postleitzahl ist ungültig <br> -> nur Zahlen";
+                break;
+            default:
+                str = error[2];
+                break;
+        }
+        postcode_elem.classList.add("input_error");
+        error_text_elem_postcode.innerHTML = str;
+    }
+    if(error[1] == "country"){
+        str = "";
+
+        switch(error[2]){
+            case "short":
+                str = "Das Land ist zu kurz <br> -> mindestens 1 Zeichen";
+                break;
+            case "long":
+                str = "Das Land ist zu lang <br> -> maximal 80 Zeichen";
+                break;
+            case "invalid":
+                str = "Das Land ist ungültig <br> -> nur Buchstaben, Zahlen und Leerzeichen";
+                break;
+            default:
+                str = error[2];
+                break;
+        }
+        error_text_elem_country.innerHTML = str;
+    }
+    if(error[1] == "housenumber"){
+        str = "";
+
+        switch(error[2]){
+            case "invalid":
+                str = "Die Hausnummer ist ungültig <br> -> nur Zahlen";
+                break;
+            default:
+                str = error[2];
+                break;
+        }
+        housenumber_elem.classList.add("input_error");
+        error_text_elem_housenumber.innerHTML = str;
+    }
+    if(error[1] == "gender"){
+        str = ""
+
+        switch(error[2]){
+            case "short":
+                str = "Die Anrede ist zu kurz <br> -> mindestens 1 Zeichen";
+                break;
+            case "long":
+                str = "Die Anrede ist zu lang <br> -> maximal 15 Zeichen";
+                break;
+            case "invalid":
+                str = "Die Anrede ist ungültig <br> -> nur Buchstaben, Leerzeichen und ausgewählter Zeichen (. -)";
+                break;
+            default:
+                str = error[2];
+                break;
+        }
+
+
+        error_text_elem_gender.innerHTML = str;
+    }
+
+
+}
+
+function resetErrors(){
+    error_text_elem_general.innerHTML = "";
+    error_text_elem_username.innerHTML = "";
+    error_text_elem_password1.innerHTML = "";
+    error_text_elem_password2.innerHTML = "";
+    error_text_elem_email.innerHTML = "";
+    error_text_elem_firstname.innerHTML = "";
+    error_text_elem_lastname.innerHTML = "";
+    error_text_elem_street.innerHTML = "";
+    error_text_elem_city.innerHTML = "";
+    error_text_elem_postcode.innerHTML = "";
+    error_text_elem_country.innerHTML = "";
+    error_text_elem_housenumber.innerHTML = "";
+    error_text_elem_gender.innerHTML = ""
+
+    username_elem.classList.remove("input_error");
+    password1_elem.classList.remove("input_error");
+    password2_elem.classList.remove("input_error");
+    email_elem.classList.remove("input_error");
+    firstname_elem.classList.remove("input_error");
+    lastname_elem.classList.remove("input_error");
+    street_elem.classList.remove("input_error");
+    city_elem.classList.remove("input_error");
+    postcode_elem.classList.remove("input_error");
+    country_elem.classList.remove("input_error");
+    housenumber.classList.remove("input_error");
+    gender.classList.remove("input_error");
 }
 
 function submitForm(){
+    resetErrors();
     formObj = {
-        username: document.getElementById('username').value,
+        username: username_elem.value,
-        password1: document.getElementById('password1').value,
+        password1: password1_elem.value,
-        password2: document.getElementById('password2').value,
+        password2: password2_elem.value,
-        email: document.getElementById('email').value,
+        email: email_elem.value,
-        first_name: document.getElementById('firstname').value,
+        firstname: firstname_elem.value,
-        last_name: document.getElementById('lastname').value,
+        lastname: lastname_elem.value,
-        street: document.getElementById('street').value,
+        street: street_elem.value,
-        city: document.getElementById('city').value,
+        city: city_elem.value,
-        postcode: document.getElementById('postcode').value,
+        postcode: postcode_elem.value,
-        country: document.getElementById('country').value,
+        country: country_elem.value,
-        housenumber: document.getElementById('housenumber').value,
+        housenumber: housenumber.value,
+        gender: gender.value    
     }
 
     $.ajax({
@@ -35,7 +310,7 @@ function submitForm(){
         data : formObj,
         success: function(data)
         {
-            if(data == 0){
+            if(data == "0"){
                 window.location.href = "/login";
             }else{
                 handleError(data);

validators.js

@@ -1,15 +1,235 @@
+function validate_housenumber(housenumber){
 
-function validate_password(password) {
+    if(!housenumber){
-    var re = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
+        return "error_housenumber_invalid";
+    }
 
-    if(re.test(password)){
+    if(housenumber.length < 1){
-        if(password.length > 8 && password.length < 255){
+        return "error_housenumber_short";
-            return true
     }
+
+    if(housenumber.length > 20){
+        return "error_housenumber_long";
     }
-    return false;
+
+    if(!housenumber.match(/^[0-9]*$/)){
+        return "error_housenumber_invalid";
+    }
+
+    return 0;
+}
+
+function validate_postcode(postcode){
+
+    if(!postcode){
+        return "error_postcode_invalid";
+    }
+
+    if(postcode.length < 1){
+        return "error_postcode_short";
+    }
+
+    if(postcode.length > 20){
+        return "error_postcode_long";
+    }
+
+    if(!postcode.match(/^[0-9]*$/)){
+        return "error_postcode_invalid";
+    }
+
+    return 0;
+}
+
+
+function validate_country(country){
+
+    if(!country){
+        return "error_country_invalid";
+    }
+
+    if(country.length < 1){
+        return "error_country_short";
+    }
+
+    if(country.length > 80){
+        return "error_country_long";
+    }
+
+    if(!country.match(/^[a-zA-Zßäöü-\s]*$/)){
+        return "error_country_invalid";
+    }
+
+    return 0;
+}
+
+function validate_city(city){
+
+    if(!city){
+        return "error_city_invalid";
+    }
+
+    if(city.length < 1){
+        return "error_city_short";
+    }
+
+    if(city.length > 80){
+        return "error_city_long";
+    }
+
+    if(!city.match(/^[a-zA-Zßäöü-\s]*$/)){
+        return "error_city_invalid";
+    }
+
+    return 0;
+}
+
+function validate_street(street){
+
+    if(!street){
+        return "error_street_invalid";
+    }
+
+    if(street.length < 1){
+        return "error_street_short";
+    }
+
+    if(street.length > 80){
+        return "error_street_long";
+    }
+
+    if(!street.match(/^[a-zA-Zßäöü.-\s]*$/)){
+        return "error_street_invalid";
+    }
+
+    return 0;
+}
+
+function validate_gender(gender){
+
+    if(!gender){
+        return "error_gender_invalid";
+    }
+
+    if(gender.length < 1){
+        return "error_gender_short";
+    }
+
+    if(gender.length > 15){
+        return "error_gender_long";
+    }
+
+    if(!gender.match(/^[a-zA-Z0-9ßäöü.-\s]*$/)){
+        return "error_gender_invalid";
+    }
+
+    return 0;
+}
+
+function validate_lastname(lastname){
+    
+    if(!lastname){
+        return "error_lastname_invalid"     
+    }
+
+    if(lastname.length < 1){
+        return "error_lastname_short";
+    }
+
+    if(lastname.length > 80){
+        return "error_lastname_long";
+    }
+
+    if(!lastname.match(/^[a-zA-Z0-9ßäöü-]*$/)){
+        return "error_lastname_invalid";
+    }
+
+    return 0;
+}
+
+function validate_username(username){
+    
+    if(!username){
+        return "error_username_invalid";
+    }
+
+    if(username.length < 3){
+        return "error_username_short";
+    }
+
+    if(username.length > 30){
+        return "error_username_long";
+    }
+
+    if(!username.match(/^[a-zA-Z0-9_]*$/)){
+        return "error_username_invalid";
+    }
+
+    return 0;
+}
+
+function validate_firstname(firstname){
+    if(!firstname){
+        return "error_firstname_invalid2";
+    }
+
+    if(firstname.length < 1){
+        return "error_firstname_length_short";
+    }
+
+    if(firstname.length > 80){
+        return "error_firstname_length_long";
+    }
+
+    if(!firstname.match(/^[a-zA-Z0-9ßäöü]*$/)){
+        return "error_firstname_invalid";
+    }
+
+    return 0;
+}
+
+function validate_email(email){
+    if(!email){
+        return "error_email_invalid";
+    }
+
+    if(email.length < 3 || !email.includes("@") || !email.includes(".")){
+        return "error_email_invalid"
+    } 
+
+    return 0;
+    
+}
+
+function validate_passwords(password, confirm_password) {
+    const maxLength = 200;
+    const minLength = 8;
+
+    if(!password){
+        return "error_password_invalid"
+    }
+
+    if(password.length < minLength){
+        return "error_password_short"
+    }
+
+    if(password.length > maxLength){
+        return "error_password_long"
+    }
+
+    // check password for invalid character
+    if(!password.match(/^[a-zA-Z0-9!@#$%^&*.,;:]*$/)){
+        return "error_password_invalid"
+    }
+
+    if(password != confirm_password){
+        return "error_password_mismatch"
+    }
+
+
+    return 0;
 }
 
 module.exports = {
-    validate_password
+    validate_passwords, validate_email , validate_username, validate_firstname,
+     validate_lastname, validate_gender, validate_street, validate_country, validate_city, validate_postcode, validate_housenumber
 }

views/product.ejs

@@ -16,7 +16,7 @@
                 <img src="/images/examples.jpg" alt="">
             </div>
             <div id="product-info">
-                <h2><%= product.productName %></h2><br>
+                <h2 style="padding-left: 0px"><%= product.productName %></h2><br>
                 <p class="badge">Nr.:<%= product.id %></p><br>
 
                 <p class="seller">Verkäufer: <%= product.sellerName%></p><br>
@@ -25,9 +25,9 @@
                 <p class="product-detail"><b>Kategorie:</b> <%= category.name %></h2>
                 <div>
                     <% if(product.quantity > 0){%>
-                        <label style="margin-right: 30px; margin-left: 0px;color: green;">
+                        <p style="margin-right: 30px; margin-left: 0px;color: green;">
                             Lieferbar in <%= product.delivery_time %> - <%= product.delivery_time + 1 %> Tagen
-                        </label><br><br>
+                        </p><br><br>
 
 
                         <div style=" float:right;">
@@ -36,9 +36,9 @@
                             <button class ="order-button"onclick="window.open('/order/<%= product.id %>/' + document.getElementById('quantity').value, '_self')">Bestellen</button>    
                         </div>
                     <% } else { %>
-                        <label style="margin-right: 30px; margin-left: 0px;color: red; font-weight:bold;">
+                        <p style="margin-right: 30px; margin-left: 0px;color: red; font-weight:bold;">
                             Aktuell nicht lieferbar!
-                        </label>
+                        </p>
                     <% } %>
                 </div>
             </div>
@@ -49,9 +49,10 @@
             <p><%= product.productDescription %> </p>
         </section>
 
-        <% if(user){ %>
+        
         <section>
             <h2 style="padding-left: 30px;">Rezensionen</h2>
+            <% if(user){ %>
             <form class="product-form" action="/review/create/<%= product.id %>" method="post">
                 <label for="title">
                     <p>Titel: </p>
@@ -69,8 +70,8 @@
                 
                 <input style="width: 150px" type="submit" value="Senden">
             </form>
-        </section>
             <% } %>
+        </section>
         <section>
             <% if(reviews.length > 0){ %>
                 <% for(let i = 0; i < reviews.length; i++){ %>
@@ -84,10 +85,10 @@
                     </div>
                 <% } %>
             <% }else{ %>
-            <h2 style="color:rgb(158, 51, 51);">Leider hat dieses Produkt noch keine Bewertung. :(</h2>
+            <h4 style="color:rgb(158, 51, 51);" class="text-center">Leider hat dieses Produkt noch keine Bewertung.</h4>
             <% } %>
         </section>
     </div> 
-    <%- include('partials/footer'); %>
+   <!--<%- include('partials/footer'); %>--> 
 </body>
 </html>

views/register.ejs

@@ -8,72 +8,84 @@
     <%- include('partials/auth_header'); %>
     <div class="content">
         <h1 class="text-center">Register</h1>
-
+        <p id="error_text_general" class="error-text"></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">
+                <p id="error_text_username" class="error-text"></p>
             </label>
             
             <label for="email">
                 <p>E-Mail:</p>
                 <input required type="email" name="email" id="email" placeholder="Geben Sie Ihre E-Mail-Adresse ein">
+                <p id="error_text_email" class="error-text"></p>
             </label>
     
             <label for="password1">
                 <p>Passwort:</p>
                 <input required type="password" name="password1" id="password1" placeholder="Geben Sie Ihr Passwort ein">
+                <p id="error_text_password1" class="error-text"></p>
             </label>
     
             <label for="password2">
                 <p>Passwort wiederholen:</p>
                 <input required type="password" name="password2" id="password2" placeholder="wiederholen Sie Ihr Passwort">
+                <p id="error_text_password2" class="error-text"></p>
             </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">
+                <p id="error_text_firstname" class="error-text"></p>
             </label>
     
             <label for="lastname">
                 <p>Nachname:</p>
                 <input required type="text" name="lastname" id="lastname" placeholder="Geben Sie Ihren Nachnamen ein">
+                <p id="error_text_lastname" class="error-text"></p>
             </label>
     
             <label for="gender">
                 <p>Anrede (z.B. Herr, Frau):</p>
                 <input required type="text" name="gender" id="gender" placeholder="Wie lautet Ihre Anrede?">
+                <p id="error_text_gender" class="error-text"></p>
             </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">
+                <p id="error_text_street" class="error-text"></p>
             </label>
     
             <label for="housenumber">
                 <p>Hausnummer:</p>
                 <input required type="number" min="1" name="housenumber" id="housenumber" placeholder="Geben Sie Ihre Hausnummer ein">
+                <p id="error_text_housenumber" class="error-text"></p>
             </label>
     
             <label for="postcode">
                 <p>Postleitzahl:</p>
                 <input required type="text" name="postcode" id="postcode" placeholder="Geben Sie die Postleitzahl ein">
+                <p id="error_text_postcode" class="error-text"></p>
             </label>
     
             <label for="cityName">
                 <p>Stadt:</p>
                 <input required type="text"  name="cityName" id="city" placeholder="Geben Sie die Stadt ein">
+                <p id="error_text_city" class="error-text"></p>
             </label>
     
             <label for="country">
                 <p>Land:</p>
                 <input required type="text" name="country" id="country" placeholder="Geben Sie das Land ein">
+                <p id="error_text_country" class="error-text"></p>
             </label>
     
             <input style="width: 40%;cursor:pointer;" type="button" value="Registrieren" onclick="submitForm()">