Feature/Flash Messenger (#286)

* Singleton that pops up logs. Functionality first (Needs to be beautified)
* connects to #287 and #167

Author: odeimaiz

services/docker-compose.deploy.devel.yml

@@ -20,7 +20,6 @@ services:
           - node.platform.os == linux
           - node.role == manager
     environment:
-      - OSPARC_PUBLIC_URL=http://osparc01.itis.ethz.ch:9081
       - POSTGRES_ENDPOINT=postgres
       - POSTGRES_USER=simcore
       - POSTGRES_PASSWORD=simcore

services/docker-compose.deploy.yml

@@ -20,7 +20,6 @@ services:
           - node.platform.os == linux
           - node.role == manager
     environment:
-      - OSPARC_PUBLIC_URL=http://osparc01.itis.ethz.ch:9081
       - POSTGRES_ENDPOINT=postgres
       - POSTGRES_USER=simcore
       - POSTGRES_PASSWORD=simcore

services/web/client/source/class/qxapp/auth/Manager.js

@@ -57,7 +57,7 @@ qx.Class.define("qxapp.auth.Manager", {
         // TODO: validate data against specs???
         // TODO: activate tokens!?
         this.__loginUser(email, data.token || "fake token");
-        successCbk.call(context, data.message);
+        successCbk.call(context, data);
       }, this);
 
       this.__bindDefaultFailCallback(request, failCbk, context);
@@ -110,6 +110,7 @@ qx.Class.define("qxapp.auth.Manager", {
         } = e.getTarget().getResponse();
 
         // TODO: validate data against specs???
+        // FIXME: Data is an object
         successCbk.call(context, data);
       }, this);
     },
@@ -126,7 +127,7 @@ qx.Class.define("qxapp.auth.Manager", {
             msg = msg + error.errors[i].message + " ";
           }
         }
-
+        // FIXME: Data is an object
         failCbk.call(context, msg);
       }, this);
     }

services/web/client/source/class/qxapp/auth/ui/RegistrationPage.js

@@ -119,8 +119,8 @@ qx.Class.define("qxapp.auth.ui.RegistrationPage", {
       let manager = qxapp.auth.Manager.getInstance();
 
       let successFun = function(log) {
-        // TODO: add flash
         this.fireDataEvent("done", log.message);
+        qxapp.component.widget.FlashMessenger.getInstance().log(log);
       };
 
       let failFun = function(msg) {

services/web/client/source/class/qxapp/component/widget/FlashMessenger.js

@@ -0,0 +1,85 @@
+qx.Class.define("qxapp.component.widget.FlashMessenger", {
+  extend: qx.ui.window.Window,
+
+  type: "singleton",
+
+  construct: function() {
+    this.base();
+
+    this.set({
+      appearance: "window-small-cap",
+      showMinimize: false,
+      showMaximize: false,
+      allowMaximize: false,
+      showStatusbar: false,
+      resizable: false,
+      contentPadding: 0,
+      caption: "Logger",
+      layout: new qx.ui.layout.VBox()
+    });
+  },
+
+  members: {
+    log: function(logMessage) {
+      const message = logMessage.message;
+      const level = logMessage.level; // "DEBUG", "INFO", "WARNING", "ERROR"
+      const logger = logMessage.logger;
+
+      let label = new qx.ui.basic.Label(logger + ": " + message).set({
+        allowGrowX: true,
+        allowGrowY: true,
+        alignX: "center",
+        textAlign: "center",
+        padding: 5
+      });
+      this.add(label);
+
+      switch (level) {
+        case "DEBUG":
+          label.setBackgroundColor("blue");
+          label.setTextColor("white");
+          break;
+        case "INFO":
+          label.setBackgroundColor("blue");
+          label.setTextColor("white");
+          break;
+        case "WARNING":
+          label.setBackgroundColor("yellow");
+          label.setTextColor("black");
+          break;
+        case "ERROR":
+          label.setBackgroundColor("red");
+          label.setTextColor("black");
+          break;
+      }
+
+      if (this.getVisibility() !== "visible") {
+        this.__toTopCenter();
+        this.open();
+      }
+
+      const time = 3000;
+      qx.event.Timer.once(e => {
+        this.remove(label);
+        if (this.getChildren().length === 0) {
+          this.close();
+        }
+      }, this, time);
+    },
+
+    __toTopCenter: function() {
+      const parent = this.getLayoutParent();
+      if (parent) {
+        const bounds = parent.getBounds();
+        if (bounds) {
+          const hint = this.getSizeHint();
+          const left = Math.round((bounds.width - hint.width) / 2);
+          const top = 50;
+          this.moveTo(left, top);
+          return;
+        }
+      }
+      this.center();
+    }
+  }
+});