saasufy-components 3.27.4 → 3.29.0

package/README.md

@@ -222,8 +222,8 @@ 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.
-- `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.
+- `no-auth-redirect`: An optional alternative path/route to redirect to if the user is 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 is 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
@@ -710,6 +710,7 @@ The following example shows how to bind an `input-provider` component to an `inp
 
 - `consumers`: This allows you to connect this `input-transformer` to other elements on your page. It takes a list of selectors with optional attributes to target in the format `element-selector:attribute-name`. For example `.my-input:value` will find all elements with a `my-input` class and update their `value` attributes with the value of the `input-provider` component in real-time. You can specify multiple selectors separated by commas such as `.my-input,my-div`; in this case, because attribute names are not specified, values will be injected into the `value` attribute (for input elements) or into the `innerHTML` property (for other kinds of elements). The default attribute/property depends on the element type.
 - `provider-template`: A template string within which the `{{value}}` can be injected before passing to consumers.
+- `output-type`: The default output type is `string`. This property can be used to convert the output to either `boolean` or `number`.
 - `debounce-delay`: The delay in milliseconds to wait before triggering a change event. This is useful to batch multiple updates together. Default is 0ms.
 
 ### log-in-form
@@ -792,7 +793,8 @@ A link to initiate an OAuth flow to authenticate a user as part of log in. Can s
 - `provider` (required): The name of the provider. It must match the provider name specified on the `Authentication` page of your Saasufy control panel and also the value provided to the `oauth-handler` component at the end of the OAuth flow.
 - `client-id` (required): This is the client ID from the third-party OAuth provider.
 - `state-size`: This allows you to control the size (in bytes) of the random state string which is passed to the OAuth provider as part of the OAuth flow. Defaults to 20.
-- `state-session-storage-key`: The state string is stored in the browser's `sessionStorage` under this key. Defaults to `oauth.state`. It must match the value provided to the `oauth-handler` component at the end of the OAuth flow.
+- `state-storage-key`: The state string is stored in the browser's `sessionStorage` under this key. Defaults to `oauth.state`. It must match the value provided to the `oauth-handler` component at the end of the OAuth flow.
+- `use-local-storage`: By default, the state is stored inside sessionStorage. If this property is set, then the state will be stored inside localStorage instead. This is useful for sharing the state across different tabs. If set, this attribute should also be set on the related `oauth-handler` component.
 
 ### oauth-handler
 
@@ -818,10 +820,11 @@ When using an OAuth provider, the callback URL which you register with the provi
 - `success-url`: If authentication is successful, the browser's `location.href` will be set to this value. It can be used to redirect the user to their dashboard, for example.
 - `extra-data`: This attribute can be used to pass additional data to the OAuth `getAccessTokenURL` endpoint. For Google OAuth, for example, an additional `redirect_uri` field is required, so it should be set using `extra-data="redirect_uri=http://localhost.com:8000/"` (substitute the URI with your own).
 - `navigate-event-path`: If authentication is successful and a path is set via this attribute, the component will emit a `navigate` event which will bubble up the component hierarchy and can be used by a parent component to perform the success redirection. This approach can be used as an alternative to `success-location-hash` or `success-url` for doing the final redirect.
-- `state-session-storage-key`: The state string is stored in the browser's `sessionStorage` under this key. Defaults to `oauth.state`. It must match the value provided to the `oauth-link` component at the start of the OAuth flow.
+- `state-storage-key`: The state string is stored in the browser's `sessionStorage` under this key. Defaults to `oauth.state`. It must match the value provided to the `oauth-link` component at the start of the OAuth flow.
 - `code-param-name`: The name of the query parameter which holds the `code` as provided by the OAuth provider within the OAuth callback URL. Defaults to `code`.
 - `state-param-name`: The name of the query parameter which holds the `state` as provided by the OAuth provider within the OAuth callback URL. Defaults to `state`.
 - `auth-timeout`: The number of milliseconds to wait for authentication to complete before timing out. Defaults to 10000 (10 seconds).
+- `use-local-storage`: By default, the state is retrieved from sessionStorage. If this property is set, then the state will be retrieved from localStorage instead. This is useful for sharing the state across different tabs. If set, this attribute should also be set on the related `oauth-link` component.
 
 ### render-group
 

package/input-transformer.js

@@ -18,6 +18,7 @@ class InputTransformer extends HTMLElement {
       'consumers',
       'debounce-delay',
       'provider-template',
+      'output-type',
       'value'
     ];
   }
@@ -30,6 +31,7 @@ class InputTransformer extends HTMLElement {
     if (!this.hasAttribute('value')) return;
 
     let value = this.getAttribute('value') || '';
+    let outputType = this.getAttribute('output-type');
     let debounceDelay = this.getAttribute('debounce-delay');
     debounceDelay = debounceDelay ? Number(debounceDelay) : DEFAULT_DEBOUNCE_DELAY;
 
@@ -40,7 +42,7 @@ class InputTransformer extends HTMLElement {
 
     this.debounce(async () => {
       let providerTemplate = this.getAttribute('provider-template') || '{{value}}';
-      updateConsumerElements(consumers, value, providerTemplate);
+      updateConsumerElements(consumers, value, providerTemplate, null, outputType);
     }, debounceDelay);
   }
 }

package/oauth-handler.js

@@ -33,8 +33,9 @@ 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.state';
-    let expectedOAuthState = sessionStorage.getItem(sessionStorageKey);
+    let useLocalStorage = this.hasAttribute('use-local-storage');
+    let storageKey = this.getAttribute('state-storage-key') || 'oauth.state';
+    let expectedOAuthState = (useLocalStorage ? localStorage : sessionStorage).getItem(storageKey);
     if (!expectedOAuthState) {
       this.innerHTML = `
         <div class="error">OAuth authentication failed because the state was missing.</div>

package/oauth-link.js

@@ -16,7 +16,8 @@ class OAuthLink extends HTMLElement {
       'provider',
       'client-id',
       'state-size',
-      'state-session-storage-key'
+      'state-storage-key',
+      'use-local-storage'
     ];
   }
 
@@ -71,10 +72,11 @@ class OAuthLink extends HTMLElement {
     if (!provider) {
       throw new Error('The provider attribute of oauth-link was not specified');
     }
+    let useLocalStorage = this.hasAttribute('use-local-storage');
     let stateSize = Number(this.getAttribute('state-size') || 20);
-    let sessionStorageKey = this.getAttribute('state-session-storage-key') || 'oauth.state';
+    let storageKey = this.getAttribute('state-storage-key') || 'oauth.state';
     this.state = `${provider}-${generateRandomHexString(stateSize)}`;
-    sessionStorage.setItem(sessionStorageKey, this.state);
+    (useLocalStorage ? localStorage : sessionStorage).setItem(storageKey, this.state);
 
     this.shadowRoot.innerHTML = `
       <slot name="item"></slot>

package/package.json

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

package/utils.js

@@ -233,7 +233,7 @@ let templateFormatters = {
   computeId
 };
 
-let templateRawTagsRegExp = /{{{.*?}}}/gs;
+let templateTripleTagsRegExp = /{{{.*?}}}/gs;
 let templateTagsRegExp = /{{.*?}}/gs;
 
 function execExpression(expression, options) {
@@ -264,7 +264,7 @@ function getRenderOptions(data, socket) {
 
 export function renderTemplate(templateString, data, socket) {
   return templateString
-    .replace(templateRawTagsRegExp, (match) => {
+    .replace(templateTripleTagsRegExp, (match) => {
       let expString = match.slice(3, -3);
       let options = getRenderOptions(data, socket);
       try {
@@ -292,7 +292,7 @@ export function renderTemplate(templateString, data, socket) {
     });
 }
 
-export function updateConsumerElements(consumers, value, template, sourceElementName) {
+export function updateConsumerElements(consumers, value, template, sourceElementName, outputType) {
   if (consumers) {
     let consumerParts = consumers.split(',')
       .filter(part => part)
@@ -303,10 +303,13 @@ export function updateConsumerElements(consumers, value, template, sourceElement
       .filter(([ selector, attributeName ]) => selector);
 
     if (template) {
-      value = renderTemplate(
-        template,
-        { value }
-      );
+      value = renderTemplate(template, { value });
+    }
+
+    if (outputType === 'boolean') {
+      value = value !== 'false' && value !== '';
+    } else if (outputType === 'number') {
+      value = Number(value);
     }
 
     for (let [ selector, attributeName ] of consumerParts) {