79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
import { Modal, Form, Button, Toast } from '@douyinfe/semi-ui';
|
|
import { useAuthStore } from '../../stores/useAuthStore';
|
|
import { useUIStore } from '../../stores/useUIStore';
|
|
import authService from '../../services/auth.service';
|
|
|
|
export default function PasswordModal() {
|
|
const { updatePasswordModalVisible, setUpdatePasswordModalVisible } = useUIStore();
|
|
const user = useAuthStore((s) => s.user);
|
|
|
|
const handleSubmit = (values: {
|
|
username: string;
|
|
oldpassword: string;
|
|
newpassword: string;
|
|
}) => {
|
|
authService
|
|
.updatePassword(values.username, values.oldpassword, values.newpassword)
|
|
.then(
|
|
() => {
|
|
Toast.success('密码修改成功');
|
|
setUpdatePasswordModalVisible(false);
|
|
},
|
|
(error: unknown) => {
|
|
const msg =
|
|
error instanceof Error ? error.message : '修改失败，请重试';
|
|
Toast.error(msg);
|
|
},
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
title="修改密码"
|
|
visible={updatePasswordModalVisible}
|
|
size="large"
|
|
footer={null}
|
|
onCancel={() => setUpdatePasswordModalVisible(false)}
|
|
closeOnEsc
|
|
>
|
|
<div style={{ padding: 12, border: '1px solid var(--semi-color-border)', margin: 12 }}>
|
|
<Form
|
|
onSubmit={(values) =>
|
|
handleSubmit(
|
|
values as { username: string; oldpassword: string; newpassword: string },
|
|
)
|
|
}
|
|
style={{ textAlign: 'center', width: 400 }}
|
|
initValues={{ username: user?.username ?? '' }}
|
|
>
|
|
<Form.Input
|
|
field="username"
|
|
label="用户名"
|
|
style={{ width: '100%' }}
|
|
placeholder="请输入用户名"
|
|
/>
|
|
<Form.Input
|
|
mode="password"
|
|
field="oldpassword"
|
|
label="旧密码"
|
|
style={{ width: '100%' }}
|
|
placeholder="请输入旧密码"
|
|
/>
|
|
<Form.Input
|
|
mode="password"
|
|
field="newpassword"
|
|
label="新密码"
|
|
style={{ width: '100%' }}
|
|
placeholder="请输入新密码"
|
|
/>
|
|
<div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 16 }}>
|
|
<Button htmlType="submit" type="tertiary">
|
|
确认修改
|
|
</Button>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|