Merge pull request #174 from functionland/fula-sec

Fula sec

examples/react-gallery/package.json

@@ -8,9 +8,10 @@
  "@testing-library/user-event": "^13.5.0",
  "react": "^17.0.2",
  "react-dom": "~17.0.2",
- "react-scripts": "5.0.0",
+ "react-scripts": "5.0.1",
  "react-icons": "^4.3.1",
  "web-vitals": "^2.1.4",
+ "@functionland/fula-sec":"^1.0.0",
  "@functionland/fula": "~0.6.4"
  },
  "devDependencies": {

examples/react-gallery/src/App.css

@@ -12,6 +12,7 @@ body {
  rgb(71, 5, 109) 0%,
  rgba(100, 115, 255, 1) 100%
  );
+ color: white;
 }
 .app-header{
  height: 100px;
@@ -42,7 +43,7 @@ body {
 h1 {
  font-size: 24px;
 }
-h1, h3,h4 {
+h1, h3,h4,h5 {
  color: #fff;
  margin: 10px;
 }
@@ -56,7 +57,7 @@ h1, h3,h4 {
  margin-bottom: 32px;
 }
 
-input {
+input[type="text"], textarea {
  padding: 14px 32px 14px 16px;
  border-radius: 4px 0 0 4px;
  border: 2px solid #5d0cff;
@@ -99,15 +100,23 @@ button.edit {
  );
  padding: 16px 22px;
 }
-
+button.single{
+ border-radius: 0;
+ margin: 5px;
+}
 .container {
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
 }
-
+.flex-column {
+ flex-direction: column;
+}
+.justify-around{
+ justify-content: space-around;
+}
 .row {
  display: flex;
  justify-content: space-between;
@@ -230,3 +239,15 @@ button.edit {
  width:100%;
  padding: 10px;
 }
+
+.identityContainer{
+ display:flex;
+ padding: 10px;
+ justify-content:space-around;
+}
+.importMnemonicContainer{
+ display:flex;
+ padding: 10px;
+ flex-direction: column;
+ justify-content:space-around;
+}

examples/react-gallery/src/App.js

@@ -1,58 +1,84 @@
 import './App.css';
-
 import React, {useEffect, useState} from "react";
 import {createClient, Status} from "@functionland/fula";
+import {TaggedEncryption} from '@functionland/fula-sec';
 
 import {ConnInfo} from "./components/ConnInfo";
 import {BoxConfig} from "./components/BoxConfig";
 import {Uploader} from "./components/Uploader";
 import {Gallery} from "./components/Gallery";
+import {Identity} from './components/Identity';
 
 
 const pages = {
  GALLERY: 'home',
- CONFIG: 'config',
-}
+ CONFIG: 'config'
+};
 
 function App() {
  // simple routing mechanism page will keep our route state
- const [page, setPage] = useState(pages.CONFIG)
+ const [page, setPage] = useState(pages.CONFIG);
  // status of connection
- const [status, setStatus] = useState(null)
+ const [status, setStatus] = useState(null);
  // connection logs
- const [connInfo, setConnInfo] = useState("")
+ const [connInfo, setConnInfo] = useState('');
  // Fula client
- const [fula, setFula] = useState(undefined)
+ const [fula, setFula] = useState(undefined);
  // Id of the box
  const [boxIds, setBoxIds] = useState([])
  // List of photos to show
- const [photos, setPhotos] = useState([])
+ const [photos, setPhotos] = useState([]);
+ // User DID
+ const [userDID, setDidObj] = useState(null);
 
-
- // create client on component creation
- // useEffect(() => {
- // (async () => {
- // setFula(await createClient())
- // })()
- //
- // }, [])
+ // const createDID = async () => {
+ // const DID = new FulaDID();
+ // const didObj = await DID.create();
+ // console.log('didObj', didObj);
+ // };
 
  useEffect(() => {
  if (page === pages.GALLERY && status === Status.Online && fula) {
  (async () => {
- const allData = await fula.graphql(readQuery)
+ const allData = await fula.graphql(readQuery);
  if (allData && allData.data && allData.data.read) {
- setPhotos([])
- for (const {cid} of allData.data.read) {
- const file = await fula.receiveFile(cid)
- setPhotos((prev) => [...prev, file])
+ setPhotos([]);
+ for (const {cid, jwe} of allData.data.read) {
+ let file = null
+ console.log({cid, jwe})
+ if (jwe) {
+ console.log("encrypted photo")
+ const tagged = new TaggedEncryption(userDID.did)
+
+ let plainObject
+ try {
+ plainObject = await tagged.decrypt(jwe)
+ } catch (e) {
+ console.log(e)
+ continue
+ }
+ const _iv = []
+ for (let i=0; i<16; i+=1)
+ _iv.push(plainObject.symetricKey.iv[i])
+
+ const _symKey = []
+ for (let i=0; i<32; i+=1)
+ _symKey.push(plainObject.symetricKey.symKey[i])
+
+ file = await fula.receiveDecryptedFile(cid, Uint8Array.from(_symKey), Uint8Array.from(_iv))
+ } else {
+ console.log("not encrypted photo")
+ file = await fula.receiveFile(cid);
+ }
+ if(file)
+ setPhotos((prev) => [...prev, file]);
  }
  } else {
  setPhotos([])
  }
- })()
+ })();
  }
- }, [page, status, fula])
+ }, [page, status, fula, userDID.did]);
 
  const onSet = (peers, key_file) => {
  if (peers.length > 0) {
@@ -87,29 +113,43 @@ function App() {
 
  })();
  }
-
- }
+ };
 
  // call back function for uploading a photo
  // it will upload the file using fula file api
  // and then store its cid in fula data
  const onUpload = async (selectedFile) => {
  try {
- const cid = await fula.sendFile(selectedFile)
- await fula.graphql(createMutation, {values: [{cid, _id: cid}]})
- setPhotos((prev) => [selectedFile, ...prev])
+ // const cid = await fula.sendFile(selectedFile);
+ // await fula.graphql(createMutation, { values: [{ cid, _id: cid }] });
+ const {cid, key} = await fula.sendEncryptedFile(selectedFile)
+ const tagged = new TaggedEncryption(userDID.did)
+
+ let plaintext = {
+ symmetricKey: key,
+ CID: cid
+ }
+
+ let jwe = await tagged.encrypt(plaintext.symmetricKey, plaintext.CID, [userDID.did.id])
+ await fula.graphql(createMutation, {values: [{cid, _id: cid, jwe}]})
+ setPhotos((prev) => [selectedFile, ...prev]);
  } catch (e) {
- console.log(e.message)
+ console.log(e.message);
  }
- }
+ };
 
  // call back for routing to setting
  const onSetting = () => {
  setPage(pages.CONFIG)
  }
 
+ const onDIDSet = (did) => {
+ setDidObj(did)
+ }
+
  return <>
  <div className="app">
+ <Identity onSetting={onDIDSet}/>
  {(() => {
  switch (page) {
  case pages.CONFIG:
@@ -128,24 +168,25 @@ function App() {
  </div>
  <ConnInfo onSetting={onSetting} status={status} info={connInfo}/>
  </>
-
 }
 
 export default App;
 
-
 export const readQuery = `
  query {
  read(input:{
  collection:"gallery",
  filter:{}
  }){
- cid
+ cid,
+ symKey,
+ iv,
+ jwe
  }
+
  }
 `
 
-
 export const createMutation = `
  mutation addImage($values:JSON){
  create(input:{

examples/react-gallery/src/components/BoxConfig.jsx

@@ -32,6 +32,7 @@ export const BoxConfig = ({serverId, onSet}) => {
  display:"flex"
  }}>
  <input
+ type="text"
  placeholder='Enter your server Ids comma seperated'
  value={_serverId}
  onChange={(e) => _setServerId(e.target.value)}
@@ -80,9 +81,3 @@ export const BoxConfig = ({serverId, onSet}) => {
 
  </>
 }
-
-
-
-
-
-