From 1761bd22500b172b0a652313fd79613c07213e9a Mon Sep 17 00:00:00 2001
From: Aofei Sheng <aofei@aofeisheng.com>
Date: Wed, 11 Feb 2026 18:16:01 +0800
Subject: [PATCH] feat(spx-gui): support editing user display name in profile
 modal

Update `UpdateSignedInUserParams` to accept `displayName` in addition
to `description`, requiring at least one of the two fields to align
with the updated `PUT /user` API.

In `EditProfileModal`, the display name field is now editable instead
of being a disabled input showing `user.displayName`. Add validation
to ensure the display name is not blank, and trim whitespace before
submitting.

Signed-off-by: Aofei Sheng <aofei@aofeisheng.com>
---
 spx-gui/src/apis/user.ts                       | 10 +++++++++-
 .../community/user/EditProfileModal.vue        | 18 +++++++++++++-----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/spx-gui/src/apis/user.ts b/spx-gui/src/apis/user.ts
index 224feb6c8..2b1fbd96c 100644
--- a/spx-gui/src/apis/user.ts
+++ b/spx-gui/src/apis/user.ts
@@ -42,7 +42,15 @@ export async function getSignedInUser(): Promise<SignedInUser> {
   return await (client.get(`/user`) as Promise<SignedInUser>)
 }
 
-export type UpdateSignedInUserParams = Pick<User, 'description'>
+export type UpdateSignedInUserParams =
+  | {
+      displayName: User['displayName']
+      description?: User['description']
+    }
+  | {
+      displayName?: User['displayName']
+      description: User['description']
+    }
 
 export async function updateSignedInUser(params: UpdateSignedInUserParams) {
   return await (client.put(`/user`, params) as Promise<SignedInUser>)
diff --git a/spx-gui/src/components/community/user/EditProfileModal.vue b/spx-gui/src/components/community/user/EditProfileModal.vue
index 93609e960..bc848a125 100644
--- a/spx-gui/src/components/community/user/EditProfileModal.vue
+++ b/spx-gui/src/components/community/user/EditProfileModal.vue
@@ -24,9 +24,15 @@ const coverImgUrl = computed(() => getCoverImgUrl(props.user.username))
 const avatarUrl = useAvatarUrl(() => props.user.avatar)
 
 const form = useForm({
+  displayName: [props.user.displayName, validateDisplayName],
   description: [props.user.description, validateDescription]
 })
 
+function validateDisplayName(val: string) {
+  if (val.trim() === '') return t({ en: 'The name must not be blank', zh: '名字不可为空' })
+  return null
+}
+
 function validateDescription(val: string) {
   if (val.length > 200) return t({ en: 'The input must be 200 characters or fewer', zh: '输入不能超过 200 字' })
   return null
@@ -39,7 +45,10 @@ function handleCancel() {
 const updateProfile = useUpdateSignedInUser()
 
 const handleSubmit = useMessageHandle(async () => {
-  const updated = await updateProfile({ description: form.value.description })
+  const updated = await updateProfile({
+    displayName: form.value.displayName.trim(),
+    description: form.value.description.trim()
+  })
   emit('resolved', updated)
 })
 </script>
@@ -55,11 +64,10 @@ const handleSubmit = useMessageHandle(async () => {
     <div class="cover" :style="{ backgroundImage: `url(${coverImgUrl})` }"></div>
     <UIImg class="avatar" :src="avatarUrl" />
     <UIForm :form="form" has-success-feedback @submit="handleSubmit.fn">
-      <UIFormItem :label="$t({ en: 'Name', zh: '名字' })">
+      <UIFormItem :label="$t({ en: 'Name', zh: '名字' })" path="displayName">
         <UITextInput
-          v-radar="{ name: 'User name input', desc: 'Input field showing the user name' }"
-          :value="user.displayName"
-          disabled
+          v-model:value="form.value.displayName"
+          v-radar="{ name: 'User name input', desc: 'Input field for user display name' }"
         />
       </UIFormItem>
       <UIFormItem :label="$t({ en: 'About me', zh: '关于我' })" path="description">