Port change user password and 2FA dialog to React. Fixes #7568

web/pgadmin/browser/static/js/browser.js

@@ -22,7 +22,7 @@ define('pgadmin.browser', [
   'pgadmin.browser.menu', 'pgadmin.browser.panel', 'pgadmin.browser.layout',
   'pgadmin.browser.runtime', 'pgadmin.browser.error', 'pgadmin.browser.frame',
   'pgadmin.browser.node', 'pgadmin.browser.collection', 'pgadmin.browser.activity',
-  'sources/codemirror/addon/fold/pgadmin-sqlfoldcode', 'pgadmin.browser.dialog',
+  'sources/codemirror/addon/fold/pgadmin-sqlfoldcode',
   'pgadmin.browser.keyboard', 'sources/tree/pgadmin_tree_save_state'
 ], function(
   gettext, url_for, require, $, _,

web/pgadmin/browser/static/js/dialog.js

@@ -1,109 +0,0 @@
-/////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2022, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////
-
-import gettext from 'sources/gettext';
-import * as alertify from 'pgadmin.alertifyjs';
-import url_for from 'sources/url_for';
-import pgAdmin from 'sources/pgadmin';
-
-let counter = 1;
-
-function url_dialog(_title, _url, _help_filename, _width, _height) {
-
-  let pgBrowser = pgAdmin.Browser;
-
-  const dlgName = 'UrlDialog' + counter++;
-
-  alertify.dialog(dlgName, function factory() {
-    return {
-      main: function(_tmptitle) {
-        this.set({'title': _tmptitle});
-      },
-      build: function() {
-        alertify.pgDialogBuild.apply(this);
-      },
-      settings: {
-        url: _url,
-        title: _title,
-      },
-      setup: function() {
-        return {
-          buttons: [{
-            text: '',
-            key: 112,
-            className: 'btn btn-primary-icon pull-left fa fa-question pg-alertify-icon-button',
-            attrs: {
-              name: 'dialog_help',
-              type: 'button',
-              label: _title,
-              url: url_for('help.static', {
-                'filename': _help_filename,
-              }),
-            },
-          }, {
-            text: gettext('Close'),
-            key: 27,
-            className: 'btn btn-secondary fa fa-lg fa-times pg-alertify-button',
-            attrs: {
-              name: 'close',
-              type: 'button',
-            },
-          }],
-          // Set options for dialog
-          options: {
-            //disable both padding and overflow control.
-            padding: !1,
-            overflow: !1,
-            modal: false,
-            resizable: true,
-            maximizable: true,
-            pinnable: false,
-            closableByDimmer: false,
-            closable: false,
-          },
-        };
-      },
-      hooks: {
-        // Triggered when the dialog is closed
-        onclose: function() {
-          // Clear the view
-          return setTimeout((function() {
-            return (alertify[dlgName]()).destroy();
-          }), 1000);
-        },
-      },
-      prepare: function() {
-        // create the iframe element
-        var iframe = document.createElement('iframe');
-        iframe.frameBorder = 'no';
-        iframe.width = '100%';
-        iframe.height = '100%';
-        iframe.src = this.setting('url');
-        // add it to the dialog
-        this.elements.content.appendChild(iframe);
-      },
-      callback: function(e) {
-        if (e.button.element.name == 'dialog_help') {
-          e.cancel = true;
-          pgBrowser.showHelp(
-            e.button.element.name, e.button.element.getAttribute('url'),
-            null, null
-          );
-        }
-      },
-    };
-  });
-  (alertify[dlgName](_title)).show().resizeTo(_width || pgBrowser.stdW.lg, _height || pgBrowser.stdH.md);
-}
-
-pgAdmin.ui.dialogs.url_dialog = url_dialog;
-
-export {
-  url_dialog,
-};

web/pgadmin/browser/templates/browser/index.html

@@ -154,12 +154,9 @@ window.onload = function(e){
                     {% endif %}
                     {% if mfa_enabled is defined and mfa_enabled is true %}
                     <li>
-                        <a class="dropdown-item" href="#" role="menuitem"
-                           onclick="javascript:pgAdmin.ui.dialogs.url_dialog(
-                             '{{ _("Authentiction") }}',
-                             '{{ login_url("mfa.register", next_url="internal") }}',
-                             'mfa.html', '90%', '90%'
-                           );">{{ _('Two-Factor Authentication') }}</a>
+                        <a class="dropdown-item" href="#" role="menuitem" onclick="pgAdmin.Browser.UserManagement.show_mfa(
+                          '{{ login_url("mfa.register", next_url="internal") }}'
+                        )">{{ _('Two-Factor Authentication') }}</a>
                     </li>
                     <li class="dropdown-divider"></li>
                     {% endif %}