saasufy-components 10.1.1 → 10.2.1

package/README.md

@@ -457,7 +457,7 @@ This component is a simplified version of the `collection-adder-form` component
 - `autocapitalize`: Can be set to `off` to disable auto-capitalization of the first input character on mobile devices.
 - `autocorrect`: Can be set to `off` to disable auto-correction of input on mobile devices.
 - `show-field-errors`: If this attribute exists on the element, then granular error messages will be shown above each corresponding input element instead of a single form-level error message.
-- `trim-spaces`: If this attribute exists on the element, then leading and trailing spaces will be trimmed from each input element's value before submitting the form.
+- `trim-spaces`: If this attribute exists on the element, then leading and trailing spaces will be trimmed from each input element's value before submitting the form. It can optionally be set to a comma-separated list of field names such as `trim-spaces="name,brand"`; in this case, only the values of the listed fields will be trimmed and all others will be left as they are. If the attribute has no value, then all input values will be trimmed.
 - `reset-status-on-submit`: If this attribute exists, then the current message and any field errors will be cleared as soon as the form is submitted, instead of when the outcome of the submit is known. By default, the previous status is kept on screen until the insert either succeeds or fails and is then replaced within a single frame; this avoids the form flickering (shrinking and then growing again) when the same error occurs on consecutive submits.
 - `consumers`: This allows you to connect this `collection-adder` to other elements on your page. It should be used in conjunction with the `provider-template` attribute. The `consumers` attribute 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 output of the `collection-adder` component on submit. 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.
 - `success-consumers`: Same as the `consumers` attribute but the target elements are only updated if insertion was a success.
@@ -498,7 +498,7 @@ This component is similar to the `collection-adder` component except that it req
 - `computable-model-values`: If this attribute exists on the element, then the `model-values` attribute will be re-computed before the form is submitted; this may be useful if the `model-values` attribute contains expressions which need to be updated before submitting.
 - `success-message`: A message to show the user if the resource has been successfully added to the collection after submitting the form.
 - `show-field-errors`: If this attribute exists on the element, then granular error messages will be shown above each corresponding input element instead of a single form-level error message.
-- `trim-spaces`: If this attribute exists on the element, then leading and trailing spaces will be trimmed from each input element's value before submitting the form.
+- `trim-spaces`: If this attribute exists on the element, then leading and trailing spaces will be trimmed from each input element's value before submitting the form. It can optionally be set to a comma-separated list of input names such as `trim-spaces="name,brand"`; in this case, only the values of the listed inputs will be trimmed and all others will be left as they are. If the attribute has no value, then all input values will be trimmed.
 - `auto-reset-hidden-inputs`: If this attribute exists, then `hidden` input elements which are inside the `collection-adder-form` will be cleared along with other input fields. By default, `hidden` input elements are not cleared when the form is reset.
 - `reset-status-on-submit`: If this attribute exists, then the current message and any field errors will be cleared as soon as the form is submitted, instead of when the outcome of the submit is known. By default, the previous status is kept on screen until the insert either succeeds or fails and is then replaced within a single frame; this avoids the form flickering (shrinking and then growing again) when the same error occurs on consecutive submits.
 - `disable-submit-on-enter-key`: If this attribute exists, then the form will not submit when the enter key is pressed.
@@ -936,6 +936,8 @@ The change in the location hash can then be detected by an `app-router` to switc
 
 A component which can be placed inside a `socket-provider` to deauthenticate the socket (e.g. on click).
 
+If the user logged in via an OAuth provider which supports RP-initiated log out (such as Keycloak), deauthenticating the socket does not end the session on the provider itself; the user would be logged straight back in without being asked for their credentials the next time they log in. To also end the provider session, specify the `logout-url` attribute and the component will redirect the user to that endpoint after deauthenticating the socket.
+
 **Import**
 
 ```html
@@ -948,6 +950,27 @@ A component which can be placed inside a `socket-provider` to deauthenticate the
 <log-out onclick="logOut()"><a href="javascript:void(0)">Log out</a></log-out>
 ```
 
+Logging out of Keycloak as well as of the app:
+
+```html
+<log-out
+  onclick="logOut()"
+  provider="keycloak"
+  logout-url="https://auth.example.com/realms/myrealm/protocol/openid-connect/logout"
+  client-id="myclient"
+  post-logout-redirect-uri="https://myapp.com/index.html"
+><a href="javascript:void(0)">Log out</a></log-out>
+```
+
+**Attributes**
+
+- `logout-url`: The log out endpoint of the OAuth provider; for OpenID Connect providers this is the `end_session_endpoint`. If it is not specified, the component only deauthenticates the socket. The redirect is skipped if the user did not log in via an OAuth provider.
+- `provider`: The name of the OAuth provider, as specified on the `Authentication` page of your Saasufy control panel. If it is set, the redirect only happens when the user logged in via that specific provider; this is useful when your app offers several different ways to log in.
+- `client-id`: The client ID to pass to the provider as the `client_id` query parameter. OpenID Connect providers require either this or an ID token in order to log the user out without asking them to confirm.
+- `post-logout-redirect-uri`: The URL to send the user back to once the provider has logged them out, passed as the `post_logout_redirect_uri` query parameter. It usually needs to be registered with the provider in advance. If it is not specified, the user is left on the provider's own logged out page.
+
+If the auth token contains an ID token (which requires the `idTokenField` of the provider to be set on the `Authentication` page of your Saasufy control panel), it is passed to the provider as the `id_token_hint` query parameter. Providers such as Keycloak show a log out confirmation page when it is missing. Any of these query parameters which are already present in `logout-url` are left untouched.
+
 ### oauth-link
 
 A link to initiate an OAuth flow to authenticate a user as part of log in. Can support a range of different OAuth providers.

package/collection-adder-form.js

@@ -59,7 +59,15 @@ class CollectionAdderForm extends SocketConsumer {
       this.clearStatus();
     }
 
+    // The trim-spaces attribute can either be empty (in which case spaces are
+    // trimmed from all input values) or it can hold a comma-separated list of
+    // input names to restrict trimming to those specific inputs.
     let trimSpaces = this.hasAttribute('trim-spaces');
+    let trimSpacesInputNames = trimSpaces ?
+      (this.getAttribute('trim-spaces') || '')
+        .split(',')
+        .map(inputName => inputName.trim())
+        .filter(inputName => inputName) : [];
 
     let inputElements = this.getAllInputElements();
     let outputValue;
@@ -113,7 +121,11 @@ class CollectionAdderForm extends SocketConsumer {
                   value = input.value;
                 }
                 let sanitizedValue = Type(value);
-                if (trimSpaces && typeof sanitizedValue === 'string') {
+                let shouldTrimSpaces = trimSpaces && (
+                  !trimSpacesInputNames.length ||
+                  trimSpacesInputNames.includes(input.name)
+                );
+                if (shouldTrimSpaces && typeof sanitizedValue === 'string') {
                   sanitizedValue = sanitizedValue.trim();
                 }
                 return [ input.name, sanitizedValue ];

package/collection-adder.js

@@ -70,7 +70,16 @@ class CollectionAdder extends SocketConsumer {
       }
     }
 
+    // The trim-spaces attribute can either be empty (in which case spaces are
+    // trimmed from all input values) or it can hold a comma-separated list of
+    // field names to restrict trimming to those specific inputs.
     let trimSpaces = this.hasAttribute('trim-spaces');
+    let trimSpacesFieldNames = trimSpaces ?
+      (this.getAttribute('trim-spaces') || '')
+        .split(',')
+        .map(fieldName => fieldName.trim())
+        .filter(fieldName => fieldName) : [];
+
     let outputValue;
 
     let modelValues = this.getAttribute('model-values');
@@ -116,7 +125,11 @@ class CollectionAdder extends SocketConsumer {
                   value = input.value;
                 }
                 let sanitizedValue = Type(value);
-                if (trimSpaces && typeof sanitizedValue === 'string') {
+                let shouldTrimSpaces = trimSpaces && (
+                  !trimSpacesFieldNames.length ||
+                  trimSpacesFieldNames.includes(input.name)
+                );
+                if (shouldTrimSpaces && typeof sanitizedValue === 'string') {
                   sanitizedValue = sanitizedValue.trim();
                 }
                 return [ input.name, sanitizedValue ];

package/log-out.js

@@ -1,8 +1,50 @@
 import { SocketConsumer } from './socket.js';
 
 class LogOut extends SocketConsumer {
-  logOut() {
-    this.getSocket().deauthenticate();
+  getProviderLogOutURL(authToken) {
+    let logoutURL = this.getAttribute('logout-url');
+    if (!logoutURL) return null;
+
+    // RP-initiated log out only applies to sessions which were created via an OAuth provider.
+    let authSource = authToken && authToken.authSource;
+    if (!authSource) return null;
+    let provider = this.getAttribute('provider');
+    if (provider && provider !== authSource) return null;
+
+    let providerLogOutURL;
+    try {
+      providerLogOutURL = new URL(logoutURL, location.origin);
+    } catch (error) {
+      throw new Error(
+        'The logout-url attribute of log-out was not a valid URL'
+      );
+    }
+
+    let clientId = this.getAttribute('client-id');
+    let postLogoutRedirectURI = this.getAttribute('post-logout-redirect-uri');
+    let searchParams = providerLogOutURL.searchParams;
+
+    // Without an id_token_hint, the provider asks the user to confirm the log out.
+    if (authToken.idToken && !searchParams.has('id_token_hint')) {
+      searchParams.set('id_token_hint', authToken.idToken);
+    }
+    if (clientId && !searchParams.has('client_id')) {
+      searchParams.set('client_id', clientId);
+    }
+    if (postLogoutRedirectURI && !searchParams.has('post_logout_redirect_uri')) {
+      searchParams.set('post_logout_redirect_uri', postLogoutRedirectURI);
+    }
+    return providerLogOutURL.href;
+  }
+
+  async logOut() {
+    let socket = this.getSocket();
+    // The auth token must be read before the socket is deauthenticated.
+    let providerLogOutURL = this.getProviderLogOutURL(socket.authToken);
+    await socket.deauthenticate();
+    if (providerLogOutURL) {
+      location.href = providerLogOutURL;
+    }
   }
 }
 

package/package.json

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