[WALL] Aizad/WALL-3822/Added Wrong Password Validation for MT5EnterPa…

…ssword (binary-com#14724)

* chore: added wrong password validation on MT5EnterPassword modal

* chore: update component with useEffect

* chore: refactor WalletPasswodField

packages/wallets/src/components/Base/WalletPasswordField/WalletPasswordField.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { ValidationError } from 'yup';
 import { zxcvbn, zxcvbnOptions } from '@zxcvbn-ts/core';
 import { dictionary } from '@zxcvbn-ts/language-common';
@@ -45,7 +45,6 @@ export const validatePassword = (password: string, mt5Policy: boolean) => {
 const WalletPasswordField: React.FC<WalletPasswordFieldProps> = ({
     autoComplete,
     label,
-    message,
     mt5Policy = false,
     name = 'walletPasswordField',
     onChange,
@@ -56,6 +55,7 @@ const WalletPasswordField: React.FC<WalletPasswordFieldProps> = ({
 }) => {
     const [isPasswordVisible, setIsPasswordVisible] = useState(false);
     const [isTouched, setIsTouched] = useState(false);
+    const [showErrorMessage, setShowErrorMessage] = useState(false);
 
     const { errorMessage, score } = useMemo(() => validatePassword(password, mt5Policy), [password, mt5Policy]);
     const passwordValidation = mt5Policy ? !validPasswordMT5(password) : !validPassword(password);
@@ -66,6 +66,7 @@ const WalletPasswordField: React.FC<WalletPasswordFieldProps> = ({
             if (!isTouched) {
                 setIsTouched(true);
             }
+            setShowErrorMessage(false);
         },
         [isTouched, onChange]
     );
@@ -76,23 +77,19 @@ const WalletPasswordField: React.FC<WalletPasswordFieldProps> = ({
         }
     }, [isTouched]);
 
-    function getMessage() {
-        if (isTouched) {
-            if (errorMessage) {
-                return errorMessage;
-            }
-            return message;
+    useEffect(() => {
+        if (passwordError) {
+            setShowErrorMessage(true);
         }
-    }
+    }, [passwordError]);
 
     return (
         <div className='wallets-password'>
             <WalletTextField
                 autoComplete={autoComplete}
-                errorMessage={isTouched && (passwordError ? passwordErrorMessage.PasswordError : errorMessage)}
-                isInvalid={(passwordValidation && isTouched) || passwordError}
+                errorMessage={isTouched && (showErrorMessage ? passwordErrorMessage.PasswordError : errorMessage)}
+                isInvalid={(passwordValidation && isTouched) || showErrorMessage}
                 label={label}
-                message={getMessage()}
                 messageVariant={errorMessage ? 'warning' : undefined}
                 name={name}
                 onBlur={handleBlur}

packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx

@@ -184,6 +184,7 @@ const DxtradeEnterPasswordModal = () => {
                     password={password}
                     passwordError={error?.error?.code === 'PasswordError'}
                     platform={dxtradePlatform}
+                    setPassword={setPassword}
                 />
             );
         }

packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx

@@ -248,6 +248,7 @@ const MT5PasswordModal: React.FC<TProps> = ({ marketType, platform }) => {
                 password={password}
                 passwordError={createMT5AccountError?.error?.code === 'PasswordError'}
                 platform={mt5Platform}
+                setPassword={setPassword}
             />
         );
     }, [

packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useActiveWalletAccount } from '@deriv/api-v2';
 import { WalletButton, WalletPasswordFieldLazy, WalletText } from '../../../../components/Base';
 import useDevice from '../../../../hooks/useDevice';
@@ -16,6 +16,7 @@ type TProps = {
     password: string;
     passwordError?: boolean;
     platform: TPlatforms.All;
+    setPassword: (value: string) => void;
 };
 
 const EnterPassword: React.FC<TProps> = ({
@@ -27,6 +28,7 @@ const EnterPassword: React.FC<TProps> = ({
     password,
     passwordError,
     platform,
+    setPassword,
 }) => {
     const { isDesktop } = useDevice();
     const { data } = useActiveWalletAccount();
@@ -36,6 +38,12 @@ const EnterPassword: React.FC<TProps> = ({
         platform === PlatformDetails.dxtrade.platform ? accountType : MarketTypeDetails[marketType].title;
     const passwordErrorHints = `Hint: You may have entered your Deriv password, which is different from your ${title} password.`;
 
+    useEffect(() => {
+        if (passwordError) {
+            setPassword('');
+        }
+    }, [passwordError, setPassword]);
+
     return (
         <div className='wallets-enter-password'>
             <div className='wallets-enter-password__container'>
@@ -54,8 +62,8 @@ const EnterPassword: React.FC<TProps> = ({
                         label={`${title} password`}
                         onChange={onPasswordChange}
                         password={password}
+                        passwordError={passwordError}
                         shouldDisablePasswordMeter
-                        showMessage={false}
                     />
                     {passwordError && <WalletText size='sm'>{passwordErrorHints}</WalletText>}
                 </div>
@@ -66,7 +74,7 @@ const EnterPassword: React.FC<TProps> = ({
                         Forgot password?
                     </WalletButton>
                     <WalletButton
-                        disabled={!password || isLoading || !validPassword(password)}
+                        disabled={isLoading || !validPassword(password)}
                         isLoading={isLoading}
                         onClick={onPrimaryClick}
                         size='md'