135 lines
4.0 KiB
TypeScript
135 lines
4.0 KiB
TypeScript
import { initialPasswordAtom, userAtom } from '@/atoms/user';
|
|
import SealInput from '@/components/seal-form/seal-input';
|
|
import { PasswordReg } from '@/config';
|
|
import { CRYPT_TEXT } from '@/utils/localstore/index';
|
|
import { GlobalOutlined, LockOutlined } from '@ant-design/icons';
|
|
import { SelectLang, useIntl } from '@umijs/max';
|
|
import { Button, Form, message } from 'antd';
|
|
import CryptoJS from 'crypto-js';
|
|
import { useAtom } from 'jotai';
|
|
import { updatePassword } from '../apis';
|
|
import { checkDefaultPage } from '../utils';
|
|
|
|
const PasswordForm: React.FC = () => {
|
|
const intl = useIntl();
|
|
const [form] = Form.useForm();
|
|
|
|
const [userInfo, setUserInfo] = useAtom(userAtom);
|
|
const [initialPassword, setInitialPassword] = useAtom(initialPasswordAtom);
|
|
const gotoDefaultPage = async (userInfo: any) => {
|
|
checkDefaultPage(userInfo, false);
|
|
};
|
|
|
|
const decryptPassword = (password: string) => {
|
|
const bytes = CryptoJS.AES?.decrypt?.(password, CRYPT_TEXT);
|
|
const res = bytes.toString(CryptoJS.enc.Utf8);
|
|
return res;
|
|
};
|
|
|
|
const handleSubmit = async (values: any) => {
|
|
try {
|
|
await updatePassword({
|
|
new_password: values.new_password,
|
|
current_password: decryptPassword(initialPassword)
|
|
});
|
|
|
|
await setUserInfo({
|
|
...userInfo,
|
|
require_password_change: false
|
|
});
|
|
setInitialPassword('');
|
|
gotoDefaultPage(userInfo);
|
|
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
|
} catch (error) {
|
|
console.log('error====', error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<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' }}
|
|
onFinish={handleSubmit}
|
|
>
|
|
<h2 className="justify-center m-b-20 flex-column flex-center">
|
|
<span>
|
|
{' '}
|
|
{intl.formatMessage({ id: 'users.password.modify.title' })}
|
|
</span>
|
|
<span
|
|
style={{
|
|
padding: '6px 0',
|
|
fontSize: 'var(--font-size-base)',
|
|
fontWeight: 'var(--font-weight-normal)',
|
|
color: 'var(--ant-color-text-tertiary)'
|
|
}}
|
|
>
|
|
{intl.formatMessage({ id: 'users.password.modify.description' })}
|
|
</span>
|
|
</h2>
|
|
<Form.Item
|
|
name="new_password"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
pattern: PasswordReg,
|
|
message: intl.formatMessage({
|
|
id: 'users.form.rule.password'
|
|
})
|
|
}
|
|
]}
|
|
>
|
|
<SealInput.Password
|
|
prefix={<LockOutlined />}
|
|
label={intl.formatMessage({ id: 'users.form.newpassword' })}
|
|
/>
|
|
</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
|
|
prefix={<LockOutlined />}
|
|
label={intl.formatMessage({ id: 'users.password.confirm' })}
|
|
/>
|
|
</Form.Item>
|
|
|
|
<Button
|
|
htmlType="submit"
|
|
type="primary"
|
|
block
|
|
style={{ height: '48px', fontSize: '14px', marginTop: 10 }}
|
|
>
|
|
{intl.formatMessage({ id: 'common.button.submit' })}
|
|
</Button>
|
|
</Form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PasswordForm;
|