User agreement box

api/config/index.js.dev

@@ -81,7 +81,7 @@ exports.mail = {
 
     //node mailer config
     mailer: {
-        host: 'mail-relay.iu.edu', //max recipents per email: 30
+        host: 'mail-relay.iu.edu', //max recipients per email: 30
         secure: true, //port 465
         auth: {
             user: 'mememe',

ui/src/assets/consents.js

@@ -29,3 +29,29 @@ Accounts which only serve for advertising will be deleted. Accounts which are up
 brainlife.io is a publicly funded, community-driven project that is run by individuals at multiple institutions with the goal of advancing research and understanding. Learn more about this at brainlife.io.
 
 `;
+
+exports.brainlife_dua = `
+Data Use Agreement for [Dataset Name]
+
+
+Due to the sensitive nature of the <Dataset Name> dataset and to protect the confidentiality and privacy of data subjects, data protection pseudonymization (defacing) has been applied. This agreement governs the use of this pseudonymized dataset. A user who accesses this data agrees to be bound by its terms. 
+
+Users agree to the following conditions of use:
+
+As a user of the dataset, you are the data controller of this dataset at the point of download. This means that you control the purposes and means of processing this specific dataset and therefore you have the responsibility to:
+    • Protect the privacy and confidentiality of the data subjects at all times
+    • Never to attempt to re-identify the data subjects by any means or technology
+    • Never to transfer this data to another user
+    • Report cases of data breach and incidental findings to the data provider
+
+Furthermore, by downloading the dataset the controller agrees that the following statement will always accompany any public use of the data (for an analysis, publication, blog, slides presentation or similar):
+
+Data provided in part by <Dataset Name> <Funder Names>This publication benefitted at least in part from the use of data or technology provided by brainlife.io (NSF BCS 1734853 to Franco Pestilli). These data were managed and processed using brainlife.io (Hayashi, Caron Heinsfeld et al., in review, DOI:10.48550/arXiv.2306.02183)
+
+Relevant Definitions
+Data Controller: A natural or legal person, public authority, agency or other body which, alone or jointly with others, determines the purposes and means of the processing of personal data. 
+Data Providers: <Name of Data providers>
+Data Processing: Any operation or set of operations performed on personal data including data download, storage, analysis, pseudonymization, anonymization, data transfer, etc. 
+Pseudonymization: The processing of personal data in such a manner that the personal data can no longer be attributed to a specific data subject without the use of additional information, provided that such additional information is kept separately and is subject to technical and organizational measures to ensure that the personal data are not attributed to an identified or identifiable natural person. 
+
+`;

ui/src/components/settings/profile.vue

@@ -260,6 +260,7 @@ export default {
             this.email = res.data.email;
             this.fullname = res.data.fullname;
             if(res.data.profile) lib.mergeDeep(this.profile, res.data.profile);
+            if(this.profile.private.aup) this.profile.private.aup = true;
             const jwt = Vue.config.jwt;
             if(jwt) {
                 this.debug = {jwt : this.user};
@@ -273,6 +274,7 @@ export default {
 
         submit_profile(e) {
             e.preventDefault()
+            if(this.profile.private.aup) this.profile.private.aup = new Date();
             this.$http.patch(Vue.config.auth_api+"/profile", {
                 fullname: this.fullname,
                 profile: this.profile, 

ui/src/modals/aup_agreement.vue

@@ -0,0 +1,45 @@
+<template>
+    <b-modal size="lg" ref="modal">
+      <div slot="modal-title">Updated User Agreement</div>
+      <iframe :src="agreementURL" style="width: 100%; height: 600px;"></iframe>
+      <template #modal-footer>
+        <b-button @click="ok" variant="primary">Accept</b-button>
+        <b-button @click="close" variant="secondary">Cancel</b-button>
+      </template>
+    </b-modal>
+  </template>
+
+  <script>
+  import Vue from "vue";
+
+  export default {
+    data() {
+      return {
+        config: Vue.config,
+        agreementURL: "https://brainlife.io/docs/aup/",
+      };
+    },
+    mounted() {
+      this.$refs.modal.show();
+    },
+    methods: {
+      close() {
+        this.$refs.modal.hide();
+      },
+      ok() {
+            const updatedAup = new Date();       
+            this.$http.patch(Vue.config.auth_api+"/profile", {
+                profile: { private: { aup: updatedAup } }
+            }).then(res=>{
+                Vue.config.profile.private.aup = updatedAup;
+                this.$notify({ type: "success", text: "Updated Details" });
+                this.$refs.modal.hide();
+            }).catch(err=>{
+                console.error(err.response);
+                this.$notify({type: "error", text: err.response.data.message});
+            });  
+      },
+    },
+  };
+  </script>
+

ui/src/projectedit.vue

@@ -97,20 +97,26 @@
 
                 <b-row>
                     <b-col cols="3">
-                        <span class="form-header">Agreements</span>
+                        <span class="form-header">DATA USE AGREEMENT</span>
                     </b-col> 
                     <b-col cols="9">
                         <p class="text-muted"><small>List of agreements that user must agree before accessing datasets stored on this project</small></p>
                         <b-row v-for="(agreement, idx) in project.agreements" :key="idx">
                             <b-col>
-                                <b-form-textarea v-model="agreement.agreement" placeholder="Enter agreemenet text(markdown) to be presented to the user"/>
+                                <b-form-textarea v-model="agreement.agreement" placeholder="Enter agreement text(markdown) to be presented to the user"/>
                                 <br>
                             </b-col>
                             <b-col cols="1">
                                 <div class="button" @click="remove_agreement(idx)"><icon name="trash"/></div>
                             </b-col>
                         </b-row>
-                        <p><b-button @click="project.agreements.push({agreement: ''})" size="sm"><icon name="plus"/> Add Agreement</b-button></p>
+                        <!-- <p><b-button @click="project.agreements.push({agreement: ''})" size="sm"><icon name="plus"/> Add Agreement</b-button></p> -->
+                        <b-dropdown  split class="m-2" @click="addAgreement('empty')">
+                            <template #button-content>
+                                Add Agreement
+                            </template>
+                            <b-dropdown-item-button @click="addAgreement('brainlife_dua')">Brainlife Data Use Agreement - Dataset </b-dropdown-item-button>
+                        </b-dropdown>
                         <br>
                     </b-col>
                 </b-row>
@@ -304,6 +310,7 @@ import tageditor from '@/components/tageditor'
 
 import datatypes from '@/mixins/datatypes'
 import { Picker } from 'emoji-mart-vue'
+import { brainlife_dua } from "@/assets/consents.js";
 
 const lib = require('@/lib');
 
@@ -559,7 +566,14 @@ export default {
                     this.submitting = false;
                 });
             }
-        }
+        },
+
+        addAgreement(type) {
+            if(type == 'empty') this.project.agreements.push({agreement: ''});
+            if(type == 'brainlife_dua') this.project.agreements.push({
+                agreement: brainlife_dua,
+            })
+        },
     },
 }
 </script>

ui/src/projects.vue

@@ -44,7 +44,10 @@
 
             <!--TODO - should refactor this.. similar to public y projects-->
             <div v-if="config.user" class="position: relative">
-                <h4 class="group-title">My Projects</h4>
+                <div v-if="!userAgreementAgreed">
+                    <aupAgreementModal></aupAgreementModal>                     
+                </div>
+                <h4 class="group-title">My Projects </h4>
                 <p v-if="my_projects.length == 0 && query == ''" style="margin: 20px; opacity: 0.5;">
                     Please create your project by clicking the <b>New Project</b> button below.
                 </p>
@@ -91,13 +94,15 @@
 <script>
 import Vue from 'vue'
 import projectbar from '@/components/projectbar'
+import aupAgreementModal from '@/modals/aup_agreement';
 
 let query_debounce;
 
 export default {
     components: { 
         projectcard: ()=>import('@/components/projectcard'), 
         projectbar: ()=>import('@/components/projectbar'), 
+        aupAgreementModal: ()=>import('@/modals/aup_agreement'),
     },
     data () {
         return {   
@@ -221,6 +226,37 @@ export default {
                 alert('Please signup/login first to create a new project');
             }
         },
+    },
+    computed: {
+        userAgreementAgreed: function() {
+            if(Vue.config.user && Vue.config.profile) {
+                const latestAgreementDate = new Date('2023-08-17'); // Replace with the actual date of the latest version
+                const userAgreementDateStr = Vue.config.profile.private.aup;
+                console.log("User agreement date", userAgreementDateStr);
+
+                if (typeof userAgreementDateStr === "boolean") {
+                    console.log("User agreement date is a boolean value:", userAgreementDateStr);
+                    return false;
+                }
+
+                const userAgreementDate = new Date(userAgreementDateStr);
+
+                if (!(userAgreementDate instanceof Date && !isNaN(userAgreementDate.getTime()))) {
+                    console.log("User agreement date is not a valid date", userAgreementDate);
+                    return false;
+                } 
+
+                // User has not accepted the latest version of the data use agreement
+                if (userAgreementDate < latestAgreementDate) {
+                    console.log("User has not accepted the latest version of the data use agreement", userAgreementDate, latestAgreementDate);
+                    return false;
+                }
+
+                return true;
+            }
+
+            return true;
+        }
     }
 }
 </script>