eyes next to the fields

Author: odeimaiz

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

@@ -111,7 +111,14 @@ qx.Class.define("osparc.desktop.account.ProfilePage", {
       form.add(firstName, "First Name", null, "firstName");
       form.add(lastName, "Last Name", null, "lastName");
       form.add(email, "Email", null, "email");
-      box.add(new qx.ui.form.renderer.Single(form));
+      const icons = {
+        0: "@FontAwesome5Solid/eye/12",
+        1: "@FontAwesome5Solid/eye-slash/12",
+        2: "@FontAwesome5Solid/eye-slash/12",
+        3: "@FontAwesome5Solid/eye-slash/12",
+      };
+      const singleWithIcon = new osparc.ui.form.renderer.SingleWithIcon(form, icons);
+      box.add(singleWithIcon);
 
       const expirationLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5)).set({
         paddingLeft: 16,

services/static-webserver/client/source/class/osparc/ui/form/renderer/SingleWithIcon.js

@@ -0,0 +1,62 @@
+/* ************************************************************************
+
+   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.ui.form.renderer.SingleWithIcon", {
+  extend: qx.ui.form.renderer.Single,
+
+  construct: function(form, icons) {
+    if (icons) {
+      this.__icons = icons;
+    } else {
+      this.__icons = {};
+    }
+
+    this.base(arguments, form);
+  },
+
+  members: {
+    __icons: null,
+
+    setIcons(icons) {
+      this.__icons = icons;
+
+      this._render();
+    },
+
+    // overridden
+    addItems: function(items, names, title, itemOptions, headerOptions) {
+      this.base(arguments, items, names, title, itemOptions, headerOptions);
+
+      // header
+      let row = title === null ? 0 : 1;
+
+      for (let i = 0; i < items.length; i++) {
+        if (i in this.__icons) {
+          const image = new qx.ui.basic.Image(this.__icons[i]).set({
+            alignY: "middle",
+          });
+          this._add(image, {
+            row,
+            column: 2,
+          });
+        }
+
+        row++;
+      }
+    },
+  }
+});