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

@@ -16,6 +16,7 @@ Contents:
    server_deployment
    pgadmin_login
    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.
 

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;