fix(#2199): fix disabled input in change pass

src/features/AuthServiceApp/components/ChangePassword/hooks.tsx

@@ -12,6 +12,7 @@ export const useChangePasswordForm = () => {
   const [isFetching, setIsFetching] = useState(false)
   const [password, setPassword] = useState('')
   const [confirmPassword, setConfirmPassword] = useState('')
+  const [disabled, setDisabled] = useState(true)
 
   const {
     checkPassword,
@@ -39,6 +40,7 @@ export const useChangePasswordForm = () => {
     if (!checkPassword(value)) {
       setError('check_password')
     } else {
+      setDisabled(false)
       setError('')
     }
     setPassword(value)
@@ -66,6 +68,7 @@ export const useChangePasswordForm = () => {
 
   return {
     confirmPassword,
+    disabled,
     error,
     handleSubmit,
     isFetching,

src/features/AuthServiceApp/components/ChangePassword/index.tsx

@@ -18,6 +18,7 @@ import {
 const ChangePassword = () => {
   const {
     confirmPassword,
+    disabled,
     error,
     handleSubmit,
     isFetching,
@@ -53,13 +54,13 @@ const ChangePassword = () => {
             placeholderLexic='password_repeat'
             value={confirmPassword}
             onChange={onConfirmPasswordChange}
+            disabled={disabled}
           />
         </InputGroup>
         <Error>
           <T9n t={error} />
         </Error>
-
-        <ButtonsBlock>
+        <ButtonsBlock marginTop={error ? 20 : 0}>
           <ButtonSolid disabled={isSubmitDisabled}>
             {
               isFetching

src/features/AuthServiceApp/components/Input/index.tsx

@@ -12,6 +12,7 @@ type Props = Pick<InputHTMLAttributes<HTMLInputElement>, (
   'autoComplete' |
   'autoFocus' |
   'className' |
+  'disabled' |
   'name' |
   'onBlur' |
   'onChange' |
@@ -29,6 +30,7 @@ export const Input = ({
   autoComplete,
   autoFocus,
   className,
+  disabled,
   leftContent,
   name,
   onBlur,
@@ -49,6 +51,7 @@ export const Input = ({
         <InputStyled
           autoComplete={autoComplete}
           autoFocus={autoFocus}
+          disabled={disabled}
           onBlur={onBlur}
           onChange={onChange}
           onFocus={onFocus}

src/features/AuthServiceApp/components/PasswordInput/index.tsx

@@ -48,6 +48,7 @@ type Props = ComponentProps<typeof Input>
 export const PasswordInput = ({
   autoComplete,
   className,
+  disabled,
   leftContent,
   name,
   onBlur,
@@ -62,6 +63,7 @@ export const PasswordInput = ({
     <Input
       autoComplete={autoComplete}
       className={className}
+      disabled={disabled}
       onBlur={onBlur}
       onChange={onChange}
       onFocus={onFocus}

src/features/AuthServiceApp/components/RecoveryPopup/hooks.tsx

@@ -36,15 +36,14 @@ export const useRecovery = (setIsModalOpen: (value: boolean) => void) => {
     setIsFetching(false)
   }
 
-  const handleSubmit = () => {
-    if (isSendMessage && !isFetching) {
-      closePopup()
-    } else {
+  const handleSubmit = async () => {
+    try {
       setIsFetching(true)
-      loginCheckChangePass(email)
-        .then(() => setIsSendMessage(true))
-        .then(() => setIsFetching(false))
-        .catch(handleError)
+      await loginCheckChangePass(email)
+      setIsFetching(false)
+      setIsSendMessage(true)
+    } catch (err) {
+      handleError(String(err))
     }
   }
 

src/features/AuthServiceApp/components/RecoveryPopup/index.tsx

@@ -72,10 +72,15 @@ export const RecoveryPopup = (props: Props) => {
             </Fragment>
           )}
           <Footer>
-            <ApplyButton onClick={handleSubmit} disabled={isSendBtnDisabled}>
-              {(isFetching && <ArrowLoader />)
-              || (isSendMessage ? 'Ok' : <T9n t='send' />)}
-            </ApplyButton>
+            {!isSendMessage ? (
+              <ApplyButton onClick={handleSubmit} disabled={isSendBtnDisabled}>
+                {isFetching ? <ArrowLoader /> : <T9n t='send' />}
+              </ApplyButton>
+            ) : (
+              <ApplyButton onClick={closePopup}>
+                Ok
+              </ApplyButton>
+            )}
           </Footer>
         </Body>
       </Wrapper>

src/features/AuthServiceApp/config/lexics.tsx

@@ -26,7 +26,7 @@ export const lexics = {
   login: 13404,
   password_new: 15056,
   password_repeat: 15057,
-  recovery_email: 16238,
+  recovery_email: 15833,
   register: 13328,
   registration_email: 16239,
   registration_successful: 12945,