✨ [Frontend] username and privacy settings (#6916)

Author: odeimaiz

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

@@ -25,6 +25,38 @@ qx.Class.define("osparc.auth.Data", {
   type: "singleton",
 
   properties: {
+    /**
+     *  Basic authentification with a token
+    */
+    auth: {
+      init: null,
+      nullable: true,
+      check: "osparc.io.request.authentication.Token",
+      apply: "__applyAuth"
+    },
+
+    role: {
+      check: ["anonymous", "guest", "user", "tester", "product_owner", "admin"],
+      init: null,
+      nullable: false,
+      event: "changeRole",
+      apply: "__applyRole"
+    },
+
+    guest: {
+      check: "Boolean",
+      init: true,
+      nullable: false,
+      event: "changeGuest"
+    },
+
+    loggedIn: {
+      check: "Boolean",
+      nullable: false,
+      init: false,
+      event: "changeLoggedIn",
+    },
+
     /**
      *  User Id
      */
@@ -43,14 +75,11 @@ qx.Class.define("osparc.auth.Data", {
       check: "Number"
     },
 
-    /**
-     *  Basic authentification with a token
-    */
-    auth: {
+    username: {
+      check: "String",
       init: null,
-      nullable: true,
-      check: "osparc.io.request.authentication.Token",
-      apply: "__applyAuth"
+      nullable: false,
+      event: "changeUsername",
     },
 
     /**
@@ -76,34 +105,12 @@ qx.Class.define("osparc.auth.Data", {
       event: "changeLastName"
     },
 
-    role: {
-      check: ["anonymous", "guest", "user", "tester", "product_owner", "admin"],
-      init: null,
-      nullable: false,
-      event: "changeRole",
-      apply: "__applyRole"
-    },
-
-    guest: {
-      check: "Boolean",
-      init: true,
-      nullable: false,
-      event: "changeGuest"
-    },
-
     expirationDate: {
       init: null,
       nullable: true,
       check: "Date",
       event: "changeExpirationDate"
     },
-
-    loggedIn: {
-      check: "Boolean",
-      nullable: false,
-      init: false,
-      event: "changeLoggedIn",
-    }
   },
 
   members: {
@@ -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/data/model/Group.js

@@ -105,7 +105,7 @@ qx.Class.define("osparc.data.model.Group", {
     },
 
     getGroupMemberByLogin: function(userEmail) {
-      return Object.values(this.getGroupMembers()).find(user => user.getLogin() === userEmail);
+      return Object.values(this.getGroupMembers()).find(user => user.getEmail() === userEmail);
     },
 
     addGroupMember: function(user) {

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

@@ -28,14 +28,23 @@ qx.Class.define("osparc.data.model.User", {
   construct: function(userData) {
     this.base(arguments);
 
-    const label = this.self().namesToLabel(userData["first_name"], userData["last_name"]) || userData["login"];
+    let label = userData["login"];
+    if (userData["first_name"]) {
+      label = qx.lang.String.firstUp(userData["first_name"]);
+      if (userData["last_name"]) {
+        label += " " + qx.lang.String.firstUp(userData["last_name"]);
+      }
+    }
+    const thumbnail = osparc.utils.Avatar.emailToThumbnail(userData["login"]);
     this.set({
-      userId: userData.id,
-      groupId: userData.gid,
+      userId: userData["id"],
+      groupId: userData["gid"],
       label: label,
-      login: userData.login,
-      thumbnail: this.self().emailToThumbnail(userData.login),
-      accessRights: userData.accessRights,
+      username: userData["username"] || "",
+      firstName: userData["first_name"],
+      lastName: userData["last_name"],
+      email: userData["login"],
+      thumbnail,
     });
   },
 
@@ -61,18 +70,32 @@ qx.Class.define("osparc.data.model.User", {
       event: "changeLabel",
     },
 
-    login: {
+    username: {
       check: "String",
       nullable: true,
       init: null,
-      event: "changeLogin",
+      event: "changeUsername",
     },
 
-    accessRights: {
-      check: "Object",
-      nullable: false,
+    firstName: {
+      init: "",
+      nullable: true,
+      check: "String",
+      event: "changeFirstName"
+    },
+
+    lastName: {
+      init: "",
+      nullable: true,
+      check: "String",
+      event: "changeLastName"
+    },
+
+    email: {
+      check: "String",
+      nullable: true,
       init: null,
-      event: "changeAccessRights",
+      event: "changeEmail",
     },
 
     thumbnail: {
@@ -82,21 +105,4 @@ qx.Class.define("osparc.data.model.User", {
       event: "changeThumbnail",
     },
   },
-
-  statics: {
-    namesToLabel: function(firstName, lastName) {
-      let label = "";
-      if (firstName) {
-        label = osparc.utils.Utils.firstsUp(firstName);
-        if (lastName) {
-          label += " " + osparc.utils.Utils.firstsUp(lastName);
-        }
-      }
-      return label;
-    },
-
-    emailToThumbnail: function(email) {
-      return osparc.utils.Avatar.getUrl(email, 32)
-    },
-  }
 });

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

@@ -0,0 +1,44 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2024 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+/**
+ * Class that stores User data + access rights to the resource.
+ */
+
+qx.Class.define("osparc.data.model.UserMember", {
+  extend: osparc.data.model.User,
+
+  /**
+   * @param userData {Object} Object containing the serialized User Data
+   */
+  construct: function(userData) {
+    this.base(arguments, userData);
+
+    this.set({
+      accessRights: userData["accessRights"],
+    });
+  },
+
+  properties: {
+    accessRights: {
+      check: "Object",
+      nullable: false,
+      init: null,
+      event: "changeAccessRights",
+    },
+  },
+});

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();