Add confirmation popup on delete animal.

src/main/resources/messages.properties

@@ -30,3 +30,6 @@ authentication.placeholder.login=Username
 authentication.label.password=Password:
 authentication.placeholder.password=Password
 authentication.button.submit=Login
+animal_list.delete.modal_body=Do you want to delete this animal?
+animal_list.delete.modal_button_yes=Yes
+animal_list.delete.modal_button_no=No

src/main/resources/messages_en.properties

@@ -30,3 +30,6 @@ authentication.placeholder.login=Username
 authentication.label.password=Password:
 authentication.placeholder.password=Password
 authentication.button.submit=Login
+animal_list.delete.modal_body=Do you want to delete this animal?
+animal_list.delete.modal_button_yes=Yes
+animal_list.delete.modal_button_no=No

src/main/resources/messages_fr.properties

@@ -30,3 +30,6 @@ authentication.placeholder.login=Nom d'utilisateur
 authentication.label.password=Mot de passe :
 authentication.placeholder.password=Mot de passe
 authentication.button.submit=Connexion
+animal_list.delete.modal_body=Voulez-vous vraiment supprimer cet animal ?
+animal_list.delete.modal_button_yes=Oui
+animal_list.delete.modal_button_no=Non

src/main/webapp/vue/animal_list.jsp

@@ -41,20 +41,21 @@
                             <a class="list-group-item" href="${animalURL}/${animal.getId()}/cares_and_behaviors">
                                 ${animal.getName()}
                                 <form class="pull-right" action="${animalDeleteURL}/${animal.getId()}" method="POST">
+                                    <input value="${animal.getName()}" hidden />
                                     <button class="btn btn-xs btn-danger" type="submit" data-toggle="tooltip" data-placement="bottom" title="Suppression"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
                                 </form>
                             </a>
-<!--                            <div class="list-group-item">
+                            <!--                            <div class="list-group-item">
-                                ${animal.getName()}
+                            ${animal.getName()}
-                                <form class="pull-right" action="${animalDeleteURL}/${animal.getId()}" method="POST">
+                            <form class="pull-right" action="${animalDeleteURL}/${animal.getId()}" method="POST">
-                                    <button class="btn btn-sm btn-danger" type="submit" data-toggle="tooltip" data-placement="bottom" title="Suppression"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
+                                <button class="btn btn-sm btn-danger" type="submit" data-toggle="tooltip" data-placement="bottom" title="Suppression"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
-                                </form>
+                            </form>
-                            </div>-->
+                        </div>-->
                         </c:forEach>
                     </div>
 
                     <hr/>
-                    
+
                     <h4>Ajouter un animal</h4>
                     <form id="addAnimalForm" class="form-inline" action="${animalURL}" method="POST">
                         <div class="form-group">
@@ -68,7 +69,7 @@
                 </div>
                 <div class="col-lg-5">
                     <h4>Changer de mot de passe</h4>
-                    <form id="addAnimalForm" action="${changePasswordURL}" method="POST">
+                    <form id="changePasswordForm" action="${changePasswordURL}" method="POST">
                         <div class="form-group">
                             <label for="old_password">Ancien mot de passe :</label>
                             <input type="password" id="old_password" name="old_password" class="form-control" placeholder="Ancien mot de passe" required/>
@@ -94,11 +95,51 @@
 
             <%@ include file="base/footer.jsp" %>
         </div>
-    </body>
 
-    <script type="text/javascript">
+
-        $(document).ready(function () {
+        <div id="modal_delete_animal" class="modal fade" role="dialog">
-            $('[data-toggle="tooltip"]').tooltip();
+            <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_delete_animal_title" class="modal-title">Animal name</h4>
+                    </div>
+                    <div class="modal-body">
+                        <p id="modal_delete_animal_body"><fmt:message key="animal_list.delete.modal_body"></fmt:message></p>
+                        </div>
+                        <div class="modal-footer">
+                            <form id="modal_delete_animal_validate_delete" class="pull-right" action="" method="POST">
+                            <button type="submit" class="btn btn-danger"><fmt:message key="animal_list.delete.modal_button_yes"></fmt:message></button>
+                            </form>
+                            <button type="button" class="btn btn-default" data-dismiss="modal"><fmt:message key="animal_list.delete.modal_button_no"></fmt:message></button>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </body>
+
+        <script type="text/javascript">
+            $(document).ready(function () {
+                $('[data-toggle="tooltip"]').tooltip();
+
+                $("form").submit(function (event) {
+                    if ($(this).attr('id') !== 'modal_delete_animal_validate_delete') {
+                        var formUrl = $(this).attr('action');
+                        if (formUrl.startsWith('${animalDeleteURL}')) {
+                            // Only for deleting animal forms
+                            var animalName = $(this).find('input')[0].value;
+                            $('#modal_delete_animal_title').text(animalName);
+                            $('#modal_delete_animal_validate_delete').attr('action', formUrl);
+                            $('#modal_delete_animal').modal({
+                                show: true
+                            });
+                            event.preventDefault();
+                        }
+                    }
+                });
+            });
     </script>
 </html>