133 lines
3.5 KiB
TypeScript
133 lines
3.5 KiB
TypeScript
import { PasswordReg } from '@/config';
|
|
import { INPUT_WIDTH } from '@/constants';
|
|
import useSubmitLock from '@/hooks/use-submit-lock';
|
|
import { updatePassword } from '@/pages/login/apis';
|
|
import { Input as CInput, FormButtons } from '@gpustack/core-ui';
|
|
import { useIntl } from '@umijs/max';
|
|
import { Form, message } from 'antd';
|
|
import React from 'react';
|
|
|
|
interface FormData {
|
|
new_password: string;
|
|
current_password: string;
|
|
confirm_password?: string;
|
|
}
|
|
|
|
interface ModifyPasswordFormProps {
|
|
onCancel: () => void;
|
|
onSuccess?: () => void;
|
|
}
|
|
|
|
const ModifyPasswordForm: React.FC<ModifyPasswordFormProps> = ({
|
|
onCancel,
|
|
onSuccess
|
|
}) => {
|
|
const [form] = Form.useForm();
|
|
const intl = useIntl();
|
|
const { guard, run, release } = useSubmitLock();
|
|
|
|
const handleSubmit = () => {
|
|
guard(() => form.submit());
|
|
};
|
|
|
|
const onFinish = async (values: FormData) => {
|
|
await run(async () => {
|
|
await updatePassword({
|
|
new_password: values.new_password,
|
|
current_password: values.current_password
|
|
});
|
|
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
|
onSuccess?.();
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Form
|
|
name="modifyPasswordForm"
|
|
form={form}
|
|
onFinish={onFinish}
|
|
onFinishFailed={release}
|
|
preserve={false}
|
|
>
|
|
<Form.Item<FormData>
|
|
name="current_password"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: intl.formatMessage(
|
|
{ id: 'common.form.rule.input' },
|
|
{
|
|
name: intl.formatMessage({
|
|
id: 'users.form.currentpassword'
|
|
})
|
|
}
|
|
)
|
|
}
|
|
]}
|
|
>
|
|
<CInput.Password
|
|
autoComplete="current-password"
|
|
label={intl.formatMessage({ id: 'users.form.currentpassword' })}
|
|
required
|
|
style={{ width: INPUT_WIDTH.default }}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item<FormData>
|
|
name="new_password"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
pattern: PasswordReg,
|
|
message: intl.formatMessage({
|
|
id: 'users.form.rule.password'
|
|
})
|
|
}
|
|
]}
|
|
>
|
|
<CInput.Password
|
|
autoComplete="new-password"
|
|
label={intl.formatMessage({ id: 'users.form.newpassword' })}
|
|
required
|
|
style={{ width: INPUT_WIDTH.default }}
|
|
/>
|
|
</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' })
|
|
)
|
|
);
|
|
}
|
|
})
|
|
]}
|
|
>
|
|
<CInput.Password
|
|
required
|
|
autoComplete="new-password"
|
|
style={{ width: INPUT_WIDTH.default }}
|
|
label={intl.formatMessage({ id: 'users.password.confirm' })}
|
|
/>
|
|
</Form.Item>
|
|
<FormButtons htmlType="submit" onCancel={onCancel} showCancel />
|
|
</Form>
|
|
);
|
|
};
|
|
|
|
ModifyPasswordForm.displayName = 'ModifyPasswordForm';
|
|
|
|
export default ModifyPasswordForm;
|