asb_cloud_front/src/components/ChangePassword.tsx

99 lines
3.3 KiB
TypeScript
Raw Normal View History

import { memo, useState } from 'react'
import { useForm } from 'antd/lib/form/Form'
import { Form, Input, Modal, FormProps } from 'antd'
import { AuthService, UserDto } from '@api'
import { getUserId, getUserLogin } from '@utils/storage'
import { passwordRules, createPasswordRules } from '@utils/validationRules'
import LoaderPortal from './LoaderPortal'
import { invokeWebApiWrapperAsync } from './factory'
import { UserView } from './views'
const formLayout: FormProps = { labelCol: { span: 11 }, wrapperCol: { span: 16 } }
export type ChangePasswordProps = {
user?: UserDto
visible?: boolean
onCancel?: () => void
onOk?: () => void
}
const fieldRules = [...passwordRules, ...createPasswordRules]
export const ChangePassword = memo<ChangePasswordProps>(({ user, visible, onCancel, onOk }) => {
const [showLoader, setShowLoader] = useState<boolean>(false)
const [password, setPassword] = useState<string>('')
const [isDisabled, setIsDisabled] = useState(true)
const [form] = useForm()
const onFormChange = async () => await form.validateFields()
.then(() => setIsDisabled(false))
.catch(() => setIsDisabled(true))
const onModalCancel = () => {
form.resetFields()
onCancel?.()
}
const onFormFinish = () => invokeWebApiWrapperAsync(
async() => {
await AuthService.changePassword(user?.id ?? getUserId() ?? -1, `"${password}"`)
onOk?.()
},
setShowLoader,
`Не удалось сменить пароль пользователя ${getUserLogin()}`
)
return (
<Modal
centered
title={(
<>
Сменить пароль
{user && <>&nbsp;(<UserView user={user} />)</>}
</>
)}
visible={visible}
onCancel={onModalCancel}
onOk={() => form.submit()}
okText={'Сохранить'}
okButtonProps={{
disabled: isDisabled
}}
>
<LoaderPortal show={showLoader}>
<Form
{...formLayout}
form={form}
name={'change-password'}
onFinish={onFormFinish}
onChange={onFormChange}
>
<Form.Item
label={'Новый пароль'}
name={'new-password'}
required={true}
rules={fieldRules}
>
<Input.Password onChange={(e) => setPassword(e.target.value)} value={password} />
</Form.Item>
<Form.Item
label={'Подтверждение пароля'}
name={'confirm-password'}
required={true}
rules={[() => ({ validator(_, value: string) {
if (value !== password)
return Promise.reject('Пароли не совпадают!')
return Promise.resolve()
}})]}
>
<Input.Password />
</Form.Item>
</Form>
</LoaderPortal>
</Modal>
)
})