saasufy-components 3.20.0 → 3.21.1

package/README.md

@@ -166,7 +166,27 @@ Note that the `app-router` can contain any number of pages/routes so the `slot="
 </app-router>
 ```
 
-The app router path is based on the `location.hash` so the path section in your browser's address bar needs to start with the `#` character.
+This example shows how to redirect based on the user's authentication status:
+
+```html
+<app-router default-page="/home">
+  <template slot="page" route-path="/log-in" auth-redirect="/home" hard-redirect>
+    <log-in-form
+      hostname="sas.saasufy.com"
+      port="443"
+      network-symbol="sas"
+      chain-module-name="sas_chain"
+      secure="true"
+    ></log-in-form>
+  </template>
+  <template slot="page" route-path="/home" no-auth-redirect="/log-in">
+    <div>This is the home page</div>
+  </template>
+  <div slot="viewport"></div>
+</app-router>
+```
+
+Note that the app router path is based on `location.hash` so the path section in your browser's address bar needs to start with the `#` character.
 So for example, if your `index.html` file is served up from the URL `http://mywebsite.com`, then, to activate the `/products` route as in the example above, you would need to type the URL `http://mywebsite.com#/products`.
 
 **Attributes of app-router**
@@ -180,9 +200,9 @@ So for example, if your `index.html` file is served up from the URL `http://mywe
 - `route-path`: The path of the page. Supports custom URL parameters in the format `/org/:orgId/user/:userId`.
 - `partial-route`: An optional attribute which, if specified, will allow the `route-path` to be matched partially from the start. This can be used to ignore the ending of a path which is not relevant to the page in order to avoid unnecessary re-renders.
 - `redirect`: An optional path/route which this page should redirect to. Note that the content of this page will not be shown so it should always be empty.
-- `auth-redirect`: An optional path/route which this page should redirect to if the user is authenticated. If the user is not authenticated, then the content of the template will be displayed as normal.
-- `no-auth-redirect`: An optional path/route which this page should redirect to if the user is not authenticated. If the user is authenticated, then the content of the template will be displayed as normal.
-- `hard-redirect`: An optional, additional attribute which can be specified alongside a `redirect`, `auth-redirect` or `no-auth-redirect` attribute to ensure that any redirect will change the URL in the address bar. Redirects are `soft` redirects by default; this means that they redirect the user to the target page but keep the current URL path unchanged.
+- `no-auth-redirect`: An optional alternative path/route to redirect to if the user lands on this page but they are not authenticated. If the user is authenticated, then the content of the template will be displayed as normal.
+- `auth-redirect`: An optional alternative path/route to redirect to if the user lands on this page but they are already authenticated. If the user is not authenticated, then the content of the template will be displayed as normal.
+- `hard-redirect`: An optional, additional attribute which can be specified alongside a `redirect`, `no-auth-redirect` or `auth-redirect` attribute to ensure that any redirect will change the URL in the address bar. Redirects are `soft` redirects by default; this means that they redirect the user to the target page but keep the current URL path unchanged.
 
 ### socket-provider
 
@@ -207,6 +227,7 @@ A Saasufy component which integrates with data from Saasufy is known as a `socke
 
 - `url` (required): Specifies the URL for the Saasufy service to use as the data store for all components which are placed inside it.
 - `auth-token-name`: Allows you to specify a custom key for your token - This will be used as the key in localStorage. You generally do not need to set this attribute. It is intended for situations were an app has multiple `socket-provider` elements connecting different services with different/separate authentication flows.
+- `disable-tab-sync`: By default, the socket provider synchronizes socket auth state across multiple tabs via localStorage. If this attribute is set, then the socket auth state will not sync automatically and a manual page refresh may be necessary to update to the latest auth state.
 
 ### collection-browser
 

package/package.json

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

package/socket.js

@@ -26,9 +26,24 @@ export class SocketProvider extends HTMLElement {
   connectedCallback() {
     this.isReady = true;
     this.getSocket();
+    let disableTabSync = this.hasAttribute('disable-tab-sync');
+    if (!disableTabSync) {
+      if (this.storageChangeWatcher) {
+        window.removeEventListener('storage', this.storageChangeWatcher);
+      }
+      this.storageChangeWatcher = (event) => {
+        if (event.storageArea === window.localStorage && event.key === this.saasufySocket.options.authTokenName) {
+          this.saasufySocket.reconnect();
+        }
+      };
+    }
+    window.addEventListener('storage', this.storageChangeWatcher);
   }
 
   disconnectedCallback() {
+    if (this.storageChangeWatcher) {
+      window.removeEventListener('storage', this.storageChangeWatcher);
+    }
     this.destroySocket();
   }