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

docs/en_US/release_notes_6_13.rst

@@ -17,6 +17,7 @@ Housekeeping
   | `Issue #7344 <https://redmine.postgresql.org/issues/7344>`_ -  Port Role Reassign dialog to React.
   | `Issue #7462 <https://redmine.postgresql.org/issues/7462>`_ -  Remove the SQL files for the unsupported versions of the database server.
   | `Issue #7567 <https://redmine.postgresql.org/issues/7567>`_ -  Port About dialog to React.
+  | `Issue #7568 <https://redmine.postgresql.org/issues/7568>`_ -  Port change user password and 2FA dialog to React.
   | `Issue #7590 <https://redmine.postgresql.org/issues/7590>`_ -  Port change ownership dialog to React.
   | `Issue #7595 <https://redmine.postgresql.org/issues/7595>`_ -  Update the container base image to Alpine 3.16 (with Python 3.10.5).
 

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"
+                        <a class="dropdown-item" href="#" role="menuitem" onclick="pgAdmin.Browser.UserManagement.show_mfa(
-                           onclick="javascript:pgAdmin.ui.dialogs.url_dialog(
+                          '{{ login_url("mfa.register", next_url="internal") }}'
-                             '{{ _("Authentiction") }}',
+                        )">{{ _('Two-Factor Authentication') }}</a>
-                             '{{ login_url("mfa.register", next_url="internal") }}',
-                             'mfa.html', '90%', '90%'
-                           );">{{ _('Two-Factor Authentication') }}</a>
                     </li>
                     <li class="dropdown-divider"></li>
                     {% endif %}

web/pgadmin/static/js/Dialogs/UrlDialogContent.jsx

@@ -0,0 +1,54 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2022, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import gettext from 'sources/gettext';
+import url_for from 'sources/url_for';
+
+import { Box } from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/CloseRounded';
+import HelpIcon from '@material-ui/icons/Help';
+
+import { DefaultButton, PgIconButton } from '../components/Buttons';
+import { useModalStyles } from '../helpers/ModalProvider';
+
+export default function UrlDialogContent({ url, helpFile, onClose }) {
+  const classes = useModalStyles();
+
+  return (
+    <Box display="flex" flexDirection="column" height="100%" className={classes.container}>
+      <Box flexGrow="1">
+        <iframe src={url} width="100%" height="100%" onLoad={(e)=>{
+          e.target?.contentWindow?.focus();
+        }}/>
+      </Box>
+      <Box className={classes.footer}>
+        <Box style={{ marginRight: 'auto' }}>
+          <PgIconButton data-test={'help-'+helpFile} title={gettext('Help')} icon={<HelpIcon />} onClick={() => {
+            let _url = url_for('help.static', {
+              'filename': helpFile,
+            });
+            window.open(_url, 'pgadmin_help');
+          }} >
+          </PgIconButton>
+        </Box>
+        <DefaultButton data-test="close" startIcon={<CloseIcon />} onClick={() => {
+          onClose();
+        }} >{gettext('Close')}</DefaultButton>
+      </Box>
+    </Box>
+  );
+}
+
+UrlDialogContent.propTypes = {
+  url: PropTypes.string,
+  helpFile: PropTypes.string,
+  onClose: PropTypes.func,
+};

web/pgadmin/static/js/Dialogs/index.jsx

@@ -21,16 +21,17 @@ import MasterPasswordContent from './MasterPasswordContent';
 import ChangePasswordContent from './ChangePasswordContent';
 import NamedRestoreContent from './NamedRestoreContent';
 import ChangeOwnershipContent from './ChangeOwnershipContent';
+import UrlDialogContent from './UrlDialogContent';
 
-function mountDialog(title, getDialogContent, docker=undefined) {
+function mountDialog(title, getDialogContent, docker=undefined, width, height) {
   // Register dialog panel
   var panel;
   if (docker) {
     pgAdmin.Browser.Node.registerUtilityPanel(docker);
-    panel = pgAdmin.Browser.Node.addUtilityPanel(pgAdmin.Browser.stdW.md, undefined, docker);
+    panel = pgAdmin.Browser.Node.addUtilityPanel(width||pgAdmin.Browser.stdW.md, height||undefined, docker);
   } else {
     pgAdmin.Browser.Node.registerUtilityPanel();
-    panel = pgAdmin.Browser.Node.addUtilityPanel(pgAdmin.Browser.stdW.md);
+    panel = pgAdmin.Browser.Node.addUtilityPanel(width||pgAdmin.Browser.stdW.md);
   }
 
   var j = panel.$container.find('.obj_properties').first();
@@ -54,7 +55,7 @@ function mountDialog(title, getDialogContent, docker=undefined) {
     panel._parent.__update();
   };
 
-  ReactDOM.render(getDialogContent(onClose, setNewSize), j[0]);
+  ReactDOM.render(getDialogContent(onClose, setNewSize, panel), j[0]);
 }
 
 // This functions is used to show the connect server password dialog.
@@ -347,3 +348,17 @@ export function showChangeOwnership() {
   { isFullScreen: false, isResizeable: true, showFullScreen: true, isFullWidth: true,
     dialogWidth: pgAdmin.Browser.stdW.md, dialogHeight: pgAdmin.Browser.stdH.md});
 }
+
+export function showUrlDialog() {
+  let title = arguments[0],
+    url = arguments[1],
+    helpFile = arguments[2],
+    width = arguments[3],
+    height = arguments[4];
+
+  Notify.showModal(title, (onClose) => {
+    return <UrlDialogContent url={url} helpFile={helpFile} onClose={onClose} />;
+  },
+  { isFullScreen: false, isResizeable: true, showFullScreen: true, isFullWidth: true,
+    dialogWidth: width || pgAdmin.Browser.stdW.md, dialogHeight: height || pgAdmin.Browser.stdH.md});
+}

web/pgadmin/templates/security/change_password.html

@@ -4,8 +4,7 @@
 <div class="container-fluid change_pass auth_page">
     {% include "security/messages.html" %}
     <div class="row align-items-center h-100">
-        <div class="col-md-4"></div>
+        <div class="col-md-4 mx-md-auto mx-sm-5 mx-xs-5">
-        <div class="col-md-4">
             <div class="panel-header h4"><i class="app-icon pg-icon-blue" aria-hidden="true"></i> {{ _('%(appname)s', appname=config.APP_NAME) }}</div>
             <div class="panel-body">
                 <div class="d-block text-color pb-3 h5">{{ _('Password Change') }}</div>

web/pgadmin/tools/user_management/static/js/user_management.js

@@ -8,16 +8,16 @@
 //////////////////////////////////////////////////////////////
 
 import Notify from '../../../../static/js/helpers/Notifier';
-import { showChangeOwnership } from '../../../../static/js/Dialogs/index';
+import { showChangeOwnership, showUrlDialog } from '../../../../static/js/Dialogs/index';
 
 define([
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore', 'pgadmin.alertifyjs',
   'pgadmin.browser', 'backbone', 'backgrid', 'backform', 'pgadmin.browser.node', 'pgadmin.backform',
   'pgadmin.user_management.current_user', 'sources/utils', 'pgadmin.browser.constants',
-  'pgadmin.browser.dialog','backgrid.select.all', 'backgrid.filter',
+  'backgrid.select.all', 'backgrid.filter',
 ], function(
   gettext, url_for, $, _, alertify, pgBrowser, Backbone, Backgrid, Backform,
-  pgNode, pgBackform, userInfo, commonUtils, pgConst, pgDialog,
+  pgNode, pgBackform, userInfo, commonUtils, pgConst,
 ) {
 
   // if module is already initialized, refer to that.
@@ -90,9 +90,11 @@ define([
 
     // Callback to draw change password Dialog.
     change_password: function(url) {
-      pgDialog.url_dialog(
+      showUrlDialog(gettext('Change Password'), url, 'change_user_password.html', undefined, pgBrowser.stdH.lg);
-        gettext('Change Password'), url, 'change_user_password.html',
+    },
-      );
+
+    show_mfa: function(url) {
+      showUrlDialog(gettext('Authentication'), url, 'mfa.html', 1200, 680);
     },
 
     is_editable: function(m) {

web/webpack.shim.js

@@ -194,7 +194,6 @@ var webpackShimConfig = {
     'pgadmin.browser.activity': path.join(__dirname, './pgadmin/browser/static/js/activity'),
     'pgadmin.browser.quick_search': path.join(__dirname, './pgadmin/browser/static/js/quick_search'),
     'pgadmin.browser.messages': '/browser/js/messages',
-    'pgadmin.browser.dialog': path.join(__dirname, './pgadmin/browser/static/js/dialog'),
     'pgadmin.browser.node': path.join(__dirname, './pgadmin/browser/static/js/node'),
     'pgadmin.browser.node.ui': path.join(__dirname, './pgadmin/browser/static/js/node.ui'),
     'pgadmin.browser.panel': path.join(__dirname, './pgadmin/browser/static/js/panel'),