feat: submit new password to backend and submit user information and add Form to UserSettingProfile (#114)
* feat: add Form to UserSettingProfile * feat: submit user information * feat: submit new password to backend
This commit is contained in:
balibabu
@@ -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;
|
||||
23
web/src/pages/user-setting/hooks.ts
Normal file
23
web/src/pages/user-setting/hooks.ts
Normal file
@@ -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']);
|
||||
12
web/src/pages/user-setting/index.less
Normal file
12
web/src/pages/user-setting/index.less
Normal file
@@ -0,0 +1,12 @@
|
||||
.settingWrapper {
|
||||
width: 100%;
|
||||
|
||||
.outletWrapper {
|
||||
padding: 32px 32px 0;
|
||||
}
|
||||
|
||||
.itemDescription {
|
||||
padding: 10px 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
3
web/src/pages/user-setting/setting-password/index.less
Normal file
3
web/src/pages/user-setting/setting-password/index.less
Normal file
@@ -0,0 +1,3 @@
|
||||
.passwordWrapper {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
7
web/src/pages/user-setting/setting-profile/index.less
Normal file
7
web/src/pages/user-setting/setting-profile/index.less
Normal file
@@ -0,0 +1,7 @@
|
||||
.profileWrapper {
|
||||
width: 100%;
|
||||
.emailDescription {
|
||||
padding: 10px 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,194 @@
|
||||
import { useSaveSetting, useSelectUserInfo } from '@/hooks/userSettingHook';
|
||||
import {
|
||||
getBase64FromUploadFileList,
|
||||
getUploadFileListFromBase64,
|
||||
normFile,
|
||||
} from '@/utils/fileUtil';
|
||||
import { PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons';
|
||||
import {
|
||||
Button,
|
||||
Divider,
|
||||
Form,
|
||||
Input,
|
||||
Select,
|
||||
Space,
|
||||
Tooltip,
|
||||
Upload,
|
||||
UploadFile,
|
||||
} from 'antd';
|
||||
import { useEffect } from 'react';
|
||||
import SettingTitle from '../components/setting-title';
|
||||
import { TimezoneList } from '../constants';
|
||||
import { useGetUserInfoLoading, useValidateSubmittable } from '../hooks';
|
||||
|
||||
import parentStyles from '../index.less';
|
||||
import styles from './index.less';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
type FieldType = {
|
||||
nickname?: string;
|
||||
language?: string;
|
||||
email?: string;
|
||||
color_schema?: string;
|
||||
timezone?: string;
|
||||
avatar?: string;
|
||||
};
|
||||
|
||||
const tailLayout = {
|
||||
wrapperCol: { offset: 20, span: 4 },
|
||||
};
|
||||
|
||||
const UserSettingProfile = () => {
|
||||
return <div>UserSettingProfile</div>;
|
||||
const userInfo = useSelectUserInfo();
|
||||
const saveSetting = useSaveSetting();
|
||||
const loading = useGetUserInfoLoading();
|
||||
const { form, submittable } = useValidateSubmittable();
|
||||
|
||||
const onFinish = (values: any) => {
|
||||
const avatar = getBase64FromUploadFileList(values.avatar);
|
||||
saveSetting({ ...values, avatar });
|
||||
};
|
||||
|
||||
const onFinishFailed = (errorInfo: any) => {
|
||||
console.log('Failed:', errorInfo);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fileList: UploadFile[] = getUploadFileListFromBase64(userInfo.avatar);
|
||||
form.setFieldsValue({ ...userInfo, avatar: fileList });
|
||||
}, [form, userInfo]);
|
||||
|
||||
return (
|
||||
<section className={styles.profileWrapper}>
|
||||
<SettingTitle
|
||||
title="Profile"
|
||||
description="Update your photo and personal details here."
|
||||
></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"
|
||||
>
|
||||
<Form.Item<FieldType>
|
||||
label="Username"
|
||||
name="nickname"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please input your username!',
|
||||
whitespace: true,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Divider />
|
||||
<Form.Item<FieldType>
|
||||
label={
|
||||
<div>
|
||||
<Space>
|
||||
Your photo
|
||||
<Tooltip title="prompt text">
|
||||
<QuestionCircleOutlined />
|
||||
</Tooltip>
|
||||
</Space>
|
||||
<div>This will be displayed on your profile.</div>
|
||||
</div>
|
||||
}
|
||||
name="avatar"
|
||||
valuePropName="fileList"
|
||||
getValueFromEvent={normFile}
|
||||
>
|
||||
<Upload
|
||||
listType="picture-card"
|
||||
maxCount={1}
|
||||
showUploadList={{ showPreviewIcon: false, showRemoveIcon: false }}
|
||||
>
|
||||
<button style={{ border: 0, background: 'none' }} type="button">
|
||||
<PlusOutlined />
|
||||
<div style={{ marginTop: 8 }}>Upload</div>
|
||||
</button>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
<Divider />
|
||||
<Form.Item<FieldType>
|
||||
label="Color schema"
|
||||
name="color_schema"
|
||||
rules={[
|
||||
{ required: true, message: 'Please select your color schema!' },
|
||||
]}
|
||||
>
|
||||
<Select placeholder="select your color schema">
|
||||
<Option value="Bright">Bright</Option>
|
||||
<Option value="Dark">Dark</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Divider />
|
||||
<Form.Item<FieldType>
|
||||
label="Language"
|
||||
name="language"
|
||||
rules={[{ required: true, message: 'Please input your language!' }]}
|
||||
>
|
||||
<Select placeholder="select your language">
|
||||
<Option value="English">English</Option>
|
||||
<Option value="Chinese">Chinese</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Divider />
|
||||
<Form.Item<FieldType>
|
||||
label="Timezone"
|
||||
name="timezone"
|
||||
rules={[{ required: true, message: 'Please input your timezone!' }]}
|
||||
>
|
||||
<Select placeholder="select your timezone" showSearch>
|
||||
{TimezoneList.map((x) => (
|
||||
<Option value={x} key={x}>
|
||||
{x}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Divider />
|
||||
<Form.Item label="Email address">
|
||||
<Form.Item<FieldType> name="email" noStyle>
|
||||
<Input disabled />
|
||||
</Form.Item>
|
||||
<p className={parentStyles.itemDescription}>
|
||||
Once registered, an account cannot be changed and can only be
|
||||
cancelled.
|
||||
</p>
|
||||
</Form.Item>
|
||||
<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 UserSettingProfile;
|
||||
|
||||
3
web/src/pages/user-setting/sidebar/index.less
Normal file
3
web/src/pages/user-setting/sidebar/index.less
Normal file
@@ -0,0 +1,3 @@
|
||||
.sideBarWrapper {
|
||||
padding-top: 32px;
|
||||
}
|
||||
@@ -10,6 +10,8 @@ import {
|
||||
UserSettingRouteMap,
|
||||
} from '../constants';
|
||||
|
||||
import styles from './index.less';
|
||||
|
||||
type MenuItem = Required<MenuProps>['items'][number];
|
||||
|
||||
function getItem(
|
||||
@@ -45,12 +47,15 @@ const SideBar = () => {
|
||||
}, [pathName]);
|
||||
|
||||
return (
|
||||
<Menu
|
||||
selectedKeys={selectedKeys}
|
||||
mode="inline"
|
||||
items={items}
|
||||
onClick={handleMenuClick}
|
||||
/>
|
||||
<section className={styles.sideBarWrapper}>
|
||||
<Menu
|
||||
selectedKeys={selectedKeys}
|
||||
mode="inline"
|
||||
items={items}
|
||||
onClick={handleMenuClick}
|
||||
style={{ width: 312 }}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user