form encryption and download

package.json

@@ -20,6 +20,7 @@
     "immutability-helper": "^3.0.0",
     "immutable": "^4.0.0-rc.12",
     "is-hotkey": "^0.1.4",
+    "json2csv": "^4.5.2",
     "jsonwebtoken": "^8.5.1",
     "lzjs": "^1.3.0",
     "mammoth": "^1.4.8",

public/index.html

@@ -19,9 +19,9 @@
         <meta name="apple-mobile-web-app-title" content="PWA Splash">
 
 
-        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+        <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
         <link rel="manifest" href="/site.webmanifest">
         <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
 

src/components/forms/helpers/publicForm.js

@@ -2,6 +2,7 @@ import axios from 'axios';
 import {setGlobal, getGlobal} from 'reactn';
 import { getMonthDayYear } from '../../shared/helpers/getMonthDayYear';
 import { ToastsStore} from 'react-toasts';
+import { encryptECIES } from 'blockstack/lib/encryption';
 const uuid = require('uuidv4');
 const blockstack = require('blockstack');
 let host;
@@ -62,6 +63,7 @@ export async function loadFromHost(host) {
         .then((response) => {
             //console.log(response);
             if(Object.keys(response.data).length > 0) {
+                console.log(response.data);
                 setGlobal({ publicForm: response.data, loading: false  });
             } else {
                 console.log("error")
@@ -85,7 +87,7 @@ export async function postForm(responses) {
         const orgId = window.location.href.split('forms/')[1].split('/')[0];
         const thisResponse = {
             id: uuid(),
-            responses,
+            responses: encryptECIES(publicForm.pubKey, JSON.stringify(responses)),
             dateSubmitted: getMonthDayYear(),
             timestamp: Date.now(),
             title: publicForm.title,
@@ -115,7 +117,7 @@ export async function postForm(responses) {
         const orgId = window.location.href.split('forms/')[1].split('/')[0];
         const thisResponse = {
             id: uuid(),
-            responses,
+            responses: encryptECIES(publicForm.pubKey, JSON.stringify(responses)),
             dateSubmitted: getMonthDayYear(),
             timestamp: Date.now()
         }

src/components/forms/helpers/singleForm.js

@@ -6,14 +6,21 @@ import { postData } from '../../shared/helpers/post';
 import { getPublicKeyFromPrivate } from 'blockstack/lib/keys';
 import update from 'immutability-helper';
 import axios from 'axios';
+const { Parser } = require('json2csv');
 const blockstack = require('blockstack');
 var timer = null;
 
-export async function loadForm(id) {
+export async function loadForm(id, refresh) {
     let fetchedKeys;
     const { userSession } = getGlobal();
     let teamForm = window.location.href.includes('team') ? true : false;
-    setGlobal({ formLoading: true });
+    if(refresh === false) {
+        setGlobal({ formLoading: false });
+        ToastsStore.success(`Fetching new responses...`);
+    } else {
+        setGlobal({ formLoading: true });
+    }
+
     if(teamForm) {
         const teamId = window.location.href.split('team/')[1].split('/')[0];
         //Need to load the team form info first, then we can figure out which bucket to load from.
@@ -23,7 +30,6 @@ export async function loadForm(id) {
             decrypt: true,
         }
         fetchedKeys = await fetchData(teamKeyParams);
-        console.log(fetchedKeys);
         setGlobal({ teamKeys: fetchedKeys });
         const data = {
             profile: userSession.loadUserData().profile,
@@ -60,6 +66,9 @@ export async function loadForm(id) {
                             console.log(res);
                             if(res.data.data) {
                                 setGlobal({ formResponses: res.data.data});
+                                if(refresh === false) {
+                                    ToastsStore.success(`Responses now up to date`);
+                                }
                                 // //Now we need to fetch the team key
                                 // const teamKeyParams = {
                                 //     fileName: `user/${userSession.loadUserData().username.split('.').join('_')}/team/${team.id}/key.json`,
@@ -149,6 +158,7 @@ export async function loadForm(id) {
 }
 
 export async function postNewForm(id, fetchedKeys) {
+    console.log("this should work");
     console.log(fetchedKeys);
 
     let teamForm = window.location.href.includes('team') ? true : false;
@@ -175,6 +185,7 @@ export async function postNewForm(id, fetchedKeys) {
             teams: [],
             responses: []
         }
+        console.log(formObject);
         setGlobal({ singleForm: formObject });
         if(teamForm) {
             //Don't add to index
@@ -331,9 +342,9 @@ export async function publicForm(type) {
         questions: singleForm.questions,
         teamForm: singleForm.teamForm,
         teams: singleForm.teams,
-        responses: getGlobal().formResponses
+        pubKey: teamForm ? getTeamKey() : getPublicKeyFromPrivate(userSession.loadUserData().appPrivateKey)
+        // responses: getGlobal().formResponses
     }
-    console.log(formObject);
     setGlobal({ singleForm: formObject });
     const newFormParams = {
         fileName: `public/forms/${formObject.id}.json`,
@@ -365,6 +376,13 @@ export async function publicForm(type) {
     }
 }
 
+export function getTeamKey() {
+    //stubbing this out for now
+    console.log("the team key would be returned here");
+    const teamKeys = getGlobal().teamKeys;
+    return JSON.parse(teamKeys).public
+}
+
 export async function shareWithTeam(data) {
     console.log(data);
     if(data.fromSave) {
@@ -453,3 +471,29 @@ export async function shareWithTeam(data) {
               }
           })
   }
+
+  export function downloadResponses(items, title) {
+    let fields = ["Date"];
+    let myData = [];
+    for (const item of items) {
+        let obj = {};
+        for(const resp of item.responses) {
+            fields.push(resp.text);
+            obj["Date"] = item.dateSubmitted;
+            obj[resp.text] = resp.response
+        }
+        myData.push(obj);
+    }
+
+    let unique = [...new Set(fields)];
+
+    const json2csvParser = new Parser({ unique });
+    const csv = json2csvParser.parse(myData);
+
+    let link = document.createElement('a')
+    link.id = 'download-csv'
+    link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(csv));
+    link.setAttribute('download', `${title}.csv`);
+    document.body.appendChild(link)
+    document.querySelector('#download-csv').click()
+  }

src/components/forms/views/EditForm.js

@@ -356,7 +356,7 @@ class EditForm extends Component {
                                         {
                                             question.options.map(opt => {
                                                 return (
-                                                    <Form.Field label={opt.optionText} control='input' type='checkbox' />
+                                                    <Form.Field key={opt.optionText} label={opt.optionText} control='input' type='checkbox' />
                                                 );
                                             })
                                         }

src/components/forms/views/PublicForm.js

@@ -13,7 +13,7 @@ class PublicForm extends Component {
       };
   }
   componentDidMount() {
-      document.body.style.background = "#eee";
+    document.body.style.background = "#eee";
     loadPublicForm();
   }