Merge pull request #72 from bittorrent/v2.3.5

V2.3.5

package.json

@@ -1,6 +1,6 @@
 {
   "name": "BTFS-Dashboard",
-  "version": "2.3.3",
+  "version": "2.3.5",
   "description": "",
   "repository": "",
   "license": "MIT",

src/APIClient/APIClient10.js

@@ -5,17 +5,21 @@ class APIClient10 {
     constructor() {
         this.apiUrl = localStorage.getItem('NODE_URL') ? localStorage.getItem('NODE_URL') : "http://localhost:5001";
         this.request = async (url, body, config) => {
+            const isFormData = body instanceof FormData
             return new Promise(async (resolve, reject) => {
                 try {
+
                     let {data} = await xhr.post(
                         this.apiUrl + url,
+                        isFormData?body:
                         {
                             ...body
                         },
                         {...config}
                     );
 
                     resolve(data);
+
                 }
                 catch (e) {
                     let message;
@@ -25,10 +29,25 @@ class APIClient10 {
                     if (e.response && e.response.status === 400) {
                         message = e.response['data'];
                     }
-                    resolve({
-                        Type: 'error',
-                        Message: message ? message : 'network error or host version not up to date'
-                    });
+
+                    if(e.response && e.response?.data && !e.response?.data?.success && e.response?.data?.type === 'application/json'){
+                        const fileReader = new FileReader()
+                        fileReader.readAsText(e.response.data,'utf-8')
+                        fileReader.onload = function(){
+                          const result = JSON.parse(fileReader.result)
+                          message = result['Message']
+                            resolve({
+                                Type: 'error',
+                                Message: message ? message : 'network error or host version not up to date'
+                            });
+                            return;
+                        }
+                    }else{
+                        resolve({
+                            Type: 'error',
+                            Message: message ? message : 'network error or host version not up to date'
+                        });
+                    }
                 }
             }).catch(err => {
                 console.log(err)
@@ -347,6 +366,20 @@ class APIClient10 {
         }
     }
 
+    encrypt(formData,to,onUploadProgress) {
+        return this.request(`/api/v1/encrypt?${to?'to='+to:''}`,formData,{
+            'headers':{
+                'Content-Type':'application/x-www-form-urlencoded',
+            },
+            'timeout': 0,
+            onUploadProgress:onUploadProgress
+        });
+    }
+
+    decrypt(hash, body, config) {
+        return this.request('/api/v1/decrypt?arg=' + hash, body, config);
+    }
+
     // s3 api
 
     // generate key

src/assets/styles/main.scss

@@ -181,6 +181,13 @@
   font-family: Helvetica-Bold, Helvetica;
 }
 
+.align-top{
+    vertical-align: top;
+}
+
+.fill-white{
+    fill: #fff;
+}
 .monospaced-font {
   font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
 }
@@ -207,4 +214,4 @@
     background-color: #a1a7c4;
   }
 
-}
+}

src/assets/styles/overwrite.scss

@@ -61,3 +61,4 @@
     }
   }
 }
+

src/assets/styles/tailwind.css

@@ -1116,6 +1116,13 @@ video {
   padding-bottom: 0.75rem;
 }
 
+.border-dotted{
+    border-style: dotted;
+}
+.border-dashed{
+    border-style: dashed;
+}
+
 .common-modal-wrapper {
   border-radius: 1rem;
   height: 100%;

src/assets/styles/themeAntd.scss

@@ -36,6 +36,10 @@
   color: $text-color-main;
 }
 
+
+.border-color-active{
+    border-style: $active-color;
+}
 // antd theme dark
 .dark {
   .ant-btn {

src/assets/styles/themeDark.scss

@@ -241,4 +241,8 @@
   ._box-shadow {
     box-shadow: 0px 6px 16px 0px #21242c, 0px 3px 6px -4px #21242c;
   }
+
+    .ant-switch{
+        background-color: rgba(255,255,255,0.25);
+    }
 }

src/components/Dropdowns/ImportFilesDropdown.js

@@ -14,6 +14,7 @@ const ImportFilesDropdown = ({ color, path }) => {
     createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
       placement: 'bottom-start',
     });
+    Emitter.emit('closeDropdownPopover');
     setDropdownPopoverShow(true);
   };
   const closeDropdownPopover = () => {
@@ -63,9 +64,11 @@ const ImportFilesDropdown = ({ color, path }) => {
     const t = function () {
       closeDropdownPopover();
     };
+    Emitter.on('closeDropdownPopover',closeDropdownPopover);
     document.addEventListener('click', t);
     return () => {
       document.removeEventListener('click', t);
+      Emitter.removeListener('closeDropdownPopover');
     };
   }, []);
 

src/components/Dropdowns/ImportFilesEncryptDropdown.js

@@ -0,0 +1,100 @@
+import React, { useEffect } from 'react';
+import { createPopper } from '@popperjs/core';
+import Emitter from 'utils/eventBus';
+import { t } from 'utils/text.js';
+
+// let folderInput = null;
+
+
+
+
+
+const ImportFilesEncryptDropdown = ({ color, path }) => {
+  const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
+  const btnDropdownRef = React.createRef();
+  const popoverDropdownRef = React.createRef();
+  const openDropdownPopover = () => {
+    createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
+      placement: 'bottom-start',
+    });
+    Emitter.emit('closeDropdownPopover');
+    setDropdownPopoverShow(true);
+  };
+  const closeDropdownPopover = () => {
+    setDropdownPopoverShow(false);
+  };
+
+
+  const onDecryptFile = e => {
+    e.preventDefault();
+    Emitter.emit('openDecryptFileModal',{ path: path });
+  };
+
+  const onAddEncryptFile = e => {
+    e.preventDefault();
+    Emitter.emit('openEncryptFileModal',{ path: path });
+  };
+
+
+  useEffect(() => {
+    const t = function () {
+      closeDropdownPopover();
+    };
+
+    Emitter.on('closeDropdownPopover',closeDropdownPopover);
+    document.addEventListener('click', t);
+    return () => {
+      document.removeEventListener('click', t);
+     Emitter.removeListener('closeDropdownPopover');
+    };
+  }, []);
+
+  return (
+    <>
+      <button
+        className="common-btn theme-common-btn mr-4"
+        type="button"
+        ref={btnDropdownRef}
+        onClick={e => {
+          e.preventDefault();
+          e.stopPropagation();
+          e.nativeEvent.stopImmediatePropagation();
+          dropdownPopoverShow ? closeDropdownPopover() : openDropdownPopover();
+        }}>
+        {t('encrypt_decrypt')}
+      </button>
+
+      <div
+        ref={popoverDropdownRef}
+        className={
+          (dropdownPopoverShow ? 'block ' : 'hidden ') +
+          '_box-shadow text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48 mt-important theme-bg'
+        }>
+        <a
+          href="#addFile"
+          className={'text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent'}
+          onClick={onAddEncryptFile}>
+          <img
+              alt=""
+              src={require(`../../assets/img/encrypt-icon_${color}.svg`).default}
+              className="far mr-2 align-top "
+            />
+          {t('encrypt_file')}
+        </a>
+        <a
+          href="#addFolder"
+          className={' text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent'}
+          onClick={onDecryptFile}>
+          <img
+              alt=""
+              src={require(`../../assets/img/decrypt-icon_${color}.svg`).default}
+              className="far mr-2 align-top"
+            />
+          {t('decrypt_file')}
+        </a>
+      </div>
+    </>
+  );
+};
+
+export default ImportFilesEncryptDropdown;