Replace Change Password dialog to modal (#17116)

* 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>
phpmyadmin · Jan 30, 2022 · c388925 · c388925
1 parent 83bb5ff
commit c388925
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 21 deletions.
diff --git 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
@@ -589,7 +589,6 @@ private function setMessages(): void
             /* password generation */
             'strGeneratePassword' => __('Generate password'),
             'strGenerate' => __('Generate'),
-            'strChangePassword' => __('Change password'),
 
             /* navigation tabs */
             'strMore' => __('More'),

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