🎨 fix https://github.com/siyuan-note/siyuan/issues/5176

app/appearance/langs/en_US.json

@@ -1,4 +1,5 @@
 {
+  "plsChoose": "Please choose first",
   "clearMessage": "Read",
   "freeSub": "Free Trial Subscription",
   "sortByUpdateTimeDesc": "Descending by update time",

app/appearance/langs/fr_FR.json

@@ -1,4 +1,5 @@
 {
+  "plsChoose": "Veuillez d'abord choisir",
   "clearMessage": "Lire",
   "freeSub": "Abonnement d'essai gratuit",
   "sortByUpdateTimeDesc": "Descendant par heure de mise à jour",

app/appearance/langs/zh_CHT.json

@@ -1,4 +1,5 @@
 {
+  "plsChoose": "請先進行選擇",
   "clearMessage": "已讀",
   "freeSub": "免費試用訂閱",
   "sortByUpdateTimeDesc": "更新時間降序",

app/appearance/langs/zh_CN.json

@@ -1,4 +1,5 @@
 {
+  "plsChoose": "请先进行选择",
   "clearMessage": "已读",
   "freeSub": "免费试用订阅",
   "sortByUpdateTimeDesc": "更新时间降序",

app/src/config/repos.ts

@@ -158,20 +158,29 @@ const setE2eePassword = () => {
     const dialog = new Dialog({
         title: window.siyuan.languages.changeE2EEPasswd,
         content: `<div class="b3-dialog__content">
-    <label class="fn__flex">
+    <ul class="b3-list b3-list--background">
-        <div class="fn__flex-1">
+        <li class="b3-list-item b3-list-item--hide-action" data-type="default">
-            ${window.siyuan.languages.defaultPassword}
+            <input type="radio" name="mode" class="fn__flex-center">
-        </div>
+            <div class="fn__space"></div>
-        <span class="fn__space"></span>
+            <span class="b3-list-item__text">${window.siyuan.languages.defaultPassword}</span>
-        <input class="b3-switch fn__flex-center" checked type="checkbox">
+            <span class="b3-list-item__action"><svg class="svg fn__flex-center ft__on-surface"><use xlink:href="#iconRight"></use></svg></span>
+        </li>
+        <li class="b3-list-item b3-list-item--hide-action" data-type="custom">
+            <input type="radio" name="mode" class="fn__flex-center">
+            <div class="fn__space"></div>
+            <span class="b3-list-item__text">${window.siyuan.languages.customPassword}</span>
+            <span class="b3-list-item__action"><svg class="svg fn__flex-center ft__on-surface"><use xlink:href="#iconRight"></use></svg></span>
+        </li>
+    </ul>
+    <div class="fn__none ft__error" data-type="default">
+        <button class="b3-button b3-button--outline"><svg><use xlink:href="#iconLeft"></use></svg>${window.siyuan.languages.back}</button>
         <div class="fn__hr"></div>
-    </label>
+        ${window.siyuan.languages.defaultPasswordTip}
-    <div class="b3-label__text ft__error">${window.siyuan.languages.defaultPasswordTip}</div>
+    </div>
-    <div class="fn__none">
+    <div class="fn__none" data-type="custom">
-        <div class="fn__hr--b"></div>
+        <button class="b3-button b3-button--outline"><svg><use xlink:href="#iconLeft"></use></svg>${window.siyuan.languages.back}</button>
-        ${window.siyuan.languages.customPassword}
         <div class="fn__hr"></div>
-        <input class="b3-text-field fn__block">
+        <input class="b3-text-field fn__block" placeholder="${window.siyuan.languages.customPassword}">
         <div class="fn__hr"></div>
         <div class="b3-label__text ft__error">${window.siyuan.languages.changeE2EEPasswdTip}</div>
     </div>
@@ -182,19 +191,27 @@ const setE2eePassword = () => {
 </div>`,
         width: isMobile() ? "80vw" : "520px",
     });
-    const switchElement = dialog.element.querySelector(".b3-switch") as HTMLInputElement;
+    dialog.element.querySelector(".b3-dialog__content").addEventListener("click", (event) => {
-    const inputElement = dialog.element.querySelector(".b3-text-field") as HTMLInputElement;
+        let target = event.target as HTMLElement
-    const btnsElement = dialog.element.querySelectorAll(".b3-button");
+        while (target && !target.classList.contains("b3-dialog__content")) {
-    switchElement.addEventListener("change", () => {
+            if (target.classList.contains("b3-list-item")) {
-        if (switchElement.checked) {
+                target.parentElement.classList.add("fn__none");
-            inputElement.parentElement.classList.add("fn__none");
+                if (target.getAttribute("data-type") === "default") {
-            inputElement.parentElement.previousElementSibling.classList.remove("fn__none");
+                    target.parentElement.nextElementSibling.classList.remove("fn__none")
-        } else {
+                } else {
-            inputElement.parentElement.classList.remove("fn__none");
+                    target.parentElement.nextElementSibling.nextElementSibling.classList.remove("fn__none")
-            inputElement.parentElement.previousElementSibling.classList.add("fn__none");
+                }
-            inputElement.focus();
+                break;
+            } else if (target.classList.contains("b3-button--outline")) {
+                target.parentElement.classList.add("fn__none")
+                dialog.element.querySelector(".b3-list").classList.remove("fn__none")
+                break;
+            }
+            target = target.parentElement
         }
-    });
+    })
+    const btnsElement = dialog.element.querySelectorAll(".b3-dialog__action .b3-button");
+    const inputElement = dialog.element.querySelector(".b3-text-field") as HTMLInputElement;
     inputElement.addEventListener("keydown", (event) => {
         if (event.isComposing) {
             event.preventDefault();
@@ -214,11 +231,16 @@ const setE2eePassword = () => {
         dialog.destroy();
     });
     btnsElement[1].addEventListener("click", () => {
+        if (!dialog.element.querySelector('.b3-list').classList.contains("fn__none")) {
+            showMessage(window.siyuan.languages.plsChoose);
+            return;
+        }
+        const mode = dialog.element.querySelector('div[data-type="default"]').classList.contains("fn__none") ? 1 : 0
         fetchPost("/api/system/setE2EEPasswd", {
             e2eePasswd: inputElement.value,
-            mode: switchElement.checked ? 0 : 1,//0：内置密码; 1：自定义密码
+            mode    //0：内置密码; 1：自定义密码
         }, () => {
-            window.siyuan.config.e2eePasswdMode = switchElement.checked ? 0 : 1;
+            window.siyuan.config.e2eePasswdMode = mode;
             dialog.destroy();
             const updateElement = repos.element.querySelector("#updatePassword").parentElement;
             updateElement.classList.add("fn__none");