mirror of
https://github.com/DerTyp7/shop-ejs-expressjs.git
synced 2025-10-29 12:32:11 +01:00
better error handling register
This commit is contained in:
Janis M
@@ -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