feat: submit new password to backend and submit user information and add Form to UserSettingProfile

web/src/hooks/userSettingHook.ts

@@ -74,3 +74,16 @@ export const useLogout = () => {
 
   return logout;
 };
+
+export const useSaveSetting = () => {
+  const dispatch = useDispatch();
+
+  const saveSetting = useCallback(
+    (userInfo: { new_password: string } | IUserInfo): number => {
+      return dispatch<any>({ type: 'settingModel/setting', payload: userInfo });
+    },
+    [dispatch],
+  );
+
+  return saveSetting;
+};

web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx

@@ -26,6 +26,11 @@ import { useDispatch, useSelector } from 'umi';
 import { useFetchLlmList, useSelectLlmOptions } from '@/hooks/llmHooks';
 import { useOneNamespaceEffectsLoading } from '@/hooks/storeHooks';
 import { IKnowledge } from '@/interfaces/database/knowledge';
+import {
+  getBase64FromUploadFileList,
+  getUploadFileListFromBase64,
+  normFile,
+} from '@/utils/fileUtil';
 import { PlusOutlined } from '@ant-design/icons';
 import { LlmModelType } from '../../constant';
 import styles from './index.less';
@@ -43,26 +48,12 @@ const Configuration = () => {
     (state: any) => state.kSModel.knowledgeDetails,
   );
 
-  const normFile = (e: any) => {
-    if (Array.isArray(e)) {
-      return e;
-    }
-    return e?.fileList;
-  };
-
   const parserList = useSelectParserList();
 
   const embeddingModelOptions = useSelectLlmOptions();
 
   const onFinish = async (values: any) => {
-    console.info(values);
-    const fileList = values.avatar;
-    let avatar;
-
-    if (Array.isArray(fileList) && fileList.length > 0) {
-      avatar = fileList[0].thumbUrl;
-    }
-
+    const avatar = getBase64FromUploadFileList(values.avatar);
     dispatch({
       type: 'kSModel/updateKb',
       payload: {
@@ -78,12 +69,10 @@ const Configuration = () => {
   };
 
   useEffect(() => {
-    const avatar = knowledgeDetails.avatar;
-    let fileList: UploadFile[] = [];
+    const fileList: UploadFile[] = getUploadFileListFromBase64(
+      knowledgeDetails.avatar,
+    );
 
-    if (avatar) {
-      fileList = [{ uid: '1', name: 'file', thumbUrl: avatar, status: 'done' }];
-    }
     form.setFieldsValue({
       ...pick(knowledgeDetails, [
         'description',

web/src/pages/setting/model.ts

@@ -52,7 +52,7 @@ const model: DvaModel<SettingModelState> = {
       const { data } = yield call(userService.setting, payload);
       const { retcode } = data;
       if (retcode === 0) {
-        message.success('密码修改成功！');
+        message.success('Modified!');
         yield put({
           type: 'updateState',
           payload: {
@@ -61,7 +61,6 @@ const model: DvaModel<SettingModelState> = {
         });
         yield put({
           type: 'getUserInfo',
-          payload: {},
         });
       }
     },

web/src/pages/user-setting/components/setting-title/index.tsx

@@ -0,0 +1,19 @@
+import { Typography } from 'antd';
+
+const { Title, Paragraph } = Typography;
+
+interface IProps {
+  title: string;
+  description: string;
+}
+
+const SettingTitle = ({ title, description }: IProps) => {
+  return (
+    <div>
+      <Title level={5}>{title}</Title>
+      <Paragraph>{description}</Paragraph>
+    </div>
+  );
+};
+
+export default SettingTitle;

web/src/pages/user-setting/hooks.ts

@@ -0,0 +1,23 @@
+import { useOneNamespaceEffectsLoading } from '@/hooks/storeHooks';
+import { Form } from 'antd';
+import { useEffect, useState } from 'react';
+
+export const useValidateSubmittable = () => {
+  const [form] = Form.useForm();
+  const [submittable, setSubmittable] = useState<boolean>(false);
+
+  // Watch all values
+  const values = Form.useWatch([], form);
+
+  useEffect(() => {
+    form
+      .validateFields({ validateOnly: true })
+      .then(() => setSubmittable(true))
+      .catch(() => setSubmittable(false));
+  }, [form, values]);
+
+  return { submittable, form };
+};
+
+export const useGetUserInfoLoading = () =>
+  useOneNamespaceEffectsLoading('settingModel', ['setting']);

web/src/pages/user-setting/index.less

@@ -0,0 +1,12 @@
+.settingWrapper {
+  width: 100%;
+
+  .outletWrapper {
+    padding: 32px 32px 0;
+  }
+
+  .itemDescription {
+    padding: 10px 0;
+    margin: 0;
+  }
+}

web/src/pages/user-setting/index.tsx

@@ -2,11 +2,15 @@ import { Flex } from 'antd';
 import { Outlet } from 'umi';
 import SideBar from './sidebar';
 
+import styles from './index.less';
+
 const UserSetting = () => {
   return (
-    <Flex>
+    <Flex className={styles.settingWrapper}>
       <SideBar></SideBar>
-      <Outlet></Outlet>
+      <Flex flex={1} className={styles.outletWrapper}>
+        <Outlet></Outlet>
+      </Flex>
     </Flex>
   );
 };

web/src/pages/user-setting/setting-password/index.less

@@ -0,0 +1,3 @@
+.passwordWrapper {
+  width: 100%;
+}

web/src/pages/user-setting/setting-password/index.tsx

@@ -1,5 +1,139 @@
+import { useOneNamespaceEffectsLoading } from '@/hooks/storeHooks';
+import { useSaveSetting } from '@/hooks/userSettingHook';
+import { rsaPsw } from '@/utils';
+import { Button, Divider, Form, Input, Space } from 'antd';
+import SettingTitle from '../components/setting-title';
+import { useValidateSubmittable } from '../hooks';
+
+import parentStyles from '../index.less';
+import styles from './index.less';
+
+type FieldType = {
+  password?: string;
+  new_password?: string;
+  confirm_password?: string;
+};
+
+const tailLayout = {
+  wrapperCol: { offset: 20, span: 4 },
+};
+
 const UserSettingPassword = () => {
-  return <div>UserSettingPassword</div>;
+  const loading = useOneNamespaceEffectsLoading('settingModel', ['setting']);
+  const { form, submittable } = useValidateSubmittable();
+  const saveSetting = useSaveSetting();
+
+  const onFinish = (values: any) => {
+    const password = rsaPsw(values.password) as string;
+    const new_password = rsaPsw(values.new_password) as string;
+
+    saveSetting({ password, new_password });
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log('Failed:', errorInfo);
+  };
+
+  return (
+    <section className={styles.passwordWrapper}>
+      <SettingTitle
+        title="Password"
+        description="Please enter your current password to change your password."
+      ></SettingTitle>
+      <Divider />
+      <Form
+        colon={false}
+        name="basic"
+        labelAlign={'left'}
+        labelCol={{ span: 8 }}
+        wrapperCol={{ span: 16 }}
+        style={{ width: '100%' }}
+        initialValues={{ remember: true }}
+        onFinish={onFinish}
+        onFinishFailed={onFinishFailed}
+        form={form}
+        autoComplete="off"
+        // requiredMark={'optional'}
+      >
+        <Form.Item<FieldType>
+          label="Current password"
+          name="password"
+          rules={[
+            {
+              required: true,
+              message: 'Please input your password!',
+              whitespace: true,
+            },
+          ]}
+        >
+          <Input.Password />
+        </Form.Item>
+        <Divider />
+        <Form.Item label="New password" required>
+          <Form.Item<FieldType>
+            noStyle
+            name="new_password"
+            rules={[
+              {
+                required: true,
+                message: 'Please input your password!',
+                whitespace: true,
+              },
+            ]}
+          >
+            <Input.Password />
+          </Form.Item>
+          <p className={parentStyles.itemDescription}>
+            Your new password must be more than 8 characters.
+          </p>
+        </Form.Item>
+        <Divider />
+        <Form.Item<FieldType>
+          label="Confirm new password"
+          name="confirm_password"
+          dependencies={['new_password']}
+          rules={[
+            {
+              required: true,
+              message: 'Please confirm your password!',
+              whitespace: true,
+            },
+            ({ getFieldValue }) => ({
+              validator(_, value) {
+                if (!value || getFieldValue('new_password') === value) {
+                  return Promise.resolve();
+                }
+                return Promise.reject(
+                  new Error('The new password that you entered do not match!'),
+                );
+              },
+            }),
+          ]}
+        >
+          <Input.Password />
+        </Form.Item>
+        <Divider />
+        <Form.Item
+          {...tailLayout}
+          shouldUpdate={(prevValues, curValues) =>
+            prevValues.additional !== curValues.additional
+          }
+        >
+          <Space>
+            <Button htmlType="button">Cancel</Button>
+            <Button
+              type="primary"
+              htmlType="submit"
+              disabled={!submittable}
+              loading={loading}
+            >
+              Save
+            </Button>
+          </Space>
+        </Form.Item>
+      </Form>
+    </section>
+  );
 };
 
 export default UserSettingPassword;

web/src/pages/user-setting/setting-profile/index.less

@@ -0,0 +1,7 @@
+.profileWrapper {
+  width: 100%;
+  .emailDescription {
+    padding: 10px 0;
+    margin: 0;
+  }
+}