153 lines
4.5 KiB
TypeScript
153 lines
4.5 KiB
TypeScript
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 { useIntl } from '@umijs/max';
|
|
import { Form, message } from 'antd';
|
|
import { StrictMode } from 'react';
|
|
|
|
interface ProfileProps {
|
|
username?: string;
|
|
new_password: string;
|
|
current_password: string;
|
|
}
|
|
const Profile: React.FC = () => {
|
|
const [form] = Form.useForm();
|
|
const intl = useIntl();
|
|
|
|
const handleOnFinish = async (values: any) => {
|
|
try {
|
|
await updatePassword({
|
|
new_password: values.new_password,
|
|
current_password: values.current_password
|
|
});
|
|
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
|
} catch (error) {}
|
|
};
|
|
|
|
const handleOnFinishFailed = (errorInfo: any) => {
|
|
console.log('handleOnFinishFailed', errorInfo);
|
|
};
|
|
const handleCancel = () => {
|
|
form.resetFields();
|
|
};
|
|
|
|
return (
|
|
<StrictMode>
|
|
<PageContainer
|
|
ghost
|
|
header={{
|
|
title: intl.formatMessage({ id: 'users.form.updatepassword' })
|
|
}}
|
|
extra={[]}
|
|
>
|
|
<Form
|
|
style={{ width: '524px' }}
|
|
name="profileForm"
|
|
form={form}
|
|
onFinish={handleOnFinish}
|
|
onFinishFailed={handleOnFinishFailed}
|
|
>
|
|
{/* <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={intl.formatMessage({ id: 'common.form.username' })}
|
|
required
|
|
style={{ width: INPUT_WIDTH.default }}
|
|
></SealInput.Input>
|
|
</Form.Item> */}
|
|
<Form.Item<ProfileProps>
|
|
name="current_password"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: intl.formatMessage(
|
|
{ id: 'common.form.rule.input' },
|
|
{
|
|
name: intl.formatMessage({
|
|
id: 'users.form.currentpassword'
|
|
})
|
|
}
|
|
)
|
|
}
|
|
]}
|
|
>
|
|
<SealInput.Password
|
|
label={intl.formatMessage({ id: 'users.form.currentpassword' })}
|
|
required
|
|
style={{ width: INPUT_WIDTH.default }}
|
|
></SealInput.Password>
|
|
</Form.Item>
|
|
<Form.Item<ProfileProps>
|
|
name="new_password"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
pattern: PasswordReg,
|
|
message: intl.formatMessage({
|
|
id: 'users.form.rule.password'
|
|
})
|
|
}
|
|
]}
|
|
>
|
|
<SealInput.Password
|
|
label={intl.formatMessage({ id: 'users.form.newpassword' })}
|
|
required
|
|
style={{ width: INPUT_WIDTH.default }}
|
|
></SealInput.Password>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="confirm_password"
|
|
dependencies={['new_password']}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: intl.formatMessage({
|
|
id: 'users.password.confirm.empty'
|
|
})
|
|
},
|
|
({ getFieldValue }) => ({
|
|
validator(_, value) {
|
|
if (!value || getFieldValue('new_password') === value) {
|
|
return Promise.resolve();
|
|
}
|
|
return Promise.reject(
|
|
new Error(
|
|
intl.formatMessage({ id: 'users.password.confirm.error' })
|
|
)
|
|
);
|
|
}
|
|
})
|
|
]}
|
|
>
|
|
<SealInput.Password
|
|
label={intl.formatMessage({ id: 'users.password.confirm' })}
|
|
/>
|
|
</Form.Item>
|
|
<FormButtons
|
|
htmlType="submit"
|
|
onCancel={handleCancel}
|
|
showCancel={false}
|
|
></FormButtons>
|
|
</Form>
|
|
</PageContainer>
|
|
</StrictMode>
|
|
);
|
|
};
|
|
|
|
export default Profile;
|