✨ [Frontend] Username and Privacy settings

services/static-webserver/client/source/class/osparc/auth/Data.js

@@ -53,6 +53,13 @@ qx.Class.define("osparc.auth.Data", {
       apply: "__applyAuth"
     },
 
+    username: {
+      check: "String",
+      init: null,
+      nullable: false,
+      event: "changeUsername",
+    },
+
     /**
      *  Email of logged in user, otherwise null
     */
@@ -135,16 +142,12 @@ qx.Class.define("osparc.auth.Data", {
       return osparc.utils.Utils.cookie.getCookie("user") === "logout";
     },
 
-    getUserName: function() {
+    getFriendlyUsername: function() {
       const firstName = this.getFirstName();
       if (firstName) {
         return firstName;
       }
-      const email = this.getEmail();
-      if (email) {
-        return osparc.utils.Utils.getNameFromEmail(email);
-      }
-      return "user";
+      return this.getUsername();
     },
 
     getFriendlyRole: function() {

services/static-webserver/client/source/class/osparc/auth/Manager.js

@@ -240,6 +240,7 @@ qx.Class.define("osparc.auth.Manager", {
       const authData = osparc.auth.Data.getInstance();
       authData.set({
         email: profile["login"],
+        username: profile["userName"],
         firstName: profile["first_name"] || profile["login"],
         lastName: profile["last_name"] || "",
         expirationDate: "expirationDate" in profile ? new Date(profile["expirationDate"]) : null

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

@@ -722,7 +722,11 @@ qx.Class.define("osparc.data.Resources", {
           getOne: {
             method: "GET",
             url: statics.API + "/me"
-          }
+          },
+          patch: {
+            method: "PATCH",
+            url: statics.API + "/me"
+          },
         }
       },
       /*
@@ -1117,7 +1121,11 @@ qx.Class.define("osparc.data.Resources", {
           postResetPassword: {
             method: "POST",
             url: statics.API + "/auth/reset-password/{code}"
-          }
+          },
+          changeEmail: {
+            method: "POST",
+            url: statics.API + "/auth/change-email"
+          },
         }
       },
       /*

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

@@ -42,6 +42,7 @@ qx.Class.define("osparc.desktop.account.MyAccount", {
       });
 
       const authData = osparc.auth.Data.getInstance();
+
       const email = authData.getEmail();
       const avatarSize = 80;
       const img = new qx.ui.basic.Image().set({
@@ -56,10 +57,17 @@ qx.Class.define("osparc.desktop.account.MyAccount", {
       });
       layout.add(img);
 
-      const name = new qx.ui.basic.Label().set({
+      const usernameLabel = new qx.ui.basic.Label().set({
         font: "text-14",
         alignX: "center"
       });
+      authData.bind("username", usernameLabel, "value");
+      layout.add(usernameLabel);
+
+      const name = new qx.ui.basic.Label().set({
+        font: "text-13",
+        alignX: "center"
+      });
       layout.add(name);
       authData.bind("firstName", name, "value", {
         converter: firstName => firstName + " " + authData.getLastName()
@@ -77,12 +85,6 @@ qx.Class.define("osparc.desktop.account.MyAccount", {
         layout.add(roleLabel);
       }
 
-      const emailLabel = new qx.ui.basic.Label(email).set({
-        font: "text-13",
-        alignX: "center"
-      });
-      layout.add(emailLabel);
-
       if (withSpacer) {
         layout.add(new qx.ui.core.Spacer(15, 15));
       }

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

@@ -22,10 +22,12 @@ qx.Class.define("osparc.desktop.account.MyAccountWindow", {
     this.base(arguments, "credits", this.tr("My Account"));
 
     const width = 900;
-    const height = 600;
+    const height = 700;
+    const maxHeight = 700;
     this.set({
       width,
-      height
+      height,
+      maxHeight,
     });
 
     const myAccount = this.__myAccount = new osparc.desktop.account.MyAccount();