[275] Utiliser qu'un seul format de modal. (#380)

app/views/editUser.scala.html

@@ -5,6 +5,7 @@
 
 @main(currentUser)(s"Utilisateur ${form("name").value.getOrElse("")}") {
     <link rel="stylesheet" media="screen,print" href='@routes.Assets.versioned("stylesheets/newForm.css")'>
+    <script src='@routes.Assets.versioned("javascripts/dialog.js")'></script>
 }{
     @helper.form(action = routes.UserController.editUserPost(userId), 'class -> "mdl-grid mdl-cell mdl-cell--12-col") {
         @form.value match {
@@ -52,7 +53,7 @@
     @helper.checkbox(form("disabled"), 'type -> "checkbox", 'label -> "Désactiver l'utilisateur", 'class -> "mdl-checkbox__input")
 
         @if(unused) {
-        <button class="mdl-button mdl-js-button mdl-button--raised" type="button" onclick="confirmUserDeletion()">Supprimer cet utilisateur inutilisé.</button>
+        <button class="mdl-button mdl-js-button mdl-button--raised" type="button" onclick="showDialog(document.querySelector('#dialog-delete-user'))">Supprimer cet utilisateur inutilisé.</button>
         <br>
         }
     <b>Délégations</b>
@@ -164,16 +165,26 @@
             }
         }
     </script>
-<div class="modal" id="user-deletion-modal">
-    <div class="modal-dialog">
-        <header class="modal-header">
-            Suppression d'un utilisateur inutilisé.
-        </header>
-        <section class="modal-content">Êtes-vous certain de vouloir supprimer le compte de cet utilisateur?</section>
-        <footer class="modal-footer">
-            <button id="modal-confirm-button" class="confirm-modal" aria-label="confirm modal" onclick="confirmUnusedUserDeletionModal('@userId', '@tokenName', '@tokenValue')">Confirmer</button>
-            <button id="modal-close-button" class="close-modal" aria-label="close modal" onclick="closeModal()">Annuler</button>
-        </footer>
-    </div>
-</div>
+
+    <dialog class="mdl-dialog" id="dialog-delete-user">
+        <h4 class="mdl-dialog__title">Suppression d'un utilisateur inutilisé.</h4>
+        <div class="mdl-dialog__content">
+            <b>Êtes-vous certain de vouloir supprimer le compte de cet utilisateur?</b>
+        </div>
+        <div class="mdl-dialog__actions">
+            <button type="button" class="mdl-button mdl-button--raised mdl-button--colored" onclick="confirmDeletion()">Confirmer</button>
+            <button type="button" class="mdl-button mdl-button--raised" onclick="closeDialog(document.querySelector('#dialog-delete-user'))">Annuler</button>
+        </div>
+    </dialog>
+
+    <script type="text/javascript">
+        var dialog = document.querySelector('#dialog-delete-user');
+        if (!dialog.showModal) {
+            dialogPolyfill.registerDialog(dialog);
+        }
+
+        function confirmDeletion() {
+            document.location = '@routes.UserController.deleteUnusedUserById(userId)';
+        }
+    </script>
 }

app/views/main.scala.html

@@ -23,9 +23,6 @@
         @webJarsUtil.locate("dialog-polyfill.css").css()
         @webJarsUtil.locate("dialog-polyfill.js").script()
         <script type="text/javascript" src="@routes.JavascriptController.javascriptRoutes"></script>
-
-        <script src='@routes.Assets.versioned("javascripts/modal.js")'></script>
-        <link rel="stylesheet" media="screen,print" href='@routes.Assets.versioned("stylesheets/modal.css")'>
         <style>
                 html, body {
                     max-width: 100%;

public/javascripts/dialog.js

@@ -0,0 +1,7 @@
+function closeDialog(dialog) {
+    dialog.close();
+}
+
+function showDialog(dialog) {
+    dialog.showModal();
+}