freeman.gdpr.cookieconsent

Introduction

Freeman.GDPR.CookieConsent is a lightweight jQuery plugin, to display a modal where users can choose to consent to application specific cookies.

Getting Started

1.Installation process
    NPM:
        npm install freeman.gdpr.cookieconsent --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 (JS) -  <script
                src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
                integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
                crossorigin="anonymous"></script>
        
        (CSS) - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
                integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    popper.js 1.x:
        Via NPM -  npm install popper.js@1.14.0 --save-dev

                    OR

        Via CDN -  <script
                src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
                integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
                crossorigin="anonymous"></script>

3.Latest releases
    Current Release: 1.3.3

How to use this plugin:

Step 1: https://freemanco.visualstudio.com/Freeman/_packaging?feed=Freeman.GDPR.Packages&package=freeman.gdpr.cookieconsent&version=1.2.8&protocolType=Npm&_a=package
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.cookieconsent/js/jquery.cookieconsent.js';
    declare let $: any;  //If using TypeScript; else use 'var' instead of 'let'

    In the OnInit() method (before any cookies are set),

        // ALL FIELDS ARE REQUIRED. PASS EMPTY STRING TO email IF NO VALID EMAIL AVAILABLE
        let appData = {
            appName: "nexus",
            userName: "[e-mail]",
            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').addCookieModal(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.
        });
                    OR
        $('selectorName').addCookieModal(appData, returnValue => {
            // Use returnValue
        });

Return Values:
    1. If user has not consented to Cookies,
        {
            Application: "<applicationName>",
            Token: "<ReturnToken>",
            UserCookies: [], // 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>",
            UserCookies: [], // List of all cookies with User consents
            UserId: <userId>,
            Username: "<username>",
            UserTermsConsent: <boolean value>
        }


Default CSS Classes:
    .policyText {
        font-weight: bold;
    }
    .categoryText {
        font-size: 13px;
        font-style: italic;
    }
    .cookieAnchor {
        color: orange;
        cursor: pointer;
    }
    .cookieTable {
        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 .cookieAnchor {
            color: red
        }
        Will change the color of the link with class cookieAnchor, to red.

Purpose of cookieConsent Plugin:

When a user logs into an application on page load, before any of the application cookies are set, a modal will pop up which contains 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.
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 based on the consent given by the user.