feat(ui): 編輯個人檔案對話框

client/api/ApiDeclare.ts

@@ -3,11 +3,14 @@ export type CallMethod =
     "User.register" |
     "User.login" |
 
-    "User.setNickName" |
-    "User.setUserName" |
     "User.setAvatar" |
+    "User.updateProfile" |
     "User.getMyInfo" |
 
+    "User.getMyContacts" |
+    "User.addContact" |
+    "User.removeContacts" |
+
     "Chat.getInfo" |
     "Chat.sendMessage" |
     "Chat.getMessageHistory"

client/ui/dialog/UserProfileDialog.tsx

@@ -39,20 +39,20 @@ export default function UserProfileDialog({
         })
     })
 
-    return (
-        <mdui-dialog close-on-overlay-click close-on-esc ref={userProfileDialogRef}>
-            <div style={{
-                display: "none"
-            }}>
-                <input type="file" name="選擇頭像" ref={chooseAvatarFileRef}
-                    accept="image/*" />
-            </div>
+    const userProfileEditDialogRef = React.useRef<Dialog>(null)
+    const editNickNameRef = React.useRef<TextField>(null)
+    const editUserNameRef = React.useRef<TextField>(null)
 
+    return (<>
+        {
+            // 公用 - 資料卡
+        }
+        <mdui-dialog close-on-overlay-click close-on-esc ref={userProfileDialogRef}>
             <div style={{
                 display: 'flex',
                 alignItems: 'center',
             }}>
-                <Avatar src={user?.avatar} text={user?.nickname} avatarRef={editAvatarButtonRef} style={{
+                <Avatar src={user?.avatar} text={user?.nickname} style={{
                     width: '50px',
                     height: '50px',
                 }} />
@@ -70,12 +70,58 @@ export default function UserProfileDialog({
                 {!isMySelf && <mdui-list-item icon="edit" rounded>編輯聯絡人訊息</mdui-list-item>}
                 {
                     isMySelf && <>
-                        <mdui-list-item icon="edit" rounded>編輯資料</mdui-list-item>
+                        <mdui-list-item icon="edit" rounded onClick={() => userProfileEditDialogRef.current!.open = true}>編輯資料</mdui-list-item>
                         <mdui-list-item icon="settings" rounded>賬號設定</mdui-list-item>
                         <mdui-list-item icon="lock" rounded>隱私設定</mdui-list-item>
                     </>
                 }
             </mdui-list>
         </mdui-dialog>
-    )
+        {
+            // 個人資料編輯
+        }
+        <mdui-dialog close-on-overlay-click close-on-esc ref={userProfileEditDialogRef}>
+            <div style={{
+                display: "none"
+            }}>
+                <input type="file" name="選擇頭像" ref={chooseAvatarFileRef}
+                    accept="image/*" />
+            </div>
+
+            <div style={{
+                display: 'flex',
+                alignItems: 'center',
+            }}>
+                <Avatar src={user?.avatar} text={user?.nickname} avatarRef={editAvatarButtonRef} style={{
+                    width: '50px',
+                    height: '50px',
+                }} />
+                <mdui-text-field variant="outlined" placeholder="昵稱" ref={editNickNameRef as any} style={{
+                    marginLeft: "15px",
+                }} value={user?.nickname}></mdui-text-field>
+            </div>
+            <mdui-divider style={{
+                marginTop: "10px",
+                marginBottom: "10px",
+            }}></mdui-divider>
+
+            <mdui-text-field variant="outlined" label="用戶名" value={user?.username || ''} ref={editUserNameRef as any}></mdui-text-field>
+
+            <mdui-button slot="action" variant="text" onClick={() => userProfileEditDialogRef.current!.open = false}>取消</mdui-button>
+            <mdui-button slot="action" variant="text" onClick={async () => {
+                const re = await Client.invoke("User.updateProfile", {
+                    token: data.access_token,
+                    nickname: editNickNameRef.current?.value,
+                    username: editUserNameRef.current?.value,
+                })
+
+                if (checkApiSuccessOrSncakbar(re, "修改失敗")) return
+                snackbar({
+                    message: "修改成功 (刷新頁面以更新)",
+                    placement: "top",
+                })
+                userProfileEditDialogRef.current!.open = false
+            }}>更新</mdui-button>
+        </mdui-dialog>
+    </>)
 }

server/api/ApiDeclare.ts

@@ -3,9 +3,8 @@ export type CallMethod =
     "User.register" |
     "User.login" |
 
-    "User.setNickName" |
-    "User.setUserName" |
     "User.setAvatar" |
+    "User.updateProfile" |
     "User.getMyInfo" |
 
     "User.getMyContacts" |

server/api/UserApi.ts

@@ -129,9 +129,9 @@ export default class UserApi extends BaseApi {
                 code: 200,
             }
         })
-        // 更新昵稱
-        this.registerEvent("User.setNickName", (args) => {
-            if (this.checkArgsMissing(args, ['nickname', 'token'])) return {
+        // 更新資料
+        this.registerEvent("User.updateProfile", (args) => {
+            if (this.checkArgsMissing(args, ['token'])) return {
                 msg: "參數缺失",
                 code: 400,
             }
@@ -143,27 +143,9 @@ export default class UserApi extends BaseApi {
             }
 
             const user = User.findById(token.author)
+            if (args.nickname != null)
             user!.setNickName(args.nickname as string)
-
-            return {
-                msg: "成功",
-                code: 200,
-            }
-        })
-        // 更新用戶名
-        this.registerEvent("User.setUserName", (args) => {
-            if (this.checkArgsMissing(args, ['username', 'token'])) return {
-                msg: "參數缺失",
-                code: 400,
-            }
-            
-            const token = TokenManager.decode(args.token as string)
-            if (!this.checkToken(token)) return {
-                code: 401,
-                msg: "令牌無效",
-            }
-
-            const user = User.findById(token.author)
+            if (args.username != null)
             user!.setUserName(args.username as string)
 
             return {