🎨 [Frontend] TIP v3 Feedback (#5980)

Author: odeimaiz

services/static-webserver/client/Manifest.json

@@ -41,7 +41,7 @@
   "requires": {
     "@qooxdoo/compiler": "^1.0.0-beta",
     "@qooxdoo/framework": "^6.0.0-beta",
-    "ITISFoundation/qx-iconfont-fontawesome5": "^0.2.0",
+    "ITISFoundation/qx-iconfont-fontawesome5": "^1.0.0",
     "ITISFoundation/qx-osparc-theme": "^0.5.6",
     "qooxdoo/qxl.testtapper": "^0.4.3",
     "qooxdoo/qxl.apiviewer": "^1.0.0-beta",

services/static-webserver/client/qx-lock.json

@@ -2,11 +2,11 @@
   "libraries": [
     {
       "library_name": "qx-iconfont-fontawesome5",
-      "library_version": "0.2.0",
-      "path": "qx_packages/ITISFoundation_qx-iconfont-fontawesome5_v0_2_0",
+      "library_version": "1.0.0",
+      "path": "qx_packages/ITISFoundation_qx-iconfont-fontawesome5_v1_0_0",
       "uri": "ITISFoundation/qx-iconfont-fontawesome5",
       "repo_name": "ITISFoundation/qx-iconfont-fontawesome5",
-      "repo_tag": "v0.2.0"
+      "repo_tag": "v1.0.0"
     },
     {
       "library_name": "qx-osparc-theme",

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;
     },