Merge branch 'master' into fix/firefox-logs-newline

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

@@ -63,14 +63,13 @@ qx.Class.define("osparc.Application", {
         return;
       }
 
-      const intlTelInput = osparc.wrapper.IntlTelInput.getInstance();
-      intlTelInput.init();
+      // libs
+      osparc.wrapper.IntlTelInput.getInstance().init();
+      osparc.wrapper.Three.getInstance().init();
 
-      const threejs = osparc.wrapper.Three.getInstance();
-      threejs.init();
-
-      const announcementsTracker = osparc.announcement.Tracker.getInstance();
-      announcementsTracker.startTracker();
+      // trackers
+      osparc.announcement.Tracker.getInstance().startTracker();
+      osparc.WindowSizeTracker.getInstance().startTracker();
 
       const webSocket = osparc.wrapper.WebSocket.getInstance();
       webSocket.addListener("connect", () => osparc.WatchDog.getInstance().setOnline(true));
@@ -467,6 +466,7 @@ qx.Class.define("osparc.Application", {
 
     __loadMainPage: function(studyId = null) {
       // logged in
+      osparc.WindowSizeTracker.getInstance().evaluateTooSmallDialog();
       osparc.data.Resources.getOne("profile")
         .then(profile => {
           if (profile) {

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

@@ -0,0 +1,82 @@
+/* ************************************************************************
+
+   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.TooSmallDialog", {
+  extend: osparc.ui.window.SingletonWindow,
+
+  construct: function() {
+    this.base(arguments, "too-small-logout", this.tr("Window too small"));
+
+    this.set({
+      layout: new qx.ui.layout.VBox(10),
+      contentPadding: 15,
+      modal: true,
+      showMaximize: false,
+      showMinimize: false,
+    });
+
+    this.__buildLayout();
+  },
+
+  statics: {
+    openWindow: function() {
+      const orgsWindow = new osparc.TooSmallDialog();
+      orgsWindow.center();
+      orgsWindow.open();
+      return orgsWindow;
+    }
+  },
+
+  members: {
+    __buildLayout: function() {
+      const message = this.__createMessage();
+      this.add(message);
+
+      // if the user is logged in, let them log out, the user menu might be unreachable
+      const logoutButton = this.__createLogoutButton();
+      this.add(logoutButton);
+    },
+
+    __createMessage: function() {
+      const introText = this.tr("The application can't perform in such a small window.");
+      const introLabel = new qx.ui.basic.Label(introText);
+      return introLabel;
+    },
+
+    __createLogoutButton: function() {
+      const layout = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({
+        alignX: "right"
+      }));
+
+      const button = new qx.ui.form.Button().set({
+        allowGrowX: false
+      });
+      button.addListener("execute", () => qx.core.Init.getApplication().logout());
+      layout.add(button);
+
+      const authData = osparc.auth.Data.getInstance();
+      authData.bind("loggedIn", layout, "visibility", {
+        converter: isLoggedIn => isLoggedIn ? "visible" : "excluded"
+      });
+      authData.bind("guest", button, "label", {
+        converter: isGuest => isGuest ? this.tr("Exit") : this.tr("Log out")
+      });
+
+      return layout;
+    },
+  }
+});

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

@@ -40,20 +40,22 @@ qx.Class.define("osparc.WindowSizeTracker", {
     },
 
     tooSmall: {
-      check: [null, "shortText", "longText"], // display short message, long one or none
+      check: [null, "logout", "shortText", "longText"],
       init: null,
       nullable: true,
       apply: "__applyTooSmall"
     }
   },
 
   statics: {
+    WIDTH_LOGOUT_BREAKPOINT: 600,
+    WIDTH_COMPACT_BREAKPOINT: 1100,
     WIDTH_BREAKPOINT: 1180, // - iPad Pro 11" 1194x834 inclusion
     HEIGHT_BREAKPOINT: 720, // - iPad Pro 11" 1194x834 inclusion
-    WIDTH_COMPACT_BREAKPOINT: 1100
   },
 
   members: {
+    __tooSmallDialog: null,
     __lastRibbonMessage: null,
 
     startTracker: function() {
@@ -69,8 +71,12 @@ qx.Class.define("osparc.WindowSizeTracker", {
 
       this.setCompactVersion(width < this.self().WIDTH_COMPACT_BREAKPOINT);
 
-      if (width < this.self().WIDTH_BREAKPOINT || height < this.self().HEIGHT_BREAKPOINT) {
-        this.setTooSmall(width < this.self().WIDTH_COMPACT_BREAKPOINT ? "shortText" : "longText");
+      if (width < this.self().WIDTH_LOGOUT_BREAKPOINT) {
+        this.setTooSmall("logout");
+      } else if (width < this.self().WIDTH_COMPACT_BREAKPOINT) {
+        this.setTooSmall("shortText");
+      } else if (width < this.self().WIDTH_BREAKPOINT) {
+        this.setTooSmall("longText");
       } else {
         this.setTooSmall(null);
       }
@@ -89,14 +95,16 @@ qx.Class.define("osparc.WindowSizeTracker", {
       }
 
       let notification = null;
-      if (tooSmall === "shortText") {
+      if (tooSmall === "logout" || tooSmall === "shortText") {
         notification = new osparc.notification.RibbonNotification(null, "smallWindow", true);
       } else if (tooSmall === "longText") {
         const text = this.__getLongText(true);
         notification = new osparc.notification.RibbonNotification(text, "smallWindow", true);
       }
       osparc.notification.RibbonNotifications.getInstance().addNotification(notification);
       this.__lastRibbonMessage = notification;
+
+      this.evaluateTooSmallDialog();
     },
 
     __getLongText: function() {
@@ -111,6 +119,21 @@ qx.Class.define("osparc.WindowSizeTracker", {
         osparc.notification.RibbonNotifications.getInstance().removeNotification(this.__lastRibbonMessage);
         this.__lastRibbonMessage = null;
       }
+    },
+
+    evaluateTooSmallDialog: function() {
+      const tooSmall = this.getTooSmall();
+      if (tooSmall === "logout") {
+        if (this.__tooSmallDialog) {
+          this.__tooSmallDialog.center();
+          this.__tooSmallDialog.open();
+        } else {
+          this.__tooSmallDialog = osparc.TooSmallDialog.openWindow();
+          this.__tooSmallDialog.addListener("close", () => this.__tooSmallDialog = null, this);
+        }
+      } else if (this.__tooSmallDialog) {
+        this.__tooSmallDialog.close();
+      }
     }
   }
 });

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

@@ -58,7 +58,8 @@ qx.Class.define("osparc.auth.Data", {
     auth: {
       init: null,
       nullable: true,
-      check: "osparc.io.request.authentication.Token"
+      check: "osparc.io.request.authentication.Token",
+      apply: "__applyAuth"
     },
 
     /**
@@ -104,10 +105,21 @@ qx.Class.define("osparc.auth.Data", {
       nullable: true,
       check: "Date",
       event: "changeExpirationDate"
+    },
+
+    loggedIn: {
+      check: "Boolean",
+      nullable: false,
+      init: false,
+      event: "changeLoggedIn",
     }
   },
 
   members: {
+    __applyAuth: function(auth) {
+      this.setLoggedIn(auth !== null && auth instanceof osparc.io.request.authentication.Token);
+    },
+
     __applyRole: function(role) {
       if (role && ["user", "tester", "product_owner", "admin"].includes(role)) {
         this.setGuest(false);

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

@@ -26,23 +26,10 @@ qx.Class.define("osparc.auth.Manager", {
   extend: qx.core.Object,
   type: "singleton",
 
-  /*
-  *****************************************************************************
-     EVENTS
-  *****************************************************************************
-  */
-
   events: {
     "loggedOut": "qx.event.type.Event"
   },
 
-
-  /*
-  *****************************************************************************
-     MEMBERS
-  *****************************************************************************
-  */
-
   members: {
     register: function(userData) {
       const params = {
@@ -130,11 +117,7 @@ qx.Class.define("osparc.auth.Manager", {
     },
 
     isLoggedIn: function() {
-      // TODO: how to store this locally?? See http://www.qooxdoo.org/devel/pages/data_binding/stores.html#offline-store
-      // TODO: check if expired??
-      // TODO: request server if token is still valid (e.g. expired, etc)
-      const auth = osparc.auth.Data.getInstance().getAuth();
-      return auth !== null && auth instanceof osparc.io.request.authentication.Token;
+      return osparc.auth.Data.getInstance().isLoggedIn();
     },
 
     /*

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

@@ -23,27 +23,28 @@ qx.Class.define("osparc.dashboard.FolderWithSharedIcon", {
 
     this._setLayout(new qx.ui.layout.Canvas());
 
-    this._createChildControlImpl("folder-icon");
-    this._createChildControlImpl("shared-icon");
+    this.getChildControl("folder-icon");
+    this.getChildControl("shared-icon");
   },
 
   members: {
     _createChildControlImpl: function(id) {
       let control;
       switch (id) {
-        case "folder-icon": {
-          control = new qx.ui.basic.Image().set({
-            source: "@FontAwesome5Solid/folder/26"
-          });
-          const iconContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({
+        case "icon-container":
+          control = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({
             alignY: "middle"
           }));
-          iconContainer.add(control);
-          this._add(iconContainer, {
+          this._add(control, {
             height: "100%"
           });
           break;
-        }
+        case "folder-icon":
+          control = new qx.ui.basic.Image().set({
+            source: "@FontAwesome5Solid/folder/26"
+          });
+          this.getChildControl("icon-container").add(control);
+          break;
         case "shared-icon":
           control = new qx.ui.basic.Image().set({
             textColor: "strong-main",

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

@@ -170,6 +170,10 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     },
 
     __reloadFolders: function() {
+      if (!osparc.auth.Manager.getInstance().isLoggedIn()) {
+        return;
+      }
+
       if (osparc.utils.DisabledPlugins.isFoldersEnabled()) {
         const folderId = this.getCurrentFolderId();
         const workspaceId = this.getCurrentWorkspaceId();
@@ -186,7 +190,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     },
 
     __reloadStudies: function() {
-      if (this._loadingResourcesBtn.isFetching()) {
+      if (this._loadingResourcesBtn.isFetching() || !osparc.auth.Manager.getInstance().isLoggedIn()) {
         return;
       }
       const workspaceId = this.getCurrentWorkspaceId();