Merge pull request #114 from HumanBrainProject/dev_daviti

Dev daviti

src/atlasViewer/atlasViewer.component.ts

@@ -35,6 +35,7 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
   @ViewChild('helpComponent', {read: TemplateRef}) helpComponent : TemplateRef<any>
   @ViewChild('viewerConfigComponent', {read: TemplateRef}) viewerConfigComponent : TemplateRef<any>
   @ViewChild('signinModalComponent', {read: TemplateRef}) signinModalComponent : TemplateRef<any>
+  @ViewChild('cookieAgreementComponent', {read: TemplateRef}) cookieAgreementComponent : TemplateRef<any>
   @ViewChild(LayoutMainSide) layoutMainSide: LayoutMainSide
 
   @ViewChild(NehubaContainer) nehubaContainer: NehubaContainer
@@ -295,6 +296,22 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
 
   }
 
+  ngAfterViewInit() {
+    // Show modal for Agree cookies
+    if (!localStorage.getItem('cookies') || localStorage.getItem('cookies') !== 'agreed') {
+      setTimeout(() => {
+        this.modalService.show(ModalUnit, {
+          initialState: {
+            title: 'Cookie Disclaimer',
+            template: this.cookieAgreementComponent,
+          },
+          // backdrop: 'static',
+          // keyboard: false
+        });  
+      });
+    }
+  }
+
   /**
    * For completeness sake. Root element should never be destroyed. 
    */
@@ -349,6 +366,11 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
       }) as NgLayerInterface)
   }
 
+  cookieClickedOk(){
+    this.modalService.hide(1)
+    localStorage.setItem('cookies', 'agreed');
+  }
+
   panelAnimationEnd(){
 
     if( this.nehubaContainer && this.nehubaContainer.nehubaViewer && this.nehubaContainer.nehubaViewer.nehubaViewer )

src/atlasViewer/atlasViewer.template.html

@@ -90,6 +90,10 @@
     
   </signin-modal>
 </ng-template>
+<ng-template #cookieAgreementComponent>
+  <cookie-agreement (clickedOk)="cookieClickedOk()">
+  </cookie-agreement>
+</ng-template>
 
 <div class="d-flex flex-column" minReq *ngIf="!meetsRequirement">
   <div class="jumbotron bg-light text-center mb-0">

src/ui/cookieAgreement/cookieAgreement.component.ts

+import { Component, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core'
+
+@Component({
+  selector: 'cookie-agreement',
+  templateUrl: './cookieAgreement.template.html',
+  styleUrls: [
+    './cookieAgreement.style.css'
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CookieAgreement {
+  showMore = false;
+
+  @Output()
+  clickedOk: EventEmitter<null> = new EventEmitter()
+
+  agreeCookies() {
+    this.clickedOk.emit(null)
+  }
+}
\ No newline at end of file

src/ui/cookieAgreement/cookieAgreement.style.css

+.cookie-text {
+    text-align: justify;
+}
+
+.cookie-text-small {
+    text-align: justify;
+    font-size: 11px;
+}
+
+.show-more-button-on-cookie-agreement {
+    width: 100%;
+    margin-bottom: 20px;
+    outline: none;
+}
\ No newline at end of file

src/ui/cookieAgreement/cookieAgreement.template.html

+<div>
+  <p class="cookie-text">Interactive Viewer uses ‘cookies’ (text files placed on your computer) to verify login details,
+    remember user choices and preferences, and in some instances determine site permissions. Cookies also provide,
+    in anonymous form, the number of visitors accessing the HBP Public Website, features users access during website
+    visits,
+    and the general location of the user based on IP address.</p>
+  <p class="cookie-text">Interactive Viewer uses at least the following cookies:</p>
+  <p class="cookie-text"><strong>connect.sid</strong> : verify login details</p>
+  <p class="cookie-text">To find out more about cookies, including how to determine the cookies that have been set on
+    your computer and how to manage
+    or delete them, visit <a href="www.aboutcookies.org">www.aboutcookies.org </a> .</p>
+  <p class="cookie-text">To opt-out of being tracked by Google Analytics across all websites, visit
+    <a href="http://tools.google.com/dlpage/gaoptout">http://tools.google.com/dlpage/gaoptout</a> .</p>
+
+  <button class="btn btn-outline-secondary show-more-button-on-cookie-agreement" (click)="showMore = !showMore">Show
+    {{showMore? "less" : "more"}}</button>
+
+  <div *ngIf="showMore">
+    <div>
+      <div class="cookie-text-small"><strong>Data controller(s)</strong>: Interactive Viewer is the data controller for
+        your login information.
+      </div>
+      <div class="cookie-text-small"><strong>List of partners responsible</strong>:
+        FZJ-INM1 <a href="mailto:inm1-bda@fz-juelich.de">inm1-bda@fz-juelich.de</a></div>
+      <div class="cookie-text-small"><strong>HBP Data Protection Officer (HBP DPO)</strong>: You can find out about HBP
+        Data Protection policies here:
+        <a
+          href="https://www.humanbrainproject.eu/en/social-ethical-reflective/ethics-support/data-protection/">https://www.humanbrainproject.eu/en/social-ethical-reflective/ethics-support/data-protection/</a>
+        and you can contact HBP Data Protection Officer at <a
+          href="mailto:data.protection@humanbrainproject.eu">data.protection@humanbrainproject.eu</a></div>
+      <div class="cookie-text-small"><strong>Legal basis for data processing</strong>:
+        consent
+      </div>
+      <div class="cookie-text-small"><strong>General categories of personal data collected</strong>:
+        Name, ORC ID, JWT ID Token
+      </div>
+      <div class="cookie-text-small"><strong>Data shared within the HBP Consortium</strong>:
+        JWT ID Token is shared with ChunMa (Chunk Master), enabling upload and retrieval of user uploaded data.
+      </div>
+      <div class="cookie-text-small"><strong>Data Shared with Third Parties</strong>: none
+      </div>
+      <div class="cookie-text-small"><strong>Transfer of any personal data to third countries</strong>: Data are stored
+        in HBP infrastructure, and will not be transferred to Third countries.
+      </div>
+      <div class="cookie-text-small"><strong>Retention periods</strong>: 24 hours
+      </div>
+      <div class="cookie-text-small"><strong>Lodging a complaint</strong>:
+        The HBP DPO and HBP partners will make every reasonable effort to address your data protection concerns.
+        However, you have a right to lodge a complaint with a data protection authority. Contact information for the
+        European Data Protection Board and EU DPAs are available here:
+        <ul>
+          <li><a
+              href="http://ec.europa.eu/newsroom/article29/item-detail.cfm?item_id=612080">http://ec.europa.eu/newsroom/article29/item-detail.cfm?item_id=612080</a>
+          </li>
+          <li data-v-fc2c56ac=""><a data-v-fc2c56ac=""
+              href="https://edpb.europa.eu/about-edpb/board/members_en">https://edpb.europa.eu/about-edpb/board/members_en</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="modal-footer">
+  <button type="button" class="btn btn-primary" (click)="agreeCookies()">Ok</button>
+</div>
\ No newline at end of file

src/ui/ui.module.ts

@@ -44,6 +44,7 @@ import { UtilModule } from "src/util/util.module";
 import { RegionHierarchy } from "./regionHierachy/regionHierarchy.component";
 import { FilterNameBySearch } from "./regionHierachy/filterNameBySearch.pipe";
 import { StatusCardComponent } from "./nehubaContainer/statusCard/statusCard.component";
+import { CookieAgreement } from "./cookieAgreement/cookieAgreement.component";
 
 
 @NgModule({
@@ -77,8 +78,8 @@ import { StatusCardComponent } from "./nehubaContainer/statusCard/statusCard.com
     SigninBanner,
     SigninModal,
     RegionHierarchy,
-
     StatusCardComponent,
+    CookieAgreement,
 
     /* pipes */
     GroupDatasetByRegion,
@@ -119,7 +120,8 @@ import { StatusCardComponent } from "./nehubaContainer/statusCard/statusCard.com
     ConfigComponent,
     MenuIconsBar,
     SigninBanner,
-    SigninModal
+    SigninModal,
+    CookieAgreement,
   ]
 })
 

src/util/directives/FixedMouseContextualContainerDirective.directive.ts

@@ -54,4 +54,5 @@ export class FixedMouseContextualContainerDirective {
       this.hide()
     }
   }
+
 }
\ No newline at end of file