🎨 https://github.com/siyuan-note/siyuan/issues/8220

app/src/config/about.ts

@@ -12,6 +12,7 @@ import {showMessage} from "../dialog/message";
 import {Dialog} from "../dialog";
 import {confirmDialog} from "../dialog/confirmDialog";
 import {setProxy} from "./util/setProxy";
+import {setKey} from "../sync/syncGuide";
 
 export const about = {
     element: undefined as Element,
@@ -265,39 +266,9 @@ export const about = {
             });
         });
         about.element.querySelector("#initKeyByPW").addEventListener("click", () => {
-            const initDialog = new Dialog({
+            setKey(false, () => {
-                title: "🔑 " + window.siyuan.languages.genKeyByPW,
+                importKeyElement.parentElement.classList.add("fn__none");
-                content: `<div class="b3-dialog__content">
+                importKeyElement.parentElement.nextElementSibling.classList.remove("fn__none");
-    <input class="b3-text-field fn__block" placeholder="${window.siyuan.languages.password}">
-</div>
-<div class="b3-dialog__action">
-    <button class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button><div class="fn__space"></div>
-    <button class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button>
-</div>`,
-                width: "520px",
-            });
-            const inputElement = initDialog.element.querySelector(".b3-text-field") as HTMLInputElement;
-            inputElement.focus();
-            const btnsElement = initDialog.element.querySelectorAll(".b3-button");
-            initDialog.bindInput(inputElement, () => {
-                (btnsElement[1] as HTMLButtonElement).click();
-            });
-            btnsElement[0].addEventListener("click", () => {
-                initDialog.destroy();
-            });
-            btnsElement[1].addEventListener("click", () => {
-                if (!inputElement.value) {
-                    showMessage(window.siyuan.languages._kernel[142]);
-                    return;
-                }
-                confirmDialog("🔑 " + window.siyuan.languages.genKeyByPW, window.siyuan.languages.initRepoKeyTip, () => {
-                    initDialog.destroy();
-                    fetchPost("/api/repo/initRepoKeyFromPassphrase", {pass: inputElement.value}, (response) => {
-                        window.siyuan.config.repo.key = response.data.key;
-                        importKeyElement.parentElement.classList.add("fn__none");
-                        importKeyElement.parentElement.nextElementSibling.classList.remove("fn__none");
-                    });
-                });
             });
         });
         about.element.querySelector("#copyKey").addEventListener("click", () => {

app/src/mobile/settings/about.ts

@@ -8,6 +8,7 @@ import {openByMobile, writeText} from "../../protyle/util/compatibility";
 import {exitSiYuan, processSync} from "../../dialog/processSystem";
 import {pathPosix} from "../../util/pathName";
 import {openModel} from "../menu/model";
+import {setKey} from "../../sync/syncGuide";
 
 export const initAbout = () => {
     if (!window.siyuan.config.localIPs || window.siyuan.config.localIPs.length === 0 ||
@@ -195,39 +196,9 @@ export const initAbout = () => {
                         event.stopPropagation();
                         break;
                     } else if (target.id === "initKeyByPW") {
-                        const initDialog = new Dialog({
+                        setKey(false, () => {
-                            title: "🔑 " + window.siyuan.languages.genKeyByPW,
+                            importKeyElement.parentElement.classList.add("fn__none");
-                            content: `<div class="b3-dialog__content">
+                            importKeyElement.parentElement.nextElementSibling.classList.remove("fn__none");
-    <input class="b3-text-field fn__block" placeholder="${window.siyuan.languages.password}">
-</div>
-<div class="b3-dialog__action">
-    <button class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button><div class="fn__space"></div>
-    <button class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button>
-</div>`,
-                            width: "92vw",
-                        });
-                        const inputElement = initDialog.element.querySelector(".b3-text-field") as HTMLInputElement;
-                        inputElement.focus();
-                        const btnsElement = initDialog.element.querySelectorAll(".b3-button");
-                        initDialog.bindInput(inputElement, () => {
-                            (btnsElement[1] as HTMLButtonElement).click();
-                        });
-                        btnsElement[0].addEventListener("click", () => {
-                            initDialog.destroy();
-                        });
-                        btnsElement[1].addEventListener("click", () => {
-                            if (!inputElement.value) {
-                                showMessage(window.siyuan.languages._kernel[142]);
-                                return;
-                            }
-                            confirmDialog("🔑 " + window.siyuan.languages.genKeyByPW, window.siyuan.languages.initRepoKeyTip, () => {
-                                initDialog.destroy();
-                                fetchPost("/api/repo/initRepoKeyFromPassphrase", {pass: inputElement.value}, (response) => {
-                                    window.siyuan.config.repo.key = response.data.key;
-                                    importKeyElement.parentElement.classList.add("fn__none");
-                                    importKeyElement.parentElement.nextElementSibling.classList.remove("fn__none");
-                                });
-                            });
                         });
                         event.preventDefault();
                         event.stopPropagation();

app/src/sync/syncGuide.ts

@@ -166,7 +166,7 @@ export const syncGuide = (app?: App) => {
     }
     /// #endif
     if (!window.siyuan.config.repo.key) {
-        setKey();
+        setKey(true);
         return;
     }
     if (!window.siyuan.config.sync.enabled) {
@@ -276,39 +276,68 @@ const setSync = (key?: string, dialog?: Dialog) => {
     }
 };
 
-const setKey = () => {
+export const setKey = (isSync:boolean, cb?:() => void) => {
     const dialog = new Dialog({
         title: window.siyuan.languages.syncConfGuide1,
         content: `<div class="b3-dialog__content ft__center">
     <img style="width: 260px" src="/stage/images/sync-guide.svg"/>
     <div class="fn__hr--b"></div>
     <div class="ft__on-surface">${window.siyuan.languages.syncConfGuide2}</div>
-     <div class="fn__hr--b"></div>
+    <div class="fn__hr--b"></div>
     <input class="b3-text-field fn__block ft__center" placeholder="${window.siyuan.languages.passphrase}">
     <div class="fn__hr"></div>
-    <button class="b3-button fn__block" id="initKeyByPW">
+    <input class="b3-text-field fn__block ft__center" placeholder="${window.siyuan.languages.duplicate} ${window.siyuan.languages.passphrase}">
-        <svg><use xlink:href="#iconHand"></use></svg>${window.siyuan.languages.genKeyByPW}
-    </button>
 </div>
 <div class="b3-dialog__action">
+    <label>
+        <input type="checkbox" class="b3-switch fn__flex-center">
+        <span class="fn__space"></span>
+        ${window.siyuan.languages.confirmPassword}
+    </label>
+    <span class="fn__flex-1"></span>
     <button class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button>
+    <span class="fn__space"></span>
+    <button class="b3-button b3-button--text" id="initKeyByPW" disabled>
+        ${window.siyuan.languages.confirm}
+    </button>
 </div>`,
         width: isMobile() ? "92vw" : "520px",
     });
     dialog.element.querySelector(".b3-button--cancel").addEventListener("click", () => {
         dialog.destroy();
     });
-    const inputElement = dialog.element.querySelector(".b3-text-field") as HTMLInputElement;
+    const genBtnElement = dialog.element.querySelector("#initKeyByPW")
-    dialog.element.querySelector("#initKeyByPW").addEventListener("click", () => {
+    dialog.element.querySelector(".b3-switch").addEventListener("change", function () {
-        if (!inputElement.value) {
+        if (this.checked) {
+            genBtnElement.removeAttribute("disabled");
+        } else {
+            genBtnElement.setAttribute("disabled", "disabled");
+        }
+    });
+    const inputElements = dialog.element.querySelectorAll(".b3-text-field") as NodeListOf<HTMLInputElement>;
+    genBtnElement.addEventListener("click", () => {
+        if (!inputElements[0].value || !inputElements[1].value) {
             showMessage(window.siyuan.languages._kernel[142]);
             return;
         }
+        if (inputElements[0].value !== inputElements[1].value) {
+            showMessage(window.siyuan.languages.passwordNoMatch);
+            return;
+        }
         confirmDialog("🔑 " + window.siyuan.languages.genKeyByPW, window.siyuan.languages.initRepoKeyTip, () => {
-            fetchPost("/api/repo/initRepoKeyFromPassphrase", {pass: inputElement.value}, (response) => {
+            if (!isSync) {
-                setSync(response.data.key, dialog);
+                dialog.destroy();
+            }
+            fetchPost("/api/repo/initRepoKeyFromPassphrase", {pass: inputElements[0].value}, (response) => {
+                window.siyuan.config.repo.key = response.data.key;
+                if (cb) {
+                    cb()
+                }
+                if (isSync) {
+                    setSync(response.data.key, dialog);
+                }
             });
         });
     });
-    inputElement.focus();
+    inputElements[0].focus();
 };