Allow changing of the users password without leaving the app. Fixes #2891

docs/en_US/change_user_password.rst

@@ -0,0 +1,25 @@
+.. _change_user_password:
+
+***********************************
+The Change User Password - pgAdmin4
+***********************************
+
+It is a good policy to routinely change your password to protect data, even in what you may consider a 'safe' environment. In the workplace, failure to apply an appropriate password policy could leave you in breach of Data Protection laws.
+
+Please consider the following guidelines when selecting a password:
+
+* Ensure that your password is an adequate length; 6 characters should be the absolute minimum number of characters in the password.
+* Ensure that your password is not open to dictionary attacks. Use a mixture of upper and lower case letters and numerics, and avoid words or names. Consider using the first letter from each word in a phrase that you will remember easily but is an unfamiliar acronym.
+* Ensure that your password is changed regularly; at minimum, change it every ninety days.
+
+The above should be considered a starting point: It is not a comprehensive list and it **will not guarantee security**.
+
+.. image:: images/change_user_password.png
+
+Use the *Change Password* dialog to change your password:
+
+* Enter your existing password in the *Current Password* field.
+* Enter the desired password for in the *New Password* field.
+* Re-enter the new password in the *Confirm Password* field.
+
+Click the *Change Password* button to change your password; click *Close* to exit the dialog.

docs/en_US/getting_started.rst

@@ -6,8 +6,8 @@ Getting Started
 
 Pre-compiled and configured installation packages for pgAdmin 4 are available for a number of desktop environments; we recommend using an installer whenever possible.  A standard installation using the pgAdmin installer is a server deployment.
 
-In a Server Deployment, the pgAdmin application is deployed behind a webserver or with the WSGI interface.  
+In a Server Deployment, the pgAdmin application is deployed behind a webserver or with the WSGI interface.
-If you install pgAdmin in server mode, you will be prompted to provide a role name and pgAdmin password when you initially connect to pgAdmin.  The first role registered with pgAdmin will be an administrative user; the administrative role can use the pgAdmin *User Management* dialog to create and manage additional pgAdmin user accounts.  When a user authenticates with pgAdmin, the pgAdmin tree control displays the server definitions associated with that login role.  
+If you install pgAdmin in server mode, you will be prompted to provide a role name and pgAdmin password when you initially connect to pgAdmin.  The first role registered with pgAdmin will be an administrative user; the administrative role can use the pgAdmin *User Management* dialog to create and manage additional pgAdmin user accounts.  When a user authenticates with pgAdmin, the pgAdmin tree control displays the server definitions associated with that login role.
 
 Contents:
 
@@ -15,7 +15,8 @@ Contents:
 
    server_deployment
    pgadmin_login
-   pgadmin_user 
+   pgadmin_user
+   change_user_password
 
 In a Desktop Deployment, the pgAdmin application is configured to use the desktop runtime environment to host and display the program on a supported platform. Typically, users will install a pre-built package to run pgAdmin in desktop mode, but a manual desktop deployment can be installed and though it is more difficult to setup, it may be useful for developers interested in understanding how pgAdmin works.
 
@@ -23,18 +24,18 @@ Contents:
 
 .. toctree::
    :maxdepth: 2
-   
+
    desktop_deployment
 
-The pgAdmin 4 client features a highly-customizable display that features drag-and-drop panels that you can arrange to make the best use of your desktop environment.  
+The pgAdmin 4 client features a highly-customizable display that features drag-and-drop panels that you can arrange to make the best use of your desktop environment.
 
 The tree control provides an elegant overview of the managed servers, and the objects that reside on each server. Right-click on a node within the tree control to access context-sensitive menus that provide quick access to management tasks for the selected object.
 
-The tabbed browser provide quick access to statistical information about each object in the tree control, and pgAdmin tools and utilities (such as the Query tool and the debugger). pgAdmin opens additional feature tabs each time you access the extended functionality offered by pgAdmin tools; you can open, close, and re-arrange feature tabs as needed. 
+The tabbed browser provide quick access to statistical information about each object in the tree control, and pgAdmin tools and utilities (such as the Query tool and the debugger). pgAdmin opens additional feature tabs each time you access the extended functionality offered by pgAdmin tools; you can open, close, and re-arrange feature tabs as needed.
 
 Use the *Preferences* dialog to customize the content and colors of the pgAdmin display.  To open the *Preferences* dialog, select *Preferences* from the *File* menu.
 
-*Help* buttons in the lower-left corner of each dialog will open the online help for the dialog.  You can access additional Postgres help by navigating through the *Help* menu, and selecting the name of the resource that you wish to open. 
+*Help* buttons in the lower-left corner of each dialog will open the online help for the dialog.  You can access additional Postgres help by navigating through the *Help* menu, and selecting the name of the resource that you wish to open.
 
 Contents:
 
@@ -46,9 +47,9 @@ Contents:
    pgadmin_tree_control
    preferences
    keyboard_shortcuts
-   
+
 Before using pgAdmin to manage objects that reside on a server, you must define a connection to the server; for more information please see *Connecting to a Server*:
-   
+
 Contents:
 
 .. toctree::

web/pgadmin/__init__.py

@@ -281,6 +281,12 @@ def create_app(app_name=None):
         # TODO: Figure out how to disable /logout and /login
         app.config['SECURITY_RECOVERABLE'] = True
         app.config['SECURITY_CHANGEABLE'] = True
+        # Now we'll open change password page in alertify dialog
+        # we don't want it to redirect to main page after password
+        # change operation so we will open the same password change page again.
+        app.config.update(
+            dict(SECURITY_POST_CHANGE_VIEW='security.change_password')
+        )
 
     # Create database connection object and mailer
     db.init_app(app)

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

@@ -170,7 +170,13 @@ window.onload = function(e){
                 <li class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"></a>
                     <ul class="dropdown-menu navbar-inverse">
-                        <li><a href="{{ url_for('security.change_password') }}">{{ _('Change Password') }}</a></li>
+                        <li>
+                            <a href="#" onclick="pgAdmin.Browser.UserManagement.change_password(
+                              '{{ url_for('security.change_password') }}'
+                            )">
+                                {{ _('Change Password') }}
+                            </a>
+                        </li>
                         <li class="divider"></li>
                         {% if is_admin %}
                         <li><a href="#" onclick="pgAdmin.Browser.UserManagement.show_users()">{{ _('Users') }}</a></li>

web/pgadmin/templates/security/fields.html

@@ -1,7 +1,7 @@
 {% macro render_field_with_errors(field, type) %}
 <div class="form-group{% if field.errors %} has-error{% endif %}">
     <input class="form-control" placeholder="{{ field.label.text }}" name="{{ field.name }}"
-           type="{% if type %}{{ type }}{% else %}{{ field.type }}{% endif %}">
+           type="{% if type %}{{ type }}{% else %}{{ field.type }}{% endif %}" autofocus>
 </div>
 {% if field.errors %}
 {% for error in field.errors %}

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

@@ -37,6 +37,91 @@ define([
 
         return this;
       },
+
+      // Callback to draw change password Dialog.
+      change_password: function(url) {
+        var title = gettext('Change Password');
+
+        if(!alertify.ChangePassword) {
+          alertify.dialog('ChangePassword' ,function factory() {
+            return {
+              main: function(title, url) {
+                this.set({
+                  'title': title,
+                  'url': url
+                });
+              },
+              build: function() {
+                alertify.pgDialogBuild.apply(this)
+              },
+              settings:{
+                  url: undefined
+              },
+              setup:function() {
+                return {
+                  buttons: [{
+                    text: '', key: 112,
+                    className: 'btn btn-default pull-left fa fa-lg fa-question',
+                    attrs:{
+                      name:'dialog_help', type:'button', label: gettext('Change Password'),
+                      url: url_for(
+                        'help.static', {
+                          'filename': 'change_user_password.html'
+                        })
+                    }
+                  },{
+                    text: gettext('Close'), key: 27,
+                    className: 'btn btn-danger 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.ChangePassword().destroy();
+                  }), 500);
+                }
+              },
+              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, e.button.element.getAttribute('label'));
+                  return;
+                }
+              }
+            };
+          });
+        }
+
+        alertify.ChangePassword(title, url).resizeTo('75%','70%');
+      },
+
       // Callback to draw User Management Dialog.
       show_users: function(action, item, params) {
         if (!userInfo['is_admin']) return;