From 43e97750e4828026704faa3e7361aa9aea595401 Mon Sep 17 00:00:00 2001
From: goodmice <av.sirotkin@autodrilling.ru>
Date: Thu, 19 May 2022 01:28:06 +0500
Subject: [PATCH] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=B0=20?=
 =?UTF-8?q?=D1=84=D0=BE=D1=80=D0=BC=D1=8B=20=D1=81=D0=BC=D0=B5=D0=BD=D1=8B?=
 =?UTF-8?q?=20=D0=BF=D0=B0=D1=80=D0=BE=D0=BB=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ChangePassword.tsx | 45 ++++++++++++++-----------------
 1 file changed, 20 insertions(+), 25 deletions(-)

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<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>