From c3889257cf7a09615d317ec4bb177b87a0bd2e5e Mon Sep 17 00:00:00 2001
From: Shucon Tech <85239205+shucontech@users.noreply.github.com>
Date: Mon, 31 Jan 2022 02:40:20 +0530
Subject: [PATCH] Replace Change Password dialog to modal (#17116)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Replace Change Password dialog to modal

Signed-off-by: Saksham Gupta <shucontech@gmail.com>

* Bootstrap modal class

Signed-off-by: Saksham Gupta <shucontech@gmail.com>

* Fix failing tests

Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>

Co-authored-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
---
 js/src/functions.js                           | 25 ++++---------------
 .../JavaScriptMessagesController.php          |  1 -
 templates/header.twig                         |  1 +
 templates/modals/change_password.twig         | 15 +++++++++++
 4 files changed, 21 insertions(+), 21 deletions(-)
 create mode 100644 templates/modals/change_password.twig

diff --git a/js/src/functions.js b/js/src/functions.js
index b66fe521fd..49a839db2d 100644
--- a/js/src/functions.js
+++ b/js/src/functions.js
@@ -2762,11 +2762,7 @@ AJAX.registerOnload('functions.js', function () {
 
         var $msgbox = Functions.ajaxShowMessage();
 
-        /**
-         * @var button_options  Object containing options to be passed to jQueryUI's dialog
-         */
-        var buttonOptions = {};
-        buttonOptions[Messages.strGo] = function () {
+        $('#changePasswordGoButton').on('click', function () {
             event.preventDefault();
 
             /**
@@ -2801,11 +2797,9 @@ AJAX.registerOnload('functions.js', function () {
                 $('#edit_user_dialog').dialog('close').remove();
                 Functions.ajaxRemoveMessage($msgbox);
             }); // end $.post()
-        };
+            $('#changePasswordModal').modal('hide');
+        });
 
-        buttonOptions[Messages.strCancel] = function () {
-            $(this).dialog('close');
-        };
         $.get($(this).attr('href'), { 'ajax_request': true }, function (data) {
             if (typeof data === 'undefined' || !data.success) {
                 Functions.ajaxShowMessage(data.error, false);
@@ -2816,18 +2810,9 @@ AJAX.registerOnload('functions.js', function () {
                 AJAX.scriptHandler.load(data.scripts);
             }
 
-            $('<div id="change_password_dialog"></div>')
-                .dialog({
-                    title: Messages.strChangePassword,
-                    width: 600,
-                    close: function () {
-                        $(this).remove();
-                    },
-                    buttons: buttonOptions,
-                    modal: true
-                })
-                .append(data.message);
             // for this dialog, we remove the fieldset wrapping due to double headings
+            $('#changePasswordModal').modal('show');
+            $('#changePasswordModal').find('.modal-body').first().html(data.message);
             $('fieldset#fieldset_change_password')
                 .find('legend').remove().end()
                 .find('table.table').unwrap().addClass('m-3')
diff --git a/libraries/classes/Controllers/JavaScriptMessagesController.php b/libraries/classes/Controllers/JavaScriptMessagesController.php
index bbb2750259..978c837d10 100644
--- a/libraries/classes/Controllers/JavaScriptMessagesController.php
+++ b/libraries/classes/Controllers/JavaScriptMessagesController.php
@@ -589,7 +589,6 @@ final class JavaScriptMessagesController
             /* password generation */
             'strGeneratePassword' => __('Generate password'),
             'strGenerate' => __('Generate'),
-            'strChangePassword' => __('Change password'),
 
             /* navigation tabs */
             'strMore' => __('More'),
diff --git a/templates/header.twig b/templates/header.twig
index 3291534234..963d5f0044 100644
--- a/templates/header.twig
+++ b/templates/header.twig
@@ -55,3 +55,4 @@
     {{ include('modals/preview_sql_modal.twig') }}
     {{ include('modals/enum_set_editor.twig') }}
     {{ include('modals/create_view.twig') }}
+    {{ include('modals/change_password.twig') }}
diff --git a/templates/modals/change_password.twig b/templates/modals/change_password.twig
new file mode 100644
index 0000000000..e86beb5204
--- /dev/null
+++ b/templates/modals/change_password.twig
@@ -0,0 +1,15 @@
+<div class="modal fade" id="changePasswordModal" tabindex="-1" aria-labelledby="changePasswordModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-lg" id="changePasswordModalDialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="changePasswordModalLabel">{% trans 'Change password' %}</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
+      </div>
+      <div class="modal-body"></div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" id="changePasswordGoButton">{% trans 'Go' %}</button>
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans 'Cancel' %}</button>
+      </div>
+    </div>
+  </div>
+</div>