From 1187acb59d744e7cf92eb58bdde5741c144c799d Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Thu, 2 Nov 2023 09:57:03 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/9566

---
 app/src/config/exportConfig.ts |  4 +-
 app/src/config/repos.ts        | 75 +++++++++++++++++++++++++---------
 2 files changed, 59 insertions(+), 20 deletions(-)

diff --git a/app/src/config/exportConfig.ts b/app/src/config/exportConfig.ts
index 690af327a..69b40b63f 100644
--- a/app/src/config/exportConfig.ts
+++ b/app/src/config/exportConfig.ts
@@ -120,7 +120,9 @@ export const exportConfig = {
         <div class="b3-label__text">${window.siyuan.languages.exportDataTip}</div>
     </div>
     <span class="fn__space"></span>
-    <button class="b3-button b3-button--outline fn__flex-center fn__size200" id="exportData"><svg><use xlink:href="#iconUpload"></use></svg>${window.siyuan.languages.export}</button>
+    <button class="b3-button b3-button--outline fn__flex-center fn__size200" id="exportData">
+        <svg><use xlink:href="#iconUpload"></use></svg>${window.siyuan.languages.export}
+    </button>
 </label>
 <label class="fn__flex b3-label config__item">
     <div class="fn__flex-1 fn__flex-center">
diff --git a/app/src/config/repos.ts b/app/src/config/repos.ts
index 43abbeb3c..347d9a618 100644
--- a/app/src/config/repos.ts
+++ b/app/src/config/repos.ts
@@ -64,7 +64,7 @@ const renderProvider = (provider: number) => {
     <div class="fn__space"></div>
     <div class="b3-form__icona fn__block">
         <input id="secretKey" type="password" class="b3-text-field b3-form__icona-input" value="${window.siyuan.config.sync.s3.secretKey}">
-        <svg class="b3-form__icona-icon"><use xlink:href="#iconEye"></use></svg>
+        <svg class="b3-form__icona-icon" data-action="togglePassword"><use xlink:href="#iconEye"></use></svg>
     </div>
 </label>
 <label class="b3-label b3-label--noborder fn__flex config__item">
@@ -97,7 +97,18 @@ const renderProvider = (provider: number) => {
         <option ${window.siyuan.config.sync.s3.skipTlsVerify ? "" : "selected"} value="false">Verify</option>
         <option ${window.siyuan.config.sync.s3.skipTlsVerify ? "selected" : ""} value="true">Skip</option>
     </select>
-</label>`;
+</label>
+<div class="b3-label fn__flex">
+    <div class="fn__flex-1"></div>
+    <button class="b3-button b3-button--outline fn__size200" style="position: relative">
+        <input id="importData" class="b3-form__upload" type="file" data-type="s3">
+        <svg><use xlink:href="#iconDownload"></use></svg>${window.siyuan.languages.import}
+    </button>
+    <div class="fn__space"></div>
+    <button class="b3-button b3-button--outline fn__size200" data-action="exportData" data-type="s3">
+        <svg><use xlink:href="#iconUpload"></use></svg>${window.siyuan.languages.export}
+    </button>
+</div>`;
     } else if (provider === 3) {
         return `<div class="b3-label b3-label--inner">
     ${window.siyuan.languages.syncThirdPartyProviderWebDAVIntro}
@@ -121,7 +132,7 @@ const renderProvider = (provider: number) => {
     <div class="fn__space"></div>
     <div class="b3-form__icona fn__block">
         <input id="password" type="password" class="b3-text-field b3-form__icona-input" value="${window.siyuan.config.sync.webdav.password}">
-        <svg class="b3-form__icona-icon"><use xlink:href="#iconEye"></use></svg>
+        <svg class="b3-form__icona-icon" data-action="togglePassword"><use xlink:href="#iconEye"></use></svg>
     </div>
 </label>
 <label class="b3-label b3-label--noborder fn__flex config__item">
@@ -136,7 +147,18 @@ const renderProvider = (provider: number) => {
         <option ${window.siyuan.config.sync.webdav.skipTlsVerify ? "" : "selected"} value="false">Verify</option>
         <option ${window.siyuan.config.sync.webdav.skipTlsVerify ? "selected" : ""} value="true">Skip</option>
     </select>
-</label>`;
+</label>
+<div class="b3-label fn__flex">
+    <div class="fn__flex-1"></div>
+    <button class="b3-button b3-button--outline fn__size200" style="position: relative">
+        <input id="importData" class="b3-form__upload" type="file" data-type="webdav">
+        <svg><use xlink:href="#iconDownload"></use></svg>${window.siyuan.languages.import}
+    </button>
+    <div class="fn__space"></div>
+    <button class="b3-button b3-button--outline fn__size200" data-action="exportData" data-type="webdav">
+        <svg><use xlink:href="#iconUpload"></use></svg>${window.siyuan.languages.export}
+    </button>
+</div>`;
     }
     return "";
 };
@@ -328,7 +350,7 @@ export const repos = {
     <label class="fn__flex config__item">
         <div class="fn__flex-center">${window.siyuan.languages.cloudSyncDir}</div>
         <div class="fn__flex-1"></div>
-        <button class="b3-button b3-button--outline fn__flex-center fn__size200" data-type="config">
+        <button class="b3-button b3-button--outline fn__flex-center fn__size200" data-action="config">
             <svg><use xlink:href="#iconSettings"></use></svg>${window.siyuan.languages.config}
         </button>
     </label>
@@ -378,6 +400,13 @@ export const repos = {
                 window.siyuan.config.sync.mode = parseInt(syncModeElement.value, 10);
             });
         });
+        repos.element.querySelectorAll("#importData").forEach(item => {
+            item.addEventListener("change", (event: InputEvent & { target: HTMLInputElement }) => {
+                const formData = new FormData();
+                formData.append("file", event.target.files[0]);
+                fetchPost(item.getAttribute("data-type") === "s3" ? "/api/sync/importSyncProviderS3" : "/api/sync/importSyncProviderWebDAV", formData);
+            });
+        });
         const syncConfigElement = repos.element.querySelector("#reposCloudSyncList");
         const syncProviderElement = repos.element.querySelector("#syncProvider") as HTMLSelectElement;
         syncProviderElement.addEventListener("change", () => {
@@ -405,21 +434,29 @@ export const repos = {
         loadingElement.style.height = repos.element.clientHeight + "px";
         bindSyncCloudListEvent(syncConfigElement);
         repos.element.firstElementChild.addEventListener("click", (event) => {
-            const target = event.target as HTMLElement;
-            if (target.getAttribute("data-type") === "config") {
-                if (syncConfigElement.classList.contains("fn__none")) {
-                    getSyncCloudList(syncConfigElement, true);
-                    syncConfigElement.classList.remove("fn__none");
-                } else {
-                    syncConfigElement.classList.add("fn__none");
+            let target = event.target as HTMLElement;
+            while (target && target !== repos.element) {
+                const action = target.getAttribute("data-action")
+                if (action === "config") {
+                    if (syncConfigElement.classList.contains("fn__none")) {
+                        getSyncCloudList(syncConfigElement, true);
+                        syncConfigElement.classList.remove("fn__none");
+                    } else {
+                        syncConfigElement.classList.add("fn__none");
+                    }
+                    break
+                } else if (action === "togglePassword") {
+                    const isEye = target.firstElementChild.getAttribute("xlink:href") === "#iconEye";
+                    target.firstElementChild.setAttribute("xlink:href", isEye ? "#iconEyeoff" : "#iconEye");
+                    target.previousElementSibling.setAttribute("type", isEye ? "text" : "password");
+                    break;
+                } else if (action === "exportData") {
+                    fetchPost(target.getAttribute("data-type") === "s3" ? "/api/sync/exportSyncProviderS3" : "/api/sync/exportSyncProviderWebDAV", {}, response => {
+                        window.location.href = response.data.zip;
+                    })
+                    break;
                 }
-                return;
-            }
-            const eyeElement = hasClosestByClassName(target, "b3-form__icona-icon");
-            if (eyeElement) {
-                const isEye = eyeElement.firstElementChild.getAttribute("xlink:href") === "#iconEye";
-                eyeElement.firstElementChild.setAttribute("xlink:href", isEye ? "#iconEyeoff" : "#iconEye");
-                eyeElement.previousElementSibling.setAttribute("type", isEye ? "text" : "password");
+                target = target.parentElement
             }
         });
     },