chteufleur
/
MedicalTrainingTracker
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add a modal for login.

This commit is contained in:
Geoffrey POUZET 2020-10-30 10:40:52 +01:00
parent 86e7e6f821
commit d909883f9c
2 changed files with 55 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/main/webapp/vue/base/footer.jsp
View File

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

56
src/main/webapp/vue/base/navbar.jsp
View File

@ -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>