feat: 国际化修改密码界面

public/locales/en/account.json

@@ -0,0 +1,12 @@
+{
+  "CurrentPassword": "Current password",
+  "NewPassword": "New password",
+  "ReenterPassword": "Reenter password",
+  "Validation": {
+    "Success": "Your password has been successfully updated.",
+    "Fail": "Failed to change password. Please try again.",
+    "CurrentPassword": "Please input your password.",
+    "NewPassword": "Please input your new password.",
+    "ReenterPassword": "Please reenter your password."
+  }
+}

public/locales/zh/account.json

@@ -0,0 +1,12 @@
+{
+  "CurrentPassword": "当前密码",
+  "NewPassword": "新密码",
+  "ReenterPassword": "重复输入密码",
+  "Validation": {
+    "Success": "密码更新成功",
+    "Fail": "密码更新失败",
+    "CurrentPassword": "请输入密码。",
+    "NewPassword": "请输入新密码。",
+    "ReenterPassword": "请重复输入密码。"
+  }
+}

public/locales/zh/common.json

@@ -51,10 +51,6 @@
     "Notice": "通知",
     "Report": "质量评分"
   },
-  "Notification": {
-    "Title": "温馨提示",
-    "LoginFailed": "密码错误，登陆失败。"
-  },
   "Validation": {
     "Title": "温馨提示",
     "LoginFailed": "密码错误，登陆失败。",

src/i18n/index.js

@@ -17,7 +17,7 @@ i18n
     backend: {
       loadPath: '/locales/{{lng}}/{{ns}}.json',
     },
-    ns: ['common', 'group', 'vendor'],
+    ns: ['common', 'group', 'vendor', 'account'],
     defaultNS: 'common',
     detection: {
       //   convertDetectedLanguage: 'Iso15897',

src/views/account/ChangePassword.jsx

@@ -1,14 +1,15 @@
 import { useNavigate } from "react-router-dom"
 import { Button, Space, Form, Input, Row, Typography, App } from 'antd'
+import { useTranslation } from 'react-i18next'
 import useAuthStore from '@/stores/Auth'
 
 const { Title } = Typography
 
 function ChangePassword() {
 
+  const { t } = useTranslation()
   const navigate = useNavigate()
-  const [changeUserPassword] = useAuthStore(
+  const changeUserPassword = useAuthStore((state) => state.changeUserPassword)
-    (state) => [state.changeUserPassword])
   const { notification } = App.useApp()
   const [form] = Form.useForm()
 
@@ -16,8 +17,8 @@ function ChangePassword() {
     changeUserPassword(values.currentPassword, values.newPassword)
       .then(() => {
         notification.success({
-          message: `Notification`,
+          message: t('Validation.Title'),
-          description: 'Your password has been successfully updated.',
+          description: t('account:Validation.Success'),
           placement: 'top',
           duration: 4,
         })
@@ -25,8 +26,8 @@ function ChangePassword() {
       })
       .catch(() => {
         notification.error({
-          message: `Notification`,
+          message: t('Validation.Title'),
-          description: 'Failed to change password. Please try again.',
+          description: t('account:Validation.Fail'),
           placement: 'top',
           duration: 4,
         })
@@ -53,38 +54,38 @@ function ChangePassword() {
         onFinishFailed={onFinishFailed}
         autoComplete="off"
       >
-        <Form.Item><Title level={2}>Change your password</Title></Form.Item>
+        <Form.Item><Title level={2}>{t('ChangePassword')}</Title></Form.Item>
         <Form.Item
-          label="Current password"
+          label={t('account:CurrentPassword')}
           name="currentPassword"
           rules={[
             {
               required: true,
-              message: 'Please input your password!',
+              message: t('account:Validation.CurrentPassword'),
             },
           ]}
         >
           <Input.Password />
         </Form.Item>
         <Form.Item
-          label="New password"
+          label={t('account:NewPassword')}
           name="newPassword"
           rules={[
             {
               required: true,
-              message: 'Please input your password!',
+              message: t('account:Validation.NewPassword'),
             },
           ]}
         >
           <Input.Password />
         </Form.Item>
         <Form.Item
-          label="Reenter password"
+          label={t('account:ReenterPassword')}
           name="reenterPassword"
           rules={[
             {
               required: true,
-              message: 'Please reenter your password!',
+              message: t('account:Validation.ReenterPassword'),
             },
           ]}
         >
@@ -93,10 +94,10 @@ function ChangePassword() {
         <Form.Item>
         <Space size="middle">
           <Button type="primary" htmlType="submit">
-            Save
+            {t('Submit')}
           </Button>
           <Button onClick={() => navigate('/reservation/newest')}>
-            Cancel
+          {t('Cancel')}
           </Button>
         </Space>
         </Form.Item>