feat(project): add rename settings

netless-io · May 31, 2022 · 120a6fa · 120a6fa
1 parent f0e620d
commit 120a6fa
Show file tree

Hide file tree

Showing 10 changed files with 224 additions and 108 deletions.
diff --git a/desktop/renderer-app/src/api-middleware/flatServer/constants.ts b/desktop/renderer-app/src/api-middleware/flatServer/constants.ts
@@ -43,11 +43,6 @@ export enum Status {
     AuthFailed,
 }
 
-export enum Sex {
-    Man = "Man",
-    Woman = "Woman",
-}
-
 export enum FileConvertStep {
     None = "None",
     Converting = "Converting",

diff --git a/desktop/renderer-app/src/api-middleware/flatServer/index.ts b/desktop/renderer-app/src/api-middleware/flatServer/index.ts
@@ -1,5 +1,5 @@
 import { Region } from "flat-components";
-import { RoomStatus, RoomType, Sex, Week } from "./constants";
+import { RoomStatus, RoomType, Week } from "./constants";
 import { post, postNotAuth } from "./utils";
 
 export interface CreateOrdinaryRoomPayload {
@@ -451,22 +451,18 @@ export async function updatePeriodicSubRoom(payload: UpdatePeriodicSubRoomPayloa
     );
 }
 
-export interface LoginCheckPayload {
-    type: "web" | "mobile";
-}
+export interface LoginCheckPayload {}
 
 export interface LoginCheckResult {
     name: string;
-    sex: Sex;
     avatar: string;
+    token: string;
     userUUID: string;
     hasPhone: boolean;
 }
 
 export async function loginCheck(): Promise<LoginCheckResult> {
-    return await post<LoginCheckPayload, LoginCheckResult>("login", {
-        type: "web",
-    });
+    return await post<LoginCheckPayload, LoginCheckResult>("login", {});
 }
 
 export interface setAuthUUIDPayload {
@@ -489,7 +485,6 @@ export interface LoginProcessPayload {
 
 export interface LoginProcessResult {
     name: string;
-    sex: Sex;
     avatar: string;
     userUUID: string;
     token: string;
@@ -557,3 +552,15 @@ export async function bindingPhone(phone: string, code: number): Promise<Binding
         code,
     });
 }
+
+export interface RenamePayload {
+    name: string;
+}
+
+export type RenameResult = {};
+
+export async function rename(name: string): Promise<RenameResult> {
+    return await post<RenamePayload, RenameResult>("user/rename", {
+        name,
+    });
+}
diff --git a/desktop/renderer-app/src/pages/UserSettingPage/GeneralSettingPage/index.tsx b/desktop/renderer-app/src/pages/UserSettingPage/GeneralSettingPage/index.tsx
@@ -1,22 +1,41 @@
 import "./style.less";
 
-import { Checkbox, Radio, RadioChangeEvent } from "antd";
+import { Button, Checkbox, Input, Radio, RadioChangeEvent } from "antd";
 import React, { useContext, useEffect, useState } from "react";
 import { UserSettingLayoutContainer } from "../UserSettingLayoutContainer";
 import { ipcSyncByApp, ipcAsyncByApp } from "../../../utils/ipc";
 import { useTranslation } from "react-i18next";
 import { AppearancePicker, FlatPrefersColorScheme } from "flat-components";
-import { ConfigStoreContext } from "../../../components/StoreProvider";
+import { ConfigStoreContext, GlobalStoreContext } from "../../../components/StoreProvider";
+import { useSafePromise } from "../../../utils/hooks/lifecycle";
+import { loginCheck, rename } from "../../../api-middleware/flatServer";
 
 enum SelectLanguage {
     Chinese,
     English,
 }
 
 export const GeneralSettingPage = (): React.ReactElement => {
+    const sp = useSafePromise();
     const { t, i18n } = useTranslation();
     const [openAtLogin, setOpenAtLogin] = useState(false);
     const configStore = useContext(ConfigStoreContext);
+    const globalStore = useContext(GlobalStoreContext);
+
+    const [name, setName] = useState(globalStore.userName || "");
+    const [isRenaming, setRenaming] = useState(false);
+
+    async function changeUserName(): Promise<void> {
+        if (name !== globalStore.userName) {
+            setRenaming(true);
+            await sp(rename(name));
+            setRenaming(false);
+            // Refresh user info in global store.
+            const result = await sp(loginCheck());
+            globalStore.updateUserInfo(result);
+            globalStore.updateLastLoginCheck(Date.now());
+        }
+    }
 
     useEffect(() => {
         ipcSyncByApp("get-open-at-login")
@@ -55,6 +74,24 @@ export const GeneralSettingPage = (): React.ReactElement => {
                         </span>
                     </Checkbox>
                 </div>
+                <div className="general-setting-user-profile">
+                    <span>{t("user-profile")}</span>
+                    <label htmlFor="username">{t("username")}</label>
+                    <Input
+                        disabled={isRenaming}
+                        id="username"
+                        value={name}
+                        onChange={ev => setName(ev.currentTarget.value)}
+                    />
+                    <Button
+                        disabled={isRenaming}
+                        loading={isRenaming}
+                        type="link"
+                        onClick={changeUserName}
+                    >
+                        修改
+                    </Button>
+                </div>
                 <div className="general-setting-select-language">
                     <span>{t("language-settings")}</span>
                     <Radio.Group

diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
@@ -453,5 +453,7 @@
     "math_1": "Coordinate Axis",
     "english_1": "Four Lines and Three Grids",
     "chinese_1": "Tin Word Format"
-  }
+  },
+  "user-profile": "User Profile",
+  "username": "Name"
 }
diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
@@ -453,5 +453,7 @@
     "math_1": "坐标系",
     "english_1": "四线三格",
     "chinese_1": "田字格"
-  }
+  },
+  "user-profile": "我的资料",
+  "username": "昵称"
 }
diff --git a/web/flat-web/src/api-middleware/flatServer/index.ts b/web/flat-web/src/api-middleware/flatServer/index.ts
@@ -571,3 +571,15 @@ export async function bindingPhone(phone: string, code: number): Promise<Binding
         code,
     });
 }
+
+export interface RenamePayload {
+    name: string;
+}
+
+export type RenameResult = {};
+
+export async function rename(name: string): Promise<RenameResult> {
+    return await post<RenamePayload, RenameResult>("user/rename", {
+        name,
+    });
+}
diff --git a/web/flat-web/src/components/MainPageLayoutHorizontalContainer/index.tsx b/web/flat-web/src/components/MainPageLayoutHorizontalContainer/index.tsx
@@ -1,5 +1,6 @@
 /* eslint react/display-name: off */
 import React, { useContext } from "react";
+import { observer } from "mobx-react-lite";
 import { useHistory, useLocation } from "react-router-dom";
 import {
     MainPageLayoutHorizontal,
@@ -29,102 +30,109 @@ export interface MainPageLayoutHorizontalContainerProps {
     onBackPreviousPage?: () => void;
 }
 
-export const MainPageLayoutHorizontalContainer: React.FC<
-    MainPageLayoutHorizontalContainerProps
-> = ({ subMenu, children, activeKeys, onRouteChange, title, onBackPreviousPage }) => {
-    const { t } = useTranslation();
-    const leftMenu = [
-        {
-            key: routeConfig[RouteNameType.HomePage].path,
-            icon: (active: boolean): React.ReactNode => {
-                return active ? <SVGHomeFilled active={active} /> : <SVGHomeOutlined />;
+export const MainPageLayoutHorizontalContainer = observer<MainPageLayoutHorizontalContainerProps>(
+    function MainPageLayoutHorizontalContainer({
+        subMenu,
+        children,
+        activeKeys,
+        onRouteChange,
+        title,
+        onBackPreviousPage,
+    }) {
+        const { t } = useTranslation();
+        const leftMenu = [
+            {
+                key: routeConfig[RouteNameType.HomePage].path,
+                icon: (active: boolean): React.ReactNode => {
+                    return active ? <SVGHomeFilled active={active} /> : <SVGHomeOutlined />;
+                },
+                title: t("home"),
+                route: routeConfig[RouteNameType.HomePage].path,
             },
-            title: t("home"),
-            route: routeConfig[RouteNameType.HomePage].path,
-        },
-        {
-            key: routeConfig[RouteNameType.CloudStoragePage].path,
-            icon: (active: boolean): React.ReactNode => {
-                return active ? <SVGCloudFilled active={active} /> : <SVGCloudOutlined />;
+            {
+                key: routeConfig[RouteNameType.CloudStoragePage].path,
+                icon: (active: boolean): React.ReactNode => {
+                    return active ? <SVGCloudFilled active={active} /> : <SVGCloudOutlined />;
+                },
+                title: t("cloud-storage"),
+                route: routeConfig[RouteNameType.CloudStoragePage].path,
             },
-            title: t("cloud-storage"),
-            route: routeConfig[RouteNameType.CloudStoragePage].path,
-        },
-    ];
+        ];
 
-    const rightMenu: MainPageLayoutItem[] = [
-        {
-            key: "download",
-            icon: (): React.ReactNode => <SVGDownload />,
-            title: <></>,
-            route: FLAT_DOWNLOAD_URL,
-        },
-        {
-            key: "getGitHubCode",
-            icon: (): React.ReactNode => <SVGGithub />,
-            title: <></>,
-            route: "https://github.com/netless-io/flat/",
-        },
-        {
-            key: routeConfig[RouteNameType.GeneralSettingPage].path,
-            icon: (): React.ReactNode => <SVGSetting />,
-            title: <></>,
-            route: routeConfig[RouteNameType.GeneralSettingPage].path,
-        },
-    ];
+        const rightMenu: MainPageLayoutItem[] = [
+            {
+                key: "download",
+                icon: (): React.ReactNode => <SVGDownload />,
+                title: <></>,
+                route: FLAT_DOWNLOAD_URL,
+            },
+            {
+                key: "getGitHubCode",
+                icon: (): React.ReactNode => <SVGGithub />,
+                title: <></>,
+                route: "https://github.com/netless-io/flat/",
+            },
+            {
+                key: routeConfig[RouteNameType.GeneralSettingPage].path,
+                icon: (): React.ReactNode => <SVGSetting />,
+                title: <></>,
+                route: routeConfig[RouteNameType.GeneralSettingPage].path,
+            },
+        ];
 
-    const popMenu = [
-        {
-            key: "feedback",
-            icon: (): React.ReactNode => <SVGFeedback />,
-            title: t("feedback"),
-            route: "https://github.com/netless-io/flat/issues",
-        },
-        {
-            key: "logout",
-            icon: (): React.ReactNode => <SVGLogout />,
-            title: <span className="logout-title">{t("logout")}</span>,
-            route: routeConfig[RouteNameType.LoginPage].path,
-        },
-    ];
+        const popMenu = [
+            {
+                key: "feedback",
+                icon: (): React.ReactNode => <SVGFeedback />,
+                title: t("feedback"),
+                route: "https://github.com/netless-io/flat/issues",
+            },
+            {
+                key: "logout",
+                icon: (): React.ReactNode => <SVGLogout />,
+                title: <span className="logout-title">{t("logout")}</span>,
+                route: routeConfig[RouteNameType.LoginPage].path,
+            },
+        ];
 
-    const location = useLocation();
+        const location = useLocation();
 
-    activeKeys ??= [location.pathname];
+        activeKeys ??= [location.pathname];
 
-    const history = useHistory();
+        const history = useHistory();
 
-    const globalStore = useContext(GlobalStoreContext);
+        const globalStore = useContext(GlobalStoreContext);
 
-    const onMenuItemClick = (mainPageLayoutItem: MainPageLayoutItem): void => {
-        if (mainPageLayoutItem.key === "logout") {
-            globalStore.logout();
-        }
+        const onMenuItemClick = (mainPageLayoutItem: MainPageLayoutItem): void => {
+            if (mainPageLayoutItem.key === "logout") {
+                globalStore.logout();
+            }
 
-        if (mainPageLayoutItem.route.startsWith("/")) {
-            onRouteChange
-                ? onRouteChange(mainPageLayoutItem)
-                : history.push(mainPageLayoutItem.route);
-        } else {
-            void window.open(mainPageLayoutItem.route);
-        }
-    };
+            if (mainPageLayoutItem.route.startsWith("/")) {
+                onRouteChange
+                    ? onRouteChange(mainPageLayoutItem)
+                    : history.push(mainPageLayoutItem.route);
+            } else {
+                void window.open(mainPageLayoutItem.route);
+            }
+        };
 
-    return (
-        <MainPageLayoutHorizontal
-            activeKeys={activeKeys}
-            avatarSrc={globalStore.userInfo?.avatar ?? ""}
-            generateAvatar={generateAvatar}
-            leftMenu={leftMenu}
-            popMenu={popMenu}
-            rightMenu={rightMenu}
-            subMenu={subMenu}
-            title={title}
-            userName={globalStore.userInfo?.name ?? ""}
-            onBackPreviousPage={onBackPreviousPage}
-            onClick={onMenuItemClick}
-        >
-            {children}
-        </MainPageLayoutHorizontal>
-    );
-};
+        return (
+            <MainPageLayoutHorizontal
+                activeKeys={activeKeys}
+                avatarSrc={globalStore.userInfo?.avatar ?? ""}
+                generateAvatar={generateAvatar}
+                leftMenu={leftMenu}
+                popMenu={popMenu}
+                rightMenu={rightMenu}
+                subMenu={subMenu}
+                title={title}
+                userName={globalStore.userName ?? ""}
+                onBackPreviousPage={onBackPreviousPage}
+                onClick={onMenuItemClick}
+            >
+                {children}
+            </MainPageLayoutHorizontal>
+        );
+    },
+);
diff --git a/web/flat-web/src/pages/UserSettingPage/GeneralSettingPage/index.less b/web/flat-web/src/pages/UserSettingPage/GeneralSettingPage/index.less
@@ -5,6 +5,21 @@
     }
 }
 
+.general-setting-user-profile {
+    > span {
+        display: block;
+        padding-bottom: 4px;
+    }
+    > label {
+        padding-right: 16px;
+        color: var(--text);
+    }
+    .ant-input {
+        width: 320px;
+        margin-bottom: 12px;
+    }
+}
+
 .general-setting-select-language {
     > span {
         display: block;