using_ngx-cookieconsent_module_for_adding_consent

Author: Kajol-Kumari

angular.json

@@ -33,10 +33,12 @@
               "src/styles/base.scss",
               "./node_modules/froala-editor/css/froala_editor.pkgd.min.css",
               "./node_modules/froala-editor/css/froala_style.min.css",
-              "./node_modules/ng-pick-datetime/assets/style/picker.min.css"
+              "./node_modules/ng-pick-datetime/assets/style/picker.min.css",
+              "./node_modules/cookieconsent/build/cookieconsent.min.css"
             ],
             "scripts": [
-              "./node_modules/froala-editor/js/froala_editor.pkgd.min.js"
+              "./node_modules/froala-editor/js/froala_editor.pkgd.min.js",
+              "./node_modules/cookieconsent/build/cookieconsent.min.js"
             ]
           },
           "configurations": {

package.json

@@ -31,11 +31,13 @@
     "@angular/router": "^7.2.15",
     "@types/moment-timezone": "^0.5.12",
     "angular-froala-wysiwyg": "^3.0.0-rc.2-1",
+    "cookieconsent": "^3.1.1",
     "core-js": "^2.4.1",
-    "materialize-css": "^0.97.8",
     "hammerjs": "^2.0.8",
+    "materialize-css": "^0.97.8",
     "moment": "^2.24.0",
     "ng-pick-datetime": "^7.0.0",
+    "ngx-cookieconsent": "^2.2.3",
     "ngx-textarea-autosize": "^2.0.3",
     "ngx-twitter-timeline": "^0.1.5",
     "normalize.css": "^8.0.0",

src/app/app.component.ts

@@ -6,8 +6,7 @@ import { AuthService } from './services/auth.service';
 import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
 import { DOCUMENT } from '@angular/common';
 import { Title } from '@angular/platform-browser';
-
-
+import { NgcCookieConsentService } from 'ngx-cookieconsent';
 
 
 @Component({
@@ -30,9 +29,6 @@ export class AppComponent implements OnInit, OnDestroy {
   globalEditPhaseModalSubscription: any;
   globalTermsAndConditionsModalSubscription: any;
   globalServiceSubscriptionScrollTop: any;
-  cookieMessage = 'Our site uses cookies to ensure you get the best experience on our website';
-  cookieDismiss = 'Cancel';
-  cookieLinkText = 'Learn More';
 
   /**
    * Constructor.
@@ -49,7 +45,8 @@ export class AppComponent implements OnInit, OnDestroy {
   public activatedRoute: ActivatedRoute,
   public titleService: Title,
   private globalService: GlobalService,
-  private authService: AuthService
+  private authService: AuthService,
+  private ccService: NgcCookieConsentService
   ) {
   }
 
@@ -97,25 +94,6 @@ export class AppComponent implements OnInit, OnDestroy {
       setTimeout(() => {
         this.modalParams = params;
       }, 0);
-      const cc = window as any;
-      cc.cookieconsent.initialise({
-        palette: {
-          popup: {
-            background: '#164969'
-          },
-          button: {
-            background: '#ffe000',
-            text: '#164969'
-          }
-        },
-        theme: 'classic',
-        content: {
-          message: this.cookieMessage,
-          dismiss: this.cookieDismiss,
-          link: this.cookieLinkText,
-          href: 'https://www.cookiesandyou.com'
-        }
-      });
     });
 
     this.globalEditPhaseModalSubscription = this.globalService.editPhaseModalParams.subscribe(params => {

src/app/app.module.ts

@@ -11,6 +11,7 @@ import { MatChipsModule } from '@angular/material/chips';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatIconModule } from '@angular/material/icon';
 import { MatCheckboxModule } from '@angular/material';
+import {NgcCookieConsentModule, NgcCookieConsentConfig} from 'ngx-cookieconsent';
 
 // Import serivces
 import { AuthService } from './services/auth.service';
@@ -88,6 +89,23 @@ import {PasswordMismatchValidatorDirective} from './Directives/password.validato
 import { ResetPasswordComponent } from './components/auth/reset-password/reset-password.component';
 import { EmailValidatorDirective } from './Directives/email.validator';
 import { ResetPasswordConfirmComponent } from './components/auth/reset-password-confirm/reset-password-confirm.component';
+
+const cookieConfig: NgcCookieConsentConfig = {
+  cookie: {
+    domain: 'localhost' // or 'your.domain.com' // it is mandatory to set a domain, for cookies to work properly (see https://goo.gl/S2Hy2A)
+  },
+  palette: {
+    popup: {
+      background: '#000'
+    },
+    button: {
+      background: '#f1d600'
+    }
+  },
+  theme: 'edgeless',
+  type: 'opt-out'
+};
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -166,7 +184,8 @@ import { ResetPasswordConfirmComponent } from './components/auth/reset-password-
     MatIconModule,
     MatTableModule,
     MatDividerModule,
-    MatCheckboxModule
+    MatCheckboxModule,
+    NgcCookieConsentModule.forRoot(cookieConfig)
   ],
   providers: [
     AuthService,

src/index.html

@@ -21,8 +21,6 @@
     <meta property="og:description" content="EvalAI is an open-source web
       platform for organizing and participating in challenges to push the state
       of the art on AI tasks." />
-    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
-    <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
     <link rel="icon" type="image/x-icon" href="favicon.ico">
   </head>
   <body>