Added cookie consent

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": {

karma.conf.js

@@ -12,14 +12,18 @@ module.exports = function (config) {
       require('karma-coverage-istanbul-reporter'),
       require('@angular-devkit/build-angular/plugins/karma')
     ],
+    files: [
+      './node_modules/cookieconsent/build/cookieconsent.min.js', // loading cookie service
+      './node_modules/cookieconsent/build/cookieconsent.min.css' // cookie styles
+    ],
     client:{
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
       dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
       fixWebpackSourcePaths: true
     },
-    
+
     reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,

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.spec.ts

@@ -17,6 +17,14 @@ import { LoadingComponent } from './components/utility/loading/loading.component
 import { ConfirmComponent } from './components/utility/confirm/confirm.component';
 import { ModalComponent } from './components/utility/modal/modal.component';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NgcCookieConsentConfig, NgcCookieConsentModule } from 'ngx-cookieconsent';
+import { environment } from '../environments/environment';
+
+const cookieConfig: NgcCookieConsentConfig = {
+  cookie: {
+    domain: environment.domain // or 'your.domain.com'
+  }
+};
 
 describe('AppComponent', () => {
 
@@ -38,7 +46,8 @@ describe('AppComponent', () => {
       ],
       imports: [
         RouterTestingModule,
-        HttpClientModule
+        HttpClientModule,
+        NgcCookieConsentModule.forRoot(cookieConfig)
       ],
       providers: [
         GlobalService,

src/app/app.component.ts

@@ -7,7 +7,8 @@ import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
 import { DOCUMENT } from '@angular/common';
 import { Title } from '@angular/platform-browser';
 
-
+// service for initializing cookie
+import { NgcCookieConsentService } from 'ngx-cookieconsent';
 
 
 @Component({
@@ -46,7 +47,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
   ) {
   }
 

src/app/app.module.ts

@@ -3,13 +3,15 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
+import { NgcCookieConsentModule, NgcCookieConsentConfig } from 'ngx-cookieconsent';
 
 // Import services
 import { WindowService } from './services/window.service';
 import { ApiService } from './services/api.service';
 import { GlobalService } from './services/global.service';
 import { ChallengeService } from './services/challenge.service';
 import { EndpointsService } from './services/endpoints.service';
+import { environment } from '../environments/environment';
 
 
 // Import Components
@@ -24,6 +26,23 @@ import { TermsAndConditionsModalComponent } from './components/challenge/challen
 // import module
 import { SharedModule } from './shared/shared.module';
 
+// configuration of cookie consent
+const cookieConfig: NgcCookieConsentConfig = {
+  cookie: {
+    domain: environment.domain // or 'your.domain.com'
+  },
+  palette: {
+    popup: {
+      background: '#000'
+    },
+    button: {
+      background: '#f1d600'
+    }
+  },
+  theme: 'edgeless',
+  type: 'opt-out'
+};
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -40,6 +59,7 @@ import { SharedModule } from './shared/shared.module';
     HttpClientModule,
     FroalaEditorModule.forRoot(),
     FroalaViewModule.forRoot(),
+    NgcCookieConsentModule.forRoot(cookieConfig)
   ],
   providers: [
     WindowService,

src/environments/environment.prod.ts

@@ -8,5 +8,6 @@
  */
 export const environment = {
   production: true,
-  api_endpoint: 'https://staging-evalai.cloudcv.org/api/'
+  api_endpoint: 'https://staging-evalai.cloudcv.org/api/',
+  domain: 'https://staging-evalai.cloudcv.org'
 };

src/environments/environment.staging.ts

@@ -8,5 +8,6 @@
  */
 export const environment = {
   production: true,
-  api_endpoint: 'http://staging-evalai.cloudcv.org/api/'
+  api_endpoint: 'http://staging-evalai.cloudcv.org/api/',
+  domain: 'http://staging-evalai.cloudcv.org'
 };

src/environments/environment.ts

@@ -8,5 +8,6 @@
  */
 export const environment = {
   production: false,
-  api_endpoint: 'http://localhost:8000/api/'
+  api_endpoint: 'http://localhost:8000/api/',
+  domain: 'localhost'
 };