Introduction

Freeman.GDPR.PrivacyConsentB3 is a lightweight jQuery plugin, to display a modal where users can choose to consent to application specific PII fields. This plugin supports Bootstrap 3

Getting Started

1.Installation process
    NPM:
        npm install freeman.gdpr.privacyconsentb3 --save-dev

2.Software dependencies
    jQuery 3.x:
        Via NPM:   npm install jQuery@latest --save-dev

                    OR

        Via CDN -  Uncompressed: <script
                        src="https://code.jquery.com/jquery-3.3.1.js"
                        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
                        crossorigin="anonymous"></script>
                    OR

        Via CDN -  Minified: <script
                    src="https://code.jquery.com/jquery-3.3.1.min.js"
                    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
                    crossorigin="anonymous"></script>

    Bootstrap 4.x :
        Via NPM -  npm install bootstrap@latest --save-dev

                    OR

        Via CDN (CSS) -  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        Via CDN (script) - <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>



3.Latest releases
    Current Release: 1.0.3

How to use this plugin:

Step 1: Go to https://freemanco.visualstudio.com/Freeman/_packaging?feed=Freeman.GDPR.Packages&_a=feed
Step 2: Click on Connect to feed. A pop-up is displayed.
Step 3: Choose npm from the list (on the left). Scroll down and click on Generate npm credentials.
Step 4: Copy and paste the token in .npmrc (Windows - C://Users//<username>) on your local machine. Generate 1 token per team
Step 5: Install the plugin and the necessary software dependencies in your application
Step 6: In the entry component,
    import '~/node_modules/freeman.gdpr.piiconsent/js/jquery.piiconsent.js';
    declare let $: any;  //If using TypeScript; else use 'var' instead of 'let'

    In the OnInit() method (before any PII data is collected/used),

        // ALL FIELDS ARE REQUIRED. PASS EMPTY STRING TO email IF NO VALID EMAIL AVAILABLE
        let appData = {
            appName: "nexus",
            userName: "[email protected]",
            email: "",  // Send email address of the User if they want to receive System Communication else send empty string
            environment: <environment> ('dev', 'test', 'uat', 'prod'),
            apiKey: "" // Will be provided by us
            appKey: "" // Will be provided by us
        };

         $('selectorName').getToken(appData, function(token) {
            console.log(token);
            // Use this token to call the Privacy Management System (Dashboard)
        })
        
        $('selectorName').addDataModal(appData, function(action) {
            let returnValue = action;
            // 'action' is the consentObject returned by the plugin. This consentObject has the user consent information for each PII field.
        });
                        OR
        $('selectorName').addDataModal(appData, returnValue => {
            // Use returnValue
        });

Return Values:
        1. If user has not consented to PII Fields,
            {
                Application: "<applicationName>",
                Token: "<ReturnToken>",
                UserPIIFields: [], // List of all cookies with User consents
                Username: "<username>",
                UserTermsConsent: <boolean value>
            }

        2. If user has already consented,
            {
                Application: "<applicationName>",
                ApplicationId: <Id>,
                Email: "",
                IsShow: false,
                Token: "<ReturnToken>",
                UserPIIFields: [], // List of all cookies with User consents
                UserId: <userId>,
                Username: "<username>",
                UserTermsConsent: <boolean value>
            }

Default CSS Classes:
    .overflowStyle { 
        overflow-x: hidden; 
        overflow-y: auto
    }
    .policyText {
        font-weight: bold;
    }
    .categoryText {
        font-size: 13px;
        font-style: italic;
    }
    .consentAnchor {
        color: orange;
        cursor: pointer;
    }
    .consentTable {
        height: 250px;
        overflow: auto;
    }

    // DO NOT CHANGE THE FOLLOWING STYLES
    .switch { 
        position: relative; 
        display: inline-block;
        width: 54px; 
        height: 28px;
    }
    .switch input { 
        display: none; 
    }
    .slider { 
        position: absolute; 
        cursor: pointer; 
        top: 0; 
        left: 0; 
        right: 0; 
        bottom: 0; 
        background-color: #ccc; 
        -webkit-transition: .4s; 
        transition: .4s; 
        -webkit-transition: .4s; 
        transition: .4s;
    }
    .slider::before { 
        position: absolute; 
        content: ''; 
        height: 20px; 
        width: 20px; 
        left: 4px; 
        bottom: 4px; 
        background-color: white; 
        -webkit-transition: .4s; 
        transition: .4s;
    }
    input[type=checkbox]:checked + .slider { 
        background-color: #2196F3; 
    }
    input:focus + .slider { 
        box-shadow: 0 0 1px #2196f3; 
    }
    input[type=checkbox]:checked + .slider:before { 
        -webkit-transform: translateX(26px); 
        -ms-transform: translateX(26px); 
        transform: translateX(26px); 
    }
    .slider.round { 
        border-radius: 34px 
    }
    .slider.round::before { 
        border-radius: 50%; 
    }

 To change the default styles: Go to the global stylesheet in the application and reference the element using class names or Id.
    For example: 
        a .consentAnchor {
            color: red
        }
        Will change the color of the link with class consentAnchor, to red.

Purpose of PIIConsent Plugin:

This plugin is used when a user registers for an application using FOL registration. Once the user fills all the registration details and clicks submit, before the registration completes, a modal will pop up which contains the privacy policy and a list of all the PII data the application uses. PII data can either be required (essential to the application) or optional (application can be accessed without this data). Required fields will always to turned on and cannot be turned off. Users can either turn on (give consent) or turn off(revoke consent) to only the optional fields.
Once the user makes a decision and clicks 'Continue', the registration process continues and completes.