feat(project): support delete account (#1577)

* feat(project): support delete account

* validate before deleting account

Author: hyrious

desktop/renderer-app/src/api-middleware/flatServer/index.ts

@@ -681,3 +681,15 @@ export async function removeBinding(target: LoginPlatform): Promise<RemoveBindin
         target,
     });
 }
+
+export interface DeleteAccountValidateResult {
+    alreadyJoinedRoomCount: number;
+}
+
+export async function deleteAccountValidate(): Promise<DeleteAccountValidateResult> {
+    return await post<{}, DeleteAccountValidateResult>("user/deleteAccount/validate", {});
+}
+
+export async function deleteAccount(): Promise<void> {
+    await post<{}, {}>("user/deleteAccount", {});
+}

desktop/renderer-app/src/pages/UserSettingPage/GeneralSettingPage/index.tsx

@@ -1,7 +1,7 @@
 import "./style.less";
 
 import React, { useContext, useEffect, useState } from "react";
-import { Checkbox, Input, message, Radio, RadioChangeEvent } from "antd";
+import { Button, Checkbox, Input, message, Modal, Radio, RadioChangeEvent } from "antd";
 import { observer } from "mobx-react-lite";
 import { useTranslation } from "react-i18next";
 import { AppearancePicker, FlatPrefersColorScheme } from "flat-components";
@@ -10,12 +10,19 @@ import { UserSettingLayoutContainer } from "../UserSettingLayoutContainer";
 import { ipcSyncByApp, ipcAsyncByApp } from "../../../utils/ipc";
 import { ConfigStoreContext, GlobalStoreContext } from "../../../components/StoreProvider";
 import { useSafePromise } from "../../../utils/hooks/lifecycle";
-import { loginCheck, rename } from "../../../api-middleware/flatServer";
+import {
+    deleteAccount,
+    deleteAccountValidate,
+    loginCheck,
+    rename,
+} from "../../../api-middleware/flatServer";
 import { ConfirmButtons } from "./ConfirmButtons";
 import { UploadAvatar, uploadAvatar } from "./UploadAvatar";
 import { useBindingList } from "./binding";
 import { BindWeChat } from "./binding/WeChat";
 import { BindGitHub } from "./binding/GitHub";
+import { RouteNameType, usePushHistory } from "../../../utils/routes";
+import { errorTips } from "../../../components/Tips/ErrorTips";
 
 enum SelectLanguage {
     Chinese,
@@ -24,6 +31,7 @@ enum SelectLanguage {
 
 export const GeneralSettingPage = observer(function GeneralSettingPage() {
     const sp = useSafePromise();
+    const pushHistory = usePushHistory();
     const { t, i18n } = useTranslation();
     const [openAtLogin, setOpenAtLogin] = useState(false);
     const configStore = useContext(ConfigStoreContext);
@@ -81,6 +89,26 @@ export const GeneralSettingPage = observer(function GeneralSettingPage() {
         configStore.updatePrefersColorScheme(prefersColorScheme);
     };
 
+    async function removeAccount(): Promise<void> {
+        const { alreadyJoinedRoomCount } = await sp(deleteAccountValidate());
+        if (alreadyJoinedRoomCount > 0) {
+            message.error(t("quit-all-rooms-before-delete-account"));
+            return;
+        }
+        Modal.confirm({
+            content: t("confirm-delete-account"),
+            onOk: async () => {
+                try {
+                    await sp(deleteAccount());
+                    globalStore.updateUserInfo(null);
+                    pushHistory(RouteNameType.LoginPage);
+                } catch (err) {
+                    errorTips(err);
+                }
+            },
+        });
+    }
+
     return (
         <UserSettingLayoutContainer>
             <div className="general-setting-container">
@@ -146,6 +174,14 @@ export const GeneralSettingPage = observer(function GeneralSettingPage() {
                         defaultValue={configStore.prefersColorScheme}
                     />
                 </div>
+                <div className="general-setting-user-account">
+                    <span className="general-setting-title">{t("delete-account")}</span>
+                    <div>
+                        <Button danger onClick={removeAccount}>
+                            {t("delete-account")}
+                        </Button>
+                    </div>
+                </div>
             </div>
         </UserSettingLayoutContainer>
     );

desktop/renderer-app/src/pages/UserSettingPage/GeneralSettingPage/style.less

@@ -108,7 +108,8 @@
     }
 }
 
-.general-setting-binding-profile {
+.general-setting-binding-profile,
+.general-setting-user-account {
     padding-top: 12px;
 }
 

packages/flat-i18n/locales/en.json

@@ -465,5 +465,8 @@
   "is-bind": "is bind",
   "not-bind": "not bind",
   "unbind-confirm": "Are you sure to unbind?",
-  "unbind-success": "Unbind success"
+  "unbind-success": "Unbind success",
+  "delete-account": "Delete Account",
+  "confirm-delete-account": "Are you sure to delete your account?",
+  "quit-all-rooms-before-delete-account": "Please quit all rooms before deleting account."
 }

packages/flat-i18n/locales/zh-CN.json

@@ -465,5 +465,8 @@
   "is-bind": "已绑定",
   "not-bind": "未绑定",
   "unbind-confirm": "确定解除绑定吗？",
-  "unbind-success": "解绑成功"
+  "unbind-success": "解绑成功",
+  "delete-account": "账号注销",
+  "confirm-delete-account": "确定注销账号吗？",
+  "quit-all-rooms-before-delete-account": "请先退出所有房间"
 }

web/flat-web/src/api-middleware/flatServer/index.ts

@@ -681,3 +681,15 @@ export async function removeBinding(target: LoginPlatform): Promise<RemoveBindin
         target,
     });
 }
+
+export interface DeleteAccountValidateResult {
+    alreadyJoinedRoomCount: number;
+}
+
+export async function deleteAccountValidate(): Promise<DeleteAccountValidateResult> {
+    return await post<{}, DeleteAccountValidateResult>("user/deleteAccount/validate", {});
+}
+
+export async function deleteAccount(): Promise<void> {
+    await post<{}, {}>("user/deleteAccount", {});
+}

web/flat-web/src/pages/UserSettingPage/GeneralSettingPage/index.less

@@ -112,7 +112,8 @@
     padding-bottom: 3px;
 }
 
-.general-setting-binding-profile {
+.general-setting-binding-profile,
+.general-setting-user-account {
     padding-top: 12px;
 }
 

web/flat-web/src/pages/UserSettingPage/GeneralSettingPage/index.tsx

@@ -4,19 +4,26 @@ import "./index.less";
 
 import React, { useContext, useState } from "react";
 import { observer } from "mobx-react-lite";
-import { Checkbox, Input, message, Radio } from "antd";
+import { Button, Checkbox, Input, message, Modal, Radio } from "antd";
 import { FlatPrefersColorScheme, AppearancePicker } from "flat-components";
 import { UserSettingLayoutContainer } from "../UserSettingLayoutContainer";
 import { useTranslation } from "react-i18next";
 
 import { ConfigStoreContext, GlobalStoreContext } from "../../../components/StoreProvider";
 import { useSafePromise } from "../../../utils/hooks/lifecycle";
-import { loginCheck, rename } from "../../../api-middleware/flatServer";
+import {
+    deleteAccount,
+    deleteAccountValidate,
+    loginCheck,
+    rename,
+} from "../../../api-middleware/flatServer";
 import { ConfirmButtons } from "./ConfirmButtons";
 import { uploadAvatar, UploadAvatar } from "./UploadAvatar";
 import { BindWeChat } from "./binding/WeChat";
 import { useBindingList } from "./binding";
 import { BindGitHub } from "./binding/GitHub";
+import { errorTips } from "../../../components/Tips/ErrorTips";
+import { RouteNameType, usePushHistory } from "../../../utils/routes";
 
 enum SelectLanguage {
     Chinese,
@@ -28,6 +35,7 @@ export const GeneralSettingPage = observer(function GeneralSettingPage() {
     const configStore = useContext(ConfigStoreContext);
 
     const sp = useSafePromise();
+    const pushHistory = usePushHistory();
     const { t, i18n } = useTranslation();
 
     const [name, setName] = useState(globalStore.userName || "");
@@ -65,6 +73,26 @@ export const GeneralSettingPage = observer(function GeneralSettingPage() {
         configStore.updatePrefersColorScheme(prefersColorScheme);
     };
 
+    async function removeAccount(): Promise<void> {
+        const { alreadyJoinedRoomCount } = await sp(deleteAccountValidate());
+        if (alreadyJoinedRoomCount > 0) {
+            message.error(t("quit-all-rooms-before-delete-account"));
+            return;
+        }
+        Modal.confirm({
+            content: t("confirm-delete-account"),
+            onOk: async () => {
+                try {
+                    await sp(deleteAccount());
+                    globalStore.updateUserInfo(null);
+                    pushHistory(RouteNameType.LoginPage);
+                } catch (err) {
+                    errorTips(err);
+                }
+            },
+        });
+    }
+
     return (
         <UserSettingLayoutContainer>
             <div className="general-setting-container">
@@ -134,6 +162,14 @@ export const GeneralSettingPage = observer(function GeneralSettingPage() {
                         <span className="checkbox-item-inner">{t("turn-on-device-test")}</span>
                     </Checkbox>
                 </div>
+                <div className="general-setting-user-account">
+                    <span className="general-setting-title">{t("delete-account")}</span>
+                    <div>
+                        <Button danger onClick={removeAccount}>
+                            {t("delete-account")}
+                        </Button>
+                    </div>
+                </div>
             </div>
         </UserSettingLayoutContainer>
     );