saasufy-components 3.21.0 → 3.22.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`).
@@ -166,7 +188,27 @@ Note that the `app-router` can contain any number of pages/routes so the `slot="
 </app-router>
 ```
 
-The app router path is based on the `location.hash` so the path section in your browser's address bar needs to start with the `#` character.
+This example shows how to redirect based on the user's authentication status:
+
+```html
+<app-router default-page="/home">
+  <template slot="page" route-path="/log-in" auth-redirect="/home" hard-redirect>
+    <log-in-form
+      hostname="sas.saasufy.com"
+      port="443"
+      network-symbol="sas"
+      chain-module-name="sas_chain"
+      secure="true"
+    ></log-in-form>
+  </template>
+  <template slot="page" route-path="/home" no-auth-redirect="/log-in">
+    <div>This is the home page</div>
+  </template>
+  <div slot="viewport"></div>
+</app-router>
+```
+
+Note that the app router path is based on `location.hash` so the path section in your browser's address bar needs to start with the `#` character.
 So for example, if your `index.html` file is served up from the URL `http://mywebsite.com`, then, to activate the `/products` route as in the example above, you would need to type the URL `http://mywebsite.com#/products`.
 
 **Attributes of app-router**
@@ -180,9 +222,9 @@ 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.
-- `auth-redirect`: An optional path/route which this page should redirect to if the user is authenticated. If the user is not authenticated, then the content of the template will be displayed as normal.
-- `no-auth-redirect`: An optional path/route which this page should redirect to if the user is not authenticated. If the user is 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`, `auth-redirect` or `no-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.
+- `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.
+- `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
 

package/package.json

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