Front-end for users subsystem in webserver

services/web/client/source/class/qxapp/Preferences.js

@@ -6,6 +6,10 @@ qx.Class.define("qxapp.Preferences", {
   construct: function() {
     this.base(arguments, this.tr("Account Settings"));
 
+    this.__tokenResources = qxapp.io.rest.ResourceFactory.getInstance().createTokenResources();
+    // this.__tokenResources.token
+    // this.__tokenResources.tokens
+
     // window
     // TODO: fix-sized modal preference window
     this.set({
@@ -36,7 +40,8 @@ qx.Class.define("qxapp.Preferences", {
   },
 
   members: {
-    _data: null,
+    __tokenResources: null,
+    __validTokens: null,
 
     __createPage: function(name, iconSrc = null) {
       let page = new qx.ui.tabview.Page(name, iconSrc);
@@ -107,15 +112,79 @@ qx.Class.define("qxapp.Preferences", {
         rich: true
       }));
 
-      let tokens = new qx.ui.form.PasswordField();
-      tokens.set({
-        placeholder: "Personal Access Token"
+      let newTokenGrp = new qx.ui.container.Composite(new qx.ui.layout.HBox());
+      let newTokenPass = new qx.ui.form.PasswordField();
+      newTokenPass.set({
+        placeholder: "Personal Access Token",
+        alignY: "bottom"
+      });
+      newTokenGrp.add(newTokenPass, {
+        flex: 1
       });
-      page.add(tokens);
+      const iconSize = 12;
+      let newTokenBtn = new qx.ui.toolbar.Button(null, "@FontAwesome5Solid/plus/"+iconSize);
+      newTokenBtn.addListener("execute", e => {
+        let tokens = this.__tokenResources.tokens;
+        tokens.addListenerOnce("postSuccess", ev => {
+          newTokenPass.resetValue();
+          let tokensList = ev.getRequest().getResponse().data;
+          console.log(tokensList);
+          this.__reloadTokens();
+        }, this);
+        tokens.addListenerOnce("getError", ev => {
+          console.log(ev);
+        });
+        tokens.post(newTokenPass.getValue());
+      }, this);
+      newTokenGrp.add(newTokenBtn);
+      page.add(newTokenGrp);
+
+      this.__validTokens = new qx.ui.container.Composite(new qx.ui.layout.VBox());
+      page.add(this.__validTokens);
+      this.__reloadTokens();
 
       return page;
     },
 
+    __reloadTokens: function() {
+      this.__validTokens.removeAll();
+
+      let tokens = this.__tokenResources.tokens;
+      tokens.addListenerOnce("getSuccess", e => {
+        let tokensList = e.getRequest().getResponse().data;
+        for (let i=0; i<tokensList.length; i++) {
+          let validTokenGrp = new qx.ui.container.Composite(new qx.ui.layout.HBox());
+          let validToken = new qx.ui.form.TextField();
+          validToken.set({
+            value: tokensList[i]["service"] + ": " + tokensList[i]["token_key"],
+            enable: false,
+            alignY: "bottom"
+          });
+          validTokenGrp.add(validToken, {
+            flex: 1
+          });
+          const iconSize = 12;
+          let newTokenBtn = new qx.ui.toolbar.Button(null, "@FontAwesome5Solid/trash/"+iconSize);
+          newTokenBtn.addListener("execute", ev => {
+            let token = this.__tokenResources.token;
+            token.addListenerOnce("delSuccess", eve => {
+              this.__reloadTokens();
+            }, this);
+            token.addListenerOnce("delError", eve => {
+              console.log(eve);
+            });
+            token.del();
+          }, this);
+          validTokenGrp.add(newTokenBtn);
+          this.__validTokens.add(validTokenGrp);
+        }
+      }, this);
+      tokens.addListenerOnce("getError", e => {
+        console.log(e);
+      });
+      tokens.get();
+    },
+
     __getDisplay: function() {
       const iconUrl = qxapp.dev.Placeholders.getIcon("fa-eye", 32);
       let page = this.__createPage("Display", iconUrl);

services/web/client/source/class/qxapp/io/rest/Resource.js

@@ -21,13 +21,15 @@ qx.Class.define("qxapp.io.rest.Resource", {
         value: "application/json"
       }];
 
-      if (this.AUTHENTICATION !== null) {
+      if (this.AUTHENTICATION !== undefined && this.AUTHENTICATION !== null) {
         headers.concat(this.AUTHENTICATION.getAuthHeaders());
       }
 
       headers.forEach(function(item, index, array) {
         request.setRequestHeader(item.key, item.value);
       });
+
+      request.setRequestHeader("Content-Type", "application/json");
     });
   }
 });

services/web/client/source/class/qxapp/io/rest/ResourceFactory.js

@@ -61,6 +61,53 @@ qx.Class.define("qxapp.io.rest.ResourceFactory", {
         "projects": projects,
         "templates": templates
       };
+    },
+
+    createTokenResources: function() {
+      // SEE: https://www.qooxdoo.org/current/pages/communication/rest.html
+      // SEE: api/specs/webserver/v0/openapi-user.yaml
+      const basePath = qxapp.io.rest.ResourceFactory.API;
+
+      // Singular resource
+      let token = new qxapp.io.rest.Resource({
+        // Get token
+        get: {
+          method: "GET",
+          url: basePath+"/my/tokens/{token_id}"
+        },
+
+        // Update token
+        put: {
+          method: "PUT",
+          url: basePath+"/my/tokens/{token_id}"
+        },
+
+        // Delete token
+        del: {
+          method: "DELETE",
+          url: basePath+"/my/tokens/{token_id}"
+        }
+      });
+
+      // Plural resource
+      var tokens = new qxapp.io.rest.Resource({
+        // Retrieve tokens
+        get: {
+          method: "GET",
+          url: basePath+"/my/tokens"
+        },
+
+        // Create token
+        post: {
+          method: "POST",
+          url: basePath+"/my/tokens"
+        }
+      });
+
+      return {
+        "token": token,
+        "tokens": tokens
+      };
     }
 
   } // members