Subject: [pgAdmin4][RM#3037] Allow user to disable Gravatar image

From: Murtuza Zabuawala <[email-masked]>
Date: Mon, 5 Mar 2018 13:42:55 +0530

Hi,

PFA patch to disable Gravatar image in Server mode.

Requirments & Issues:
- For security reasons.
- For systems which do not have internet access.
- Hangs pgAdmin4 while loading the page if connection has no internet
access (as described in the ticket)

--
Regards,
Murtuza Zabuawala
EnterpriseDB: http://www.enterprisedb.com
The Enterprise PostgreSQL Company

---

From: Joao De Almeida Pereira <[email-masked]>
Date: Mon, 05 Mar 2018 15:27:28 +0000

Hi Murtuza,

Why are we doing this using templates? Can this be done with a request to
the backend to get the image and then retrieve the Gravatar if it is
defined or return a static image if not?

+
+{% if config.SERVER_MODE %}
 window.onload = function(e){
  setTimeout(function() {
-   var gravatarImg = '<img src="{{ username | gravatar }}" width="18"
height="18" alt="Gravatar image for {{ username }}"> {{ username }} <span
class="caret"></span>';
+   var gravatarImg = {{ IMG.PREPARE_HTML()|safe }}
    //$('#navbar-menu .navbar-right > li > a').html(gravatarImg);
    var navbarRight =
document.getElementById("navbar-menu").getElementsByClassName("navbar-right")[0];
    if (navbarRight) {

what if we have

var gravatarImg = '<img src="/user/{{username}}/gravatar" width="18"
height="18" alt="Gravatar image for {{ username }}"> {{ username }} <span
class="caret"></span>';

And then the endpoint
/user/{{username}}/gravatar
would be responsible for returning a Gravatar or not depending on the
configuration?

Thanks
Joao

---

From: Murtuza Zabuawala <[email-masked]>
Date: Mon, 5 Mar 2018 21:51:30 +0530

Hi Joao,

We are using Flask-Gravatar <https://pythonhosted.org/Flask-Gravatar/>
module for this and it is designed to work with template only.

On Mon, Mar 5, 2018 at 8:57 PM, Joao De Almeida Pereira <
[email-masked]> wrote:

>     var navbarRight = document.getElementById("navbar-menu").
> getElementsByClassName("navbar-right")[0];
>     if (navbarRight) {
>
> what if we have
>
> On Mon, Mar 5, 2018 at 3:13 AM Murtuza Zabuawala <murtuza.zabuawala@
> enterprisedb.com> wrote:
>
>> Hi,
>>

---

From: Joao De Almeida Pereira <[email-masked]>
Date: Mon, 05 Mar 2018 19:47:27 +0000

Hello,
I understand that, but what do we win by using it? As you have noticed by
now I am not very fond of using templates for everything, and I believe
this is one of the things that we can skip templates.
We might even shift this to a frontend concern and if we want there are
node libraries to get gravatars.

I was able to create a PoC as a sample of what I was talking about:
 - Add gravatar library to package.json
 - Created a Preferences cache. (js/preferences.js)
   - So this was the concept I was talking about in a previous email we
talked about caching.
      the getConfiguration and the getAllConfiguration are not great names,
but they return a Promise that is consumed in the load_gravatar. The idea
here is that we are caching the pgAdmin settings and when need need to
consume them, we wait for it to be available.
 - load_gravatar is using the pattern to retrieve the configuration from a
possible cache and then apply the gravatar

Things that need to be revisited in the PoC:
- No tests, just some spiked code
- Did not retrieve the username from the backend, we need to create an
endpoint that give us this
- The url is hardcoded to get the configuration
- Maybe the Preferences is not the correct place to get server_mode
configuration not sure, what do you think?

Thanks
Joao

> module for this and it is designed to work with template only.
diff --git a/web/package.json b/web/package.json
index 2707b334..8d62e7b5 100644
--- a/web/package.json
+++ b/web/package.json
@@ -66,6 +66,7 @@
     "exports-loader": "~0.6.4",
     "flotr2": "^0.1.0",
     "font-awesome": "^4.7.0",
+    "gravatar": "^1.6.0",
     "hard-source-webpack-plugin": "^0.4.9",
     "immutability-helper": "^2.2.0",
     "imports-loader": "^0.7.1",
diff --git a/web/pgadmin/browser/templates/browser/index.html b/web/pgadmin/browser/templates/browser/index.html
index 58ff43f8..0901f44a 100644
--- a/web/pgadmin/browser/templates/browser/index.html
+++ b/web/pgadmin/browser/templates/browser/index.html
@@ -5,6 +5,7 @@ try {
 require(
 ['sources/generated/app.bundle'],
 function() {
+    pgAdmin.applyAvatar(pgAdmin);
 },
 function() {
 /* TODO:: Show proper error dialog */
@@ -66,17 +67,6 @@ require.onResourceLoad = function (context, map, depMaps) {
     }, 400)
   }
 };
-window.onload = function(e){
- setTimeout(function() {
-   var gravatarImg = '<img src="{{ username | gravatar }}" width="18" height="18" alt="Gravatar image for {{ username }}"> {{ username }} <span class="caret"></span>';
-   //$('#navbar-menu .navbar-right > li > a').html(gravatarImg);
-   var navbarRight = document.getElementById("navbar-menu").getElementsByClassName("navbar-right")[0];
-   if (navbarRight) {
-     var list = navbarRight.getElementsByTagName("LI")[0];
-     list.getElementsByTagName("a")[0].innerHTML = gravatarImg;
-   }
- }, 1000);
-};
 
 {% endblock %}
 {% block body %}
diff --git a/web/pgadmin/preferences/__init__.py b/web/pgadmin/preferences/__init__.py
index f1f571cd..e75aa4cb 100644
--- a/web/pgadmin/preferences/__init__.py
+++ b/web/pgadmin/preferences/__init__.py
@@ -21,6 +21,7 @@ from pgadmin.utils.ajax import success_return, \
     make_response as ajax_response, internal_server_error
 from pgadmin.utils.menu import MenuItem
 from pgadmin.utils.preferences import Preferences
+import config
 
 MODULE_NAME = 'preferences'
 
@@ -163,6 +164,10 @@ def preferences_s():
                     p['module'] = m['name']
                     res.append(p)
 
+    res.append({'name': 'pgadmin', 'configuration': [
+        {'server_mode': config.SERVER_MODE}
+    ]
+    })
     return ajax_response(
         response=res,
         status=200
diff --git a/web/pgadmin/static/bundle/app.js b/web/pgadmin/static/bundle/app.js
index a2b86f87..ec78c89b 100644
--- a/web/pgadmin/static/bundle/app.js
+++ b/web/pgadmin/static/bundle/app.js
@@ -1,6 +1,6 @@
 define('app', [
-  'babel-polyfill', 'sources/pgadmin', 'bundled_browser', 'pgadmin.datagrid',
-], function(babelPolyFill, pgAdmin) {
+  'babel-polyfill', 'sources/pgadmin', 'sources/preferences', 'sources/load_gravatar', 'bundled_browser', 'pgadmin.datagrid',
+], function(babelPolyFill, pgAdmin, preferences, gravatar) {
   var initializeModules = function(Object) {
     for (var key in Object) {
       var module = Object[key];
@@ -20,4 +20,7 @@ define('app', [
 
     // create menus after all modules are initialized.
   pgAdmin.Browser.create_menus();
+
+  pgAdmin.Settings = new preferences.Preferences();
+  pgAdmin.applyAvatar = gravatar.applyAvatar;
 });
diff --git a/web/pgadmin/static/js/load_gravatar.js b/web/pgadmin/static/js/load_gravatar.js
new file mode 100644
index 00000000..1372b9b6
--- /dev/null
+++ b/web/pgadmin/static/js/load_gravatar.js
@@ -0,0 +1,19 @@
+import gravatar from 'gravatar';
+
+export function applyAvatar(pgAdmin) {
+  pgAdmin.Settings.getConfiguration('server_mode')
+    .then(function(server_mode) {
+      const username = [email-masked]';
+      if (server_mode) {
+        const gravatarImg = '<img src="' + gravatar.url(username) + '" width="18"' +
+          ' height="18" alt="Gravatar image for ' + username + '"> ' + username + ' <span' +
+        ' class="caret">' + username + '</span>';
+
+        const navbarRight = document.getElementById('navbar-menu').getElementsByClassName('navbar-right')[0];
+        if (navbarRight) {
+          const list = navbarRight.getElementsByTagName('LI')[0];
+          list.getElementsByTagName('a')[0].innerHTML = gravatarImg;
+        }
+      }
+    });
+}
diff --git a/web/pgadmin/static/js/pgadmin.js b/web/pgadmin/static/js/pgadmin.js
index f0f93d9a..648157fe 100644
--- a/web/pgadmin/static/js/pgadmin.js
+++ b/web/pgadmin/static/js/pgadmin.js
@@ -101,5 +101,7 @@ define([], function() {
     return 0;
   };
 
+
+
   return pgAdmin;
 });
diff --git a/web/pgadmin/static/js/preferences.js b/web/pgadmin/static/js/preferences.js
new file mode 100644
index 00000000..c46098bf
--- /dev/null
+++ b/web/pgadmin/static/js/preferences.js
@@ -0,0 +1,33 @@
+import axios from 'axios';
+import _ from 'underscore';
+
+export class Preferences {
+  constructor() {
+    this.config = {};
+  }
+
+  getAllConfiguration() {
+    let self = this;
+    return axios.get('http://localhost:5050/preferences/get_all')
+      .then((response) => {
+        const node = _.findWhere(response.data, {'name': 'pgadmin'});
+        self.config = Object.assign({}, node['configuration'][0]);
+      });
+  }
+
+
+  getConfiguration(key) {
+    let self = this;
+    if (self.config[key] === undefined) {
+      return this.getAllConfiguration()
+        .then(() => {
+          return self.config[key];
+        });
+    }
+
+
+    return new Promise((resolve) => {
+      resolve(self.config[key]);
+    });
+  }
+}
diff --git a/web/yarn.lock b/web/yarn.lock
index 666a20e6..3c874496 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -1185,6 +1185,10 @@ bluebird@^3.0.0, bluebird@^3.0.5, bluebird@^3.3.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.0.tgz#791420d7f551eea2897453a8a77653f96606d67c"
 
+blueimp-md5@^2.3.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/blueimp-md5/-/blueimp-md5-2.10.0.tgz#02f0843921f90dca14f5b8920a38593201d6964d"
+
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
   version "4.11.8"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
@@ -2456,6 +2460,10 @@ elliptic@^6.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
+email-validator@^1.0.7:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/email-validator/-/email-validator-1.1.1.tgz#b07f3be7bac1dc099bc43e75f6ae399f552d5a80"
+
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
@@ -3410,6 +3418,15 @@ graceful-fs@^4.0.0, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
 
+gravatar@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/gravatar/-/gravatar-1.6.0.tgz#8bdc9b786ca725a8e7076416d1731f8d3331c976"
+  dependencies:
+    blueimp-md5 "^2.3.0"
+    email-validator "^1.0.7"
+    querystring "0.2.0"
+    yargs "^6.0.0"
+
 gulp-decompress@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/gulp-decompress/-/gulp-decompress-1.2.0.tgz#8eeb65a5e015f8ed8532cafe28454960626f0dc7"
@@ -7768,6 +7785,12 @@ yallist@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
 
+yargs-parser@^4.2.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-4.2.1.tgz#29cceac0dc4f03c6c87b4a9f217dd18c9f74871c"
+  dependencies:
+    camelcase "^3.0.0"
+
 yargs-parser@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.0.tgz#275ecf0d7ffe05c77e64e7c86e4cd94bf0e1228a"
@@ -7780,6 +7803,24 @@ yargs-parser@^7.0.0:
   dependencies:
     camelcase "^4.1.0"
 
+yargs@^6.0.0:
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
+  dependencies:
+    camelcase "^3.0.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^1.4.0"
+    read-pkg-up "^1.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^1.0.2"
+    which-module "^1.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^4.2.0"
+
 yargs@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"

---

From: Murtuza Zabuawala <[email-masked]>
Date: Tue, 6 Mar 2018 12:29:00 +0530

Hi Joao,

Your suggestion is good but in my own opinion it is overkill just to
replace code {{ username| gravatar }} as rest of the syntax is pure HTML,
This makes code much simpler and easy to understand.
Apart from that we will be rendering 'index.html' template anyways and I
don't see any extra overhead.

I may be wrong, Let's wait for the input from other community members.

Regards,
Murtuza

On Tue, Mar 6, 2018 at 1:17 AM, Joao De Almeida Pereira <
[email-masked]> wrote:

>       the getConfiguration and the getAllConfiguration are not great
> names, but they return a Promise that is consumed in the load_gravatar. The
> idea here is that we are caching the pgAdmin settings and when need need to
>>> Why are we doing this using templates? Can this be done with a request
>>> to the backend to get the image and then retrieve the Gravatar if it is
>>>     var navbarRight = document.getElementById("navba
>>> r-menu").getElementsByClassName("navbar-right")[0];
>>>     if (navbarRight) {
>>>
>>> what if we have
>>>

---

From: Dave Page <[email-masked]>
Date: Tue, 6 Mar 2018 09:49:18 +0000

Hi

> don't see any extra overhead.

For this particular issue, I'm inclined to agree.

I do however, like the idea of caching preferences (no-brainer really,
assuming we ensure we update/invalidate the cache when needed), and using
promises for accessing them.

>>  - load_gravatar is using the pattern to retrieve the configuration from
>> a possible cache and then apply the gravatar
>>
>>

-- 
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company

---

From: Joao De Almeida Pereira <[email-masked]>
Date: Tue, 06 Mar 2018 17:26:35 +0000

Hello,

I just sent a video that talks exactly about this, in the journey to have a
more maintainable code and easier to navigate, we sometimes increase
complexity for a period of time in order to get to the state that we want
to be.

In particular in this example I tried the following:
1. Demonstrate that we do not need templates to get things done
2. How to get the information we need to the place where it is needed, like
moving the information of the server mode to the front end where decisions
should be made

Sometimes just because we can do a simple change, doesn't mean we should do
it because it might bit us in the future.

The PoC looks like a huge amount of code that is not even related to
Gravatar, when we could just change a template file or 2, I hear that. But
what I am talking about is a change of paradigm and Architecture where the
Frontend is responsible for displaying the application and the Backend is
only responsible for giving information that the Frontend Requires. Instead
of the current mixed architecture where some things are done in the
Frontend some things are done in the Backend a more predictable
architecture would benefit the application and specially the developers.

That is why I always insist in refactor code as much as possible to ensure
that the code is readable and helps people follow it. This doesn't mean
abstracting classes of functions to make to code more generic, it means as
an example to split 1 functions of 500 lines into 10 functions of 50 lines
each or even 50 functions of 10 lines each but that are readable and not a
"goat trails" of ifs and elses that are very hard to read and follow.

Thanks
Joao

On Tue, Mar 6, 2018 at 4:49 AM Dave Page <[email-masked]> wrote:

>> replace code {{ username| gravatar }} as rest of the syntax is pure
>> HTML, This makes code much simpler and easy to understand.
>>> I understand that, but what do we win by using it? As you have noticed
>>> by now I am not very fond of using templates for everything, and I believe

---

From: Murtuza Zabuawala <[email-masked]>
Date: Wed, 7 Mar 2018 18:38:17 +0530

Hi Joao,

On Tue, Mar 6, 2018 at 10:56 PM, Joao De Almeida Pereira <
[email-masked]> wrote:

> Hello,
>
> I just sent a video that talks exactly about this, in the journey to have
> a more maintainable code and easier to navigate, we sometimes increase
That raised questions in mind,
​Why?
​
I
​f templates are bad then why every other framework provides them?
I've seen many projects using templates to serve HTML code, In pgAdmin4
also we are using templates just as starting point to load UI whether its
main page or query tool/debugger page.

> moving the information of the server mode to the front end where decisions

​I agree and that's what we are doing in pgAdmin4.

> ​

> Sometimes just because we can do a simple change, doesn't mean we should
> do it because it might bit us in the future.
>
>
> ​

> "goat trails" of ifs and elses that are very hard to read and follow.

 ​I
​totally ​
agree that refacto
​ring​
code is good practice but in this
​particular ​
case I
​still ​
think
​that ​
using
​HTML ​
template is
​much ​
simpler and elegant solution
​.​

>> On Tue, Mar 6, 2018 at 6:59 AM, Murtuza Zabuawala <murtuza.zabuawala@
>> enterprisedb.com> wrote:
>>
>>> Hi Joao,
>>>
>>>>  - load_gravatar is using the pattern to retrieve the configuration
>>>> from a possible cache and then apply the gravatar
>>>>
>>>>
>>>> On Mon, Mar 5, 2018 at 11:21 AM Murtuza Zabuawala <murtuza.zabuawala@
>>>> enterprisedb.com> wrote:
>>>>
>>>>> Hi Joao,
>>>>>
>>>>>> Why are we doing this using templates? Can this be done with a
>>>>>> request to the backend to get the image and then retrieve the Gravatar if
>>>>>> it is defined or return a static image if not?
>>>>>>
>>>>>> +
>>>>>> -   var gravatarImg = '<img src="{{ username | gravatar }}"
>>>>>> width="18" height="18" alt="Gravatar image for {{ username }}"> {{ username
>>>>>> }} <span class="caret"></span>';
>>>>>>> - Hangs pgAdmin4 while loading the page if connection has no
>>>>>>> internet access (as described in the ticket)
>>>>>>>
>>>>>>> --
>>>>>>> Regards,
>>>>>>> Murtuza Zabuawala

---

From: Dave Page <[email-masked]>
Date: Wed, 7 Mar 2018 13:50:46 +0000

Hi

> access (as described in the ticket)

If I run with the Gravatar disabled, then I get the following regression
failure:

======================================================================
FAIL: runTest (pgadmin.browser.tests.test_login.LoginTestCase)
Valid_Credentials
----------------------------------------------------------------------
Traceback (most recent call last):
  File "/Users/dpage/git/pgadmin4/web/pgadmin/browser/tests/test_login.py",
line 93, in runTest
    self.assertTrue(self.respdata in response.data.decode('utf8'))
AssertionError: False is not true

----------------------------------------------------------------------

It's fine when Gravatar is enabled (and the rest of the patch does too).

---

From: Murtuza Zabuawala <[email-masked]>
Date: Wed, 7 Mar 2018 20:47:58 +0530

Hi Dave,

PFA updated patch.

On Wed, Mar 7, 2018 at 7:20 PM, Dave Page <[email-masked]> wrote:

> Hi
>
> On Mon, Mar 5, 2018 at 8:12 AM, Murtuza Zabuawala <murtuza.zabuawala@
> enterprisedb.com> wrote:
>
>> Hi,
>>

---

From: Dave Page <[email-masked]>
Date: Wed, 7 Mar 2018 16:35:41 +0000

Thanks, applied.