Исправлена работа формы смены пароля

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<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 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<ChangePasswordProps>(({ 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 (
         <Modal
@@ -63,6 +70,8 @@ export const ChangePassword = memo<ChangePasswordProps>(({ user, visible, onCanc
             okButtonProps={{
                 disabled: isDisabled
             }}
+            // getContainer={false} // Исправляет ошибку с формой, но портит вид модалки при вызове из user menu
+            // TODO: разобраться
         >
             <LoaderPortal show={showLoader}>
                 <Form
@@ -72,24 +81,10 @@ export const ChangePassword = memo<ChangePasswordProps>(({ user, visible, onCanc
                     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 required rules={fieldRules} name={'new-password'} label={'Новый пароль'}>
+                        <Input.Password />
                     </Form.Item>
-                    <Form.Item
-                        label={'Подтверждение пароля'}
-                        name={'confirm-password'}
-                        required={true}
-                        rules={[() => ({ validator(_, value: string) {
-                            if (value !== password)
-                                return Promise.reject('Пароли не совпадают!')
-                            return Promise.resolve()
-                        }})]}
-                    >
+                    <Form.Item required name={'confirm-password'} rules={confirmPasswordRules} label={'Подтверждение пароля'}>
                         <Input.Password />
                     </Form.Item>
                 </Form>