Form logic for user deletion

bds/templates/bds/user_update.html

@@ -15,19 +15,90 @@
 <h1 class="title">{% trans "Modification du profil " %}{{ view.user.username }}</h1>
 
 <div class="container">
-  <form action="" method="post">
+  <form method="post" action="" id="user-update-form">
     {% csrf_token %}
 
     {% for form in forms.values %}
       {% include "bds/forms/form.html" with form=form errors=False %}
     {% endfor %}
-
-    <div class="field">
-      <p class="control">
-        <input class="button is-fullwidth" type="submit" value="Enregistrer">
-      </p>
-    </div>
   </form>
+
+  <form method="post" action="{% url 'bds:user.delete' view.user.pk %}" id="user-delete-form">
+    {% csrf_token %}
+  </form>
+  
+  <div class="columns is-gapless mt-5">
+    <div class="column is-5">
+      <button id="user-update-button" class="button is-fullwidth is-primary">Enregistrer</button>
+    </div>
+    <div class="column is-2">
+    </div>
+    <div class="column is-5">
+      <button id="user-delete-button" class="button is-fullwidth is-danger">Supprimer</button>
+    </div>
+  </div>
 </div>
 
+<!-- Hidden by default -->
+<div id="confirm-delete-modal" class="modal">
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Confirmer la suppression</p>
+      <button id= "modal-close" class="delete" aria-label="close"></button>
+    </header>
+    <section class="modal-card-body">
+      Voulez-vous réellement supprimer ce compte ? Attention, cette opération est irréversible !
+    </section>
+    <footer class="modal-card-foot">
+      <button id="confirm-delete-button" class="button is-primary">Supprimer</button>
+      <button id="cancel-delete-button" class="button">Annuler</button>
+    </footer>
+  </div>
+</div>
+
+<script type="text/javascript">
+  $(document).ready(function() {
+    "use strict";
+
+    // Adapted from https://bulma.io/lib/main.js
+    function openModal(target) {
+      $(document).addClass('is-clipped');
+      $(`#${target}`).addClass('is-active');
+    }
+
+    function closeModals() {
+      $(document).removeClass('is-clipped');
+      $(".modal").removeClass('is-active');
+    }
+
+    // Si on clique sur enregistrer, ça marche
+    $("#user-update-button").on("click", function() {
+      $("#user-update-form").submit();
+    })
+
+    // Si on clique sur supprimer, confirmation demandée
+    $("#user-delete-button").on("click", function () {
+      openModal("confirm-delete-modal");
+    });
+
+    $(".modal-background, #modal-close, #cancel-delete-user").on("click", closeModals);
+
+    $("#confirm-delete-button").on("click", function() {
+      $("#user-delete-form").submit();
+    });
+
+    $(document).on("keydown", function (e) {
+      if (e.key == "Escape") {
+        closeModals();
+      }
+
+      if (e.key == "Enter") {
+        $("#user-update-form").submit();
+      }
+    });
+
+  });
+</script>
+
 {% endblock %}