Introduction

Freeman.GDPR.CombinedConsents is a lightweight jQuery plugin, to display a modal where users can choose to consent to application specific cookies, PII fields and Terms of Use.
This version of the plugin is specifically for Bootstrap 3

Getting Started

1.Installation process
    NPM:
        npm install freeman.gdpr.combinedconsents --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 3.3.7 :
        Via NPM -  npm install bootstrap@latest --save-dev

                    OR

        // Latest compiled and minified JavaScript
        Via CDN -  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

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


3.Latest releases
    Current Release: 1.2.7

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.privacycookieconsent/js/jquery.privacycookieconsent.js';
    declare let $: any;  //If using TypeScript; else use 'var' instead of 'let'

    In the OnInit() method (before any cookies are set and any PII fields are 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').addCombinedModal(appData, function(action) {
            let returnValue = action;
            // 'action' is the consentObject returned by the plugin. This consentObject has the user consent information for each application cookie and PII fields.
        });
                    OR
        $('selectorName').addCombinedModal(appData, returnValue => {
            // Use returnValue
        });

Return Values:
    1. If user has not consented,
        {
            Application: "<applicationName>",
            Token: "<ReturnToken>",
            UserCookies: [], // List of all cookies with User consents
            UserPIIFields: [], //List of all pii fields with User consents
            Username: "<username>"
        }

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

Default CSS Classes:
    .consentCheckbox {
        transform: scale(1.0);
    }
    .overflowStyle {
        overflow-x: hidden;
        overflow-y: auto;
    }
    .policyText {
        font-weight: bold;
    }
    .categoryText {
        font-size: 13px;
        font-style: italic;
    }
    .consentAnchor {
        color: orange;
        cursor: pointer;
    }
    .consentAnchor {
        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 combinedConsents Plugin:

This plugin should be used for an existing user, who has already completed registration and was not provided with the PIIConsent Modal at the time of registration. 
When a user logs into an application on page load, before any application cookies are set or PII fields are used, a modal will pop up which contains 3 tabs for Cookie Consent, PII Consent and Terms of Use. 
The Cookie Consent tab will have the cookie policy and a list of all the cookies the application uses. Cookies can either be required (essential to the application) or optional (application can be accessed without these cookies). Required cookies 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 cookies.
The PIIConsent tab will have 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 consent is stored and returned to the application. The application must make the necessary changes to the cookies and PII data based on the consent given by the user.