fix: languages config, update-password

src/pages/api-keys/components/add-apikey.tsx

@@ -3,6 +3,7 @@ import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import { PageActionType } from '@/config/types';
 import { SyncOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
 import { Form, Modal } from 'antd';
 import { expirationOptions } from '../config';
 import { FormData } from '../config/types';
@@ -23,6 +24,7 @@ const AddModal: React.FC<AddModalProps> = ({
   onCancel
 }) => {
   const [form] = Form.useForm();
+  const intl = useIntl();
   const Suffix = (
     <SyncOutlined
       style={{
@@ -53,18 +55,49 @@ const AddModal: React.FC<AddModalProps> = ({
       }
     >
       <Form name="addAPIKey" form={form} onFinish={onOk} preserve={false}>
-        <Form.Item<FormData> name="name" rules={[{ required: true }]}>
-          <SealInput.Input label="Name" required></SealInput.Input>
+        <Form.Item<FormData>
+          name="name"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                { id: 'common.form.rule.input' },
+                {
+                  name: intl.formatMessage({ id: 'common.table.name' })
+                }
+              )
+            }
+          ]}
+        >
+          <SealInput.Input
+            label={intl.formatMessage({ id: 'common.table.name' })}
+            required
+          ></SealInput.Input>
         </Form.Item>
-        <Form.Item<FormData> name="expires_in" rules={[{ required: true }]}>
+        <Form.Item<FormData>
+          name="expires_in"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                { id: 'common.form.rule.select' },
+                {
+                  name: intl.formatMessage({ id: 'apikeys.form.expiretime' })
+                }
+              )
+            }
+          ]}
+        >
           <SealSelect
-            label="Expiration"
+            label={intl.formatMessage({ id: 'apikeys.form.expiretime' })}
             required
             options={expirationOptions}
           ></SealSelect>
         </Form.Item>
         <Form.Item<FormData> name="description" rules={[{ required: false }]}>
-          <SealInput.TextArea label="Description"></SealInput.TextArea>
+          <SealInput.TextArea
+            label={intl.formatMessage({ id: 'common.table.description' })}
+          ></SealInput.TextArea>
         </Form.Item>
       </Form>
     </Modal>

src/pages/api-keys/index.tsx

@@ -128,7 +128,7 @@ const Models: React.FC = () => {
       };
       const res = await createApisKey({ data: params });
       setOpenAddModal(false);
-      message.success('successfully!');
+      message.success(intl.formatMessage({ id: 'common.message.success' }));
       setDataSource([res, ...dataSource]);
       setTotal(total + 1);
     } catch (error) {
@@ -144,11 +144,14 @@ const Models: React.FC = () => {
   const handleDelete = (row: ListItem) => {
     Modal.confirm({
       title: '',
-      content: 'Are you sure you want to delete the selected keys?',
+      content: intl.formatMessage(
+        { id: 'common.delete.confirm' },
+        { type: intl.formatMessage({ id: 'apikeys.table.apikeys' }) }
+      ),
       async onOk() {
         console.log('OK');
         await deleteApisKey(row.id);
-        message.success('successfully!');
+        message.success(intl.formatMessage({ id: 'common.message.success' }));
         fetchData();
       },
       onCancel() {
@@ -160,10 +163,13 @@ const Models: React.FC = () => {
   const handleDeleteBatch = () => {
     Modal.confirm({
       title: '',
-      content: 'Are you sure you want to delete the selected keys?',
+      content: intl.formatMessage(
+        { id: 'common.delete.confirm' },
+        { type: intl.formatMessage({ id: 'apikeys.table.apikeys' }) }
+      ),
       async onOk() {
         await handleBatchRequest(rowSelection.selectedRowKeys, deleteApisKey);
-        message.success('successfully!');
+        message.success(intl.formatMessage({ id: 'common.message.success' }));
         fetchData();
       },
       onCancel() {
@@ -172,12 +178,6 @@ const Models: React.FC = () => {
     });
   };
 
-  const handleEditUser = () => {
-    setOpenAddModal(true);
-    setAction(PageAction.EDIT);
-    setTitle('Edit User');
-  };
-
   const renderSecrectKey = (text: string, record: ListItem) => {
     const { value } = record;
 
@@ -187,7 +187,7 @@ const Models: React.FC = () => {
         {value && (
           <span>
             <Tag color="error" style={{ padding: '10px 12px' }}>
-              确保立即复制您的个人访问密钥。您将无法再次看到它！
+              {intl.formatMessage({ id: 'apikeys.table.save.tips' })}
             </Tag>
             <span className="flex-center">
               <Tooltip
@@ -299,7 +299,7 @@ const Models: React.FC = () => {
             }}
           />
           <Column
-            title="Operation"
+            title={intl.formatMessage({ id: 'common.table.operation' })}
             key="operation"
             render={(text, record: ListItem) => {
               return (

src/pages/login/apis/index.ts

@@ -27,3 +27,10 @@ export const accessToken = async () => {
     method: 'POST'
   });
 };
+
+export const updatePassword = async (params: any) => {
+  return request(`${AUTH_API}/update-password`, {
+    method: 'POST',
+    data: params
+  });
+};

src/pages/login/index.tsx

@@ -1,7 +1,7 @@
 import LogoIcon from '@/assets/images/logo.png';
 import SealInput from '@/components/seal-form/seal-input';
-import { LockOutlined, UserOutlined } from '@ant-design/icons';
-import { history, useModel } from '@umijs/max';
+import { GlobalOutlined, LockOutlined, UserOutlined } from '@ant-design/icons';
+import { SelectLang, history, useIntl, useModel } from '@umijs/max';
 import { Button, Checkbox, Form } from 'antd';
 import { flushSync } from 'react-dom';
 import { login } from './apis';
@@ -24,7 +24,7 @@ const renderLogo = () => {
 };
 const Login = () => {
   const { initialState, setInitialState } = useModel('@@initialState');
-
+  const intl = useIntl();
   const [form] = Form.useForm();
 
   const gotoDefaultPage = (userInfo: any) => {
@@ -61,44 +61,63 @@ const Login = () => {
   };
 
   return (
-    <Form
-      form={form}
-      style={{ width: '400px', margin: '0 auto', paddingTop: '5%' }}
-      onFinish={handleLogin}
-    >
-      <div>{renderLogo()}</div>
-      <Form.Item
-        name="username"
-        rules={[
-          {
-            required: true,
-            message: 'Please input your Username!'
-          }
-        ]}
+    <div>
+      <div style={{ position: 'fixed', right: 0, top: 0, padding: '0 20px' }}>
+        <SelectLang icon={<GlobalOutlined />} reload={false} />
+      </div>
+      <Form
+        form={form}
+        style={{ width: '400px', margin: '0 auto', paddingTop: '5%' }}
+        onFinish={handleLogin}
       >
-        <SealInput.Input label="Username" prefix={<UserOutlined />} />
-      </Form.Item>
+        <div>{renderLogo()}</div>
+        <Form.Item
+          name="username"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                { id: 'common.form.rule.input' },
+                { name: intl.formatMessage({ id: 'common.form.username' }) }
+              )
+            }
+          ]}
+        >
+          <SealInput.Input
+            label={intl.formatMessage({ id: 'common.form.username' })}
+            prefix={<UserOutlined />}
+          />
+        </Form.Item>
 
-      <Form.Item
-        name="password"
-        rules={[
-          {
-            required: true,
-            message: 'Please input your Password!'
-          }
-        ]}
-      >
-        <SealInput.Password prefix={<LockOutlined />} label="Password" />
-      </Form.Item>
-      <Form.Item name="autoLogin">
-        <div style={{ paddingLeft: 10 }}>
-          <Checkbox>Remember me</Checkbox>
-        </div>
-      </Form.Item>
-      <Button htmlType="submit" type="primary" block>
-        Login
-      </Button>
-    </Form>
+        <Form.Item
+          name="password"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                { id: 'common.form.rule.input' },
+                { name: intl.formatMessage({ id: 'common.form.password' }) }
+              )
+            }
+          ]}
+        >
+          <SealInput.Password
+            prefix={<LockOutlined />}
+            label={intl.formatMessage({ id: 'common.form.password' })}
+          />
+        </Form.Item>
+        <Form.Item name="autoLogin">
+          <div style={{ paddingLeft: 10 }}>
+            <Checkbox>
+              {intl.formatMessage({ id: 'common.login.rember' })}
+            </Checkbox>
+          </div>
+        </Form.Item>
+        <Button htmlType="submit" type="primary" block>
+          {intl.formatMessage({ id: 'menu.login' })}
+        </Button>
+      </Form>
+    </div>
   );
 };
 

src/pages/playground/apis/index.ts

@@ -41,8 +41,8 @@ export const receiveChatStream = async (
   }
 
   let chunk = decoder.decode(value, { stream: true });
-  if (chunk.startsWith('data: ')) {
-    chunk = chunk.substring('data: '.length);
+  if (chunk.startsWith('data:')) {
+    chunk = chunk.substring('data:'.length);
   }
   const item = JSON.parse(chunk?.trim());
   callback(item);

src/pages/playground/components/ground-left.tsx

@@ -43,9 +43,6 @@ const MessageList: React.FC<MessageProps> = (props) => {
   const systemRef = useRef<any>(null);
   const contentRef = useRef<any>('');
 
-  const handleReceiveMessage = (data: any) => {
-    console.log('event source message: ', { data });
-  };
   const handleSystemMessageChange = (e: any) => {
     setSystemMessage(e.target.value);
   };

src/pages/profile/index.tsx

@@ -1,21 +1,29 @@
 import FormButtons from '@/components/form-buttons';
 import SealInput from '@/components/seal-form/seal-input';
+import { PasswordReg } from '@/config';
 import { INPUT_WIDTH } from '@/constants';
+import { updatePassword } from '@/pages/login/apis';
 import { PageContainer } from '@ant-design/pro-components';
-import { Form } from 'antd';
+import { useIntl } from '@umijs/max';
+import { Form, message } from 'antd';
 import { StrictMode } from 'react';
 
 interface ProfileProps {
-  name: string;
-  password: string;
-  originalPassword: string;
-  email: string;
+  username?: string;
+  new_password: string;
+  current_password: string;
 }
 const Profile: React.FC = () => {
   const [form] = Form.useForm();
+  const intl = useIntl();
 
-  const handleOnFinish = (values: any) => {
-    console.log('handleOnFinish', values);
+  const newpasswordValue = Form.useWatch('new_password', form);
+
+  const handleOnFinish = async (values: any) => {
+    try {
+      await updatePassword(values);
+      message.success(intl.formatMessage({ id: 'common.message.success' }));
+    } catch (error) {}
   };
 
   const handleOnFinishFailed = (errorInfo: any) => {
@@ -30,7 +38,7 @@ const Profile: React.FC = () => {
       <PageContainer
         ghost
         header={{
-          title: 'Profile'
+          title: intl.formatMessage({ id: 'users.form.updatepassword' })
         }}
         extra={[]}
       >
@@ -41,33 +49,60 @@ const Profile: React.FC = () => {
           onFinish={handleOnFinish}
           onFinishFailed={handleOnFinishFailed}
         >
-          <Form.Item<ProfileProps> name="name" rules={[{ required: true }]}>
+          {/* <Form.Item<ProfileProps>
+            name="username"
+            rules={[
+              {
+                required: true,
+                message: intl.formatMessage(
+                  { id: 'common.form.rule.input' },
+                  {
+                    name: intl.formatMessage({ id: 'common.form.username' })
+                  }
+                )
+              }
+            ]}
+          >
             <SealInput.Input
-              label="Name"
+              label={intl.formatMessage({ id: 'common.form.username' })}
               required
               style={{ width: INPUT_WIDTH.default }}
             ></SealInput.Input>
-          </Form.Item>
-          <Form.Item<ProfileProps> name="email" rules={[{ required: true }]}>
-            <SealInput.Input
-              label="Email"
-              required
-              style={{ width: INPUT_WIDTH.default }}
-            ></SealInput.Input>
-          </Form.Item>
+          </Form.Item> */}
           <Form.Item<ProfileProps>
-            name="originalPassword"
-            rules={[{ required: true }]}
+            name="current_password"
+            rules={[
+              {
+                required: true,
+                message: intl.formatMessage(
+                  { id: 'common.form.rule.input' },
+                  {
+                    name: intl.formatMessage({
+                      id: 'users.form.currentpassword'
+                    })
+                  }
+                )
+              }
+            ]}
           >
             <SealInput.Password
-              label="Original Password"
+              label={intl.formatMessage({ id: 'users.form.currentpassword' })}
               required
               style={{ width: INPUT_WIDTH.default }}
             ></SealInput.Password>
           </Form.Item>
-          <Form.Item<ProfileProps> name="password" rules={[{ required: true }]}>
+          <Form.Item<ProfileProps>
+            name="new_password"
+            rules={[
+              {
+                required: true,
+                pattern: PasswordReg,
+                message: intl.formatMessage({ id: 'users.form.rule.password' })
+              }
+            ]}
+          >
             <SealInput.Password
-              label="Password"
+              label={intl.formatMessage({ id: 'users.form.newpassword' })}
               required
               style={{ width: INPUT_WIDTH.default }}
             ></SealInput.Password>

src/pages/users/components/add-modal.tsx

@@ -3,8 +3,13 @@ import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
-import { SyncOutlined } from '@ant-design/icons';
-import { Form, Modal } from 'antd';
+import {
+  SyncOutlined,
+  UserOutlined,
+  UserSwitchOutlined
+} from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Form, Modal, Select } from 'antd';
 import { useEffect } from 'react';
 import { UserRoles, UserRolesOptions } from '../config';
 import { FormData, ListItem } from '../config/types';
@@ -26,6 +31,7 @@ const AddModal: React.FC<AddModalProps> = ({
   onCancel
 }) => {
   const [form] = Form.useForm();
+  const intl = useIntl();
   const suffix = (
     <SyncOutlined
       style={{
@@ -68,18 +74,67 @@ const AddModal: React.FC<AddModalProps> = ({
       }
     >
       <Form name="addUserForm" form={form} onFinish={onOk} preserve={false}>
-        <Form.Item<FormData> name="username" rules={[{ required: true }]}>
-          <SealInput.Input label="Name" required></SealInput.Input>
+        <Form.Item<FormData>
+          name="username"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                { id: 'common.form.rule.input' },
+                {
+                  name: intl.formatMessage({ id: 'common.table.name' })
+                }
+              )
+            }
+          ]}
+        >
+          <SealInput.Input
+            label={intl.formatMessage({ id: 'common.table.name' })}
+            required
+          ></SealInput.Input>
         </Form.Item>
         <Form.Item<FormData> name="full_name" rules={[{ required: false }]}>
-          <SealInput.Input label="FullName"></SealInput.Input>
+          <SealInput.Input
+            label={intl.formatMessage({ id: 'users.form.fullname' })}
+          ></SealInput.Input>
         </Form.Item>
         <Form.Item<FormData> name="is_admin" rules={[{ required: false }]}>
-          <SealSelect label="Role" options={UserRolesOptions}></SealSelect>
+          <SealSelect label={intl.formatMessage({ id: 'users.table.role' })}>
+            {UserRolesOptions.map((item) => {
+              return (
+                <Select.Option value={item.value} key={item.value}>
+                  {item.value === UserRoles.ADMIN ? (
+                    <UserSwitchOutlined className="size-16" />
+                  ) : (
+                    <UserOutlined className="size-16" />
+                  )}
+                  <span className="m-l-5">
+                    {intl.formatMessage({ id: item.label })}
+                  </span>
+                </Select.Option>
+              );
+            })}
+          </SealSelect>
         </Form.Item>
 
-        <Form.Item<FormData> name="password" rules={[{ required: true }]}>
-          <SealInput.Password label="Password" required></SealInput.Password>
+        <Form.Item<FormData>
+          name="password"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                { id: 'common.form.rule.input' },
+                {
+                  name: intl.formatMessage({ id: 'common.form.password' })
+                }
+              )
+            }
+          ]}
+        >
+          <SealInput.Password
+            label={intl.formatMessage({ id: 'common.form.password' })}
+            required
+          ></SealInput.Password>
         </Form.Item>
       </Form>
     </Modal>

src/pages/users/config/index.ts

@@ -4,6 +4,6 @@ export const UserRoles = {
 };
 
 export const UserRolesOptions = [
-  { label: '管理员', value: UserRoles.ADMIN },
-  { label: '普通用户', value: UserRoles.USER }
+  { label: 'users.form.admin', value: UserRoles.ADMIN },
+  { label: 'users.form.user', value: UserRoles.USER }
 ];

src/pages/users/index.tsx

@@ -13,6 +13,7 @@ import {
   UserSwitchOutlined
 } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
+import { useIntl } from '@umijs/max';
 import { Button, Input, Modal, Space, Table, Tooltip, message } from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
@@ -27,6 +28,7 @@ const Models: React.FC = () => {
   const { sortOrder, setSortOrder } = useTableSort({
     defaultSortOrder: 'descend'
   });
+  const intl = useIntl();
   const [total, setTotal] = useState(0);
   const [openAddModal, setOpenAddModal] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -93,11 +95,7 @@ const Models: React.FC = () => {
   const handleAddUser = () => {
     setOpenAddModal(true);
     setAction(PageAction.CREATE);
-    setTitle('Add User');
-  };
-
-  const handleClickMenu = (e: any) => {
-    console.log('click', e);
+    setTitle(intl.formatMessage({ id: 'users.form.create' }));
   };
 
   const handleModalOk = async (data: FormData) => {
@@ -119,7 +117,7 @@ const Models: React.FC = () => {
       }
       fetchData();
       setOpenAddModal(false);
-      message.success('successfully!');
+      message.success('');
     } catch (error) {
       setOpenAddModal(false);
     }
@@ -133,11 +131,14 @@ const Models: React.FC = () => {
   const handleDelete = (row: ListItem) => {
     Modal.confirm({
       title: '',
-      content: 'Are you sure you want to delete the selected users?',
+      content: intl.formatMessage(
+        { id: 'common.delete.confirm' },
+        { type: intl.formatMessage({ id: 'users.table.user' }) }
+      ),
       async onOk() {
         console.log('OK');
         await deleteUser(row.id);
-        message.success('successfully!');
+        message.success(intl.formatMessage({ id: 'common.message.success' }));
         fetchData();
       },
       onCancel() {
@@ -149,10 +150,13 @@ const Models: React.FC = () => {
   const handleDeleteBatch = () => {
     Modal.confirm({
       title: '',
-      content: 'Are you sure you want to delete the selected users?',
+      content: intl.formatMessage(
+        { id: 'common.delete.confirm' },
+        { type: intl.formatMessage({ id: 'users.table.user' }) }
+      ),
       async onOk() {
         await handleBatchRequest(rowSelection.selectedRowKeys, deleteUser);
-        message.success('successfully!');
+        message.success(intl.formatMessage({ id: 'common.message.success' }));
         fetchData();
       },
       onCancel() {
@@ -165,7 +169,7 @@ const Models: React.FC = () => {
     setCurrentData(row);
     setOpenAddModal(true);
     setAction(PageAction.EDIT);
-    setTitle('Edit User');
+    setTitle(intl.formatMessage({ id: 'users.form.edit' }));
   };
 
   useEffect(() => {
@@ -177,7 +181,7 @@ const Models: React.FC = () => {
       <PageContainer
         ghost
         header={{
-          title: 'Users'
+          title: intl.formatMessage({ id: 'users.title' })
         }}
         extra={[]}
       >
@@ -186,7 +190,7 @@ const Models: React.FC = () => {
           left={
             <Space>
               <Input
-                placeholder="名称查询"
+                placeholder={intl.formatMessage({ id: 'common.filter.name' })}
                 style={{ width: 300 }}
                 onChange={handleNameChange}
               ></Input>
@@ -205,7 +209,7 @@ const Models: React.FC = () => {
                 type="primary"
                 onClick={handleAddUser}
               >
-                Add User
+                {intl.formatMessage({ id: 'users.button.create' })}
               </Button>
               <Button
                 icon={<DeleteOutlined />}
@@ -213,7 +217,7 @@ const Models: React.FC = () => {
                 onClick={handleDeleteBatch}
                 disabled={!rowSelection.selectedRowKeys.length}
               >
-                Delete
+                {intl.formatMessage({ id: 'common.button.delete' })}
               </Button>
             </Space>
           }
@@ -234,9 +238,14 @@ const Models: React.FC = () => {
             onChange: handlePageChange
           }}
         >
-          <Column title="Name" dataIndex="username" key="name" width={200} />
           <Column
-            title="Create Time"
+            title={intl.formatMessage({ id: 'users.table.username' })}
+            dataIndex="username"
+            key="name"
+            width={200}
+          />
+          <Column
+            title={intl.formatMessage({ id: 'common.table.createTime' })}
             dataIndex="created_at"
             key="createTime"
             defaultSortOrder="descend"
@@ -248,25 +257,29 @@ const Models: React.FC = () => {
             }}
           />
           <Column
-            title="Role"
+            title={intl.formatMessage({ id: 'users.table.role' })}
             dataIndex="role"
             key="role"
             render={(text, record: ListItem) => {
               return record.is_admin ? (
                 <>
                   <UserSwitchOutlined className="size-16" />
-                  <span className="m-l-5">管理员</span>
+                  <span className="m-l-5">
+                    {intl.formatMessage({ id: 'users.form.admin' })}
+                  </span>
                 </>
               ) : (
                 <>
                   <UserOutlined className="size-16" />
-                  <span className="m-l-5">普通用户</span>
+                  <span className="m-l-5">
+                    {intl.formatMessage({ id: 'users.form.user' })}
+                  </span>
                 </>
               );
             }}
           />
           <Column
-            title="Update Time"
+            title={intl.formatMessage({ id: 'common.table.updateTime' })}
             dataIndex="updated_at"
             key="updateTime"
             defaultSortOrder="descend"
@@ -278,13 +291,15 @@ const Models: React.FC = () => {
             }}
           />
           <Column
-            title="Operation"
+            title={intl.formatMessage({ id: 'common.table.operation' })}
             key="operation"
             width={200}
             render={(text, record: ListItem) => {
               return (
                 <Space size={20}>
-                  <Tooltip title="编辑">
+                  <Tooltip
+                    title={intl.formatMessage({ id: 'common.button.edit' })}
+                  >
                     <Button
                       size="small"
                       type="primary"
@@ -292,7 +307,9 @@ const Models: React.FC = () => {
                       icon={<EditOutlined></EditOutlined>}
                     ></Button>
                   </Tooltip>
-                  <Tooltip title="删除">
+                  <Tooltip
+                    title={intl.formatMessage({ id: 'common.button.delete' })}
+                  >
                     <Button
                       size="small"
                       type="primary"