From d909883f9c0e9e3284032ba4968760522dfbd843 Mon Sep 17 00:00:00 2001
From: Geoffrey POUZET <chteufleur@kingpenguin.tk>
Date: Fri, 30 Oct 2020 10:40:52 +0100
Subject: [PATCH] Add a modal for login.

---
 src/main/webapp/vue/base/footer.jsp |  5 ---
 src/main/webapp/vue/base/navbar.jsp | 56 ++++++++++++++++++++++++++++-
 2 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/src/main/webapp/vue/base/footer.jsp b/src/main/webapp/vue/base/footer.jsp
index 97f0a47..1351790 100644
--- a/src/main/webapp/vue/base/footer.jsp
+++ b/src/main/webapp/vue/base/footer.jsp
@@ -1,10 +1,5 @@
-<spring:url value="/static/js/jquery.js" var="jQueryJS" />
-<spring:url value="/static/bootstrap/js/bootstrap.min.js" var="bootstrapJS" />
 <spring:url value="/static/img/logo.svg" var="logo" />
 
-<script src="${jQueryJS}"></script>
-<script src="${bootstrapJS}"></script>
-
 
 <!-- Bootstrap core JavaScript
 ================================================== -->
diff --git a/src/main/webapp/vue/base/navbar.jsp b/src/main/webapp/vue/base/navbar.jsp
index 7ac66af..b518e6c 100644
--- a/src/main/webapp/vue/base/navbar.jsp
+++ b/src/main/webapp/vue/base/navbar.jsp
@@ -5,6 +5,9 @@
 
 <spring:url value="/static/img/logo.svg" var="logo" />
 <spring:url value="/static/img/multiple-species-paw-solid.svg" var="pawsSVG" />
+<spring:url value="/static/js/jquery.js" var="jQueryJS" />
+<spring:url value="/static/bootstrap/js/bootstrap.min.js" var="bootstrapJS" />
+
 <spring:url value="/" var="indexURL" />
 <spring:url value="/animal" var="animalURL" />
 <spring:url value="/login" var="loginURL" />
@@ -43,7 +46,7 @@
             </ul>
             <ul class="nav navbar-nav navbar-right">
                 <% if (authentication == null) { %>
-                <li><a href="${loginURL}"><span class="glyphicon glyphicon-log-in"></span> <fmt:message key="navbar.signin"></fmt:message></a></li>
+                <li><a id="navbar_button_signin" href="${loginURL}"><span class="glyphicon glyphicon-log-in"></span> <fmt:message key="navbar.signin"></fmt:message></a></li>
                 <li><a href="${registerURL}"><span class="glyphicon glyphicon-user"></span> <fmt:message key="navbar.signup"></fmt:message></a></li>
                             <% } else { %>
                 <li <c:if test="${MODEL_MAP_NAVBAR_PAGE == 'MODEL_MAP_NAVBAR_PAGE_VALUE_MY_ANIMALS'}">class="active"</c:if>>
@@ -62,3 +65,54 @@
         </div>
     </div>
 </nav>
+
+
+
+<div id="modal_navbar_signin" class="modal fade" role="dialog">
+    <div class="modal-dialog">
+
+        <!-- Modal content-->
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal">&times;</button>
+                <h4 id="modal_edit_animal_title" class="modal-title"><fmt:message key="authentication.title"></fmt:message></h4>
+            </div>
+            <div class="modal-body">
+                <form id="modal_navbar_signin_form" class="form-signin" action="${loginURL}" method="POST">
+                    <label for="username"><fmt:message key="authentication.label.login"></fmt:message></label>
+                    <input type="text" id="username" name="username" class="form-control" placeholder="<fmt:message key="authentication.placeholder.login"></fmt:message>" required autofocus />
+
+                    <label for="username"><fmt:message key="authentication.label.password"></fmt:message></label>
+                    <input type="password" id="inputPassword" name="password" class="form-control" placeholder="<fmt:message key="authentication.placeholder.password"></fmt:message>" required />
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button form="modal_navbar_signin_form" class="btn btn-lg btn-primary btn-block" type="submit"><fmt:message key="authentication.button.submit"></fmt:message></button>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+
+<script src="${jQueryJS}"></script>
+<script src="${bootstrapJS}"></script>
+
+<script type="text/javascript">
+    $(document).ready(function () {
+        try {
+            $('#navbar_button_signin').click(function() {
+                $('#modal_navbar_signin').modal({
+                    show: true
+                });
+                setTimeout(function() {
+                    $('#username').focus();
+                }, 200);
+                return false;
+            });
+        } catch (err) {
+            console.log("Signin button not found");
+            console.log(err);
+        }
+    });
+</script>
\ No newline at end of file