avatar with initials

Author: odeimaiz

services/static-webserver/client/source/class/osparc/data/model/User.js

@@ -39,7 +39,7 @@ qx.Class.define("osparc.data.model.User", {
     if (userData["login"]) {
       description += userData["login"];
     }
-    const thumbnail = osparc.utils.Avatar.emailToThumbnail(userData["login"]);
+    const thumbnail = osparc.utils.Avatar.emailToThumbnail(userData["login"], userData["userName"]);
     this.set({
       userId: parseInt(userData["id"]),
       groupId: parseInt(userData["gid"]),

services/static-webserver/client/source/class/osparc/desktop/account/MyAccount.js

@@ -42,11 +42,11 @@ qx.Class.define("osparc.desktop.account.MyAccount", {
       });
 
       const authData = osparc.auth.Data.getInstance();
-
+      const username = authData.getUsername();
       const email = authData.getEmail();
       const avatarSize = 80;
       const img = new qx.ui.basic.Image().set({
-        source: osparc.utils.Avatar.getUrl(email, avatarSize),
+        source: osparc.utils.Avatar.emailToThumbnail(email, username, avatarSize),
         maxWidth: avatarSize,
         maxHeight: avatarSize,
         scale: true,

services/static-webserver/client/source/class/osparc/info/CommentAdd.js

@@ -68,9 +68,11 @@ qx.Class.define("osparc.info.CommentAdd", {
             maxHeight: 32,
             decorator: "rounded",
           });
-          const myEmail = osparc.auth.Data.getInstance().getEmail();
+          const authData = osparc.auth.Data.getInstance();
+          const myUsername = authData.getUsername();
+          const myEmail = authData.getEmail();
           control.set({
-            source: osparc.utils.Avatar.getUrl(myEmail, 32)
+            source: osparc.utils.Avatar.emailToThumbnail(myEmail, myUsername, 32)
           });
           const layout = this.getChildControl("add-comment-layout");
           layout.add(control, {

services/static-webserver/client/source/class/osparc/info/CommentUI.js

@@ -104,7 +104,7 @@ qx.Class.define("osparc.info.CommentUI", {
 
     __buildLayout: function() {
       const thumbnail = this.getChildControl("thumbnail");
-      thumbnail.setSource(osparc.utils.Avatar.getUrl("", 32));
+      thumbnail.setSource(osparc.utils.Avatar.emailToThumbnail("", "", 32));
 
       const userName = this.getChildControl("user-name");
       userName.setValue("Unknown");

services/static-webserver/client/source/class/osparc/navigation/UserMenuButton.js

@@ -51,6 +51,7 @@ qx.Class.define("osparc.navigation.UserMenuButton", {
     const preferencesSettings = osparc.Preferences.getInstance();
     preferencesSettings.addListener("changeCreditsWarningThreshold", () => this.__updateHaloColor());
 
+    const myUsername = authData.getUsername() || "Username";
     const myEmail = authData.getEmail() || "[email protected]";
     const icon = this.getChildControl("icon");
     authData.bind("role", this, "icon", {
@@ -64,7 +65,7 @@ qx.Class.define("osparc.navigation.UserMenuButton", {
         icon.getContentElement().setStyles({
           "margin-left": "-4px"
         });
-        return osparc.utils.Avatar.getUrl(myEmail, 32);
+        return osparc.utils.Avatar.emailToThumbnail(myEmail, myUsername, 32);
       }
     });
   },

services/static-webserver/client/source/class/osparc/store/Groups.js

@@ -96,7 +96,7 @@ qx.Class.define("osparc.store.Groups", {
           groupMe.set({
             label: myAuthData.getUsername(),
             description: `${myAuthData.getFirstName()} ${myAuthData.getLastName()} - ${myAuthData.getEmail()}`,
-            thumbnail: osparc.utils.Avatar.emailToThumbnail(myAuthData.getEmail()),
+            thumbnail: osparc.utils.Avatar.emailToThumbnail(myAuthData.getEmail(), myAuthData.getUsername()),
           })
           return orgs;
         });

services/static-webserver/client/source/class/osparc/utils/Avatar.js

@@ -26,21 +26,24 @@
  * Here is a little example of how to use the widget.
  *
  * <pre class='javascript'>
- *   let image = osparc.utils.Avatar.getUrl(userEmail);
+ *   let image = osparc.utils.Avatar.emailToThumbnail(userEmail);
  * </pre>
  */
 
 qx.Class.define("osparc.utils.Avatar", {
   type: "static",
 
   statics: {
-    emailToThumbnail: function(email) {
-      return this.getUrl(email, 32)
+    emailToThumbnail: function(email, username) {
+      return this.__getUrl(email, username, 32);
     },
 
-    getUrl: function(email = "", size = 100, defIcon = "identicon", rating = "g") {
+    __getUrl: function(email, username, size = 100) {
+      if (email == null) {
+        return `https://ui-avatars.com/api/${username}/${size}`;
+      }
       // MD5 (Message-Digest Algorithm) by WebToolkit
-      let MD5 = function(s) {
+      const MD5 = function(s) {
         function L(k, d) {
           return (k << d) | (k >>> (32 - d));
         }
@@ -257,8 +260,10 @@ qx.Class.define("osparc.utils.Avatar", {
         return i.toLowerCase();
       };
 
-      return "https://secure.gravatar.com/avatar/" + MD5(email) + "?s=" + size + "&d=" + defIcon + "&r=" + rating;
-    }
-
+      const emailHash = MD5(email);
+      const defaultImageUrl = `https://ui-avatars.com/api/${username}/${size}/`;
+      // return `https://www.gravatar.com/avatar/${emailHash}?d=${defaultImageUrl}&s=${size}&r=g`;
+      return `https://www.gravatar.com/avatar/${emailHash}?d=${defaultImageUrl}&s=${size}`;
+    },
   }
 });