Added lost front-end from PR25

pcrespov · pcrespov · commit c8626ef1afdb · 2020-04-28T00:49:34.000+02:00
SEE https://github.com/pcrespov/osparc-simcore/pull/25/files
diff --git a/services/web/client/source/class/osparc/desktop/preferences/pages/SecurityPage.js b/services/web/client/source/class/osparc/desktop/preferences/pages/SecurityPage.js
@@ -24,82 +24,144 @@
  */
 
 qx.Class.define("osparc.desktop.preferences.pages.SecurityPage", {
-  extend:osparc.desktop.preferences.pages.BasePage,
+  extend: osparc.desktop.preferences.pages.BasePage,
 
-  construct: function() {
+  construct: function () {
     const iconSrc = "@FontAwesome5Solid/shield-alt/24";
     const title = this.tr("Security");
     this.base(arguments, title, iconSrc);
 
     this.add(this.__createPasswordSection());
-    this.add(this.__createTokensSection());
+    this.add(this.__createInternalTokensSection());
+    this.add(this.__createExternalTokensSection());
+
+    this.__rebuildTokensList();
   },
 
   members: {
-    __tokensList: null,
+    __internalTokensList: null,
+    __externalTokensList: null,
 
-    __createTokensSection: function() {
+    __createInternalTokensSection: function () {
       // layout
-      const box = this._createSectionBox(this.tr("Access Tokens"));
+      const box = this._createSectionBox(this.tr("oSPARC API Tokens"));
+
+      const label = this._createHelpLabel(this.tr(
+        "Tokens to access oSPARC API."
+      ));
+      box.add(label);
+
+      const tokensList = this.__internalTokensList = new qx.ui.container.Composite(new qx.ui.layout.VBox(8));
+      box.add(tokensList);
+
+      const requestTokenBtn = this.__requestTokenBtn = new osparc.ui.form.FetchButton(this.tr("Create oSPARC Token")).set({
+        allowGrowX: false
+      });
+      requestTokenBtn.addListener("execute", () => {
+        this.__requestOsparcToken();
+      }, this);
+      box.add(requestTokenBtn);
+
+      return box;
+    },
+
+    __requestOsparcToken: function () {
+      if (!osparc.data.Permissions.getInstance().canDo("preferences.token.create", true)) {
+        return;
+      }
+
+      const createAPIKeyWindow = new osparc.desktop.preferences.window.CreateAPIKey("hello", "world");
+      createAPIKeyWindow.addListener("finished", keyLabel => {
+        const params = {
+          data: {
+            "service": "osparc",
+            "keyLabel": keyLabel.getData()
+          }
+        };
+        createAPIKeyWindow.close();
+        this.__requestTokenBtn.setFetching(true);
+        osparc.data.Resources.fetch("tokens", "post", params)
+          .then(data => {
+            this.__rebuildTokensList();
+            const showAPIKeyWindow = new osparc.desktop.preferences.window.ShowAPIKey("hello", "world");
+            showAPIKeyWindow.center();
+            showAPIKeyWindow.open();
+            console.log(data);
+          })
+          .catch(err => {
+            osparc.component.message.FlashMessenger.getInstance().logAs(this.tr("Failed creating oSPARC API token"), "ERROR");
+            console.error(err);
+          })
+          .finally(() => this.__requestTokenBtn.setFetching(false));
+      }, this);
+      createAPIKeyWindow.open();
+    },
+
+    __createExternalTokensSection: function () {
+      // layout
+      const box = this._createSectionBox(this.tr("External service Tokens"));
 
       const label = this._createHelpLabel(this.tr(
         "List of API tokens to access external services. Currently, \
          only DAT-Core API keys are supported."
       ));
       box.add(label);
 
-      let linkBtn = new osparc.ui.form.LinkButton(this.tr("To DAT-Core"), "https://app.blackfynn.io");
+      const linkBtn = new osparc.ui.form.LinkButton(this.tr("To DAT-Core"), "https://app.blackfynn.io");
       box.add(linkBtn);
 
-      const tokensList = this.__tokensList = new qx.ui.container.Composite(new qx.ui.layout.VBox(8));
+      const tokensList = this.__externalTokensList = new qx.ui.container.Composite(new qx.ui.layout.VBox(8));
       box.add(tokensList);
-      this.__rebuildTokensList();
 
       return box;
     },
 
-    __rebuildTokensList: function() {
-      this.__tokensList.removeAll();
+    __rebuildTokensList: function () {
+      this.__internalTokensList.removeAll();
+      this.__externalTokensList.removeAll();
       osparc.data.Resources.get("tokens")
         .then(tokensList => {
           if (tokensList.length) {
-            for (let i=0; i<tokensList.length; i++) {
+            for (let i = 0; i < tokensList.length; i++) {
               const tokenForm = this.__createValidTokenForm(tokensList[i]);
-              this.__tokensList.add(tokenForm);
+              if (tokensList[i].service === "osparc") {
+                this.__internalTokensList.add(tokenForm);
+              } else {
+                this.__externalTokensList.add(tokenForm);
+              }
             }
           } else {
             const emptyForm = this.__createEmptyTokenForm();
-            this.__tokensList.add(new qx.ui.form.renderer.Single(emptyForm));
+            this.__externalTokensList.add(new qx.ui.form.renderer.Single(emptyForm));
           }
         })
         .catch(err => console.error(err));
     },
 
-    __createEmptyTokenForm: function() {
-      let form = new qx.ui.form.Form();
+    __createEmptyTokenForm: function () {
+      const form = new qx.ui.form.Form();
 
       // FIXME: for the moment this is fixed since it has to be a unique id
-      let newTokenService = new qx.ui.form.TextField();
+      const newTokenService = new qx.ui.form.TextField();
       newTokenService.set({
         value: "blackfynn-datcore",
         readOnly: true
       });
       form.add(newTokenService, this.tr("Service"));
 
-      // TODO:
-      let newTokenKey = new qx.ui.form.TextField();
+      const newTokenKey = new qx.ui.form.TextField();
       newTokenKey.set({
         placeholder: this.tr("Introduce token key here")
       });
       form.add(newTokenKey, this.tr("Key"));
 
-      let newTokenSecret = new qx.ui.form.TextField();
+      const newTokenSecret = new qx.ui.form.TextField();
       newTokenSecret.set({
         placeholder: this.tr("Introduce token secret here")
       });
       form.add(newTokenSecret, this.tr("Secret"));
 
-      let addTokenBtn = new qx.ui.form.Button(this.tr("Add"));
+      const addTokenBtn = new qx.ui.form.Button(this.tr("Add"));
       addTokenBtn.setWidth(100);
       addTokenBtn.addListener("execute", e => {
         if (!osparc.data.Permissions.getInstance().canDo("preferences.token.create", true)) {
@@ -121,49 +183,32 @@ qx.Class.define("osparc.desktop.preferences.pages.SecurityPage", {
       return form;
     },
 
-    __createValidTokenForm: function(token) {
+    __createValidTokenForm: function (token) {
+      const label = token["keyLabel"] || token["service"];
       const service = token["service"];
 
       const height = 20;
-      const iconHeight = height-6;
+      const iconHeight = height - 6;
       const gr = new qx.ui.layout.Grid(10, 3);
       gr.setColumnFlex(1, 1);
       gr.setRowHeight(0, height);
       gr.setRowHeight(1, height);
       gr.setRowHeight(2, height);
       const grid = new qx.ui.container.Composite(gr);
 
-      const nameLabel = new qx.ui.basic.Label(this.tr("Token name"));
+      const nameLabel = new qx.ui.basic.Label(service);
       grid.add(nameLabel, {
         row: 0,
         column: 0
       });
 
-      const nameVal = new qx.ui.basic.Label(service);
+      const nameVal = new qx.ui.basic.Label(label);
       grid.add(nameVal, {
         row: 0,
         column: 1
       });
 
-      /*
-      const showTokenIcon = "@FontAwesome5Solid/edit/"+iconHeight;
-      const showTokenBtn = new qx.ui.form.Button(null, showTokenIcon);
-      showTokenBtn.addListener("execute", e => {
-        const treeItemRenamer = new osparc.component.widget.Renamer(nameVal.getValue());
-        treeItemRenamer.addListener("labelChanged", ev => {
-          const newLabel = ev.getData()["newLabel"];
-          nameVal.setValue(newLabel);
-        }, this);
-        treeItemRenamer.center();
-        treeItemRenamer.open();
-      }, this);
-      grid.add(showTokenBtn, {
-        row: 0,
-        column: 2
-      });
-      */
-
-      const delTokenBtn = new qx.ui.form.Button(null, "@FontAwesome5Solid/trash-alt/"+iconHeight);
+      const delTokenBtn = new qx.ui.form.Button(null, "@FontAwesome5Solid/trash-alt/" + iconHeight);
       delTokenBtn.addListener("execute", e => {
         if (!osparc.data.Permissions.getInstance().canDo("preferences.token.delete", true)) {
           return;
@@ -185,34 +230,34 @@ qx.Class.define("osparc.desktop.preferences.pages.SecurityPage", {
       return grid;
     },
 
-    __createPasswordSection: function() {
+    __createPasswordSection: function () {
       // layout
-      let box = this._createSectionBox(this.tr("Password"));
+      const box = this._createSectionBox(this.tr("Password"));
 
-      let currentPassword = new qx.ui.form.PasswordField().set({
+      const currentPassword = new qx.ui.form.PasswordField().set({
         required: true,
         placeholder: this.tr("Your current password")
       });
       box.add(currentPassword);
 
-      let newPassword = new qx.ui.form.PasswordField().set({
+      const newPassword = new qx.ui.form.PasswordField().set({
         required: true,
         placeholder: this.tr("Your new password")
       });
       box.add(newPassword);
 
-      let confirm = new qx.ui.form.PasswordField().set({
+      const confirm = new qx.ui.form.PasswordField().set({
         required: true,
         placeholder: this.tr("Retype your new password")
       });
       box.add(confirm);
 
-      let manager = new qx.ui.form.validation.Manager();
-      manager.setValidator(function(_itemForms) {
+      const manager = new qx.ui.form.validation.Manager();
+      manager.setValidator(function (_itemForms) {
         return osparc.auth.core.Utils.checkSamePasswords(newPassword, confirm);
       });
 
-      let resetBtn = new qx.ui.form.Button("Reset Password").set({
+      const resetBtn = new qx.ui.form.Button("Reset Password").set({
         allowGrowX: false
       });
       box.add(resetBtn);
diff --git a/services/web/client/source/class/osparc/desktop/preferences/window/APIKeyBase.js b/services/web/client/source/class/osparc/desktop/preferences/window/APIKeyBase.js
@@ -0,0 +1,46 @@
+/* ************************************************************************
+   osparc - the simcore frontend
+   https://osparc.io
+   Copyright:
+     2020 IT'IS Foundation, https://itis.swiss
+   License:
+     MIT: https://opensource.org/licenses/MIT
+   Authors:
+     * Odei Maiz (odeimaiz)
+************************************************************************ */
+
+/**
+ *
+ */
+
+qx.Class.define("osparc.desktop.preferences.window.APIKeyBase", {
+  extend: qx.ui.window.Window,
+  type: "abstract",
+
+  construct: function (caption, infoText) {
+    this.base(arguments, caption);
+
+    this.set({
+      layout: new qx.ui.layout.VBox(5),
+      autoDestroy: true,
+      modal: true,
+      showMaximize: false,
+      showMinimize: false,
+      width: 350
+    });
+
+    this.__addInfoText(infoText);
+
+    this.center();
+  },
+
+  members: {
+    __addInfoText: function (infoText) {
+      const introLabel = new qx.ui.basic.Label(infoText).set({
+        padding: 5,
+        rich: true
+      });
+      this._add(introLabel);
+    }
+  }
+});
diff --git a/services/web/client/source/class/osparc/desktop/preferences/window/CreateAPIKey.js b/services/web/client/source/class/osparc/desktop/preferences/window/CreateAPIKey.js
@@ -0,0 +1,66 @@
+/* ************************************************************************
+   osparc - the simcore frontend
+   https://osparc.io
+   Copyright:
+     2020 IT'IS Foundation, https://itis.swiss
+   License:
+     MIT: https://opensource.org/licenses/MIT
+   Authors:
+     * Odei Maiz (odeimaiz)
+************************************************************************ */
+
+/**
+ *
+ */
+
+qx.Class.define("osparc.desktop.preferences.window.CreateAPIKey", {
+  extend: osparc.desktop.preferences.window.APIKeyBase,
+
+  construct: function () {
+    const caption = this.tr("Create oSPARC API Key");
+    const infoText = this.tr("Key names must be unique.");
+    this.base(arguments, caption, infoText);
+
+    this.__populateWindow();
+  },
+
+  events: {
+    "finished": "qx.event.type.Data"
+  },
+
+  members: {
+    __populateWindow: function () {
+      const hBox1 = new qx.ui.container.Composite(new qx.ui.layout.HBox(10)).set({
+        padding: 5
+      });
+      const sTitle = new qx.ui.basic.Label(this.tr("API Key")).set({
+        width: 50,
+        alignY: "middle"
+      });
+      hBox1.add(sTitle);
+      const labelEditor = new qx.ui.form.TextField();
+      this.add(labelEditor, {
+        flex: 1
+      });
+      hBox1.add(labelEditor, {
+        flex: 1
+      });
+      this._add(hBox1);
+
+      const hBox2 = new qx.ui.container.Composite(new qx.ui.layout.HBox(10)).set({
+        padding: 5
+      });
+      hBox2.add(new qx.ui.core.Spacer(), {
+        flex: 1
+      });
+      const confirmBtn = new qx.ui.form.Button(this.tr("Confirm"));
+      confirmBtn.addListener("execute", e => {
+        const keyLabel = labelEditor.getValue();
+        this.fireDataEvent("finished", keyLabel);
+      }, this);
+      hBox2.add(confirmBtn);
+
+      this._add(hBox2);
+    }
+  }
+});
diff --git a/services/web/client/source/class/osparc/desktop/preferences/window/ShowAPIKey.js b/services/web/client/source/class/osparc/desktop/preferences/window/ShowAPIKey.js
