🎨 [Frontend] Display Contact information

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

@@ -83,27 +83,12 @@ qx.Class.define("osparc.auth.ui.RequestAccount", {
       this._form.add(phone, this.tr("Phone Number"), null, "phone");
 
 
-      const organization = new qx.ui.form.TextField();
-      doubleSpaced.push(organization);
-      switch (osparc.product.Utils.getProductName()) {
-        case "s4l":
-          this._form.add(organization, this.tr("Company Name"), null, "company");
-          organization.setRequired(true);
-          break;
-        case "s4lacad":
-        case "s4ldesktopacad":
-          this._form.add(organization, this.tr("University"), null, "university");
-          organization.setRequired(true);
-          break;
-        case "tiplite":
-          this._form.add(organization, this.tr("University"), null, "university");
-          break;
-        case "tis":
-          this._form.add(organization, this.tr("Organization"), null, "organization");
-          break;
-        case "osparc":
-          this._form.add(organization, this.tr("Research Group/Organization"), null, "organization");
-          break;
+      const institution = new qx.ui.form.TextField();
+      doubleSpaced.push(institution);
+      const institutionAlias = osparc.product.Utils.getInstitutionAlias();
+      this._form.add(institution, institutionAlias.label, null, institutionAlias.key);
+      if (institutionAlias.required) {
+        institution.setRequired(true);
       }
 
 

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

@@ -64,6 +64,18 @@ qx.Class.define("osparc.data.model.User", {
       description,
     });
 
+    if (userData["contact"]) {
+      const contact = userData["contact"];
+      this.set({
+        institution: contact["institution"] || null,
+        address: contact["address"] || null,
+        city: contact["city"] || null,
+        state: contact["state"] || null,
+        country: contact["country"] || null,
+        postalCode: contact["postalCode"] || null,
+      });
+    }
+
     // create the thumbnail after setting email and username
     this.set({
       thumbnail: this.createThumbnail(),
@@ -140,6 +152,48 @@ qx.Class.define("osparc.data.model.User", {
       init: "",
       event: "changeThumbnail",
     },
+
+    institution: {
+      check: "String",
+      nullable: true,
+      init: null,
+      event: "changeInstitution",
+    },
+
+    address: {
+      check: "String",
+      nullable: true,
+      init: null,
+      event: "changeAddress",
+    },
+
+    city: {
+      check: "String",
+      nullable: true,
+      init: null,
+      event: "changeCity",
+    },
+
+    state: {
+      check: "String",
+      nullable: true,
+      init: null,
+      event: "changeState",
+    },
+
+    country: {
+      check: "String",
+      nullable: true,
+      init: null,
+      event: "changeCountry",
+    },
+
+    postalCode: {
+      check: "String",
+      nullable: true,
+      init: null,
+      event: "changePostalCode",
+    },
   },
 
   members: {

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

@@ -46,16 +46,18 @@ qx.Class.define("osparc.desktop.account.MyAccount", {
   },
 
   statics: {
-    createMiniProfileView: function(withSpacer = true) {
+    createMiniProfileView: function(userData) {
       const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(6)).set({
         alignX: "center",
         minWidth: 120,
         maxWidth: 150
       });
 
-      const authData = osparc.auth.Data.getInstance();
-      const username = authData.getUsername();
-      const email = authData.getEmail();
+      if (!userData) {
+        userData = osparc.auth.Data.getInstance();
+      }
+      const username = userData.getUsername();
+      const email = userData.getEmail();
       const avatarSize = 80;
       const img = new qx.ui.basic.Image().set({
         source: osparc.utils.Avatar.emailToThumbnail(email, username, avatarSize),
@@ -73,33 +75,31 @@ qx.Class.define("osparc.desktop.account.MyAccount", {
         font: "text-14",
         alignX: "center"
       });
-      authData.bind("username", usernameLabel, "value");
+      userData.bind("username", usernameLabel, "value");
       layout.add(usernameLabel);
 
       const fullNameLabel = new qx.ui.basic.Label().set({
         font: "text-13",
         alignX: "center"
       });
       layout.add(fullNameLabel);
-      authData.bind("firstName", fullNameLabel, "value", {
-        converter: () => authData.getFullName()
+      userData.bind("firstName", fullNameLabel, "value", {
+        converter: () => userData.getFullName()
       });
-      authData.bind("lastName", fullNameLabel, "value", {
-        converter: () => authData.getFullName()
+      userData.bind("lastName", fullNameLabel, "value", {
+        converter: () => userData.getFullName()
       });
 
-      if (authData.getRole() !== "user") {
-        const role = authData.getFriendlyRole();
+      if (userData.getRole() !== "user") {
+        const role = userData.getFriendlyRole();
         const roleLabel = new qx.ui.basic.Label(role).set({
           font: "text-13",
           alignX: "center"
         });
         layout.add(roleLabel);
       }
 
-      if (withSpacer) {
-        layout.add(new qx.ui.core.Spacer(15, 15));
-      }
+      layout.add(new qx.ui.core.Spacer(15, 15));
 
       return layout;
     }

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

@@ -37,6 +37,7 @@ qx.Class.define("osparc.desktop.account.ProfilePage", {
       this._add(this.__create2FASection());
     }
     this._add(this.__createPasswordSection());
+    this._add(this.__createContactSection());
     this._add(this.__createDeleteAccount());
 
     this.__userProfileData = {};
@@ -55,29 +56,42 @@ qx.Class.define("osparc.desktop.account.ProfilePage", {
         PHONE: 4,
       },
     },
+
+    createSectionBox: function(title) {
+      const box = osparc.ui.window.TabbedView.createSectionBox(title).set({
+        alignX: "left",
+        maxWidth: 500
+      });
+      return box;
+    },
   },
 
   members: {
     __userProfileData: null,
     __userProfileModel: null,
+    __userProfileForm: null,
     __userProfileRenderer: null,
-    __privacyRenderer: null,
     __updateProfileBtn: null,
     __userPrivacyData: null,
     __userPrivacyModel: null,
+    __privacyRenderer: null,
     __updatePrivacyBtn: null,
-    __userProfileForm: null,
     __sms2FAItem: null,
+    __personalInfoModel: null,
+    __personalInfoRenderer: null,
 
     __fetchProfile: function() {
       this.__userProfileRenderer.setEnabled(false);
       this.__privacyRenderer.setEnabled(false);
+      this.__personalInfoRenderer.setEnabled(false);
+
       osparc.data.Resources.getOne("profile", {}, null, false)
         .then(profile => {
           this.__setDataToProfile(profile);
           this.__setDataToPrivacy(profile["privacy"]);
           this.__userProfileRenderer.setEnabled(true);
           this.__privacyRenderer.setEnabled(true);
+          this.__personalInfoRenderer.setEnabled(true);
         })
         .catch(err => console.error(err));
     },
@@ -93,6 +107,17 @@ qx.Class.define("osparc.desktop.account.ProfilePage", {
           "phone": data["phone"] || "-",
           "expirationDate": data["expirationDate"] || null,
         });
+        if (data["contact"]) {
+          const contact = data["contact"];
+          this.__personalInfoModel.set({
+            "institution": contact["institution"] || "",
+            "address": contact["address"] || "",
+            "city": contact["city"] || "",
+            "state": contact["state"] || "",
+            "country": contact["country"] || "",
+            "postalCode": contact["postalCode"] || "",
+          });
+        }
       }
       this.__updateProfileBtn.setEnabled(false);
 
@@ -137,13 +162,17 @@ qx.Class.define("osparc.desktop.account.ProfilePage", {
       this.__updatePrivacyBtn.setEnabled(false);
     },
 
+    __resetUserData: function() {
+      this.__setDataToProfile(this.__userProfileData);
+    },
+
+    __resetPrivacyData: function() {
+      this.__setDataToPrivacy(this.__userPrivacyData);
+    },
+
     __createProfileUser: function() {
       // layout
-      const box = osparc.ui.window.TabbedView.createSectionBox(this.tr("User"));
-      box.set({
-        alignX: "left",
-        maxWidth: 500
-      });
+      const box = this.self().createSectionBox(this.tr("User"));
 
       const username = new qx.ui.form.TextField().set({
         placeholder: this.tr("username")
@@ -307,13 +336,9 @@ qx.Class.define("osparc.desktop.account.ProfilePage", {
 
       const privacyModel = this.__userPrivacyModel = qx.data.marshal.Json.createModel(defaultModel, true);
 
-      const box = osparc.ui.window.TabbedView.createSectionBox(this.tr("Privacy"));
-      box.set({
-        alignX: "left",
-        maxWidth: 500
-      });
+      const box = this.self().createSectionBox(this.tr("Privacy"));
 
-      const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr("For Privacy reasons, you might want to hide some personal data."));
+      const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr("Choose what others see."));
       box.add(label);
 
       const hideUsername = new qx.ui.form.CheckBox().set({
@@ -427,7 +452,7 @@ qx.Class.define("osparc.desktop.account.ProfilePage", {
     },
 
     __create2FASection: function() {
-      const box = osparc.ui.window.TabbedView.createSectionBox(this.tr("Two-Factor Authentication"));
+      const box = this.self().createSectionBox(this.tr("Two-Factor Authentication"));
 
       const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr("Set your preferred method to use for two-factor authentication when signing in:"));
       box.add(label);
@@ -497,21 +522,9 @@ qx.Class.define("osparc.desktop.account.ProfilePage", {
       return box;
     },
 
-    __resetUserData: function() {
-      this.__setDataToProfile(this.__userProfileData);
-    },
-
-    __resetPrivacyData: function() {
-      this.__setDataToPrivacy(this.__userPrivacyData);
-    },
-
     __createPasswordSection: function() {
       // layout
-      const box = osparc.ui.window.TabbedView.createSectionBox(this.tr("Password"));
-      box.set({
-        alignX: "left",
-        maxWidth: 500
-      });
+      const box = this.self().createSectionBox(this.tr("Password"));
 
       const currentPassword = new osparc.ui.form.PasswordField().set({
         required: true,
@@ -577,13 +590,79 @@ qx.Class.define("osparc.desktop.account.ProfilePage", {
       return box;
     },
 
-    __createDeleteAccount: function() {
+    __createContactSection: function() {
       // layout
-      const box = osparc.ui.window.TabbedView.createSectionBox(this.tr("Danger Zone")).set({
-        alignX: "left",
-        maxWidth: 500
+      const box = this.self().createSectionBox(this.tr("Contact"));
+
+      const institution = new qx.ui.form.TextField().set({
+        placeholder: osparc.product.Utils.getInstitutionAlias().label,
+        readOnly: true,
+      });
+
+      const address = new qx.ui.form.TextField().set({
+        placeholder: this.tr("Address"),
+        readOnly: true,
+      });
+      const city = new qx.ui.form.TextField().set({
+        placeholder: this.tr("City"),
+        readOnly: true,
+      });
+
+      const state = new qx.ui.form.TextField().set({
+        placeholder: this.tr("State"),
+        readOnly: true,
+      });
+
+      const country = new qx.ui.form.TextField().set({
+        placeholder: this.tr("Country"),
+        readOnly: true,
+      });
+
+      const postalCode = new qx.ui.form.TextField().set({
+        placeholder: this.tr("Postal Code"),
+        readOnly: true,
       });
 
+      const personalInfoForm = new qx.ui.form.Form();
+      personalInfoForm.add(institution, osparc.product.Utils.getInstitutionAlias().label, null, "institution");
+      personalInfoForm.add(address, this.tr("Address"), null, "address");
+      personalInfoForm.add(city, this.tr("City"), null, "city");
+      personalInfoForm.add(state, this.tr("State"), null, "state");
+      personalInfoForm.add(country, this.tr("Country"), null, "country");
+      personalInfoForm.add(postalCode, this.tr("Postal Code"), null, "postalCode");
+      this.__personalInfoRenderer = new qx.ui.form.renderer.Single(personalInfoForm);
+      box.add(this.__personalInfoRenderer);
+
+      // binding to a model
+      const raw = {
+        "institution": null,
+        "address": null,
+        "city": null,
+        "state": null,
+        "country": null,
+        "postalCode": null,
+      };
+
+      const model = this.__personalInfoModel = qx.data.marshal.Json.createModel(raw);
+      const controller = new qx.data.controller.Object(model);
+
+      controller.addTarget(institution, "value", "institution", true);
+      controller.addTarget(address, "value", "address", true);
+      controller.addTarget(city, "value", "city", true);
+      controller.addTarget(state, "value", "state", true);
+      controller.addTarget(country, "value", "country", true);
+      controller.addTarget(postalCode, "value", "postalCode", true);
+
+      return box;
+    },
+
+    __createDeleteAccount: function() {
+      // layout
+      const box = this.self().createSectionBox(this.tr("Delete Account"));
+
+      const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr("Request the deletion of your account."));
+      box.add(label);
+
       const deleteBtn = new qx.ui.form.Button(this.tr("Delete Account")).set({
         appearance: "danger-button",
         alignX: "right",