saasufy-components 2.3.0 → 2.4.1

package/collection-browser.js

@@ -223,8 +223,8 @@ class CollectionBrowser extends SocketConsumer {
     );
     let viewParams = Object.fromEntries(
       collectionViewParams.split(',')
-      .map(pair => pair.split('='))
-      .filter(([field]) => field)
+        .map(pair => pair.split('='))
+        .filter(([field]) => field)
     );
     if (this.collection) this.collection.destroy();
     this.isStale = true;
@@ -282,6 +282,8 @@ class CollectionBrowser extends SocketConsumer {
 
     (async () => {
       for await (let event of this.collection.listener('change')) {
+        // Ignore change events which originate from this collection instance.
+        if (!event.isRemote) continue;
         this.renderList();
         this.updatePageButtons();
       }

package/model-input.js

@@ -23,6 +23,7 @@ class ModelInput extends SocketConsumer {
       'input-id',
       'list',
       'model-instance-property',
+      'bind-to-collection',
       'type',
       'placeholder',
       'consumers',
@@ -65,6 +66,7 @@ class ModelInput extends SocketConsumer {
   render() {
     this.innerHTML = '';
     let modelInstanceProperty = this.getAttribute('model-instance-property');
+    let bindToCollection = this.hasAttribute('bind-to-collection');
     let showErrorMessage = this.hasAttribute('show-error-message');
     let inputId = this.getAttribute('input-id');
     let inputList = this.getAttribute('list');
@@ -80,41 +82,64 @@ class ModelInput extends SocketConsumer {
     let currentNode = this.parentNode;
     let model;
     let isModelLocal = false;
-    if (modelInstanceProperty) {
+    if (bindToCollection) {
+      let collection;
       while (currentNode) {
-        model = currentNode[modelInstanceProperty];
-        if (model && modelType && (model.type !== modelType || !(model.fields || []).includes(modelField))) {
-          model = null;
+        collection = currentNode.collection;
+        if (collection && (collection.type !== modelType || !(collection.fields || []).includes(modelField))) {
+          collection = null;
         }
-        if (model) break;
+        if (collection && (!collection.agModels || !collection.agModels[modelId] || !collection.agModels[modelId].agFields[modelField])) {
+          collection = null;
+        }
+        if (collection) break;
         currentNode = currentNode.getRootNode().host || currentNode.parentNode;
       }
-      if (!model) {
-        throw new Error(
-          `The ${
-            this.nodeName.toLowerCase()
-          } element failed to obtain a model via the specified model-instance-property - Ensure that the element is nested inside a parent element which exposes a model instance of the same type which has the relevant field`
-        );
-      };
-    } else {
-      this.socket = this.getSocket();
-      model = new AGModel({
-        socket: this.socket,
-        type: modelType,
-        id: modelId,
-        fields: [ modelField ],
-        enableRebound
-      });
-      if (!hideErrorLogs) {
-        (async () => {
-          for await (let { error } of model.listener('error')) {
-            console.error(
-              `Model input encountered an error: ${error.message}`
-            );
+      if (collection) {
+        model = collection.agModels[modelId];
+      }
+    }
+    if (!model) {
+      currentNode = this.parentNode;
+      if (modelInstanceProperty) {
+        while (currentNode) {
+          model = currentNode[modelInstanceProperty];
+          if (model && modelType && (model.type !== modelType || !(model.fields || []).includes(modelField))) {
+            model = null;
           }
-        })();
+          if (model && !model.agFields) {
+            model = null;
+          }
+          if (model) break;
+          currentNode = currentNode.getRootNode().host || currentNode.parentNode;
+        }
+        if (!model) {
+          throw new Error(
+            `The ${
+              this.nodeName.toLowerCase()
+            } element failed to obtain a model via the specified model-instance-property - Ensure that the element is nested inside a parent element which exposes a model instance of the same type which has the relevant field`
+          );
+        };
+      } else {
+        this.socket = this.getSocket();
+        model = new AGModel({
+          socket: this.socket,
+          type: modelType,
+          id: modelId,
+          fields: [ modelField ],
+          enableRebound
+        });
+        if (!hideErrorLogs) {
+          (async () => {
+            for await (let { error } of model.listener('error')) {
+              console.error(
+                `Model input encountered an error: ${error.message}`
+              );
+            }
+          })();
+        }
+        isModelLocal = true;
       }
-      isModelLocal = true;
     }
     if (model.isLoaded) {
       this.setAttribute('is-loaded', '');

package/model-text.js

@@ -21,6 +21,7 @@ class ModelText extends SocketConsumer {
   static get observedAttributes() {
     return [
       'model-instance-property',
+      'bind-to-collection',
       'model-type',
       'model-id',
       'model-field',
@@ -37,6 +38,7 @@ class ModelText extends SocketConsumer {
   render() {
     this.innerHTML = '';
     let modelInstanceProperty = this.getAttribute('model-instance-property');
+    let bindToCollection = this.hasAttribute('bind-to-collection');
     let modelType = this.getAttribute('model-type');
     let modelId = this.getAttribute('model-id');
     let modelField = this.getAttribute('model-field');
@@ -44,40 +46,63 @@ class ModelText extends SocketConsumer {
     let currentNode = this.parentNode;
     let model;
     let isModelLocal = false;
-    if (modelInstanceProperty) {
+    if (bindToCollection) {
+      let collection;
       while (currentNode) {
-        model = currentNode[modelInstanceProperty];
-        if (model && modelType && (model.type !== modelType || !(model.fields || []).includes(modelField))) {
-          model = null;
+        collection = currentNode.collection;
+        if (collection && (collection.type !== modelType || !(collection.fields || []).includes(modelField))) {
+          collection = null;
         }
-        if (model) break;
+        if (collection && (!collection.agModels || !collection.agModels[modelId] || !collection.agModels[modelId].agFields[modelField])) {
+          collection = null;
+        }
+        if (collection) break;
         currentNode = currentNode.getRootNode().host || currentNode.parentNode;
       }
-      if (!model) {
-        throw new Error(
-          `The ${
-            this.nodeName.toLowerCase()
-          } element failed to obtain a model via the specified model-instance-property - Ensure that the element is nested inside a parent element which exposes a model instance of the same type which has the relevant field`
-        );
-      };
-    } else {
-      this.socket = this.getSocket();
-      model = new AGModel({
-        socket: this.socket,
-        type: modelType,
-        id: modelId,
-        fields: [ modelField ]
-      });
-      if (!hideErrorLogs) {
-        (async () => {
-          for await (let { error } of model.listener('error')) {
-            console.error(
-              `Model input encountered an error: ${error.message}`
-            );
+      if (collection) {
+        model = collection.agModels[modelId];
+      }
+    }
+    if (!model) {
+      currentNode = this.parentNode;
+      if (modelInstanceProperty) {
+        while (currentNode) {
+          model = currentNode[modelInstanceProperty];
+          if (model && modelType && (model.type !== modelType || !(model.fields || []).includes(modelField))) {
+            model = null;
           }
-        })();
+          if (model && !model.agFields) {
+            model = null;
+          }
+          if (model) break;
+          currentNode = currentNode.getRootNode().host || currentNode.parentNode;
+        }
+        if (!model) {
+          throw new Error(
+            `The ${
+              this.nodeName.toLowerCase()
+            } element failed to obtain a model via the specified model-instance-property - Ensure that the element is nested inside a parent element which exposes a model instance of the same type which has the relevant field`
+          );
+        };
+      } else {
+        this.socket = this.getSocket();
+        model = new AGModel({
+          socket: this.socket,
+          type: modelType,
+          id: modelId,
+          fields: [ modelField ]
+        });
+        if (!hideErrorLogs) {
+          (async () => {
+            for await (let { error } of model.listener('error')) {
+              console.error(
+                `Model input encountered an error: ${error.message}`
+              );
+            }
+          })();
+        }
+        isModelLocal = true;
       }
-      isModelLocal = true;
     }
     if (model.isLoaded) {
       this.setAttribute('is-loaded', '');

package/model-viewer.js

@@ -104,6 +104,9 @@ class ModelViewer extends SocketConsumer {
         if (model && modelType && (model.type !== modelType || !(model.fields || []).includes(modelField))) {
           model = null;
         }
+        if (model && !model.agFields) {
+          model = null;
+        }
         if (model) break;
         currentNode = currentNode.getRootNode().host || currentNode.parentNode;
       }

package/oauth-handler.js

@@ -4,19 +4,6 @@ import { generateRandomHexString } from './utils.js';
 const DEFAULT_AUTH_TIMEOUT = 10000;
 
 class OAuthHandler extends SocketConsumer {
-  static get observedAttributes() {
-    return [
-      'provider',
-      'code-param-name',
-      'state-param-name',
-      'state-session-storage-key',
-      'success-url',
-      'success-location-hash',
-      'navigate-event-path',
-      'auth-timeout'
-    ];
-  }
-
   successRedirect() {
     let successURL = this.getAttribute('success-url');
     let successLocationHash = this.getAttribute('success-location-hash');
@@ -46,9 +33,19 @@ class OAuthHandler extends SocketConsumer {
       throw new Error('The provider attribute of oauth-handler was not specified');
     }
 
-    let sessionStorageKey = this.getAttribute('state-session-storage-key') || `oauth.${provider}.state`;
+    let sessionStorageKey = this.getAttribute('state-session-storage-key') || 'oauth.state';
     let expectedOAuthState = sessionStorage.getItem(sessionStorageKey);
-    if (!expectedOAuthState) return;
+    if (!expectedOAuthState) {
+      this.innerHTML = `
+        <div class="error">OAuth authentication failed because the state query parameter was missing.</div>
+      `;
+      return;
+    };
+
+    let stateParts = expectedOAuthState.split('-');
+    // Do not process. The state may have been set for a different provider
+    // which is handled on the same page.
+    if (stateParts[0] !== provider) return;
 
     let codeParamName = this.getAttribute('code-param-name') || 'code';
     let stateParamName = this.getAttribute('state-param-name') || 'state';

package/oauth-link.js

@@ -27,6 +27,10 @@ class OAuthLink extends HTMLElement {
 
   connectedCallback() {
     this.isReady = true;
+
+    let urlSearchParams = new URLSearchParams(location.search);
+    this.code = urlSearchParams.get('code');
+
     this.render();
     this.shadowRoot.addEventListener('slotchange', this.handleSlotChangeEvent);
   }
@@ -36,27 +40,21 @@ class OAuthLink extends HTMLElement {
   }
 
   renderItem() {
-    let provider = this.getAttribute('provider');
-    if (!provider) {
-      throw new Error('The provider attribute of oauth-link was not specified');
-    }
+    if (this.code || !this.state) return;
+
     let viewportNode = this.shadowRoot.querySelector('slot[name="viewport"]').assignedNodes()[0];
     if (!viewportNode) return;
     let itemTemplate = this.shadowRoot.querySelector('slot[name="item"]').assignedNodes()[0];
     if (!itemTemplate) return;
 
     let clientId = this.getAttribute('client-id');
-    let stateSize = Number(this.getAttribute('state-size') || 20);
-    let sessionStorageKey = this.getAttribute('state-session-storage-key') || `oauth.${provider}.state`;
-    let state = generateRandomHexString(stateSize);
-    sessionStorage.setItem(sessionStorageKey, state);
 
     let itemString = renderTemplate(
       itemTemplate.innerHTML,
       {
         oauth: {
           clientId,
-          state
+          state: this.state
         }
       }
     );
@@ -64,14 +62,20 @@ class OAuthLink extends HTMLElement {
   }
 
   render() {
-    let urlSearchParams = new URLSearchParams(location.search);
-    let code = urlSearchParams.get('code');
-    
-    if (code) {
+    if (this.code) {
       this.shadowRoot.innerHTML = '';
       return;
     }
 
+    let provider = this.getAttribute('provider');
+    if (!provider) {
+      throw new Error('The provider attribute of oauth-link was not specified');
+    }
+    let stateSize = Number(this.getAttribute('state-size') || 20);
+    let sessionStorageKey = this.getAttribute('state-session-storage-key') || 'oauth.state';
+    this.state = `${provider}-${generateRandomHexString(stateSize)}`;
+    sessionStorage.setItem(sessionStorageKey, this.state);
+
     this.shadowRoot.innerHTML = `
       <slot name="item"></slot>
       <slot name="viewport"></slot>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {