reworked auth

This commit is contained in:
j.mei7
2022-03-29 21:08:51 +02:00
parent 17e47a2fba
commit d990dd3db0
7 changed files with 686 additions and 78 deletions

141
index.js
View File

@@ -8,7 +8,7 @@ const uuid = require("uuid");
// Import Modules // Import Modules
const mysql_handler = require("./mysql_handler"); const mysql_handler = require("./mysql_handler");
const validator = require("./validators") const validators = require("./validators")
// Global Variables // Global Variables
const app = express(); const app = express();
@@ -83,6 +83,7 @@ function authenticatedHandler(req, res, next){
function notAuthenticatedHandler(req, res, next){ function notAuthenticatedHandler(req, res, next){
const authcookie = req.cookies.authcookie; // Get authcookie from cookie const authcookie = req.cookies.authcookie; // Get authcookie from cookie
if(authcookie){
jwt.verify(authcookie, SECRET_KEY, (err, data) =>{ // Verify authcookie jwt.verify(authcookie, SECRET_KEY, (err, data) =>{ // Verify authcookie
if(err){ // If authcookie is invalid if(err){ // If authcookie is invalid
console.log(err); console.log(err);
@@ -91,6 +92,10 @@ function notAuthenticatedHandler(req, res, next){
res.redirect("/"); res.redirect("/");
} }
}); });
}else{
next();
}
} }
// Homepage // Homepage
@@ -318,7 +323,7 @@ app.get("/login/:error?", notAuthenticatedHandler, (req, res) => {
}); });
// Register POST Request // Register POST Request
app.post("/auth/register", notAuthenticatedHandler,(req, res) =>{ app.post("/auth/register", notAuthenticatedHandler, (req, res) =>{
// Get data from POST request // Get data from POST request
let username = req.body.username; let username = req.body.username;
let email = req.body.email; let email = req.body.email;
@@ -330,17 +335,18 @@ app.post("/auth/register", notAuthenticatedHandler,(req, res) =>{
let street = req.body.street; let street = req.body.street;
let housenumber = req.body.housenumber; let housenumber = req.body.housenumber;
let postcode = req.body.postcode; let postcode = req.body.postcode;
let cityName = req.body.cityName; let city = req.body.city;
let country = req.body.country; let country = req.body.country;
let error = ""; let error = false;
/* /*
0: No error 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_email_invalid
error_username_invalid error_username_invalid
error_firstname_invalid error_firstname_invalid
@@ -352,32 +358,117 @@ app.post("/auth/register", notAuthenticatedHandler,(req, res) =>{
error_country_invalid 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{ }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.genSalt(10, function(err, salt) { // Generate salt
bcrypt.hash(password1, salt, function(err, hash){ // Hash password 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 // Login POST Request

View File

@@ -38,13 +38,21 @@
outline: none !important; 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{ .auth_form h4{
text-align: center; text-align: center;
margin-top: 30px; margin-top: 30px;
margin-bottom: 0px; margin-bottom: 0px;
} }
/* Submit button with blue background horizontal center*/ /* 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); color: rgb(255, 255, 255);
font-weight: bold; font-weight: bold;
letter-spacing: 1.5px; letter-spacing: 1.5px;

View File

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

View File

@@ -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_password1 = document.getElementById('error_text_password1');
const error_text_elem_password2 = document.getElementById('error_text_password2'); const error_text_elem_password2 = document.getElementById('error_text_password2');
const error_text_elem_email = document.getElementById('error_text_email'); 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_street = document.getElementById('error_text_street');
const error_text_elem_city = document.getElementById('error_text_city'); const error_text_elem_city = document.getElementById('error_text_city');
const error_text_elem_postcode = document.getElementById('error_text_postcode'); const error_text_elem_postcode = document.getElementById('error_text_postcode');
const error_text_elem_country = document.getElementById('error_text_country'); 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){ function handleError(error){
if(!error){
error_text_elem_general.textContent = "Fehler beim Registrieren";
return;
}
error = error.split("_");
console.log(error) 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(){ function submitForm(){
resetErrors();
formObj = { 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({ $.ajax({
@@ -35,7 +310,7 @@ function submitForm(){
data : formObj, data : formObj,
success: function(data) success: function(data)
{ {
if(data == 0){ if(data == "0"){
window.location.href = "/login"; window.location.href = "/login";
}else{ }else{
handleError(data); handleError(data);

View File

@@ -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 = { 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
} }

View File

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

View File

@@ -8,72 +8,84 @@
<%- include('partials/auth_header'); %> <%- include('partials/auth_header'); %>
<div class="content"> <div class="content">
<h1 class="text-center">Register</h1> <h1 class="text-center">Register</h1>
<p id="error_text_general" class="error-text"></p>
<form class="auth_form" action="" method="POST"> <form class="auth_form" action="" method="POST">
<p id="error-text"></p>
<h4>Account Informationen:</h4> <h4>Account Informationen:</h4>
<label for="username"> <label for="username">
<p>Benutzername:</p> <p>Benutzername:</p>
<input required type="text" name="username" id="username" placeholder="Geben Sie Ihren Benutzernamen ein"> <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>
<label for="email"> <label for="email">
<p>E-Mail:</p> <p>E-Mail:</p>
<input required type="email" name="email" id="email" placeholder="Geben Sie Ihre E-Mail-Adresse ein"> <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>
<label for="password1"> <label for="password1">
<p>Passwort:</p> <p>Passwort:</p>
<input required type="password" name="password1" id="password1" placeholder="Geben Sie Ihr Passwort ein"> <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>
<label for="password2"> <label for="password2">
<p>Passwort wiederholen:</p> <p>Passwort wiederholen:</p>
<input required type="password" name="password2" id="password2" placeholder="wiederholen Sie Ihr Passwort"> <input required type="password" name="password2" id="password2" placeholder="wiederholen Sie Ihr Passwort">
<p id="error_text_password2" class="error-text"></p>
</label> </label>
<h4>Persönliche Informationen:</h4> <h4>Persönliche Informationen:</h4>
<label for="firstname"> <label for="firstname">
<p>Vorname:</p> <p>Vorname:</p>
<input required type="text" name="firstname" id="firstname" placeholder="Geben Sie Ihren Vornamen ein"> <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>
<label for="lastname"> <label for="lastname">
<p>Nachname:</p> <p>Nachname:</p>
<input required type="text" name="lastname" id="lastname" placeholder="Geben Sie Ihren Nachnamen ein"> <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>
<label for="gender"> <label for="gender">
<p>Anrede (z.B. Herr, Frau):</p> <p>Anrede (z.B. Herr, Frau):</p>
<input required type="text" name="gender" id="gender" placeholder="Wie lautet Ihre Anrede?"> <input required type="text" name="gender" id="gender" placeholder="Wie lautet Ihre Anrede?">
<p id="error_text_gender" class="error-text"></p>
</label> </label>
<h4>Lieferadresse:</h4> <h4>Lieferadresse:</h4>
<label for="street"> <label for="street">
<p>Straße:</p> <p>Straße:</p>
<input required type="text" name="street" id="street" placeholder="Geben Sie Ihre Straße ein"> <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>
<label for="housenumber"> <label for="housenumber">
<p>Hausnummer:</p> <p>Hausnummer:</p>
<input required type="number" min="1" name="housenumber" id="housenumber" placeholder="Geben Sie Ihre Hausnummer ein"> <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>
<label for="postcode"> <label for="postcode">
<p>Postleitzahl:</p> <p>Postleitzahl:</p>
<input required type="text" name="postcode" id="postcode" placeholder="Geben Sie die Postleitzahl ein"> <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>
<label for="cityName"> <label for="cityName">
<p>Stadt:</p> <p>Stadt:</p>
<input required type="text" name="cityName" id="city" placeholder="Geben Sie die Stadt ein"> <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>
<label for="country"> <label for="country">
<p>Land:</p> <p>Land:</p>
<input required type="text" name="country" id="country" placeholder="Geben Sie das Land ein"> <input required type="text" name="country" id="country" placeholder="Geben Sie das Land ein">
<p id="error_text_country" class="error-text"></p>
</label> </label>
<input style="width: 40%;cursor:pointer;" type="button" value="Registrieren" onclick="submitForm()"> <input style="width: 40%;cursor:pointer;" type="button" value="Registrieren" onclick="submitForm()">