diff --git a/src/components/ChangePassword.tsx b/src/components/ChangePassword.tsx index fb2ef0e..92725ab 100755 --- a/src/components/ChangePassword.tsx +++ b/src/components/ChangePassword.tsx @@ -1,5 +1,5 @@ -import { memo, useState } from 'react' -import { useForm } from 'antd/lib/form/Form' +import { memo, useCallback, useMemo, useState } from 'react' +import { Rule } from 'antd/lib/form' import { Form, Input, Modal, FormProps } from 'antd' import { AuthService, UserDto } from '@api' @@ -21,12 +21,19 @@ export type ChangePasswordProps = { const fieldRules = [...passwordRules, ...createPasswordRules] +const confirmPasswordRules: Rule[] = [({ getFieldValue }) => ({ validator(_, value: string) { + if (value !== getFieldValue('new-password')) + return Promise.reject('Пароли не совпадают!') + return Promise.resolve() +}})] + export const ChangePassword = memo(({ user, visible, onCancel, onOk }) => { const [showLoader, setShowLoader] = useState(false) - const [password, setPassword] = useState('') const [isDisabled, setIsDisabled] = useState(true) - const [form] = useForm() + const userData = useMemo(() => user ?? { id: getUserId(), login: getUserLogin() } as UserDto, [user]) + + const [form] = Form.useForm() const onFormChange = async () => await form.validateFields() .then(() => setIsDisabled(false)) @@ -37,15 +44,15 @@ export const ChangePassword = memo(({ user, visible, onCanc onCancel?.() } - const onFormFinish = () => invokeWebApiWrapperAsync( + const onFormFinish = useCallback((values: any) => invokeWebApiWrapperAsync( async() => { - await AuthService.changePassword(user?.id ?? getUserId() ?? -1, `"${password}"`) + await AuthService.changePassword(userData.id ?? -1, `${values['new-password']}`) onOk?.() }, setShowLoader, - `Не удалось сменить пароль пользователя ${getUserLogin()}`, + `Не удалось сменить пароль пользователя ${userData.login}`, 'Смена пароля пользователя' - ) + ), [userData, onOk]) return ( (({ user, visible, onCanc okButtonProps={{ disabled: isDisabled }} + // getContainer={false} // Исправляет ошибку с формой, но портит вид модалки при вызове из user menu + // TODO: разобраться >
(({ user, visible, onCanc onFinish={onFormFinish} onChange={onFormChange} > - - setPassword(e.target.value)} value={password} /> + + - ({ validator(_, value: string) { - if (value !== password) - return Promise.reject('Пароли не совпадают!') - return Promise.resolve() - }})]} - > +