saasufy-components 1.7.2 → 1.9.0

package/README.md

@@ -7,6 +7,11 @@ Coming soon.
 
 ## Components
 
+### socket-provider
+
+A top level component which connects to your Saasufy service and inside which you can place other components which depends on Saasufy data.
+A Saasufy component which integrates with data from Saasufy is known as a `socket-consumer` and must always be placed inside a `socket-provider` element (although it does not have to be a direct child).
+
 ### collection-adder
 
 A form component for inserting data into collections.
@@ -15,35 +20,43 @@ A form component for inserting data into collections.
 
 Used for rendering collections as lists, tables or other sequences based on a specific view using a template.
 Supports pagination by allowing you to specify custom buttons or links to navigate between pages.
-Can also perform basic CRUD operations such as deleting or creating records.
+Can also perform basic CRUD operations such as deleting or creating records by listening for events from child components.
 
 ### collection-reducer
 
 Similar to the `collection-browser` component but designed to render collections in combined format. For example, to combine values from multiple records into a single item.
-A common use case is to extract and combine values from a specific field to pass to other child components via their attributes.
+A common use case is to extract and join values to pass to other child components via their attributes.
 
 ### model-input
 
-Used for displaying and editing a field of a model instance in real time.
+Used for displaying and editing a single field of a model instance in real time.
+
+### model-text
+
+Used to displaying a field of a model instance in real time.
 
 ### model-viewer
 
-Used for rendering models using a template.
+Used for rendering a single model resource using a template. This is the single-model alternative to the `collection-browser` which works with collections of models.
 
 ### input-provider
 
 An input component which can pass data to other components (or HTML elements) via custom attributes.
-A common use case for it is to pass user input to `collection-browser` or `model-viewer` to display relevant data loaded from Saasufy (e.g. based on a user query).
+A common use case for it is to pass user input to `collection-browser` or `model-viewer` components to then fetch data from Saasufy.
 This component can be configured to provide its data to multiple components (consumers) via custom attributes.
 Note that an `input-provider` only targets elements which are downstream from its parent element in the HTML hierarchy.
 
-### confirm-modal
+### log-in-form
 
-A modal component to prompt the user for confirmation before performing sensitive operations.
+A form component which allows end-users to authenticate themselves into your app using the Saasufy blockchain or any Capitalisk-based blockchain.
+On success, the socket of the form's `socket-provider` will be set to the authenticated state; this will then cause appropriate Saasufy components which share this `socket-provider` to reload themselves.
+Once a user is authenticated, they will be able to access restricted data (as specified on the Saasufy `Model -> Access` page).
+It's also possible to specify a `success-location-hash` attribute to trigger a client-side redirect upon successful authentication.
+The change in the location hash can then be detected by an `app-router` to switch to a different page upon successful login.
 
-### model-text
+### confirm-modal
 
-Used to displaying a field of a model instance in real time.
+A modal component to prompt the user for confirmation before performing sensitive operations.
 
 ### overlay-modal
 

package/app-router.js

@@ -1,21 +1,25 @@
-import { toSafeHTML } from './utils.js';
-import { renderTemplate } from './utils.js';
+import { toSafeHTML, renderTemplate, debouncer } from './utils.js';
+import { SocketConsumer } from './socket.js';
 
-export class AppRouter extends HTMLElement {
+const DEFAULT_DEBOUNCE_DELAY = 100;
+
+export class AppRouter extends SocketConsumer {
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
 
     this.pages = {};
     this.pageRouteInfos = [];
+    this.debounce = debouncer();
+    this.debounceDelay = DEFAULT_DEBOUNCE_DELAY;
 
     this.hashStartRegex = /^#/;
 
     this.handleHashChangeEvent = () => {
-      this.renderCurrentPage();
+      this.debounce(this.renderCurrentPage, this.debounceDelay);
     };
 
-    this.handleSlotChangeEvent = () => {
+    this.handleSlotChangeEvent = (event) => {
       let pageTemplates = this.shadowRoot.querySelector('slot[name="page"]').assignedNodes();
 
       for (let template of pageTemplates) {
@@ -30,8 +34,9 @@ export class AppRouter extends HTMLElement {
           params: [ ...route.matchAll(/:[^\/]*/g) ].map(paramMatch => paramMatch[0].replace(':', ''))
         };
       });
-
-      this.renderCurrentPage();
+      if (!this.socket || this.socket.state === this.socket.OPEN) {
+        this.debounce(this.renderCurrentPage, this.debounceDelay);
+      }
     };
   }
 
@@ -43,15 +48,61 @@ export class AppRouter extends HTMLElement {
     return Object.fromEntries(argEntries);
   }
 
+  static get observedAttributes() {
+    return [
+      'default-page',
+      'debounce-delay'
+    ];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === 'debounce-delay') {
+      if (newValue) {
+        this.debounceDelay = Number(newValue);
+      } else {
+        this.debounceDelay = DEFAULT_DEBOUNCE_DELAY;
+      }
+    } else if (this.isReady) {
+      this.renderCurrentPage();
+    }
+  }
+
   connectedCallback() {
     window.addEventListener('hashchange', this.handleHashChangeEvent);
     this.shadowRoot.addEventListener('slotchange', this.handleSlotChangeEvent);
+
+    try {
+      // Socket is optional as not all routing use cases require authentication.
+      this.socket = this.getSocket();
+    } catch (error) {}
+    if (this.socket) {
+      let hasProcessedSocketConnect = this.socket.state === this.socket.OPEN;
+      this.authStateChangeConsumer = this.socket.listener('authStateChange').createConsumer();
+      (async () => {
+        for await (let event of this.authStateChangeConsumer) {
+          if (hasProcessedSocketConnect) {
+            this.debounce(this.renderCurrentPage, this.debounceDelay);
+          }
+        }
+      })();
+
+      this.connectConsumer = this.socket.listener('connect').createConsumer();
+      (async () => {
+        for await (let event of this.connectConsumer) {
+          hasProcessedSocketConnect = true;
+          this.debounce(this.renderCurrentPage, this.debounceDelay);
+        }
+      })();
+    }
     this.render();
+    this.isReady = true;
   }
 
   disconnectedCallback() {
     window.removeEventListener('hashchange', this.handleHashChangeEvent);
     this.shadowRoot.removeEventListener('slotchange', this.handleSlotChangeEvent);
+    this.authStateChangeConsumer.kill();
+    this.connectConsumer.kill();
   }
 
   renderCurrentPage() {
@@ -66,7 +117,38 @@ export class AppRouter extends HTMLElement {
     ) || {};
 
     let pageTemplate = this.pages[route];
-    if (!pageTemplate) return;
+    if (!pageTemplate) {
+      let defaultPage = this.getAttribute('default-page');
+      if (!defaultPage) return;
+      pageTemplate = this.pages[defaultPage];
+    };
+
+    let noAuthRedirect = pageTemplate.getAttribute('no-auth-redirect');
+    let authRedirect = pageTemplate.getAttribute('auth-redirect');
+    let hardRedirect = pageTemplate.hasAttribute('hard-redirect');
+
+    if (this.socket && (authRedirect || noAuthRedirect)) {
+      if (this.socket.authState === 'authenticated') {
+        if (authRedirect) {
+          if (hardRedirect) {
+            location.hash = authRedirect;
+            return;
+          } else {
+            pageTemplate = this.pages[authRedirect];
+          }
+        }
+      } else {
+        if (this.socket.state !== this.socket.OPEN) return;
+        if (noAuthRedirect) {
+          if (hardRedirect) {
+            location.hash = noAuthRedirect;
+            return;
+          } else {
+            pageTemplate = this.pages[noAuthRedirect];
+          }
+        }
+      }
+    }
 
     let routeArgs;
     if (route) {

package/log-in-form.js

@@ -0,0 +1,104 @@
+import '/node_modules/capitalisk-auth-client/dist/capitalisk-log-in.js';
+import { SocketConsumer } from './socket.js';
+
+const DEFAULT_AUTH_TIMEOUT = 10000;
+
+class LogInForm extends SocketConsumer {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    this.socket = this.getSocket();
+    this.isReady = true;
+    this.render();
+  }
+
+  static get observedAttributes() {
+    return [
+      'hostname',
+      'port',
+      'network-symbol',
+      'chain-module-name',
+      'secure',
+      'auth-timeout',
+      'success-location-hash'
+    ];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (!this.isReady) return;
+    this.render();
+  }
+
+  render() {
+    let hostname = this.getAttribute('hostname');
+    let port = this.getAttribute('port');
+    let networkSymbol = this.getAttribute('network-symbol');
+    let chainModuleName = this.getAttribute('chain-module-name');
+    let secure = this.getAttribute('secure');
+    let authTimeout = Number(this.getAttribute('auth-timeout') || DEFAULT_AUTH_TIMEOUT);
+    let successLocationHash = this.getAttribute('success-location-hash');
+
+    this.innerHTML = `
+      <capitalisk-log-in
+        hostname="${hostname}"
+        port="${port}"
+        network-symbol="${networkSymbol}"
+        chain-module-name="${chainModuleName}"
+        secure="${secure}"
+        disabled="true"
+      ></capitalisk-log-in>
+    `;
+
+    let capitaliskLogIn = this.querySelector('capitalisk-log-in');
+    capitaliskLogIn.addEventListener('accountReadyStateChange', (event) => {
+      if (event.detail.accountReady) {
+        capitaliskLogIn.removeAttribute('disabled');
+      } else {
+        capitaliskLogIn.setAttribute('disabled', '');
+
+      }
+    });
+
+    capitaliskLogIn.addEventListener('error', (event) => {
+      console.error(`CapitaliskLogIn error: ${event.detail.error.message}`);
+    });
+
+    capitaliskLogIn.addEventListener('submitCredentials', async (event) => {
+      capitaliskLogIn.setAttribute('disabled', '');
+      capitaliskLogIn.removeAttribute('error');
+      capitaliskLogIn.setAttribute('submit-button-text', 'Loading...');
+      try {
+        let logInResponse = await this.socket.invoke('log-in', event.detail);
+      } catch (error) {
+        capitaliskLogIn.setAttribute('error', `${error.message}.`);
+        capitaliskLogIn.removeAttribute('disabled');
+        capitaliskLogIn.setAttribute('submit-button-text', 'Log in');
+        return;
+      }
+      if (this.socket.authState !== 'authenticated') {
+        try {
+          await this.socket.listener('authenticate').once(authTimeout);
+        } catch (error) {
+          capitaliskLogIn.setAttribute(
+            'error',
+            'Authentication timed out, please try again.'
+          );
+          capitaliskLogIn.removeAttribute('disabled');
+          capitaliskLogIn.setAttribute('submit-button-text', 'Log in');
+          return;
+        }
+      }
+
+      capitaliskLogIn.setAttribute('disabled', '');
+      capitaliskLogIn.setAttribute('submit-button-text', 'Success!');
+
+      if (successLocationHash) {
+        location.hash = successLocationHash;
+      }
+    });
+  }
+}
+
+window.customElements.define('log-in-form', LogInForm);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "1.7.2",
+  "version": "1.9.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {
@@ -19,6 +19,7 @@
   "dependencies": {
     "ag-collection": "^3.3.0",
     "ag-model": "^1.4.1",
+    "capitalisk-auth-client": "^1.5.1",
     "expr-eval": "^2.0.2",
     "socketcluster-client": "^19.1.0"
   },