🎨 [Frontend] Enh: User Account UI

services/static-webserver/client/source/class/osparc/theme/Appearance.js

@@ -1066,8 +1066,8 @@ qx.Theme.define("osparc.theme.Appearance", {
       include: "form-button",
       style: state => ({
         decorator: state.hovered || state.focused ? "form-button-danger-hover" : "form-button-danger",
-        backgroundColor: state.hovered || state.focused ? "default-button-hover-background" : "error",
-        textColor: "black",
+        backgroundColor: state.hovered || state.focused || state.disabled ? "default-button-hover-background" : "error",
+        textColor: state.disabled ? "text": "black",
       })
     },
 

services/static-webserver/client/source/class/osparc/ui/basic/UserThumbnail.js

@@ -49,9 +49,7 @@ qx.Class.define("osparc.ui.basic.UserThumbnail", {
 
     __openUserDetails: function() {
       if (this.getUser()) {
-        const userDetails = new osparc.user.UserDetails(this.getUser().getGroupId());
-        userDetails.center();
-        userDetails.open();
+        osparc.user.UserAccountWindow.openWindow(this.getUser().getGroupId());
       }
     },
   }

services/static-webserver/client/source/class/osparc/user/UserAccount.js

@@ -0,0 +1,127 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2025 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+qx.Class.define("osparc.user.UserAccount", {
+  extend: osparc.ui.window.TabbedView,
+
+  construct: function(userGroupId) {
+    this.base(arguments);
+
+    this.set({
+      padding: 10,
+    });
+
+    this.getChildControl("thumbnail");
+    const profilePage = this.getChildControl("profile-page");
+    const extras = this.getChildControl("extras-page");
+    this.bind("user", profilePage, "user");
+    this.bind("extras", extras, "extras");
+
+    this.setUserGroupId(userGroupId);
+  },
+
+  properties: {
+    userGroupId: {
+      check: "Number",
+      init: null,
+      nullable: false,
+      apply: "__applyUserGroupId",
+    },
+
+    user: {
+      check: "osparc.data.model.User",
+      init: null,
+      nullable: false,
+      event: "changeUser",
+    },
+
+    extras: {
+      check: "Object",
+      init: null,
+      nullable: false,
+      event: "changeExtras",
+    },
+  },
+
+  events: {
+    "updateCaption": "qx.event.type.Data",
+    "closeWindow": "qx.event.type.Event",
+  },
+
+  statics: {
+    THUMBNAIL_SIZE: 90,
+  },
+
+  members: {
+    _createChildControlImpl: function(id) {
+      let control;
+      switch (id) {
+        case "thumbnail":
+          control = new osparc.ui.basic.Thumbnail(null, this.self().THUMBNAIL_SIZE, this.self().THUMBNAIL_SIZE).set({
+            width: this.self().THUMBNAIL_SIZE,
+            height: this.self().THUMBNAIL_SIZE,
+            marginBottom: 10,
+          });
+          control.getChildControl("image").set({
+            anonymous: true,
+            decorator: "rounded",
+          });
+          this.addWidgetToTabs(control);
+          break;
+        case "profile-page":
+          control = new osparc.user.UserProfile();
+          this.addTab("Profile", "", control);
+          break;
+        case "extras-page":
+          control = new osparc.user.UserExtras();
+          this.addTab("Extras", "", control);
+          break;
+      }
+      return control || this.base(arguments, id);
+    },
+
+    __applyUserGroupId: function(userGroupId) {
+      const params = {
+        url: {
+          gId: userGroupId
+        }
+      };
+      osparc.data.Resources.fetch("poUsers", "searchByGroupId", params)
+        .then(usersData => {
+          if (usersData.length === 1) {
+            const userData = usersData[0];
+
+            const user = new osparc.data.model.User(userData);
+            user.setContactData(userData);
+            // remove the displayed properties from the contact info
+            Object.keys(qx.util.PropertyUtil.getProperties(osparc.data.model.User)).forEach(prop => delete userData[prop]);
+            const extras = osparc.utils.Utils.convertKeysToTitles(userData);
+
+            this.fireDataEvent("updateCaption", user.getUserName());
+            this.getChildControl("thumbnail").setSource(user.createThumbnail(this.self().THUMBNAIL_SIZE));
+            this.setUser(user);
+            this.setExtras(extras);
+          }
+        })
+        .catch(err => {
+          osparc.FlashMessenger.logError(err);
+          console.error(err);
+          this.fireEvent("closeWindow");
+        });
+    },
+  }
+});

services/static-webserver/client/source/class/osparc/user/UserAccountWindow.js

@@ -0,0 +1,46 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2025 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+qx.Class.define("osparc.user.UserAccountWindow", {
+  extend: osparc.ui.window.TabbedWindow,
+
+  construct: function(userGroupId) {
+    this.base(arguments, "user-account-"+userGroupId, this.tr("User Account"));
+
+    this.set({
+      width: osparc.user.UserAccountWindow.WIDTH,
+      height: osparc.user.UserAccountWindow.HEIGHT,
+    });
+
+    const userAccount = new osparc.user.UserAccount(userGroupId);
+    userAccount.addListener("updateCaption", e => this.setCaption(e.getData()));
+    userAccount.addListener("closeWindow", () => this.close(), this);
+    this._setTabbedView(userAccount);
+  },
+
+  statics: {
+    WIDTH: 500,
+    HEIGHT: 500,
+
+    openWindow: function(userGroupId) {
+      const userAccountWindow = new osparc.user.UserAccountWindow(userGroupId);
+      userAccountWindow.center();
+      userAccountWindow.open();
+      return userAccountWindow;
+    },
+  },
+});

services/static-webserver/client/source/class/osparc/user/UserExtras.js

@@ -0,0 +1,58 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2025 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+qx.Class.define("osparc.user.UserExtras", {
+  extend: qx.ui.core.Widget,
+
+  construct: function() {
+    this.base(arguments);
+
+    this._setLayout(new qx.ui.layout.VBox(10));
+  },
+
+  properties: {
+    extras: {
+      check: "Object",
+      init: null,
+      nullable: true,
+      event: "changeExtras",
+      apply: "__applyExtras",
+    }
+  },
+
+  members: {
+    __applyExtras: function(extras) {
+      if (!extras) {
+        return;
+      }
+
+      for (const key in extras) {
+        const value = extras[key];
+        if (osparc.utils.Utils.isDateLike(value)) {
+          extras[key] = osparc.utils.Utils.formatDateAndTime(new Date(value));
+        }
+      }
+
+      const jsonViewer = new osparc.widget.JsonFormatterWidget(extras);
+      const scroll = new qx.ui.container.Scroll();
+      scroll.add(jsonViewer);
+      this._add(scroll, {
+        flex: 1
+      });
+    },
+  }
+});