add s3 for backup

package.json

@@ -18,14 +18,18 @@
     "react-error-overlay": "6.0.9"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.485.0",
+    "@aws-sdk/s3-request-presigner": "^3.485.0",
     "@vitalets/google-translate-api": "^8.0.0",
     "adm-zip": "^0.5.2",
     "axios": "^0.19.2",
     "buffer": "^6.0.3",
+    "concat-stream": "^2.0.0",
     "copy-text-to-clipboard": "^2.2.0",
     "dompurify": "^3.0.1",
     "electron-is-dev": "^1.1.0",
     "electron-store": "^8.0.1",
+    "end-of-stream": "^1.4.4",
     "epub-cfi-resolver": "^1.0.2",
     "font-list": "^1.4.5",
     "fs-extra": "^9.1.0",

src/assets/styles/style.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?36ewm1');
-  src:  url('fonts/icomoon.eot?36ewm1#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?36ewm1') format('truetype'),
-    url('fonts/icomoon.woff?36ewm1') format('woff'),
-    url('fonts/icomoon.svg?36ewm1#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?dhgwex');
+  src:  url('fonts/icomoon.eot?dhgwex#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?dhgwex') format('truetype'),
+    url('fonts/icomoon.woff?dhgwex') format('woff'),
+    url('fonts/icomoon.svg?dhgwex#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -25,6 +25,9 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-s3compatible:before {
+  content: "\e958";
+}
 .icon-feedback:before {
   content: "\e957";
 }

src/components/dialogs/backupDialog/backupDialog.css

@@ -79,7 +79,7 @@
 }
 .backup-page-list-title {
   width: 150px !important;
-  font-size: 15px;
+  font-size: 14px;
   line-height: 30px;
   opacity: 1;
   width: 100%;
@@ -94,6 +94,9 @@
 .icon-googledrive {
   font-size: 45px;
 }
+.icon-s3compatible {
+  font-size: 60px;
+}
 .icon-ftp {
   font-size: 65px;
   position: relative;

src/components/dialogs/backupDialog/component.tsx

@@ -10,6 +10,7 @@ import GoogleDriveUtil from "../../../utils/syncUtils/googledrive";
 import WebdavUtil from "../../../utils/syncUtils/webdav";
 import FtpUtil from "../../../utils/syncUtils/ftp";
 import SFtpUtil from "../../../utils/syncUtils/sftp";
+import S3Util from "../../../utils/syncUtils/s3compatible";
 import { BackupDialogProps, BackupDialogState } from "./interface";
 import TokenDialog from "../tokenDialog";
 import StorageUtil from "../../../utils/serviceUtils/storageUtil";
@@ -93,6 +94,7 @@ class BackupDialog extends React.Component<
         case "googledrive":
         case "ftp":
         case "sftp":
+        case "s3compatible":
           if (!StorageUtil.getReaderConfig(name + "_token")) {
             this.props.handleTokenDialog(true);
             break;
@@ -108,6 +110,8 @@ class BackupDialog extends React.Component<
               ? GoogleDriveUtil
               : name === "sftp"
               ? SFtpUtil
+              : name === "s3compatible"
+              ? S3Util
               : WebdavUtil;
           if (this.state.isBackup === "yes") {
             this.showMessage("Uploading, please wait");
@@ -160,6 +164,7 @@ class BackupDialog extends React.Component<
               if (
                 (item.icon === "webdav" ||
                   item.icon === "ftp" ||
+                  item.icon === "s3compatible" ||
                   item.icon === "sftp") &&
                 !isElectron
               ) {

src/components/dialogs/tokenDialog/component.tsx

@@ -103,6 +103,37 @@ class TokenDialog extends Component<TokenDialogProps, TokenDialogState> {
     this.props.handleTokenDialog(false);
     toast.success(this.props.t("Add Successfully"));
   };
+  handleS3Comfirm = () => {
+    let endpoint: string = (
+      document.querySelector(
+        "#token-dialog-endpoint-box"
+      ) as HTMLTextAreaElement
+    ).value;
+    let region: string = (
+      document.querySelector("#token-dialog-region-box") as HTMLTextAreaElement
+    ).value;
+    let bucketName: string = (
+      document.querySelector("#token-dialog-bucket-box") as HTMLTextAreaElement
+    ).value;
+    let accessKeyId: string = (
+      document.querySelector("#token-dialog-id-box") as HTMLTextAreaElement
+    ).value;
+    let secretAccessKey: string = (
+      document.querySelector("#token-dialog-key-box") as HTMLTextAreaElement
+    ).value;
+    StorageUtil.setReaderConfig(
+      `${this.props.driveName}_token`,
+      JSON.stringify({
+        endpoint,
+        region,
+        bucketName,
+        accessKeyId,
+        secretAccessKey,
+      })
+    );
+    this.props.handleTokenDialog(false);
+    toast.success(this.props.t("Add Successfully"));
+  };
   handleSFTPComfirm = () => {
     let url: string = (
       document.querySelector("#token-dialog-url-box") as HTMLTextAreaElement
@@ -143,7 +174,7 @@ class TokenDialog extends Component<TokenDialogProps, TokenDialogState> {
             {this.props.title}&nbsp;
             <Trans>Token</Trans>
           </div>
-          {this.props.driveName === "WebDAV" ? (
+          {this.props.driveName === "webdav" ? (
             <>
               <div
                 className="token-dialog-info-text"
@@ -177,7 +208,7 @@ class TokenDialog extends Component<TokenDialogProps, TokenDialogState> {
                 className="token-dialog-username-box"
               />
             </>
-          ) : this.props.driveName === "SFTP" ? (
+          ) : this.props.driveName === "sftp" ? (
             <>
               <input
                 type="text"
@@ -215,7 +246,7 @@ class TokenDialog extends Component<TokenDialogProps, TokenDialogState> {
                 className="token-dialog-password-box"
               />
             </>
-          ) : this.props.driveName === "FTP" ? (
+          ) : this.props.driveName === "ftp" ? (
             <>
               <input
                 type="text"
@@ -253,6 +284,44 @@ class TokenDialog extends Component<TokenDialogProps, TokenDialogState> {
                 className="token-dialog-password-box"
               />
             </>
+          ) : this.props.driveName === "s3compatible" ? (
+            <>
+              <input
+                type="text"
+                name="url"
+                placeholder={this.props.t("Endpoint")}
+                id="token-dialog-endpoint-box"
+                className="token-dialog-username-box"
+              />
+              <input
+                type="text"
+                name="path"
+                placeholder={this.props.t("Region")}
+                id="token-dialog-region-box"
+                className="token-dialog-url-box"
+              />
+              <input
+                type="text"
+                name="username"
+                placeholder={this.props.t("BucketName")}
+                id="token-dialog-bucket-box"
+                className="token-dialog-username-box"
+              />
+              <input
+                type="text"
+                name="password"
+                placeholder={this.props.t("AccessKeyId")}
+                id="token-dialog-id-box"
+                className="token-dialog-password-box"
+              />
+              <input
+                type="text"
+                name="ssl"
+                placeholder={this.props.t("SecretAccessKey")}
+                id="token-dialog-key-box"
+                className="token-dialog-password-box"
+              />
+            </>
           ) : (
             <>
               <div
@@ -300,6 +369,8 @@ class TokenDialog extends Component<TokenDialogProps, TokenDialogState> {
                 this.handleFTPComfirm();
               } else if (this.props.driveName === "sftp") {
                 this.handleSFTPComfirm();
+              } else if (this.props.driveName === "s3compatible") {
+                this.handleS3Comfirm();
               } else if (this.props.driveName === "dropbox") {
                 this.handleDropboxComfirm();
               } else if (this.props.driveName === "googledrive") {

src/components/dialogs/tokenDialog/tokenDialog.css

@@ -75,7 +75,7 @@
   opacity: 1;
   margin-left: 60px;
   margin-top: 9px;
-  padding-left: 15px;
+  padding-left: 5px;
   border-radius: 5px;
 }
 .token-dialog-cancel {

src/constants/driveList.tsx

@@ -56,4 +56,10 @@ export const driveList = [
     icon: "googledrive",
     url: `https://accounts.google.com/o/oauth2/v2/auth?redirect_uri=${driveConfig.callbackUrl}&prompt=consent&response_type=code&client_id=${driveConfig.googleClientId}&scope=${driveConfig.googleScope}&access_type=offline`,
   },
+  {
+    id: 8,
+    name: "S3 Compatible",
+    icon: "s3compatible",
+    url: "",
+  },
 ];

src/containers/header/component.tsx

@@ -24,11 +24,6 @@ class Header extends React.Component<HeaderProps, HeaderState> {
     };
   }
   async componentDidMount() {
-    // const { ipcRenderer } = window.require("electron");
-    // const html = await ipcRenderer.invoke("wiki-index", {
-    //   text: "batman",
-    // });
-    // console.log(html);
     if (isElectron) {
       const fs = window.require("fs");
       const path = window.require("path");

src/utils/syncUtils/googledrive.tsx

@@ -69,8 +69,6 @@ class GoogleDriveUtil {
           },
           timeout: 60000,
         });
-        console.log(res, "res");
-        console.log("File uploaded successfully.");
         StorageUtil.setReaderConfig("googleFileId", res.data.id);
       } catch (error) {
         console.error("Error occurred during upload:", error);

src/utils/syncUtils/onedrive.tsx

@@ -57,7 +57,6 @@ class OneDriveUtil {
       });
       const accessToken = res.data.access_token; // 替换为实际的访问令牌
       const downloadUrl = `https://graph.microsoft.com/v1.0/me/drive/special/approot:/${filename}:/content`;
-      console.log(accessToken);
       try {
         const response = await axios.get(downloadUrl, {
           responseType: "blob",