netless-io · BlackHole1 · Jun 16, 2022 · Jun 16, 2022
diff --git a/desktop/renderer-app/src/api-middleware/flatServer/index.ts b/desktop/renderer-app/src/api-middleware/flatServer/index.ts
@@ -658,3 +658,26 @@ export async function bindingProcess(authUUID: string): Promise<BindingProcessRe
         };
     }
 }
+
+export enum LoginPlatform {
+    WeChat = "WeChat",
+    Github = "Github",
+    Apple = "Apple",
+    Agora = "Agora",
+    Google = "Google",
+    Phone = "Phone",
+}
+
+export interface RemoveBindingPayload {
+    target: LoginPlatform;
+}
+
+export interface RemoveBindingResult {
+    token: string;
+}
+
+export async function removeBinding(target: LoginPlatform): Promise<RemoveBindingResult> {
+    return await post<RemoveBindingPayload, RemoveBindingResult>("user/binding/remove", {
+        target,
+    });
+}
diff --git a/desktop/renderer-app/src/pages/UserSettingPage/GeneralSettingPage/binding/WeChat.tsx b/desktop/renderer-app/src/pages/UserSettingPage/GeneralSettingPage/binding/WeChat.tsx
@@ -6,16 +6,24 @@ import { message, Modal } from "antd";
 import { WechatFilled } from "@ant-design/icons";
 
 import { getQRCodeURL } from "../../../LoginPage/WeChatLogin";
-import { setBindingAuthUUID, bindingProcess } from "../../../../api-middleware/flatServer";
+import {
+    setBindingAuthUUID,
+    bindingProcess,
+    removeBinding,
+    LoginPlatform,
+} from "../../../../api-middleware/flatServer";
 import { FLAT_SERVER_USER_BINDING } from "../../../../api-middleware/flatServer/constants";
 import { useSafePromise } from "../../../../utils/hooks/lifecycle";
+import { GlobalStore } from "../../../../stores/global-store";
+import { errorTips } from "../../../../components/Tips/ErrorTips";
 
 export interface BindingWeChatProps {
     isBind: boolean;
     onRefresh: () => void;
+    globalStore: GlobalStore;
 }
 
-export const BindingWeChat: React.FC<BindingWeChatProps> = ({ isBind, onRefresh }) => {
+export const BindingWeChat: React.FC<BindingWeChatProps> = ({ isBind, onRefresh, globalStore }) => {
     const sp = useSafePromise();
     const { t } = useTranslation();
     const [authUUID, setAuthUUID] = useState("");
@@ -57,7 +65,19 @@ export const BindingWeChat: React.FC<BindingWeChatProps> = ({ isBind, onRefresh
     };
 
     const unbind = (): void => {
-        message.info(t("bind-wechat-not-support-unbind"));
+        Modal.confirm({
+            content: t("unbind-confirm"),
+            onOk: async () => {
+                try {
+                    const { token } = await sp(removeBinding(LoginPlatform.WeChat));
+                    globalStore.updateUserToken(token);
+                    onRefresh();
+                    message.info(t("unbind-success"));
+                } catch (err) {
+                    errorTips(err);
+                }
+            },
+        });
     };
 
     return (

diff --git a/desktop/renderer-app/src/pages/UserSettingPage/GeneralSettingPage/index.tsx b/desktop/renderer-app/src/pages/UserSettingPage/GeneralSettingPage/index.tsx
@@ -2,10 +2,12 @@ import "./style.less";
 
 import React, { useContext, useEffect, useState } from "react";
 import { Checkbox, Input, message, Radio, RadioChangeEvent } from "antd";
-import { UserSettingLayoutContainer } from "../UserSettingLayoutContainer";
-import { ipcSyncByApp, ipcAsyncByApp } from "../../../utils/ipc";
+import { observer } from "mobx-react-lite";
 import { useTranslation } from "react-i18next";
 import { AppearancePicker, FlatPrefersColorScheme } from "flat-components";
+
+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";
@@ -19,7 +21,7 @@ enum SelectLanguage {
     English,
 }
 
-export const GeneralSettingPage = (): React.ReactElement => {
+export const GeneralSettingPage = observer(function GeneralSettingPage() {
     const sp = useSafePromise();
     const { t, i18n } = useTranslation();
     const [openAtLogin, setOpenAtLogin] = useState(false);
@@ -99,7 +101,11 @@ export const GeneralSettingPage = (): React.ReactElement => {
                         <ConfirmButtons onConfirm={changeUserName} />
                     </div>
                     <div className="general-setting-binding-methods">
-                        <BindingWeChat isBind={bindings.wechat} onRefresh={refreshBindings} />
+                        <BindingWeChat
+                            globalStore={globalStore}
+                            isBind={bindings.wechat}
+                            onRefresh={refreshBindings}
+                        />
                     </div>
                 </div>
                 <div className="general-setting-checkbox">
@@ -137,4 +143,4 @@ export const GeneralSettingPage = (): React.ReactElement => {
             </div>
         </UserSettingLayoutContainer>
     );
-};
+});
diff --git a/desktop/renderer-app/src/stores/global-store.ts b/desktop/renderer-app/src/stores/global-store.ts
@@ -58,6 +58,12 @@ export class GlobalStore {
         }
     };
 
+    public updateUserToken = (token: string): void => {
+        if (this.userInfo) {
+            this.userInfo.token = token;
+        }
+    };
+
     public updateLastLoginCheck = (val: number | null): void => {
         this.lastLoginCheck = val;
     };

diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
@@ -463,5 +463,7 @@
   "bind-wechat-failed": "Failed to bind WeChat",
   "bind-wechat-not-support-unbind": "Not support unbind WeChat",
   "is-bind": "is bind",
-  "not-bind": "not bind"
+  "not-bind": "not bind",
+  "unbind-confirm": "Are you sure to unbind?",
+  "unbind-success": "Unbind success"
 }
diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
@@ -463,5 +463,7 @@
   "bind-wechat-failed": "绑定失败",
   "bind-wechat-not-support-unbind": "暂未支持解绑",
   "is-bind": "已绑定",
-  "not-bind": "未绑定"
+  "not-bind": "未绑定",
+  "unbind-confirm": "确定解除绑定吗？",
+  "unbind-success": "解绑成功"
 }
diff --git a/web/flat-web/src/api-middleware/flatServer/index.ts b/web/flat-web/src/api-middleware/flatServer/index.ts
@@ -658,3 +658,26 @@ export async function bindingProcess(authUUID: string): Promise<BindingProcessRe
         };
     }
 }
+
+export enum LoginPlatform {
+    WeChat = "WeChat",
+    Github = "Github",
+    Apple = "Apple",
+    Agora = "Agora",
+    Google = "Google",
+    Phone = "Phone",
+}
+
+export interface RemoveBindingPayload {
+    target: LoginPlatform;
+}
+
+export interface RemoveBindingResult {
+    token: string;
+}
+
+export async function removeBinding(target: LoginPlatform): Promise<RemoveBindingResult> {
+    return await post<RemoveBindingPayload, RemoveBindingResult>("user/binding/remove", {
+        target,
+    });
+}
diff --git a/web/flat-web/src/pages/UserSettingPage/GeneralSettingPage/binding/WeChat.tsx b/web/flat-web/src/pages/UserSettingPage/GeneralSettingPage/binding/WeChat.tsx
@@ -6,16 +6,24 @@ import { message, Modal } from "antd";
 import { WechatFilled } from "@ant-design/icons";
 
 import { getQRCodeURL } from "../../../LoginPage/WeChatLogin";
-import { setBindingAuthUUID, bindingProcess } from "../../../../api-middleware/flatServer";
+import {
+    setBindingAuthUUID,
+    bindingProcess,
+    removeBinding,
+    LoginPlatform,
+} from "../../../../api-middleware/flatServer";
 import { FLAT_SERVER_USER_BINDING } from "../../../../api-middleware/flatServer/constants";
 import { useSafePromise } from "../../../../utils/hooks/lifecycle";
+import { errorTips } from "../../../../components/Tips/ErrorTips";
+import { GlobalStore } from "../../../../stores/GlobalStore";
 
 export interface BindingWeChatProps {
     isBind: boolean;
     onRefresh: () => void;
+    globalStore: GlobalStore;
 }
 
-export const BindingWeChat: React.FC<BindingWeChatProps> = ({ isBind, onRefresh }) => {
+export const BindingWeChat: React.FC<BindingWeChatProps> = ({ isBind, onRefresh, globalStore }) => {
     const sp = useSafePromise();
     const { t } = useTranslation();
     const [authUUID, setAuthUUID] = useState("");
@@ -57,7 +65,19 @@ export const BindingWeChat: React.FC<BindingWeChatProps> = ({ isBind, onRefresh
     };
 
     const unbind = (): void => {
-        message.info(t("bind-wechat-not-support-unbind"));
+        Modal.confirm({
+            content: t("unbind-confirm"),
+            onOk: async () => {
+                try {
+                    const { token } = await sp(removeBinding(LoginPlatform.WeChat));
+                    globalStore.updateUserToken(token);
+                    onRefresh();
+                    message.info(t("unbind-success"));
+                } catch (err) {
+                    errorTips(err);
+                }
+            },
+        });
     };
 
     return (

diff --git a/web/flat-web/src/pages/UserSettingPage/GeneralSettingPage/index.tsx b/web/flat-web/src/pages/UserSettingPage/GeneralSettingPage/index.tsx
@@ -3,10 +3,12 @@ import type { CheckboxChangeEvent } from "antd/lib/checkbox";
 import "./index.less";
 
 import React, { useContext, useState } from "react";
+import { observer } from "mobx-react-lite";
 import { Checkbox, Input, message, 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";
@@ -20,7 +22,7 @@ enum SelectLanguage {
     English,
 }
 
-export const GeneralSettingPage = (): React.ReactElement => {
+export const GeneralSettingPage = observer(function GeneralSettingPage() {
     const globalStore = useContext(GlobalStoreContext);
     const configStore = useContext(ConfigStoreContext);
 
@@ -83,7 +85,11 @@ export const GeneralSettingPage = (): React.ReactElement => {
                         <ConfirmButtons onConfirm={changeUserName} />
                     </div>
                     <div className="general-setting-binding-methods">
-                        <BindingWeChat isBind={bindings.wechat} onRefresh={refreshBindings} />
+                        <BindingWeChat
+                            globalStore={globalStore}
+                            isBind={bindings.wechat}
+                            onRefresh={refreshBindings}
+                        />
                     </div>
                 </div>
                 <div className="general-setting-select-language">
@@ -125,6 +131,6 @@ export const GeneralSettingPage = (): React.ReactElement => {
             </div>
         </UserSettingLayoutContainer>
     );
-};
+});
 
 export default GeneralSettingPage;
diff --git a/web/flat-web/src/stores/GlobalStore.ts b/web/flat-web/src/stores/GlobalStore.ts
@@ -59,6 +59,12 @@ export class GlobalStore {
         }
     };
 
+    public updateUserToken = (token: string): void => {
+        if (this.userInfo) {
+            this.userInfo.token = token;
+        }
+    };
+
     public updateLastLoginCheck = (val: number | null): void => {
         this.lastLoginCheck = val;
     };