Merge pull request #477 from BobLamarley/SensitiveData#476

Sensitive data#476

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## 1.4.30 (TBA)
 
+* Added a `project.terms_and_conditions_hds` setting in the config:
+  If true: 
+    "Ask Admin" button to submit project creation form became available after 'project name' and 'expiration date' are filled, 'project description' is at least 30 char and a checkbox appears and 'terms and conditions hds' should also be checked
+  If false:
+    "Ask Admin" button to submit project creation form became available after 'project name' and 'expiration date' are filled, 'project description' is at least 30 char, no consentment checkbox
 * Added 'End date' to the project request page
 * Set 'description' as a required field in the project request page and set a minimal length of 30 char
 * Added a link to user profile on admin panels -> projects pending table

config/default.json.template

@@ -74,7 +74,8 @@
      "default_size": 500,
      "default_path": "/opt/project",
      "default_expire": 360,
-     "allow_extend": false
+     "allow_extend": false,
+     "terms_and_conditions_hds": false
   },
   "reservation": {
       "group_or_project": "group",

config/test.json

@@ -73,7 +73,9 @@
      "enable_group": true,
      "default_size": 500,
      "default_path": "/opt/project",
-     "default_expire": 360
+     "default_expire": 360,
+     "allow_extend": false,
+     "terms_and_conditions_hds": false
  },
  "reservation": {
    "group_or_project": "group",

dev_quickstart/default.json

@@ -74,7 +74,8 @@
      "default_size": 500,
      "default_path": "/opt/project",
      "default_expire": 360,
-     "allow_extend": false
+     "allow_extend": false,
+     "terms_and_conditions_hds": true
   },
   "reservation": {
       "group_or_project": "group",

manager2/package.json

@@ -47,7 +47,7 @@
     "@angular/language-service": "^10.2.1",
     "@types/jasmine": "^2.8.16",
     "@types/jasminewd2": "^2.0.8",
-    "@types/jquery": "^3.3.38",
+    "@types/jquery": "^3.5.30",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.1",
     "jasmine-core": "~3.8.0",

manager2/src/app/project/project.component.css

@@ -0,0 +1,13 @@
+.disabled-btn {
+    cursor: not-allowed;
+    opacity: 0.65;
+}
+
+#termsAndConditionsHdsModal{
+    z-index: 1052 !important;
+}
+
+#ask_project {
+    overflow-y: auto;
+    overflow-x: hidden;
+}

manager2/src/app/project/project.component.html

@@ -1,16 +1,16 @@
-<div class="modal" style="z-index: 1500;" id="ask_project" tabindex="-1" role="dialog" #modal>
+<div #formModal class="modal fade" id="ask_project" role="dialog">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <h3>Request a new project creation</h3>
       </div>
 
-      <form #projectForm="ngForm" aria-label="project creation request form" role="form" class="user-form form-horizontal" (ngSubmit)="ask_for_project(projectForm)" novalidate>
+      <form #projectForm="ngForm" aria-label="project creation request form" role="form" class="user-form form-horizontal was-validated" (ngSubmit)="ask_for_project(projectForm)" novalidate>
         <div class="modal-body">
-          <div class="form-group row col-sm-8">
+          <div class="form-group row col-sm-12">
             <label for="new_project_id">Name
-              <span style="color:red">(required)</span>
-              <span class="glyphicon glyphicon-question-sign" title="Unique name for the project" tooltip></span>
+              <span style="color:red">(required) </span>
+              <i class="pi pi-question-circle" title="Unique name for the project"></i>
             </label>
             <input required placeholder="project name" type="text" maxlength="42" id="new_project_id" name="id" [ngModelOptions]="{standalone: true}" [(ngModel)]="new_project.id" class="form-control" #id="ngModel"/>
             <small id="nameHelp" class="form-text text-muted">Avoid generic name, team name, technology name or your name. <b>Please, choose a project name that matches your cluster research project</b>. <i>If you work on several projects, you can request more project spaces.</i></small>
@@ -20,32 +20,32 @@ <h3>Request a new project creation</h3>
             </div>
           </div>
 
-          <div class="form-group row col-sm-8">
+          <div class="form-group row col-sm-12">
             <label for="new_project_expire">Expiration date
-              <span style="color:red">(required)</span>
-              <span class="glyphicon glyphicon-question-sign" title="Project expiration date" tooltip></span>
+              <span style="color:red">(required) </span>
+              <i class="pi pi-question-circle" title="Project expiration date"></i>
             </label>
             <input required type="date" id="new_project_expire" name="expire" [ngModelOptions]="{standalone: true}" [(ngModel)]="new_project.expire" class="form-control" #expire="ngModel"/>
             <div *ngIf="expire.invalid && (expire.dirty || expire.touched)" class="text-danger">
               <div *ngIf="expire.errors.required">Expiration date is required</div>
             </div>
           </div>
 
-          <div class="form-group row col-sm-8">
+          <div class="form-group row col-sm-12">
               <label for="new_project_size">Total expected project size (GB)</label>
               <input placeholder="project size in GB" type="number" id="new_project_size" name="size" [value]="default_size" [ngModelOptions]="{standalone: true}" [(ngModel)]="new_project.size" class="form-control"/>
               <small id="nameHelp" class="form-text text-muted"><i>Please include the <b>total</b> expected size for this project.</i></small>
           </div>
 
-          <div class="form-group row col-sm-8">
+          <div class="form-group row col-sm-12">
               <label for="new_project_cpu">Cpu (Hour)</label>
               <input placeholder="project cpu in Hour" type="number" id="new_project_cpu" name="cpu" [value]="default_cpu" [ngModelOptions]="{standalone: true}" [(ngModel)]="new_project.cpu" class="form-control"/>
               <small id="nameHelp" class="form-text text-muted"><i>Optional, for information only</i></small>
           </div>
 
-          <div class="form-group row col-sm-8">
+          <div class="form-group row col-sm-12">
             <label for="new_project_org">Financing
-              <span class="glyphicon glyphicon-question-sign" title="Entity financing the project" tooltip> </span>
+              <span class="pi pi-question-circle" title="Entity financing the project" tooltip> </span>
             </label>
             <input placeholder="Ex : CNRS" type="text" id="new_project_org" name="orga" [ngModelOptions]="{standalone: true}" [(ngModel)]="new_project.orga" class="form-control"/>
             <small id="orgaHelp" class="form-text text-muted"><em>Optional, for information only</em></small>
@@ -55,16 +55,48 @@ <h3>Request a new project creation</h3>
             <label for="new_project_description">Description <span style="color:red">(required)</span>            </label>
             <textarea required placeholder="A description for the project" minlength="30" rows="2" id="new_project_description" name="description" [ngModelOptions]="{standalone: true}" [(ngModel)]="new_project.description" class="form-control" #description="ngModel"></textarea>
             <div *ngIf="description.invalid && (description.dirty || description.touched)" class="text-danger">
-              <div *ngIf="description.errors.required">Description is required</div>
               <div *ngIf="description.errors.minlength">Description must be at least 30 characters long</div>
             </div>
           </div>
+
+          <div class="form-group" *ngIf="config.project.terms_and_conditions_hds">
+            <div class="form-check">
+              <input class="form-check-input is-invalid" type="checkbox" value="" id="new_project_terms_and_conditions_hds" name="terms_and_conditions_hds" [(ngModel)]="new_project.terms_and_conditions_hds" #terms_and_conditions_hds="ngModel" required>
+              <label class="form-check-label" for="new_project_terms_and_conditions_hds">
+                I hereby certify that I will not upload, store or process health data collected during activities of prevention, diagnostic and care or related to social and medical and social follow-up.
+                <a href="#termsAndConditionsHdsModal" data-toggle="modal">(Learn more)</a>
+              </label>
+              <div *ngIf="terms_and_conditions_hds.invalid" class="invalid-feedback">
+                You must agree to the terms and conditions before submitting.
+              </div>
+            </div>
+          </div>
+
         </div>
 
         <div class="modal-footer" id="submit">
           <div class="form-group row col-sm-12">
-            <button type="submit" class="p-button p-button-sm p-button-primary">Ask Admin</button>
-            <button type="button" class="p-button p-button-sm p-button-secondary" data-dismiss="modal">Cancel</button>
+          <!-- Button with terms_and_conditions_hds -->
+          <button *ngIf="config.project.terms_and_conditions_hds" 
+                  id="test" 
+                  type="submit" 
+                  class="p-button p-button-sm p-button-primary" 
+                  [disabled]="id.invalid || expire.invalid || description.invalid || terms_and_conditions_hds.invalid" 
+                  [ngClass]="{'disabled-btn': id.invalid || expire.invalid || description.invalid || terms_and_conditions_hds.invalid}">
+              Ask Admin
+          </button>
+
+          <!-- Button without terms_and_conditions_hds -->
+          <button *ngIf="!config.project.terms_and_conditions_hds" 
+                  id="test" 
+                  type="submit" 
+                  class="p-button p-button-sm p-button-primary" 
+                  [disabled]="id.invalid || expire.invalid || description.invalid" 
+                  [ngClass]="{'disabled-btn': id.invalid || expire.invalid || description.invalid}">
+              Ask Admin
+          </button>           
+
+          <button type="button" class="p-button p-button-sm p-button-secondary" data-dismiss="modal">Cancel</button>
           </div>
         </div>
       </form>
@@ -301,3 +333,19 @@ <h3>Project members</h3>
     </div>
   </div>
 </div>
+
+<div *ngIf="config.project && config.project.terms_and_conditions_hds" #termsAndConditionsHdsModal class="modal fade" id="termsAndConditionsHdsModal" data-backdrop="static" role="dialog">
+	<div class="modal-dialog modal-lg" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h4 class="modal-title">Terms and Conditions HDS</h4>
+        </div><div class="container"></div>
+        <div class="modal-body">
+          <p>As our computing infrastructure is not HDS-certified (Health Data Hosting), health data collected during activities of prevention, diagnostic and care or related to social and medical and social follow-up cannot be uploaded, stored or processed (article L.1111-8, French Public Health Code).</p>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+</div>

manager2/src/app/project/project.component.ts

@@ -1,11 +1,9 @@
 import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { NgForm } from '@angular/forms';
-import { Router } from '@angular/router';
 import { ProjectsService } from 'src/app/admin/projects/projects.service';
 import { AuthService } from 'src/app/auth/auth.service';
 import { ConfigService } from '../config.service'
 import { UserService } from 'src/app/user/user.service';
-import { GroupsService } from 'src/app/admin/groups/groups.service';
 
 import { Table } from 'primeng/table';
 
@@ -17,7 +15,7 @@ import { Table } from 'primeng/table';
 export class ProjectComponent implements OnInit {
     @ViewChild('dtp') table: Table;
     @ViewChild('dtu') tableuser: Table;
-    @ViewChild('modal') modal: ElementRef;
+    @ViewChild('formModal') formModal: ElementRef;
 
     new_project: any
     projects: any
@@ -46,18 +44,13 @@ export class ProjectComponent implements OnInit {
         private authService: AuthService,
         private configService: ConfigService,
         private projectsService: ProjectsService,
-        private userService: UserService,
-        private groupService: GroupsService,
-        private router: Router
+        private userService: UserService
     ) {
         this.config = {}
         this.default_size = 0
         this.default_cpu = 0
     }
 
-    ngOnDestroy(): void {
-    }
-
     async ngOnInit() {
 
         this.new_project = {}
@@ -84,7 +77,6 @@ export class ProjectComponent implements OnInit {
             },
             err => console.log('failed to get config')
         )
-
     }
 
     project_list() {
@@ -117,7 +109,7 @@ export class ProjectComponent implements OnInit {
                 resp => {
                     this.request_msg = 'An email has been sent to an admin';
                     this.new_project = {};
-                    this.closeModal();
+                    this.closeFormModal();
                 },
                 err => {
                     console.log('failed to get project users', err);
@@ -130,9 +122,9 @@ export class ProjectComponent implements OnInit {
         }
     }
 
-    closeModal() {
-        const modalElement = this.modal.nativeElement;
-        modalElement.style.display = 'none';
+    closeFormModal() {
+        const formModalElement = this.formModal.nativeElement;
+        formModalElement.style.display = 'none';
         const modalBackdrop = document.querySelector('.modal-backdrop');
         if (modalBackdrop) {
             modalBackdrop.remove();

manager2/src/main.ts

@@ -9,4 +9,4 @@ if (environment.production) {
 }
 
 platformBrowserDynamic().bootstrapModule(AppModule)
-    .catch(err => console.error(err));
+    .catch(err => console.error(err));

manager2/src/styles.css

@@ -142,10 +142,6 @@ button {
   margin: 5px;
 }
 
-.user-form label {
-  width: 150px;
-}
-
 .form-register input {
   margin-bottom: 10px !important;
 }
@@ -239,3 +235,14 @@ button {
     background-color: #d9edf7;
     border-color: #bce8f1;
 }
+
+.grayed-out {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.modal-backdrop.show:nth-of-type(2) {
+    z-index: 1051 !important;
+}
+
+

manager2/tsconfig.json

@@ -11,6 +11,7 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
     "target": "es2015",
     "typeRoots": [
       "node_modules/@types"