From 2304b723c5e933eec55a50974edbb1ea17d5a2b9 Mon Sep 17 00:00:00 2001
From: StockiP <philip.stockerer@icloud.com>
Date: Mon, 25 Apr 2022 19:16:16 +0200
Subject: [PATCH] added login modal

---
 components/loginModal.html | 28 ++++++++++++++++++++++++++++
 components/main_nav.html   |  4 ++--
 index.html                 |  9 +++++++--
 js/app.ts                  |  4 +++-
 4 files changed, 40 insertions(+), 5 deletions(-)
 create mode 100644 components/loginModal.html

diff --git a/components/loginModal.html b/components/loginModal.html
new file mode 100644
index 0000000..ebe2656
--- /dev/null
+++ b/components/loginModal.html
@@ -0,0 +1,28 @@
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="exampleModalLabel">MarmeladenLaden Login</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <form>
+                    <div class="mb-3">
+                        <label class="form-label">Email Address</label>
+                        <input type="text" class="form-control" id="username" name="username" placeholder="Username" />
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">Password</label>
+                        <input type="password" class="form-control" id="password" name="password" placeholder="Password" />
+                    </div>
+                    <div class="mb-3 form-check">
+                        <input type="checkbox" class="form-check-input" id="rememberMe" />
+                        <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>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
\ No newline at end of file
diff --git a/components/main_nav.html b/components/main_nav.html
index 1ffd973..77f1781 100644
--- a/components/main_nav.html
+++ b/components/main_nav.html
@@ -41,9 +41,9 @@
                 <i class="fa fa-fw fa-cart-arrow-down text-dark mr-1"></i>
                 <span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark">7</span>
             </a>
-            <a class="nav-icon position-relative text-decoration-none" href="#">
+            <a class="nav-icon position-relative text-decoration-none" href="#" data-bs-toggle="modal" data-bs-target="#marmeladenladenLogin">
                 <i class="fa fa-fw fa-user text-dark mr-3"></i>
-                <span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark">+99</span>
+                <span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark"></span>
             </a>
         </div>
     </div>
diff --git a/index.html b/index.html
index bfa3147..5f704ee 100644
--- a/index.html
+++ b/index.html
@@ -29,10 +29,15 @@
 
     </nav>
     <!-- End Main Navbar-->
-    <!-- Start Modal-->
+
+    <!-- Start Login Modal -->
+    <div class="modal fade" id="marmeladenladenLogin" tabindex="-1" role="dialog" 
+        aria-labelledby="exampleModalLabel" aria-hidden="true">
+    </div>
+    <!--End Login Modal-->
+    <!-- Start Search Modal-->
     <div class="modal fade bg-white" id="marmeladenladen_search" tabindex="-1" role="dialog"
         aria-labelledby="exampleModalLabel" aria-hidden="true">
-
     </div>
     <!-- End Modal-->
 
diff --git a/js/app.ts b/js/app.ts
index 9368d9b..0957fab 100644
--- a/js/app.ts
+++ b/js/app.ts
@@ -5,4 +5,6 @@ $(document).ready(function() {
     $('#mmlMainContent').load('../components/ftProducts.html');
     $('#marmeladenladen_footer').load('../components/footer.html');
     $('#marmeladenladen_search').load('../components/modal.html');
-});
\ No newline at end of file
+    $('#marmeladenladenLogin').load('../components/loginModal.html');
+});
+