feat: update profile

Author: kunish

bun.lockb

@@ -28,6 +28,7 @@
     "@tanstack/react-query-devtools": "^5.0.3",
     "@types/jsonwebtoken": "^9.0.4",
     "@types/lodash": "^4.14.200",
+    "@types/mime": "^3.0.3",
     "@types/node": "^20.8.7",
     "@types/react": "^18.2.31",
     "@types/react-dom": "^18.2.14",
@@ -37,6 +38,7 @@
     "commitlint": "^18.0.0",
     "dayjs": "^1.11.10",
     "encoding": "^0.1.13",
+    "env-paths": "^3.0.0",
     "eslint": "^8.52.0",
     "eslint-config-next": "13.5.6",
     "framer-motion": "^10.16.4",
@@ -51,6 +53,7 @@
     "lint-staged": "^15.0.2",
     "lodash": "^4.17.21",
     "match-sorter": "^6.3.1",
+    "mime": "^3.0.0",
     "monaco-editor": "^0.44.0",
     "monaco-themes": "^0.4.4",
     "next": "^13.5.6",

package.json

@@ -0,0 +1,18 @@
+import { NextResponse } from 'next/server'
+import fs from 'node:fs/promises'
+import { resolveAvatarPath } from '~/helpers/server/data'
+
+export const POST = async (req: Request) => {
+  const formData = await req.formData()
+  const avatar = formData.get('avatar') as File
+
+  const avatarPath = resolveAvatarPath(avatar.name)
+
+  try {
+    await fs.writeFile(avatarPath, Buffer.from(await avatar.arrayBuffer()))
+
+    return NextResponse.json({ url: `/avatar/${avatar.name}` })
+  } catch (err) {
+    return NextResponse.json({ message: (err as Error).message }, { status: 503 })
+  }
+}

src/app/api/avatar/route.ts

@@ -0,0 +1,20 @@
+import mime from 'mime'
+import { NextResponse } from 'next/server'
+import fs from 'node:fs/promises'
+import { resolveAvatarPath } from '~/helpers/server/data'
+
+export const GET = async (_request: Request, { params }: { params: { name: string } }) => {
+  const { name } = params
+  const avatarPath = resolveAvatarPath(name)
+
+  try {
+    await fs.access(avatarPath, fs.constants.F_OK)
+
+    const fileContent = await fs.readFile(avatarPath)
+    const fileType = mime.getType(avatarPath) || ''
+
+    return new NextResponse(fileContent, { headers: { 'Content-Type': fileType } })
+  } catch {
+    return new NextResponse(null, { status: 404 })
+  }
+}

src/app/avatar/[name]/route.ts

@@ -0,0 +1,10 @@
+import envPaths from 'env-paths'
+import fs from 'node:fs/promises'
+import { resolveAvatarDataPath } from '~/helpers/server/data'
+
+export const bootstrap = async () => {
+  const { data } = envPaths('daed')
+
+  await fs.mkdir(data, { recursive: true })
+  await fs.mkdir(resolveAvatarDataPath(), { recursive: true })
+}

src/bootstrap.ts

@@ -12,7 +12,6 @@ import {
   DropdownTrigger,
   Input,
   Link,
-  Modal,
   ModalBody,
   ModalContent,
   ModalHeader,
@@ -23,6 +22,7 @@ import {
   NavbarMenu,
   NavbarMenuItem,
   NavbarMenuToggle,
+  Spinner,
   useDisclosure
 } from '@nextui-org/react'
 import i18n from 'i18next'
@@ -31,20 +31,89 @@ import { useTheme } from 'next-themes'
 import NextLink from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
 import { FC, useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { Controller, FormProvider, useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { z } from 'zod'
+import { useUpdateAvatarMutation, useUpdateNameMutation } from '~/apis/mutation'
 import { useUserQuery } from '~/apis/query'
 import { LogoText } from '~/components/LogoText'
-import { ModalConfirmFormFooter } from '~/components/Modal'
+import { Modal, ModalConfirmFormFooter, ModalSubmitFormFooter } from '~/components/Modal'
 import { updatePasswordFormDefault, useUpdatePasswordSchemaWithRefine } from '~/schemas/account'
 
+const AvatarUploader: FC<{ name: string }> = ({ name }) => {
+  const [uploading, setUploading] = useState(false)
+
+  return (
+    <Controller
+      name={name}
+      render={({ field }) => (
+        <div className="flex items-center justify-center">
+          <div className="flex h-32 w-32 items-center justify-center">
+            {uploading ? <Spinner /> : <Avatar size="lg" as="label" htmlFor="avatar" showFallback src={field.value} />}
+          </div>
+
+          <input
+            id="avatar"
+            type="file"
+            hidden
+            multiple={false}
+            onChange={async (e) => {
+              setUploading(true)
+
+              const file = e.target.files?.item(0)
+
+              if (!file) return
+
+              const formData = new FormData()
+              formData.append('avatar', file)
+
+              try {
+                const { url } = await ky.post('/api/avatar', { body: formData }).json<{ url: string }>()
+
+                field.onChange(url)
+              } finally {
+                setUploading(false)
+              }
+            }}
+          />
+        </div>
+      )}
+    />
+  )
+}
+
 export const Header: FC = () => {
   const { t } = useTranslation()
   const { theme: curTheme, setTheme } = useTheme()
+  const pathname = usePathname()
+  const router = useRouter()
+
+  const userQuery = useUserQuery()
 
   const [isMenuOpen, setIsMenuOpen] = useState(false)
 
+  const {
+    isOpen: isUpdateProfileOpen,
+    onOpen: onUpdateProfileOpen,
+    onClose: onUpdateProfileClose,
+    onOpenChange: onUpdateProfileOpenChange
+  } = useDisclosure()
+
+  const updateProfileSchema = z.object({
+    name: z.string().min(4).max(20),
+    avatar: z.string().min(1)
+  })
+
+  const updateProfileForm = useForm<z.infer<typeof updateProfileSchema>>({
+    resolver: zodResolver(updateProfileSchema),
+    defaultValues: { name: '', avatar: '' }
+  })
+
+  const updateProfileFormDirty = Object.values(updateProfileForm.formState.dirtyFields).some((dirty) => dirty)
+
+  const updateNameMutation = useUpdateNameMutation()
+  const updateAvatarMutation = useUpdateAvatarMutation()
+
   const {
     isOpen: isUpdatePasswordOpen,
     onOpen: onUpdatePasswordOpen,
@@ -59,10 +128,6 @@ export const Header: FC = () => {
     defaultValues: updatePasswordFormDefault
   })
 
-  const pathname = usePathname()
-  const router = useRouter()
-  const userQuery = useUserQuery()
-
   const navigationMenus = [
     { name: t('primitives.network'), route: '/network' },
     { name: t('primitives.rule'), route: '/rule' }
@@ -107,6 +172,7 @@ export const Header: FC = () => {
               className="transition-transform"
               color="secondary"
               size="sm"
+              showFallback
               name={userQuery.data?.user.name || userQuery.data?.user.username}
               src={userQuery.data?.user.avatar || ''}
             />
@@ -116,6 +182,13 @@ export const Header: FC = () => {
             aria-label="Profile Actions"
             variant="flat"
             onAction={(key) => {
+              if (key === 'profile') {
+                updateProfileForm.reset({
+                  name: userQuery.data?.user.name || '',
+                  avatar: userQuery.data?.user.avatar || ''
+                })
+                onUpdateProfileOpen()
+              }
               if (key === 'update-password') onUpdatePasswordOpen()
             }}
           >
@@ -129,7 +202,9 @@ export const Header: FC = () => {
               </DropdownItem>
 
               <DropdownItem key="update-password" textValue="update-password">
-                {t('actions.updatePassword')}
+                {t('actions.update', {
+                  resourceName: t('form.fields.password')
+                })}
               </DropdownItem>
             </DropdownSection>
 
@@ -197,6 +272,51 @@ export const Header: FC = () => {
         ))}
       </NavbarMenu>
 
+      <Modal isOpen={isUpdateProfileOpen} onOpenChange={onUpdateProfileOpenChange}>
+        <FormProvider {...updateProfileForm}>
+          <form
+            onSubmit={updateProfileForm.handleSubmit(async (values) => {
+              try {
+                if (values.name !== userQuery.data?.user.name) {
+                  await updateNameMutation.mutateAsync(values.name)
+                }
+
+                if (values.avatar !== userQuery.data?.user.avatar) {
+                  await updateAvatarMutation.mutateAsync(values.avatar)
+                }
+
+                await userQuery.refetch()
+
+                onUpdateProfileClose()
+              } catch {}
+            })}
+          >
+            <ModalContent>
+              <ModalHeader>{t('actions.update', { resourceName: t('primitives.profile') })}</ModalHeader>
+
+              <ModalBody>
+                <div className="flex flex-col gap-4">
+                  <Input
+                    label={t('form.fields.name')}
+                    placeholder={t('form.fields.name')}
+                    errorMessage={updateProfileForm.formState.errors.name?.message}
+                    {...updateProfileForm.register('name')}
+                  />
+
+                  <AvatarUploader name="avatar" />
+                </div>
+              </ModalBody>
+
+              <ModalSubmitFormFooter
+                reset={updateProfileForm.reset}
+                isResetDisabled={!updateProfileFormDirty}
+                isSubmitting={updateProfileForm.formState.isSubmitting}
+              />
+            </ModalContent>
+          </form>
+        </FormProvider>
+      </Modal>
+
       <Modal isOpen={isUpdatePasswordOpen} onOpenChange={onUpdatePasswordOpenChange}>
         <form
           onSubmit={updatePasswordForm.handleSubmit(async (values) => {
@@ -210,30 +330,30 @@ export const Header: FC = () => {
           })}
         >
           <ModalContent>
-            <ModalHeader>{t('actions.updatePassword')}</ModalHeader>
+            <ModalHeader>{t('actions.update', { resourceName: t('form.fields.password') })}</ModalHeader>
 
             <ModalBody>
               <div className="flex flex-col gap-4">
                 <Input
                   type="password"
-                  label={t('primitives.currentPassword')}
-                  placeholder={t('primitives.currentPassword')}
+                  label={t('form.fields.currentPassword')}
+                  placeholder={t('form.fields.currentPassword')}
                   errorMessage={updatePasswordForm.formState.errors.currentPassword?.message}
                   {...updatePasswordForm.register('currentPassword')}
                 />
 
                 <Input
                   type="password"
-                  label={t('primitives.newPassword')}
-                  placeholder={t('primitives.newPassword')}
+                  label={t('form.fields.newPassword')}
+                  placeholder={t('form.fields.newPassword')}
                   errorMessage={updatePasswordForm.formState.errors.newPassword?.message}
                   {...updatePasswordForm.register('newPassword')}
                 />
 
                 <Input
                   type="password"
-                  label={t('primitives.confirmPassword')}
-                  placeholder={t('primitives.confirmPassword')}
+                  label={t('form.fields.confirmPassword')}
+                  placeholder={t('form.fields.confirmPassword')}
                   errorMessage={updatePasswordForm.formState.errors.confirmPassword?.message}
                   {...updatePasswordForm.register('confirmPassword')}
                 />

src/components/Header.tsx

@@ -0,0 +1,6 @@
+import envPaths from 'env-paths'
+import path from 'node:path'
+
+export const resolveAvatarDataPath = () => path.join(envPaths('daed').data, 'avatars')
+
+export const resolveAvatarPath = (avatarName: string) => path.join(resolveAvatarDataPath(), avatarName)

src/helpers/server/data.ts

@@ -5,6 +5,9 @@
       "endpointURL": "Endpoint URL",
       "username": "Username",
       "password": "Password",
+      "currentPassword": "Current Password",
+      "newPassword": "New Password",
+      "confirmPassword": "Confirm Password",
       "tproxyPort": "Transparent Proxy Port",
       "tproxyPortProtect": "Transparent Proxy Port Protect",
       "soMarkFromDae": "Set SO_MARK For dae",
@@ -83,7 +86,7 @@
     "submit": "Submit",
     "refresh": "Refresh",
     "loading": "Loading {{resourceName}}...",
-    "updatePassword": "Update Password"
+    "update": "Update {{resourceName}}"
   },
   "primitives": {
     "create": "Create {{resourceName}}",
@@ -109,6 +112,7 @@
     "settings": "Settings",
     "username": "Username: {{username}}",
     "accountName": "Account Name: {{accountName}}",
+    "profile": "Profile",
     "english": "English",
     "chineseSimplified": "Chinese Simplified",
     "name": "Name",
@@ -117,9 +121,6 @@
     "updatedAt": "Updated At",
     "address": "Address",
     "action": "Action",
-    "policy": "Policy",
-    "currentPassword": "Current Password",
-    "newPassword": "New Password",
-    "confirmPassword": "Confirm Password"
+    "policy": "Policy"
   }
 }

src/i18n/locales/en-US.json

@@ -5,6 +5,9 @@
       "endpointURL": "接口地址",
       "username": "用户名",
       "password": "密码",
+      "currentPassword": "当前密码",
+      "newPassword": "新密码",
+      "confirmPassword": "确认密码",
       "tproxyPort": "透明代理端口",
       "tproxyPortProtect": "透明代理端口保护",
       "soMarkFromDae": "为 dae 设置套接字标记",
@@ -83,7 +86,7 @@
     "submit": "提交",
     "refresh": "刷新",
     "loading": "正在加载{{resourceName}}...",
-    "updatePassword": "修改密码"
+    "update": "修改{{resourceName}}"
   },
   "primitives": {
     "create": "创建{{resourceName}}",
@@ -109,6 +112,7 @@
     "settings": "设置",
     "username": "登录账户：{{username}}",
     "accountName": "用户名：{{accountName}}",
+    "profile": "个人资料",
     "english": "英文",
     "chineseSimplified": "简中",
     "name": "名称",
@@ -117,9 +121,6 @@
     "updatedAt": "更新时间",
     "address": "地址",
     "action": "动作",
-    "policy": "策略",
-    "currentPassword": "当前密码",
-    "newPassword": "新密码",
-    "confirmPassword": "确认密码"
+    "policy": "策略"
   }
 }