skyflow-js 1.17.1 → 1.20.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.20.0] - 2022-09-13
+
+### Changed
+- Update custom validation samples in JS SDK 
+- Update Log Level log 
+  
+## [1.19.0] - 2022-08-30
+
+### Added
+-  `FILE_INPUT` element type
+
+## [1.18.0] - 2022-07-05
+
+### Added
+- Copy icon in collect and reveal elements
+
 ## [1.17.1] - 2022-06-28
 
 ### Added

package/README.md

@@ -132,6 +132,7 @@ For `env` parameter, there are 2 accepted values in Skyflow.Env
 -  [**Event Listener on Collect Elements**](#event-listener-on-collect-elements)
 -  [**UI Error for Collect Eements**](#ui-error-for-collect-elements)
 - [**Set and Clear value for Collect Elements (DEV ENV ONLY)**](#set-and-clear-value-for-collect-elements-dev-env-only)
+- [**Using Skyflow File Element to upload a file**](#using-skyflow-file-element-to-upload-a-file)
 ## Inserting data into the vault
 
 To insert data into the vault from the browser, use the `insert(records, options?)` method of the Skyflow client. The `records` parameter takes a JSON object of the records to be inserted in the below format. The `options` parameter takes a dictionary of optional parameters for the insertion. See below: 
@@ -190,7 +191,7 @@ The sample response:
 
 ## Using Skyflow Elements to collect data
 
-**Skyflow Elements** provide developers with pre-built form elements to securely collect sensitive data client-side. These elements are hosted by Skyflow and injected into your web page as iframes. This reduces your PCI compliance scope by not exposing your front-end application to sensitive data. Follow the steps below to securely collect data with Skyflow Elements on your web page. 
+**Skyflow Elements** provide developers with pre-built form elements to securely collect sensitive data client-side. These elements are hosted by Skyflow and injected into your web page as iFrames. This reduces your PCI compliance scope by not exposing your front-end application to sensitive data. Follow the steps below to securely collect data with Skyflow Elements on your web page. 
 
 ### Step 1: Create a container
 
@@ -281,7 +282,7 @@ errorTextStyles: {
 }
 ```
 
-Finally, the `type` field takes a Skyflow ElementType. Each type applies the appropriate regex and validations to the form element. There are currently 5 types:
+Finally, the `type` field takes a Skyflow ElementType. Each type applies the appropriate regex and validations to the form element. There are currently 8 types:
 - `CARDHOLDER_NAME`
 - `CARD_NUMBER`
 - `EXPIRATION_DATE`
@@ -290,6 +291,8 @@ Finally, the `type` field takes a Skyflow ElementType. Each type applies the app
 - `CVV`
 - `INPUT_FIELD`
 - `PIN`
+- `FILE_INPUT`
+  
 
 The `INPUT_FIELD` type is a custom UI element without any built-in validations.  See the section on [validations](#validations) for more information on validations.
 
@@ -298,17 +301,20 @@ Along with CollectElement we can define other options which takes a dictionary o
 ```javascript
 const options = {
   required: false,  //optional, indicates whether the field is marked as required. Defaults to 'false'
-  enableCardIcon: true // optional, indicates whether card icon should be enabled (only applicable for CARD_NUMBER ElementType)
-  format: String //optinal, format for the element (only applicable currently for EXPIRATION_DATE ElementType)
+  enableCardIcon: true, // optional, indicates whether card icon should be enabled (only applicable for CARD_NUMBER ElementType)
+  format: String, //optional, format for the element (only applicable currently for EXPIRATION_DATE ElementType),
+  enableCopy: false // optional, enables the copy icon in collect and reveal elements to copy text to clipboard. Defaults to 'false')
 }
 ```
 
 `required` parameter indicates whether the field is marked as required or not. If not provided, it defaults to false
 
-`enableCardIcon` paramenter indicates whether the icon is visible for the CARD_NUMBER element, defaults to true
+`enableCardIcon` parameter indicates whether the icon is visible for the CARD_NUMBER element, defaults to true
 
 `format` parameter takes string value and indicates the format pattern applicable to the element type, It's currently only applicable to `EXPIRATION_DATE` and `EXPIRATION_YEAR` element types.
 
+`enableCopy` parameter indicates whether the copy icon is visible in collect and reveal elements.
+
 The values that are accepted for `EXPIRATION_DATE` are
   - `MM/YY` (default)
   - `MM/YYYY`
@@ -339,8 +345,9 @@ const collectElement =  {
 
 const options = {
   required: false,  //optional, indicates whether the field is marked as required. Defaults to 'false'
-  enableCardIcon: true // optional, indicates whether card icon should be enabled (only applicable for CARD_NUMBER ElementType)
-  format: String //optinal, format for the element (only applicable currently for EXPIRATION_DATE ElementType)
+  enableCardIcon: true, // optional, indicates whether card icon should be enabled (only applicable for CARD_NUMBER ElementType)
+  format: String, //optional, format for the element (only applicable currently for EXPIRATION_DATE ElementType)
+  enableCopy: false // optional, enables the copy icon in collect and reveal elements to copy text to clipboard. Defaults to 'false')
 }
 
 const element = container.create(collectElement, options)
@@ -476,7 +483,9 @@ Skyflow-JS provides two types of validations on Collect Elements
 
 #### 1. Default Validations:
 Every Collect Element except of type `INPUT_FIELD` has a set of default validations listed below:
-- `CARD_NUMBER`: Card number validation with checkSum algorithm(Luhn algorithm), available card lengths for defined card types
+- `CARD_NUMBER`: Card number validation with checkSum algorithm(Luhn algorithm).
+Available card lengths for defined card types are [12, 13, 14, 15, 16, 17, 18, 19]. 
+A valid 16 digit card number will be in the format - `XXXX XXXX XXXX XXXX`
 - `CARD_HOLDER_NAME`: Name should be 2 or more symbols, valid characters should match pattern -  `^([a-zA-Z\\ \\,\\.\\-\\']{2,})$`
 - `CVV`: Card CVV can have 3-4 digits
 - `EXPIRATION_DATE`: Any date starting from current month. By default valid expiration date should be in short year format - `MM/YY`
@@ -1079,6 +1088,218 @@ cardNumber.setAltText("Card Number");
 //clear altText
 cardNumber.clearAltText(); 
 ```
+
+## Using Skyflow File Element to upload a file
+
+You can upload binary files to a vault using the Skyflow File Element. Use the following steps to securely upload a file.
+### Step 1: Create a container
+
+Create a container for the form elements using the container(Skyflow.ContainerType) method of the Skyflow client:
+
+```javascript
+const container = skyflowClient.container(Skyflow.ContainerType.COLLECT)
+```
+
+### Step 2: Create a File Element
+
+Skyflow Collect Elements are defined as follows: 
+
+```javascript
+const collectElement =  {
+   table: "string",             //the table this data belongs to
+   column: "string",            //the column into which this data should be inserted
+   skyflowID: "string",         // the skyflow_id of the record
+   type: Skyflow.ElementType.FILE_INPUT,   //Skyflow.ElementType enum
+   inputStyles: {},             //optional styles that should be applied to the form element
+   labelStyles: {},             //optional styles that will be applied to the label of the collect element
+   errorTextStyles:{},          //optional styles that will be applied to the errorText of the collect element
+}
+```
+The `table` and `column` fields indicate which table and column the Element corresponds to. 
+
+`skyflowID` indicates the record that stores the file.
+
+**Notes**: 
+- `skyflowID` is required while creating File element
+- Use period-delimited strings to specify columns nested inside JSON fields (e.g. `address.street.line1`).
+
+ ## Step 3: Mount elements to the DOM
+
+To specify where to render Elements on your page, create placeholder `<div>` elements with unique `id` tags. For instance, the form below has an empty div with a unique id as a placeholder for a Skyflow Element. 
+
+```html
+<form>
+  <div id="file"/>
+  <br/>
+  <button type="submit">Submit</button>
+</form>
+```
+
+Now, when the `mount(domElement)` method of the Element is called, the Element is inserted in the specified div. For instance, the call below inserts the Element into the div with the id "#file".  
+
+```javascript
+element.mount("#file")
+```
+Use the `unmount` method to reset a Collect Element to its initial state.
+
+```javascript
+element.unmount();
+```
+## Step 4: Collect data from elements
+
+When the file is ready to be uploaded, call the `uploadFiles()` method on the container object.
+
+```javascript
+container.uploadFiles()
+```
+### File upload limitations:
+
+- Only non-executable file are allowed to be uploaded.
+- Files must have a maximum size of 32 MB
+- File columns can't enable tokenization, redaction, or arrays.
+- Re-uploading a file overwrites previously uploaded data.
+- Partial uploads or resuming a previous upload isn't supported.
+
+### End-to-end file upload
+
+```javascript
+//Step 1
+const container = skyflowClient.container(Skyflow.ContainerType.COLLECT) 
+
+//Step 2
+const element = container.create({           
+  table: "pii_fields",
+  column: "file",
+  skyflowID:"431eaa6c-5c15-4513-aa15-29f50babe882",
+  inputstyles: {
+      base: {
+        color: "#1d1d1d",
+      },
+  },
+  labelStyles: {
+      base: {
+        fontSize: "12px",
+        fontWeight: "bold"
+      }
+  },
+  errorTextStyles: {
+      base: {
+        color: "#f44336"
+      }
+  },
+  type: Skyflow.ElementType.FILE_INPUT
+})
+
+// Step 3
+element.mount("#file")  //assumes there is a div with id="#file" in the webpage
+
+// Step 4
+container.uploadFiles()
+```
+
+**Sample Response :**
+```javascript
+{
+    fileUploadResponse: [
+        {
+            "skyflow_id": "431eaa6c-5c15-4513-aa15-29f50babe882"
+        }
+    ]
+}
+```
+#### File upload with additional elements
+
+```javascript
+// Create collect Container
+
+const collectContainer = skyflow.container(Skyflow.ContainerType.COLLECT);
+
+
+// Create collect elements
+
+const cardNumberElement = collectContainer.create({
+  table: "newTable",
+  column: "card_number",
+  inputstyles: {
+      base: {
+        color: "#1d1d1d",
+      },
+  },
+  labelStyles: {
+      base: {
+        fontSize: "12px",
+        fontWeight: "bold"
+      }
+  },
+  errorTextStyles: {
+      base: {
+        color: "#f44336"
+      }
+  },,
+  placeholder: "card number",
+  label: "Card Number",
+  type: Skyflow.ElementType.CARD_NUMBER,
+});
+
+const fileElement = collectContainer.create({
+  table: "newTable",
+  column: "file",
+  skyflowID: '431eaa6c-5c15-4513-aa15-29f50babe882',
+  inputstyles: {
+      base: {
+        color: "#1d1d1d",
+      },
+  },
+  labelStyles: {
+      base: {
+        fontSize: "12px",
+        fontWeight: "bold"
+      }
+  },
+  errorTextStyles: {
+      base: {
+        color: "#f44336"
+      }
+  },,
+  type: Skyflow.ElementType.FILE_INPUT,
+});
+
+// Mount the elements
+
+cardNumberElement.mount("#collectCardNumber");
+fileElement.mount("#collectFile");
+
+// Collect and upload methods
+
+container.collect(options={})
+container.uploadFiles()
+
+```
+**Sample Response for collect():**
+```javascript
+{
+  "records": [
+    {
+      "table": "newTable",
+      "fields": {
+        "card_number": "f3907186-e7e2-466f-91e5-48e12c2bcbc1",
+      }
+    }
+  ]
+}
+```
+**Sample Response for file uploadFiles() :**
+```javascript
+{
+    "fileUploadResponse": [
+        {
+            "skyflow_id": "431eaa6c-5c15-4513-aa15-29f50babe882"
+        }
+    ]
+}
+```
+
+
 ## Reporting a Vulnerability
 
 If you discover a potential security issue in this project, please reach out to us at security@skyflow.com. Please do not create public GitHub issues or Pull Requests, as malicious actors could potentially view them.