diff --git a/app/src/mobile/settings/account.ts b/app/src/mobile/settings/account.ts index 4f67437e5..30d7e5d40 100644 --- a/app/src/mobile/settings/account.ts +++ b/app/src/mobile/settings/account.ts @@ -7,6 +7,8 @@ import {confirmDialog} from "../../dialog/confirmDialog"; import {showMessage} from "../../dialog/message"; import md5 from "blueimp-md5"; import {getCloudURL} from "../../config/util/about"; +import {Dialog} from "../../dialog"; +import {hideElements} from "../../protyle/ui/hideElements"; export const showAccountInfo = () => { let userTitlesHTML = ""; @@ -26,7 +28,7 @@ export const showAccountInfo = () => {

${window.siyuan.user.userName} - ${0 === window.siyuan.config.cloudRegion ? "ld246.com":"liuyun.io"} + ${0 === window.siyuan.config.cloudRegion ? "ld246.com" : "liuyun.io"}

${userTitlesHTML} @@ -56,15 +58,13 @@ export const showAccountInfo = () => { processSync(); }); }); - modelMainElement.querySelector("#deactivateUser").addEventListener(getEventName(), () => { - confirmDialog("⚠️ " + window.siyuan.languages.deactivateUser, window.siyuan.languages.deactivateUserTip, () => { - fetchPost("/api/account/deactivate", {}, () => { - window.siyuan.user = null; - closePanel(); - document.getElementById("menuAccount").innerHTML = `${window.siyuan.languages.login}`; - processSync(); - }); + modelMainElement.querySelector("#deactivateUser").addEventListener("click", () => { + const dialog = new Dialog({ + title: "⚠️ " + window.siyuan.languages.deactivateUser, + width: "92vw", + content: getLoginHTML(true), }); + bindLoginEvent(dialog.element.querySelector(".b3-dialog__body"), true); }); const refreshElement = modelMainElement.querySelector("#refresh"); refreshElement.addEventListener("click", () => { @@ -92,11 +92,46 @@ export const showAccountInfo = () => { }); }; -export const login = () => { - openModel({ - title: window.siyuan.languages.login, - icon: "iconAccount", - html: `
+const getLoginHTML = (deactivate = false) => { + let confirmHTML: string; + if (deactivate) { + confirmHTML = `
+
+ + +
+
+`; + } else { + confirmHTML = `
+ + +
+
+
+ + +
+
+ +
+ +
+
+ ${window.siyuan.languages.forgetPassword} + + ${window.siyuan.languages.register} +
`; + } + return `
@@ -105,35 +140,9 @@ export const login = () => {
-
-
-
- - -
-
-
- -
- -
- -
-
- ${window.siyuan.languages.forgetPassword} - - ${window.siyuan.languages.register} -
+ ${confirmHTML}
@@ -141,93 +150,117 @@ export const login = () => {
- -
`, - bindEvent(modelMainElement: HTMLElement) { - const agreeLoginElement = modelMainElement.querySelector("#agreeLogin") as HTMLInputElement; - const userNameElement = modelMainElement.querySelector("#userName") as HTMLInputElement; - const userPasswordElement = modelMainElement.querySelector("#userPassword") as HTMLInputElement; - const captchaImgElement = modelMainElement.querySelector("#captchaImg") as HTMLInputElement; - const captchaElement = modelMainElement.querySelector("#captcha") as HTMLInputElement; - const twofactorAuthCodeElement = modelMainElement.querySelector("#twofactorAuthCode") as HTMLInputElement; - const loginBtnElement = modelMainElement.querySelector("#login") as HTMLButtonElement; - const login2BtnElement = modelMainElement.querySelector("#login2") as HTMLButtonElement; - userNameElement.focus(); - let token: string; - let needCaptcha: string; - agreeLoginElement.addEventListener("click", () => { - if (agreeLoginElement.checked) { - loginBtnElement.removeAttribute("disabled"); - } else { - loginBtnElement.setAttribute("disabled", "disabled"); - } + +
` +}; + +const afterLogin = (response: IWebSocketData, deactive = false) => { + if (deactive) { + hideElements(["dialog"]); + confirmDialog("⚠️ " + window.siyuan.languages.deactivateUser, window.siyuan.languages.deactivateUserTip, () => { + fetchPost("/api/account/deactivate", {}, () => { + window.siyuan.user = null; + closePanel(); + document.getElementById("menuAccount").innerHTML = `${window.siyuan.languages.login}`; + processSync(); }); - captchaImgElement.addEventListener("click", () => { - captchaImgElement.setAttribute("src", `https://ld246.com/captcha/login?needCaptcha=${needCaptcha}&t=${new Date().getTime()}`); - }); - const cloudRegionElement = modelMainElement.querySelector("#cloudRegion") as HTMLSelectElement; - cloudRegionElement.addEventListener("change", () => { - window.siyuan.config.cloudRegion = parseInt(cloudRegionElement.value); - modelMainElement.querySelector("#form1").lastElementChild.innerHTML = `${window.siyuan.languages.forgetPassword} + }); + } else { + fetchPost("/api/setting/getCloudUser", { + token: response.data.token, + }, response => { + window.siyuan.user = response.data; + closePanel(); + document.getElementById("menuAccount").innerHTML = ` +${window.siyuan.user.userName}`; + processSync(); + }); + } +} + +const bindLoginEvent = (modelMainElement: HTMLElement, deactive = false) => { + const agreeLoginElement = modelMainElement.querySelector("#agreeLogin") as HTMLInputElement; + const userNameElement = modelMainElement.querySelector("#userName") as HTMLInputElement; + const userPasswordElement = modelMainElement.querySelector("#userPassword") as HTMLInputElement; + const captchaImgElement = modelMainElement.querySelector("#captchaImg") as HTMLInputElement; + const captchaElement = modelMainElement.querySelector("#captcha") as HTMLInputElement; + const twofactorAuthCodeElement = modelMainElement.querySelector("#twofactorAuthCode") as HTMLInputElement; + const loginBtnElement = modelMainElement.querySelector("#login") as HTMLButtonElement; + const login2BtnElement = modelMainElement.querySelector("#login2") as HTMLButtonElement; + userNameElement.focus(); + let token: string; + let needCaptcha: string; + if (agreeLoginElement) { + agreeLoginElement.addEventListener("click", () => { + if (agreeLoginElement.checked) { + loginBtnElement.removeAttribute("disabled"); + } else { + loginBtnElement.setAttribute("disabled", "disabled"); + } + }); + } + captchaImgElement.addEventListener("click", () => { + captchaImgElement.setAttribute("src", `https://ld246.com/captcha/login?needCaptcha=${needCaptcha}&t=${new Date().getTime()}`); + }); + + const cloudRegionElement = modelMainElement.querySelector("#cloudRegion") as HTMLSelectElement; + if (cloudRegionElement) { + cloudRegionElement.addEventListener("change", () => { + window.siyuan.config.cloudRegion = parseInt(cloudRegionElement.value); + modelMainElement.querySelector("#form1").lastElementChild.innerHTML = `${window.siyuan.languages.forgetPassword} ${window.siyuan.languages.register}`; - }); - loginBtnElement.addEventListener("click", () => { - fetchPost("/api/account/login", { - userName: userNameElement.value.replace(/(^\s*)|(\s*$)/g, ""), - userPassword: md5(userPasswordElement.value), - captcha: captchaElement.value.replace(/(^\s*)|(\s*$)/g, ""), - cloudRegion: window.siyuan.config.cloudRegion - }, (data) => { - if (data.code === 1) { - showMessage(data.msg); - if (data.data.needCaptcha) { - // 验证码 - needCaptcha = data.data.needCaptcha; - captchaElement.parentElement.classList.remove("fn__none"); - captchaElement.previousElementSibling.setAttribute("src", - `https://ld246.com/captcha/login?needCaptcha=${data.data.needCaptcha}`); - captchaElement.value = ""; - return; - } - return; - } - if (data.code === 10) { - // 两步验证 - modelMainElement.querySelector("#form1").classList.add("fn__none"); - modelMainElement.querySelector("#form2").classList.remove("fn__none"); - twofactorAuthCodeElement.focus(); - token = data.data.token; - return; - } - fetchPost("/api/setting/getCloudUser", { - token: data.data.token, - }, response => { - window.siyuan.user = response.data; - closePanel(); - document.getElementById("menuAccount").innerHTML = ` -${window.siyuan.user.userName}`; - processSync(); - }); - }); - }); + }); + } + loginBtnElement.addEventListener("click", () => { + fetchPost("/api/account/login", { + userName: userNameElement.value.replace(/(^\s*)|(\s*$)/g, ""), + userPassword: md5(userPasswordElement.value), + captcha: captchaElement.value.replace(/(^\s*)|(\s*$)/g, ""), + cloudRegion: window.siyuan.config.cloudRegion + }, (data) => { + if (data.code === 1) { + showMessage(data.msg); + if (data.data.needCaptcha) { + // 验证码 + needCaptcha = data.data.needCaptcha; + captchaElement.parentElement.classList.remove("fn__none"); + captchaElement.previousElementSibling.setAttribute("src", + `https://ld246.com/captcha/login?needCaptcha=${data.data.needCaptcha}`); + captchaElement.value = ""; + return; + } + return; + } + if (data.code === 10) { + // 两步验证 + modelMainElement.querySelector("#form1").classList.add("fn__none"); + modelMainElement.querySelector("#form2").classList.remove("fn__none"); + twofactorAuthCodeElement.focus(); + token = data.data.token; + return; + } + afterLogin(data, deactive); + }); + }); - login2BtnElement.addEventListener("click", () => { - fetchPost("/api/setting/login2faCloudUser", { - code: twofactorAuthCodeElement.value, - token, - }, faResponse => { - fetchPost("/api/setting/getCloudUser", { - token: faResponse.data.token, - }, response => { - window.siyuan.user = response.data; - closePanel(); - document.getElementById("menuAccount").innerHTML = ` -${window.siyuan.user.userName}`; - processSync(); - }); - }); - }); + login2BtnElement.addEventListener("click", () => { + fetchPost("/api/setting/login2faCloudUser", { + code: twofactorAuthCodeElement.value, + token, + }, faResponse => { + afterLogin(faResponse, deactive); + }); + }); +} + +export const login = () => { + openModel({ + title: window.siyuan.languages.login, + icon: "iconAccount", + html: getLoginHTML(), + bindEvent(modelMainElement: HTMLElement) { + bindLoginEvent(modelMainElement); } }); };