saasufy-components 8.1.0 → 8.2.1

package/README.md

@@ -231,6 +231,7 @@ If you want to make sure that some data (e.g. a config file) has been fully load
 - `default-page`: The path/route of the default page to send the user to in case no routes are matched. Commonly used to point to a `/page-not-found` page. For the home page, it's typically recommended to create a page template with `route-path=""` instead.
 - `debounce-delay`: The number of milliseconds to wait before changing the route. This can help to avoid multiple renders if the route changes rapidly (e.g. when doing hard redirects). Defaults to 100ms.
 - `target-page`: A convenience attribute which can be used to programmatically change the `location.hash` in the address bar.
+- `watch-origin-route`: If this attribute exists, state changes of an origin route (before redirects) will trigger a re-render.
 - `force-render-paths`: An optional list of comma-separated paths to force a page render/re-render, regardless of whether or not the page has changed.
 - `greedy-refresh`: If this attribute exists, the component will refresh itself whenever an attribute is set, even if that attribute's value did not change.
 

package/app-router.js

@@ -15,6 +15,7 @@ export class AppRouter extends SocketConsumer {
     this.debounce = debouncer();
     this.debounceDelay = DEFAULT_DEBOUNCE_DELAY;
     this.lastPageState = null;
+    this.lastOriginPageState = null;
 
     this.hashStartRegex = /^#/;
 
@@ -166,13 +167,16 @@ export class AppRouter extends SocketConsumer {
     let { pageTemplate, route, regExp, params } = this.getMatchingPage(pagePath, 'path', true);
     if (forceRenderPaths.includes(pagePath)) {
       this.lastPageState = null;
+      this.lastOriginPageState = null;
     }
+    let originRoute = route;
 
     if (!pageTemplate) {
       let defaultPage = this.getAttribute('default-page');
       if (!defaultPage) {
         routerViewport.innerHTML = '';
         this.lastPageState = null;
+        this.lastOriginPageState = null;
         return;
       }
       routeArgs = this.computeRouteArgs(pagePath, regExp, params);
@@ -185,8 +189,9 @@ export class AppRouter extends SocketConsumer {
     };
 
     let maxRedirects = Number(this.getAttribute('max-redirects') || DEFAULT_MAX_REDIRECTS);
-
+    let hasOriginPageChanged = false;
     let redirectCount;
+
     for (redirectCount = 0; redirectCount <= maxRedirects; redirectCount++) {
       let authRedirect = this.socket && this.socket.authState === 'authenticated' ?
         pageTemplate.getAttribute('auth-redirect') : null;
@@ -212,6 +217,7 @@ export class AppRouter extends SocketConsumer {
         routeArgs = this.computeRouteArgs(pagePath, regExp, params);
         pagePath = this.substituteRouteAgs(authRedirect, routeArgs);
         if (hardRedirect) {
+          this.lastOriginPageState = JSON.stringify({ route: originRoute, routeArgs });
           this.replaceLocationHash(pagePath);
           return;
         }
@@ -224,6 +230,7 @@ export class AppRouter extends SocketConsumer {
         routeArgs = this.computeRouteArgs(pagePath, regExp, params);
         pagePath = this.substituteRouteAgs(noAuthRedirect, routeArgs);
         if (hardRedirect) {
+          this.lastOriginPageState = JSON.stringify({ route: originRoute, routeArgs });
           this.replaceLocationHash(pagePath);
           return;
         }
@@ -236,6 +243,7 @@ export class AppRouter extends SocketConsumer {
         routeArgs = this.computeRouteArgs(pagePath, regExp, params);
         pagePath = this.substituteRouteAgs(redirect, routeArgs);
         if (hardRedirect) {
+          this.lastOriginPageState = JSON.stringify({ route: originRoute, routeArgs });
           this.replaceLocationHash(pagePath);
           return;
         }
@@ -245,6 +253,13 @@ export class AppRouter extends SocketConsumer {
         regExp = result.regExp;
         params = result.params;
       }
+      if (redirectCount === 0) {
+        let lastOriginPageState = JSON.stringify({ route: originRoute, routeArgs });
+        if (lastOriginPageState !== this.lastOriginPageState) {
+          hasOriginPageChanged = true;
+        }
+        this.lastOriginPageState = lastOriginPageState;
+      }
     }
 
     if (redirectCount > maxRedirects) {
@@ -264,7 +279,10 @@ export class AppRouter extends SocketConsumer {
       routeArgs
     });
 
-    if (pageState === this.lastPageState && !force) return;
+    let watchOriginRoute = this.hasAttribute('watch-origin-route');
+    let originRouteChanged = watchOriginRoute && hasOriginPageChanged;
+
+    if (pageState === this.lastPageState && !originRouteChanged && !force) return;
 
     this.lastPageState = pageState;
 

package/oauth-handler.js

@@ -43,10 +43,13 @@ class OAuthHandler extends SocketConsumer {
       return;
     };
 
-    let stateParts = expectedOAuthState.split('-');
+    let relevantStates = expectedOAuthState
+      .split(',')
+      .filter(expectedState => expectedState && expectedState.split('-')[0] === provider);
+    
     // 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;
+    if (!relevantStates.length) return;
 
     let codeParamName = this.getAttribute('code-param-name') || 'code';
     let stateParamName = this.getAttribute('state-param-name') || 'state';
@@ -62,8 +65,8 @@ class OAuthHandler extends SocketConsumer {
       let socket = this.getSocket();
 
       history.replaceState({}, document.title, location.pathname);
-
-      if (state === expectedOAuthState) {
+      
+      if (relevantStates.some(expectedState => expectedState === state)) {
         try {
           await socket.invoke('log-in-oauth', { provider, data: { code, ...extraData } });
         } catch (error) {

package/oauth-link.js

@@ -75,8 +75,23 @@ class OAuthLink extends HTMLElement {
     let useLocalStorage = this.hasAttribute('use-local-storage');
     let stateSize = Number(this.getAttribute('state-size') || 20);
     let storageKey = this.getAttribute('state-storage-key') || 'oauth.state';
+    
+    let storage = useLocalStorage ? localStorage : sessionStorage;
+    let existingState = storage.getItem(storageKey);
+    let stateList;
+    if (existingState) {
+      stateList = existingState.split(',').filter(Boolean);
+      let maxStateCount = Number(this.getAttribute('max-state-count') ?? 20);
+      if (stateList.length >= maxStateCount) {
+        stateList.pop();
+      }
+    } else {
+      stateList = []
+    }
     this.state = `${provider}-${generateRandomHexString(stateSize)}`;
-    (useLocalStorage ? localStorage : sessionStorage).setItem(storageKey, this.state);
+    stateList.unshift(this.state);
+
+    storage.setItem(storageKey, stateList.join(','));
 
     this.shadowRoot.innerHTML = `
       <slot name="item"></slot>

package/package.json

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