🎨 [Frontend] TIP v3 Feedback

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

@@ -132,6 +132,28 @@ qx.Class.define("osparc.auth.ui.LoginView", {
         `;
         const disclaimer = osparc.announcement.AnnouncementUIFactory.createLoginAnnouncement(this.tr("Disclaimer"), text);
         this.add(disclaimer);
+
+        this.add(new qx.ui.core.Spacer(), {
+          flex: 1
+        });
+
+        const poweredByLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox()).set({
+          alignX: "center",
+          allowGrowX: false,
+          cursor: "pointer"
+        });
+        poweredByLayout.addListener("tap", () => window.open("https://sim4life.swiss/"));
+        const label = new qx.ui.basic.Label(this.tr("powered by"));
+        poweredByLayout.add(label);
+        const s4lLogo = new qx.ui.basic.Image("osparc/Sim4Life_full_logo_white.svg");
+        s4lLogo.set({
+          width: osparc.auth.LoginPage.LOGO_WIDTH/2,
+          height: osparc.auth.LoginPage.LOGO_HEIGHT/2,
+          scale: true,
+          alignX: "center"
+        });
+        poweredByLayout.add(s4lLogo);
+        this.add(poweredByLayout);
       }
     },
 

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

@@ -52,40 +52,48 @@ qx.Class.define("osparc.auth.ui.RequestAccount", {
       });
       this._form.add(lastName, this.tr("Last Name"), null, "lastName");
 
+
       const email = new qx.ui.form.TextField().set({
         required: true
       });
-      if (
-        osparc.product.Utils.isProduct("s4lacad") ||
-        osparc.product.Utils.isProduct("s4ldesktopacad")
-      ) {
-        this._form.add(email, this.tr("University Email"), qx.util.Validate.email(), "email");
-      } else {
-        this._form.add(email, this.tr("Email"), qx.util.Validate.email(), "email");
+      switch (osparc.product.Utils.getProductName()) {
+        case "s4l":
+        case "tis":
+          this._form.add(email, this.tr("Email"), qx.util.Validate.email(), "email");
+          break;
+        case "s4lacad":
+        case "s4ldesktopacad":
+          this._form.add(email, this.tr("University Email"), qx.util.Validate.email(), "email");
+          break;
       }
 
       const phone = new qx.ui.form.TextField();
       this._form.add(phone, this.tr("Phone Number"), null, "phone");
 
-      if (
-        osparc.product.Utils.isProduct("s4lacad") ||
-        osparc.product.Utils.isProduct("s4ldesktopacad")
-      ) {
-        const university = new qx.ui.form.TextField();
-        doubleSpaced.push(university);
-        this._form.add(university, this.tr("University"), null, "university");
-      } else {
-        const company = new qx.ui.form.TextField();
-        doubleSpaced.push(company);
-        this._form.add(company, this.tr("Company Name"), null, "company");
+
+      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");
+          break;
+        case "s4lacad":
+        case "s4ldesktopacad":
+          this._form.add(organization, this.tr("University"), null, "university");
+          break;
+        case "tis":
+          this._form.add(organization, this.tr("Organization"), null, "organization");
+          break;
       }
 
+
       const address = new qx.ui.form.TextField().set({
         required: true
       });
       doubleSpaced.push(address);
       this._form.add(address, this.tr("Address"), null, "address");
 
+
       const city = new qx.ui.form.TextField().set({
         required: true
       });
@@ -96,6 +104,7 @@ qx.Class.define("osparc.auth.ui.RequestAccount", {
       });
       this._form.add(postalCode, this.tr("Postal code"), null, "postalCode");
 
+
       const country = new qx.ui.form.SelectBox().set({
         required: true
       });
@@ -117,58 +126,67 @@ qx.Class.define("osparc.auth.ui.RequestAccount", {
         });
       this._form.add(country, this.tr("Country"), null, "country");
 
-      const application = new qx.ui.form.SelectBox();
-      [{
-        id: "Antenna_Design_for_Wireless_Communication",
-        label: "Antenna Design for Wireless Communication"
-      }, {
-        id: "Bioelectronics,_Electroceuticals_and_Neuroprosthetics",
-        label: "Bioelectronics, Electroceuticals & Neuroprosthetics"
-      }, {
-        id: "Safety_and_Efficacy_Assessment",
-        label: "Safety & Efficacy Assessment"
-      }, {
-        id: "Exposure_and_Compliance",
-        label: "Exposure & Compliance"
-      }, {
-        id: "Focused_Ultrasound",
-        label: "Focused Ultrasound"
-      }, {
-        id: "In_Silico_Trials",
-        label: "In <i>Silico</i> Trials"
-      }, {
-        id: "Implant_Design",
-        label: "Implant Design"
-      }, {
-        id: "Magnetic_Resonance_Imaging",
-        label: "Magnetic Resonance Imaging"
-      }, {
-        id: "Neurostimulation",
-        label: "Neurostimulation"
-      }, {
-        id: "Personalized_Medicine",
-        label: "Personalized Medicine"
-      }, {
-        id: "Thermal_Therapies",
-        label: "Thermal Therapies"
-      }, {
-        id: "Wireless_Power_Transfer_Systems",
-        label: "Wireless Power Transfer Systems"
-      }, {
-        id: "Vascular_Flow_and_Perfusion",
-        label: "Vascular Flow & Perfusion"
-      }].forEach(appData => {
-        const lItem = new qx.ui.form.ListItem(appData.label, null, appData.id).set({
-          rich: true
+
+      if (
+        osparc.product.Utils.isProduct("s4l") ||
+        osparc.product.Utils.isProduct("s4lacad") ||
+        osparc.product.Utils.isProduct("s4ldesktopacad")
+      ) {
+        const application = new qx.ui.form.SelectBox();
+        [{
+          id: "Antenna_Design_for_Wireless_Communication",
+          label: "Antenna Design for Wireless Communication"
+        }, {
+          id: "Bioelectronics,_Electroceuticals_and_Neuroprosthetics",
+          label: "Bioelectronics, Electroceuticals & Neuroprosthetics"
+        }, {
+          id: "Safety_and_Efficacy_Assessment",
+          label: "Safety & Efficacy Assessment"
+        }, {
+          id: "Exposure_and_Compliance",
+          label: "Exposure & Compliance"
+        }, {
+          id: "Focused_Ultrasound",
+          label: "Focused Ultrasound"
+        }, {
+          id: "In_Silico_Trials",
+          label: "In <i>Silico</i> Trials"
+        }, {
+          id: "Implant_Design",
+          label: "Implant Design"
+        }, {
+          id: "Magnetic_Resonance_Imaging",
+          label: "Magnetic Resonance Imaging"
+        }, {
+          id: "Neurostimulation",
+          label: "Neurostimulation"
+        }, {
+          id: "Personalized_Medicine",
+          label: "Personalized Medicine"
+        }, {
+          id: "Thermal_Therapies",
+          label: "Thermal Therapies"
+        }, {
+          id: "Wireless_Power_Transfer_Systems",
+          label: "Wireless Power Transfer Systems"
+        }, {
+          id: "Vascular_Flow_and_Perfusion",
+          label: "Vascular Flow & Perfusion"
+        }].forEach(appData => {
+          const lItem = new qx.ui.form.ListItem(appData.label, null, appData.id).set({
+            rich: true
+          });
+          application.add(lItem);
         });
-        application.add(lItem);
-      });
-      doubleSpaced.push(application);
-      this._form.add(application, this.tr("Application"), null, "application");
+        doubleSpaced.push(application);
+        this._form.add(application, this.tr("Application"), null, "application");
+
+
+        const description = new qx.ui.form.TextField();
+        doubleSpaced.push(description);
+        this._form.add(description, this.tr("Description"), null, "description");
+      }
 
-      const description = new qx.ui.form.TextField();
-      doubleSpaced.push(description);
-      this._form.add(description, this.tr("Description"), null, "description");
 
       const hear = new qx.ui.form.SelectBox();
       [{
@@ -193,6 +211,7 @@ qx.Class.define("osparc.auth.ui.RequestAccount", {
       doubleSpaced.push(hear);
       this._form.add(hear, this.tr("How did you hear about us?"), null, "hear");
 
+
       // accept links
       // Privacy Policy link
       let ppLink = osparc.CookiePolicy.getS4LPrivacyPolicyLink("our privacy policy");

services/static-webserver/client/source/class/osparc/dashboard/GridButtonBase.js

@@ -48,6 +48,7 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
     SPACING: 15,
     // TITLE_MAX_HEIGHT: 34, // two lines in Roboto
     TITLE_MAX_HEIGHT: 40, // two lines in Manrope
+    ICON_SIZE: 50,
     POS: {
       TITLE: {
         row: 0,
@@ -287,7 +288,7 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
     // overridden
     _applyIcon: function(value, old) {
       if (value.includes("@FontAwesome5Solid/")) {
-        value += "50";
+        value += this.self().ICON_SIZE;
         const image = this.getChildControl("icon").getChildControl("image");
         image.set({
           source: value

services/static-webserver/client/source/class/osparc/dashboard/NewStudies.js

@@ -140,12 +140,41 @@ qx.Class.define("osparc.dashboard.NewStudies", {
     },
 
     __createCard: function(templateInfo) {
+      const newStudyClicked = () => this.fireDataEvent("newStudyClicked", templateInfo);
+
       const title = templateInfo.title;
       const desc = templateInfo.description;
       const newPlanButton = new osparc.dashboard.GridButtonNew(title, desc);
       newPlanButton.setCardKey(templateInfo.idToWidget);
       osparc.utils.Utils.setIdToWidget(newPlanButton, templateInfo.idToWidget);
-      newPlanButton.addListener("execute", () => this.fireDataEvent("newStudyClicked", templateInfo))
+      if (templateInfo.billable) {
+        osparc.desktop.credits.Utils.setCreditsIconToButton(newPlanButton);
+        newPlanButton.addListener("execute", () => {
+          const store = osparc.store.Store.getInstance();
+          const credits = store.getContextWallet().getCreditsAvailable()
+          const preferencesSettings = osparc.Preferences.getInstance();
+          const warningThreshold = preferencesSettings.getCreditsWarningThreshold();
+          if (credits <= warningThreshold) {
+            const msg = this.tr("This Plan requires Credits to run Sim4Life powered simulations. You can top up in the Billing Center.");
+            const win = new osparc.ui.window.Confirmation(msg).set({
+              caption: this.tr("Credits required"),
+              confirmText: this.tr("Start, I'll get them later"),
+              confirmAction: "create"
+            });
+            win.center();
+            win.open();
+            win.addListener("close", () => {
+              if (win.getConfirmed()) {
+                this.fireDataEvent("newStudyClicked", templateInfo);
+              }
+            });
+          } else {
+            newStudyClicked();
+          }
+        });
+      } else {
+        newPlanButton.addListener("execute", () => newStudyClicked());
+      }
       return newPlanButton;
     },
 

services/static-webserver/client/source/class/osparc/desktop/credits/CreditsIndicatorButton.js

@@ -0,0 +1,100 @@
+/* ************************************************************************
+
+   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)
+
+************************************************************************ */
+
+qx.Class.define("osparc.desktop.credits.CreditsIndicatorButton", {
+  extend: qx.ui.form.Button,
+
+  construct: function() {
+    this.base(arguments);
+
+    this.set({
+      backgroundColor: "transparent"
+    });
+
+    const store = osparc.store.Store.getInstance();
+    store.bind("contextWallet", this, "wallet");
+
+    this.__creditsContainer = new osparc.desktop.credits.CreditsNavBarContainer();
+    this.__creditsContainer.exclude();
+
+    this.addListener("tap", this.__buttonTapped, this);
+  },
+
+  properties: {
+    wallet: {
+      check: "osparc.data.model.Wallet",
+      init: null,
+      nullable: true,
+      event: "changeWallet",
+      apply: "__applyWallet"
+    }
+  },
+
+  members: {
+    __creditsContainer: null,
+    __tappedOut: null,
+
+    __applyWallet: function() {
+      osparc.desktop.credits.Utils.setCreditsIconToButton(this);
+    },
+
+    __buttonTapped: function() {
+      if (this.__tappedOut) {
+        this.__tappedOut = false;
+        return;
+      }
+      this.__showCreditsContainer();
+    },
+
+    __showCreditsContainer: function() {
+      const tapListener = event => {
+        // In case a notification was tapped propagate the event so it can be handled by the NotificationUI
+        if (osparc.utils.Utils.isMouseOnElement(this.__creditsContainer, event)) {
+          return;
+        }
+        // I somehow can't stop the propagation of the event so workaround:
+        // If the user tapped on the bell we don't want to show it again
+        if (osparc.utils.Utils.isMouseOnElement(this, event)) {
+          this.__tappedOut = true;
+        }
+        this.__hideNotifications();
+        document.removeEventListener("mousedown", tapListener, this);
+      };
+
+      const bounds = this.getBounds();
+      const cel = this.getContentElement();
+      if (cel) {
+        const domeEle = cel.getDomElement();
+        if (domeEle) {
+          const rect = domeEle.getBoundingClientRect();
+          bounds.left = parseInt(rect.x);
+          bounds.top = parseInt(rect.y);
+        }
+      }
+      const bottom = bounds.top+bounds.height+10;
+      const right = bounds.left+bounds.width-4;
+      this.__creditsContainer.setPosition(right, bottom);
+      this.__creditsContainer.show();
+
+      document.addEventListener("mousedown", tapListener, this);
+    },
+
+    __hideNotifications: function() {
+      this.__creditsContainer.exclude();
+    }
+  }
+});