✨Expiration Date: FE 2nd iteration

services/static-webserver/client/source/class/osparc/Application.js

@@ -354,14 +354,12 @@ qx.Class.define("osparc.Application", {
         .then(profile => {
           if ("expirationDate" in profile) {
             const now = new Date();
-            const daysToExpiration = osparc.utils.Utils.daysBetween(now, new Date(profile["expirationDate"]));
+            const today = new Date(now.toISOString().slice(0, 10));
+            const expirationDay = new Date(profile["expirationDate"]);
+            const daysToExpiration = osparc.utils.Utils.daysBetween(today, expirationDay);
             if (daysToExpiration < 7) {
-              let msg = this.tr("This account will expire in ") + daysToExpiration + (daysToExpiration < 2 ? this.tr(" day") : this.tr(" days"));
-              msg += "</br>";
-              msg += this.tr("Please, contact us by email:");
-              msg += "</br>";
-              osparc.store.StaticInfo.getInstance().getSupportEmail()
-                .then(supportEmail => osparc.component.message.FlashMessenger.getInstance().logAs(msg + supportEmail, "WARNING"));
+              osparc.utils.Utils.expirationMessage(daysToExpiration)
+                .then(msg => osparc.component.message.FlashMessenger.getInstance().logAs(msg, "WARNING"));
             }
           }
           if (studyId) {

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

@@ -81,6 +81,13 @@ qx.Class.define("osparc.auth.Data", {
       init: "",
       nullable: true,
       check: "String"
+    },
+
+    expirationDate: {
+      init: null,
+      nullable: true,
+      check: "Date",
+      event: "changeExpirationDate"
     }
   },
 

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

@@ -216,9 +216,10 @@ qx.Class.define("osparc.auth.Manager", {
     updateProfile: function(profile) {
       const authData = osparc.auth.Data.getInstance();
       authData.set({
-        email: profile.login,
-        firstName: profile.first_name,
-        lastName: profile.last_name
+        email: profile["login"],
+        firstName: profile["first_name"],
+        lastName: profile["last_name"],
+        expirationDate: "expirationDate" in profile ? new Date(profile["expirationDate"]) : null
       });
     },
 

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

@@ -137,10 +137,10 @@ qx.Class.define("osparc.desktop.preferences.pages.ProfilePage", {
       controller.addTarget(lastName, "value", "lastName", true);
       controller.addTarget(role, "value", "role", false);
       controller.addTarget(expirationDate, "value", "expirationDate", false, {
-        converter: data => {
-          if (data) {
+        converter: expirationDay => {
+          if (expirationDay) {
             expirationLayout.show();
-            return osparc.utils.Utils.formatDateAndTime(new Date(data));
+            return osparc.utils.Utils.formatDate(new Date(expirationDay));
           }
           return "";
         }

services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js

@@ -111,6 +111,7 @@ qx.Class.define("osparc.navigation.NavigationBar", {
       this.getChildControl("read-only-icon");
 
       this.getChildControl("tasks-button");
+      this.getChildControl("expiration-icon");
       this.getChildControl("manual");
       this.getChildControl("feedback");
       this.getChildControl("theme-switch");
@@ -197,6 +198,30 @@ qx.Class.define("osparc.navigation.NavigationBar", {
           control = new osparc.component.task.TasksButton();
           this.getChildControl("right-items").add(control);
           break;
+        case "expiration-icon":
+          control = new qx.ui.basic.Image("@FontAwesome5Solid/hourglass-end/22").set({
+            visibility: "excluded",
+            textColor: "danger-red",
+            cursor: "pointer"
+          });
+          control.addListener("tap", () => osparc.navigation.UserMenuButton.openPreferences(), this);
+          osparc.auth.Data.getInstance().bind("expirationDate", control, "visibility", {
+            converter: expirationDay => {
+              if (expirationDay) {
+                const now = new Date();
+                const today = new Date(now.toISOString().slice(0, 10));
+                const daysToExpiration = osparc.utils.Utils.daysBetween(today, expirationDay);
+                if (daysToExpiration < 7) {
+                  osparc.utils.Utils.expirationMessage(daysToExpiration)
+                    .then(msg => control.setToolTipText(msg));
+                  return "visible";
+                }
+              }
+              return "excluded";
+            }
+          });
+          this.getChildControl("right-items").add(control);
+          break;
         case "manual":
           control = this.__createManualMenuBtn();
           control.set(this.self().BUTTON_OPTIONS);

services/static-webserver/client/source/class/osparc/utils/Utils.js

@@ -246,10 +246,14 @@ qx.Class.define("osparc.utils.Utils", {
       const today = new Date();
       const yesterday = new Date();
       yesterday.setDate(yesterday.getDate() - 1);
+      const tomorrow = new Date();
+      tomorrow.setDate(tomorrow.getDate() + 1);
       if (today.toDateString() === value.toDateString()) {
         dateStr = qx.locale.Manager.tr("Today");
       } else if (yesterday.toDateString() === value.toDateString()) {
         dateStr = qx.locale.Manager.tr("Yesterday");
+      } else if (tomorrow.toDateString() === value.toDateString()) {
+        dateStr = qx.locale.Manager.tr("Tomorrow");
       } else {
         dateStr = dateFormat.format(value);
       }
@@ -274,13 +278,32 @@ qx.Class.define("osparc.utils.Utils", {
       return osparc.utils.Utils.formatDate(value) + " " + osparc.utils.Utils.formatTime(value);
     },
 
-    daysBetween: function(date1, date2) {
+    daysBetween: function(day1, day2) {
       // The number of milliseconds in one day
       const ONE_DAY = 1000 * 60 * 60 * 24;
       // Calculate the difference in milliseconds
-      const differenceMs = date2 - date1;
+      const differenceMs = day2 - day1;
       // Convert back to days and return
-      return Math.round(differenceMs / ONE_DAY);
+      const daysBetween = Math.round(differenceMs / ONE_DAY);
+      return daysBetween;
+    },
+
+    expirationMessage: function(daysToExpiration) {
+      let msg = "";
+      if (daysToExpiration === 0) {
+        msg = qx.locale.Manager.tr("This account will expire Today.");
+      } else if (daysToExpiration === 1) {
+        msg = qx.locale.Manager.tr("This account will expire Tomorrow.");
+      } else {
+        msg = qx.locale.Manager.tr("This account will expire in ") + daysToExpiration + qx.locale.Manager.tr(" days.");
+      }
+      msg += "</br>";
+      msg += qx.locale.Manager.tr("Please, contact us by email:");
+      msg += "</br>";
+      return new Promise(resolve => {
+        osparc.store.StaticInfo.getInstance().getSupportEmail()
+          .then(supportEmail => resolve(msg + supportEmail));
+      });
     },
 
     getNameFromEmail: function(email) {