IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-02-25 18:55:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Aditya Toshniwal 2022-08-10 17:59:07 +05:30 committed by Akshay Joshi
parent 5e4d3cc535
commit 8b7ce2c276
11 changed files with 87 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/en_US/images/change_user_password.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 70 KiB

BIN
docs/en_US/images/mfa_registration.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 144 KiB

After

Width:  |  Height:  |  Size: 112 KiB

1
docs/en_US/release_notes_6_13.rst
View File

@ -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).

2
web/pgadmin/browser/static/js/browser.js
View File

@ -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, $, _,

109
web/pgadmin/browser/static/js/dialog.js
View File

@ -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,
};

9
web/pgadmin/browser/templates/browser/index.html
View File

@ -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 %}

54
web/pgadmin/static/js/Dialogs/UrlDialogContent.jsx Normal file
View File

@ -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,
};

23
web/pgadmin/static/js/Dialogs/index.jsx
View File

@ -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});
}

3
web/pgadmin/templates/security/change_password.html
View File

@ -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">
<div class="col-md-4 mx-md-auto mx-sm-5 mx-xs-5">
<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>

14
web/pgadmin/tools/user_management/static/js/user_management.js
View File

@ -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(
gettext('Change Password'), url, 'change_user_password.html',
);
showUrlDialog(gettext('Change Password'), url, 'change_user_password.html', undefined, pgBrowser.stdH.lg);
},
show_mfa: function(url) {
showUrlDialog(gettext('Authentication'), url, 'mfa.html', 1200, 680);
},
is_editable: function(m) {

1
web/webpack.shim.js
View File

@ -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'),