better error handling register

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

static/css/auth.css

@@ -1,15 +1,11 @@
-h1{
+.auth_form{
-    text-align: center;
-}
-
-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);
 }

static/css/auth_header.css

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

static/css/header.css

@@ -6,10 +6,6 @@
     transform: translateY(-50%);
 }
 
-body {
-    margin: 0;
-}
-
 /* BACKGROUND */
 .headerDIV > div {
     height: 100%;

static/css/order.css

@@ -11,8 +11,7 @@
     height: 30px;
 }
 
-
+.order_form input[type="submit"]{
-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{
+#order-info hr{
-    text-align: center;
-}
-
-hr{
     width: 100%;
     border: 0px;
     background-color:rgba(51, 51, 51, 0.337);

static/css/product.css

@@ -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;
 }
-
+/* Info header*/
-#description
+.product-header{
-{
+    height: 400px;
-    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{
+#product-image
-    width: 100%;
+{
-    height: 1600px;
+    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: rgba(103, 187, 183, 0);
-    background-color: rgb(85, 158, 255);
+    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
+/* review */
-{
+.review-container{
-    width: 100%;
+    margin-bottom: 20px;
-    height: 150px;
-    display: block;
-    float: left;
-    background-color: rgb(211, 196, 247);
-}
-#reviewTemplateText
-{
-    background-color: rgb(235, 196, 228);
 }
 
-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%; 
-    }
-  }

static/css/style.css

@@ -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{
+h1, h2{
-    text-align: center;
+    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%; 
+    }
+  }

static/js/register.js

@@ -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);
+        }
+    });
+}
+

validators.js

@@ -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
+}

views/login.ejs

@@ -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">
+        <form class="auth_form" action="/auth/login" method="POST">
-        <p id="error-text"><%- error %></p>
+            <p id="error-text"><%- error %></p>
-
+    
-        <label for="username">
+            <label for="username">
-            <p>Benutzername:</p>
+                <p>Benutzername:</p>
-            <input required type="text" name="username" id="usernameInput" placeholder="Geben Sie Ihren Benutzernamen ein">
+                <input required type="text" name="username" id="usernameInput" placeholder="Geben Sie Ihren Benutzernamen ein">
-        </label>
+            </label>
-        
+            
-        <label for="password">
+            <label for="password">
-            <p>Passwort:</p>
+                <p>Passwort:</p>
-            <input required type="password" name="password" id="password1Input" placeholder="Geben Sie Ihr Passwort ein">
+                <input required type="password" name="password" id="password1Input" placeholder="Geben Sie Ihr Passwort ein">
-        </label>
+            </label>
-
+    
-        <input style="width: 40%;cursor:pointer;" type="submit" value="Login">
+            <input style="width: 40%;cursor:pointer;" type="submit" value="Login">
-        <a class="text-redirect" href="/register">Sie haben keinen Account?</a>
+            <a class="text-redirect" href="/register">Sie haben keinen Account?</a>
-    </form>
+        </form>
+    </div>
 </body>
 </html>

views/order.ejs

@@ -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 ;) -->

views/partials/auth_header.ejs

@@ -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>

views/partials/head.ejs

@@ -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">

views/product.ejs

@@ -10,13 +10,12 @@
         <%- include('partials/header'); %>
     </header>
 
-    <div id="content">
+    <div class="content">
-
+        <section class="product-header">
-        <div id="top">
+            <div id="product-image">
-            <div id="productPicture">
                 <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;">
+                        <label style="margin-right: 30px; margin-left: 0px;color: green;">
-                        Lieferbar in <%= product.delivery_time %> - <%= product.delivery_time + 1 %> Tagen</label><br><br>
+                            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;">
+                        <label style="margin-right: 30px; margin-left: 0px;color: red; font-weight:bold;">
-                        Aktuell nicht lieferbar!</label>
+                            Aktuell nicht lieferbar!
-                        <% } %>
+                        </label>
+                    <% } %>
                 </div>
             </div>
-        </div>
+        </section>
 
-        <div id="description">
+        <section>
             <h2>Beschreibung</h2>
             <p><%= product.productDescription %> </p>
-        </div>
+        </section>
-        <% if(loggedIn){ %>
+
-        <div id="newReview">
+        <% 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 class="review-container">
-                        <div style="width: 100%; display: block; float: left;">
+                        <div class="review-header">
-                            <div id= data >
+                            <p>(<%= reviews[i].rating %>) <b><%= reviews[i].name %>: </b> <%= reviews[i].title %></p>
-                                <h3 style="padding-left: 20px; float:left"><%= reviews[i].name %></h3>
+                        </div>
-                                <p style="float:right; padding-right: 20px;">Bewertung: <%= reviews[i].rating %></p>
+                        <div class="review-content">
-                            </div>
+                            <p><%= reviews[i].content %></p>
-                            <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>
-        <% } %>
+                <% } %>
-        <% }else{ %>
+            <% }else{ %>
-            <div style="width: 100%; height: 100px;">Leider hat dieses Produkt noch keine Bewertung. :(</div>
+            <h2 style="color:rgb(158, 51, 51);">Leider hat dieses Produkt noch keine Bewertung. :(</h2>
             <% } %>
-        </div>
+        </section>
     </div> 
     <%- include('partials/footer'); %>
 </body>

views/register.ejs

@@ -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">
+        <form class="auth_form" action="" method="POST">
-        <p id="error-text"><%- error %></p>
+            <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>
+    <script src="/js/jquery.min.js"></script>
-
+    <script src="/js/register.js"></script>
-        <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>
 </body>
 </html>