trunomi-widgets v0.2.51

Trunomi Widgets Preference centre demo Widgets demo

Set of React components that makes the implementation of the Trunomi platform on a react application easier. Contains a number of fully customizable widgets.

NEW UI IN - Custom styles broken, you will need to branch and customize css, I want to go another direction here with White Label abilities.

Getting Started

Prerequisites

npm or yarn and React/React-dom to be used. Fully compatible with react 16 and 0.15, more testing pending

Set Up

This module can be installed using npm or yarn. It is currently not hosted in npm yet but can be installed manually.

• Ensure you are running a very old version of node 6.11.3
• Clone this project: git clone https://github.com/Trunomi/trunomi-widgets.git
• Install the module: npm install --save ../trunomi-widgets (being ../trunomi-widgets the locatione of the cloned repository)

Deployment

To deploy this kibrary to npm follow this steps:

• Update the package version inside the package.json file
• Properly configure the npm authentication
• Run yarn publish: this will bundle the library and push it to npm

Usage

Import the wanted widgets from the trunomi-widgets:

import {ConsentsWidget, ActiveDSRWidget, DSRWidget, CaptureConsent, CaptureDSR, Trucert, UserPreferences} from 'trunomi-widgets';

Use the component specifyin the appropiate props. For example, the user preferences widget:

<UserPreferences truConfig={...} title='Preferences' dataPane={false}/>

Configuration object (required)

Prop required by all the widgets (unless a Session has started) that contains the configuration required to interact with the TRUNOMI platform. There are 2 ways of doing this: using static authentication with an API token or using express authenticaion with a JWT token. The config objects has to follow one of the 2 structures:

• Static Authentication

truConfig = {
    apiToken: '...',
    enterpriseId: '...',
    customerId: '...',
    host_addr: '...',
    locale: '...'
}

• Express Authentication

truConfig = {
    jwtToken: '...',
    host_addr: '...',
    locale: '...'
}

* customerId is only required if it's not already specified in the jwt_token. If both are specified, only the one in the JWT token will be considered.

• Using a Session: with the functions startSession(truConfig) and stopSession() a Session can be managed between the widgets and the Trunomi platform. With this, the user is able to use the widgets without having to pass the truConfig every time and in the case of using a jwt token, to send a new boolean parameter 'refreshToken' to specify whether to refresh the token or not. The validation of the token with Trunomi can be handled by the module.

For example:

setTimeout(stopSession, 20000);

startSession({
    jwtToken: '...', //Unvalidated or validated token
    host_addr: 'http://trunomi.local',
    refreshJWT: true
}).then(()=>{
    ReactDOM.render(<App />, document.getElementById('root'));
});

Widgets

Herethe widgets can be seen in action. Clicking on the developer view will display more information about the props as well as an interactive way of setting them in real time.

Consents widget (ConsentsWidget)

Widget that lists all the consent definitions and the status of those for the the given configuration. It allows the end user to grant and deny/revoke consents and check the Trucert generated for each consent definition.

• Props

The table object allows for the following keys and have the following default values:

table = {
    striped: false,
    bordered: true,
    condensed: true,
    hover: true,
    responsive: false,
    headerClass: 'greyHeader'
}

The first 5 are parameters that can be passed to a bootstrap table. The last parameter defines a custom class for the header, which allos for further customization. This prop and it's default values are the same for the DSRWidget and the ActiveDSRWidget.

Data Subject Requests widget (DSRWidget)

Widget that lists all the personal informatio the customer has given consent to use and allows them to make access/erasure/obect/rectify if the data type definition in the trunomi platform allows for it. It props the end user to submit a reason for the request.

• Props

Active Data Subject Requests widget (ActiveDSRWidget)

Widget that lists all the data subject requests in process from the customer.

• Props

User Preferences widget (UserPreferences)

Component that displays the three previous widgets to form a user preference center where the end user can view it's rights and data subject requests and act on them.

• Props

Capture Consent widget (CaptureConsent)

Widget that prompts a customer to consent or deny consent for a given consent program.

• Props

The combination of Context ID and Consent ID must exist in the Trunomi platform or the widget will display an error.

Capture Data Subject Request widget (CaptureDSR)

Widget that prompts a customer to create a data subject request (access, rectification, ereasure, object).

• Props

The data type with id=dataTypeId must exists in the Trunomi platform and must allow for the type of data subject request specified in type or else an error will be displayed in the widget.

Trucert (Trucert)

Widget that displays the trucert information for a ledger id.

• Props

The ledger must exist on the Trunomi platform.