saasufy-components 3.21.1 → 3.23.0

package/README.md

@@ -56,6 +56,7 @@ You can apply custom CSS/styling to elements that are rendered inside a viewport
 
 To use a component, you just need to include the relevant `<script>` tag into the `<head>` tag of your `.html` file.
 You can simply copy-paste the script tag provided under the `Import` section of the relevant component's documentation.
+Make sure that you read the documentation carefully; especially the list of available attributes and acceptable values for each component.
 
 You should only add the script tags for the components which your page uses to avoid wasting bandwidth and unnecessarily delaying page load for your users.
 You should always include the `socket.js` script and create a top-level `socket-provider` component if you intend to use components which depend on data from Saasufy.
@@ -86,6 +87,27 @@ The following utility functions can be used anywhere inside template `{{expressi
 - Format UNIX timestamp as a human-readable date: `{{date(Product.updatedAt)}}`
 - Given an array of objects, extract the values from the specified field and join them together into a single comma-separated string: `{{joinFields(Product, 'name')}}`
 
+### Special fields
+
+Saasufy supports a number of special metadata fields which are automatically created and updated on each model record.
+Those fields are hidden by default but may be exposed via the Saasufy control panel and used within your application.
+The fields are:
+
+- `id`: String, UUID v4 format; the ID of the resource.
+- `createdBy`: String, UUID v4 format; if the socket was authenticated, this will hold the ID of the account which created the resource.
+- `updatedBy`: String, UUID v4 format; if the socket was authenticated, this will hold the ID of the account which last modified the resource.
+- `createdByIp`: String, IP address format; the IP address of the client which last modified the resource.
+- `createdAt`: Number, UNIX timestamp format; the timestamp for when the resource was created.
+- `updatedAt`: Number, UNIX timestamp format; the timestamp for when the resource was last modified.
+
+All of the above fields except for the `id` field are hidden by default and must be exposed via the Saasufy control panel in order to be accessible within your front end application.
+To expose a special field on a specific model, you just need to create a field with the same name under the `fields` section of the relevant model.
+You will need to make sure that the type you specify (`String` or `Number`) matches the type of the special field described above.
+You will need to deploy your Saasufy service from the dashboard for the changes to take effect.
+
+The `id` field in Saasufy is extra special; you can optionally specify it when you create a new resource, however, if it is not specified, Saasufy will create one for you.
+Saasufy offers utility functions for creating IDs (random and deterministic). See the previous `Utility functions` section.
+
 ### File hosting
 
 Saasufy provides basic HTTP/HTTPS file hosting functionality with support for client-side caching (with `ETag`).
@@ -789,6 +811,7 @@ When using an OAuth provider, the callback URL which you register with the provi
 - `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-link` component at the start of the OAuth flow.
 - `success-location-hash`: If authentication is successful, the browser's `location.hash` will be set to this value. It can be used to redirect the user to their dashboard, for example.
 - `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.
 - `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`.

package/oauth-handler.js

@@ -1,5 +1,5 @@
 import { SocketConsumer } from './socket.js';
-import { generateRandomHexString } from './utils.js';
+import { generateRandomHexString, convertStringToFieldParams } from './utils.js';
 
 const DEFAULT_AUTH_TIMEOUT = 10000;
 
@@ -49,9 +49,10 @@ class OAuthHandler extends SocketConsumer {
 
     let codeParamName = this.getAttribute('code-param-name') || 'code';
     let stateParamName = this.getAttribute('state-param-name') || 'state';
+    let extraDataString = this.getAttribute('extra-data') || '';
+    let { fieldValues: extraData } = convertStringToFieldParams(extraDataString);
 
     let authTimeout = Number(this.getAttribute('auth-timeout') || DEFAULT_AUTH_TIMEOUT);
-
     let urlSearchParams = new URLSearchParams(location.search);
     let code = urlSearchParams.get(codeParamName);
 
@@ -63,7 +64,7 @@ class OAuthHandler extends SocketConsumer {
 
       if (state === expectedOAuthState) {
         try {
-          await socket.invoke('log-in-oauth', { provider, data: { code } });
+          await socket.invoke('log-in-oauth', { provider, data: { code, ...extraData } });
         } catch (error) {
           this.innerHTML = `
             <div class="error">OAuth authentication failed. ${error.message}</div>

package/package.json

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