From 4e646b38584266da7064ea50225daa59751d390e Mon Sep 17 00:00:00 2001
From: StockiP <philip.stockerer@icloud.com>
Date: Tue, 26 Apr 2022 17:54:09 +0200
Subject: [PATCH] added login modal and registration modal

---
 components/loginModal.html    |  4 +-
 components/registerModal.html | 69 +++++++++++++++++++++++++++++++++++
 index.html                    |  6 +++
 js/app.js                     | 11 ++++++
 js/app.ts                     |  1 +
 5 files changed, 89 insertions(+), 2 deletions(-)
 create mode 100644 components/registerModal.html
 create mode 100644 js/app.js

diff --git a/components/loginModal.html b/components/loginModal.html
index ebe2656..ed11e47 100644
--- a/components/loginModal.html
+++ b/components/loginModal.html
@@ -19,8 +19,8 @@
                         <label class="form-check-label" for="rememberMe">Remember me</label>
                     </div>
                     <div class="modal-footer d-block">
-                        <p class="float-start">Not yet registered? <a href="#">Sign Up</a></p>
-                        <button type="submit" class="btn btn-success float-end">Login</button>
+                        <button type="button" class="btn btn-secondary float-start" id="RegisterButton" data-bs-target="#marmeladenladenRegister" data-bs-toggle="modal" data-bs-dismiss="modal">Register</button>
+                        <button type="submit" class="btn btn-success float-end" id="LoginButton">Login</button>
                     </div>
                 </form>
             </div>
diff --git a/components/registerModal.html b/components/registerModal.html
new file mode 100644
index 0000000..35ae085
--- /dev/null
+++ b/components/registerModal.html
@@ -0,0 +1,69 @@
+<div class="modal-dialog">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h5 class="modal-title" id="exampleModalLabel">Registrieren Sie sich!</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body container registerform">
+            <form>
+                <div class="row">
+                    <div class="col-3">
+                        <select name="salutation" id="salutation">
+                                    <option disabled selected value="0" style="display:none">Anrede</option>
+                                    <option value="1">Frau</option>
+                                    <option value="2">Herr</option>
+                        </select>
+                    </div>
+                    <div class="col-4">
+                        <input type="text" class="form-control" name="firstname" id="firstname" placeholder="Vorname" required>
+                    </div>
+                    <div class="col-5">
+                        <input type="text" class="form-control" name="lastname" id="lastname" placeholder="Nachname" required>
+                    </div>
+                </div>
+                <div class="row" id="address">
+                    <div class="col-12">
+                        <input type="text" class="form-control" name="street" id="street" placeholder="Straße" required>
+                    </div>
+                <div>
+                <div class="row">
+                    <div class="col-4">
+                        <input type="text" class="form-control" name="zip" id="zip" placeholder="PLZ" required>
+                    </div>
+                    <div class="col-8">
+                        <input type="text" class="form-control" name="city" id="city" placeholder="Stadt" required>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-12">
+                        <input type="text" class="form-control" name="country" id="country" placeholder="Land" required>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-12">
+                        <input type="email" class="form-control" name="email" id="email" placeholder="E-Mail" required>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-12">
+                        <input type="password" class="form-control" name="password" id="password" placeholder="Passwort" required>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-12">
+                        <input type="password" class="form-control" name="password2" id="password2" placeholder="Passwort wiederholen" required>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-12">
+                        <input type="text" class="form-control" name="phone" id="phone" placeholder="Telefon" required>
+                    </div>
+                </div>
+                <div class="modal-footer d-block">
+                    <button type="button" class="btn btn-secondary float-start" id="cancelButton" data-bs-target="#marmeladenladenLogin" data-bs-toggle="modal" data-bs-dismiss="modal">Cancel</button>
+                    <button type="submit" class="btn btn-success float-end" id="registration" >Registrieren</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/index.html b/index.html
index 5f704ee..6171cf4 100644
--- a/index.html
+++ b/index.html
@@ -30,6 +30,12 @@
     </nav>
     <!-- End Main Navbar-->
 
+
+    <!-- Start Registration Modal-->
+    <div class="modal fade" id="marmeladenladenRegister" tabindex="-1" role="dialog" 
+        aria-labelledby="exampleModalLabel" aria-hidden="true">
+    </div>
+    <!--End Registration Modal-->
     <!-- Start Login Modal -->
     <div class="modal fade" id="marmeladenladenLogin" tabindex="-1" role="dialog" 
         aria-labelledby="exampleModalLabel" aria-hidden="true">
diff --git a/js/app.js b/js/app.js
new file mode 100644
index 0000000..e407a76
--- /dev/null
+++ b/js/app.js
@@ -0,0 +1,11 @@
+"use strict";
+$(document).ready(function () {
+    $('#top_nav_bar').load('../components/top_nav.html');
+    $('#main_nav_bar').load('../components/main_nav.html');
+    $('#mmlcarousel').load('../components/banner.html');
+    $('#mmlMainContent').load('../components/ftProducts.html');
+    $('#marmeladenladen_footer').load('../components/footer.html');
+    $('#marmeladenladen_search').load('../components/modal.html');
+    $('#marmeladenladenLogin').load('../components/loginModal.html');
+    $('#marmeladenladenRegister').load('../components/registerModal.html');
+});
diff --git a/js/app.ts b/js/app.ts
index 0957fab..621643d 100644
--- a/js/app.ts
+++ b/js/app.ts
@@ -6,5 +6,6 @@ $(document).ready(function() {
     $('#marmeladenladen_footer').load('../components/footer.html');
     $('#marmeladenladen_search').load('../components/modal.html');
     $('#marmeladenladenLogin').load('../components/loginModal.html');
+    $('#marmeladenladenRegister').load('../components/registerModal.html');
 });