saasufy-components 9.5.1 → 9.5.3

package/oauth-handler.js

@@ -25,6 +25,13 @@ class OAuthHandler extends SocketConsumer {
     }
   }
 
+  getProviderFromState(state) {
+    if (typeof state !== 'string') return '';
+    let lastDashIndex = state.lastIndexOf('-');
+    if (lastDashIndex === -1) return state;
+    return state.slice(0, lastDashIndex);
+  }
+
   async connectedCallback() {
     this.innerHTML = '';
 
@@ -45,7 +52,7 @@ class OAuthHandler extends SocketConsumer {
 
     let relevantStates = expectedOAuthState
       .split(',')
-      .filter(expectedState => expectedState && expectedState.split('-')[0] === provider);
+      .filter(expectedState => this.getProviderFromState(expectedState) === provider);
 
     // Do not process. The state may have been set for a different provider
     // which is handled on the same page.
@@ -60,7 +67,7 @@ class OAuthHandler extends SocketConsumer {
     let urlSearchParams = new URLSearchParams(location.search);
     let state = urlSearchParams.get(stateParamName);
 
-    let stateProvider = (state || '').split('-')[0];
+    let stateProvider = this.getProviderFromState(state);
     if (stateProvider !== provider) return;
     
     let code = urlSearchParams.get(codeParamName);

package/oauth-link.js

@@ -9,6 +9,10 @@ class OAuthLink extends HTMLElement {
     this.handleSlotChangeEvent = () => {
       this.renderItem();
     };
+
+    this.handleClickEvent = () => {
+      this.updateState();
+    };
   }
 
   static get observedAttributes() {
@@ -34,10 +38,12 @@ class OAuthLink extends HTMLElement {
 
     this.render();
     this.shadowRoot.addEventListener('slotchange', this.handleSlotChangeEvent);
+    this.addEventListener('click', this.handleClickEvent);
   }
 
   disconnectedCallback() {
     this.shadowRoot.removeEventListener('slotchange', this.handleSlotChangeEvent);
+    this.removeEventListener('click', this.handleClickEvent);
   }
 
   renderItem() {
@@ -67,12 +73,7 @@ class OAuthLink extends HTMLElement {
     viewportNode.innerHTML = itemString;
   }
 
-  render() {
-    if (this.code) {
-      this.shadowRoot.innerHTML = '';
-      return;
-    }
-
+  updateState() {
     let provider = this.getAttribute('provider');
     if (!provider) {
       throw new Error('The provider attribute of oauth-link was not specified');
@@ -93,10 +94,22 @@ class OAuthLink extends HTMLElement {
     } else {
       stateList = []
     }
-    this.state = `${provider}-${generateRandomHexString(stateSize)}`;
+    if (this.provider !== provider) {
+      this.state = `${provider}-${generateRandomHexString(stateSize)}`;
+      this.provider = provider;
+    }
     stateList.unshift(this.state);
 
     storage.setItem(storageKey, stateList.join(','));
+  }
+
+  render() {
+    if (this.code) {
+      this.shadowRoot.innerHTML = '';
+      return;
+    }
+
+    this.updateState();
 
     this.shadowRoot.innerHTML = `
       <slot name="item"></slot>

package/package.json

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