diff --git a/packages/wallets/src/components/Base/WalletPasswordField/WalletPasswordField.tsx b/packages/wallets/src/components/Base/WalletPasswordField/WalletPasswordField.tsx index 9cf328730649..c1606ecbdd32 100644 --- a/packages/wallets/src/components/Base/WalletPasswordField/WalletPasswordField.tsx +++ b/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 = ({ autoComplete, label, - message, mt5Policy = false, name = 'walletPasswordField', onChange, @@ -56,6 +55,7 @@ const WalletPasswordField: React.FC = ({ }) => { 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 = ({ if (!isTouched) { setIsTouched(true); } + setShowErrorMessage(false); }, [isTouched, onChange] ); @@ -76,23 +77,19 @@ const WalletPasswordField: React.FC = ({ } }, [isTouched]); - function getMessage() { - if (isTouched) { - if (errorMessage) { - return errorMessage; - } - return message; + useEffect(() => { + if (passwordError) { + setShowErrorMessage(true); } - } + }, [passwordError]); return (
{ password={password} passwordError={error?.error?.code === 'PasswordError'} platform={dxtradePlatform} + setPassword={setPassword} /> ); } diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx index ef8423df0761..f04b116277a1 100644 --- a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx +++ b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx @@ -248,6 +248,7 @@ const MT5PasswordModal: React.FC = ({ marketType, platform }) => { password={password} passwordError={createMT5AccountError?.error?.code === 'PasswordError'} platform={mt5Platform} + setPassword={setPassword} /> ); }, [ diff --git a/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx b/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx index 6b2389c9eb12..f89620b2922a 100644 --- a/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx +++ b/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 = ({ @@ -27,6 +28,7 @@ const EnterPassword: React.FC = ({ password, passwordError, platform, + setPassword, }) => { const { isDesktop } = useDevice(); const { data } = useActiveWalletAccount(); @@ -36,6 +38,12 @@ const EnterPassword: React.FC = ({ 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 (
@@ -54,8 +62,8 @@ const EnterPassword: React.FC = ({ label={`${title} password`} onChange={onPasswordChange} password={password} + passwordError={passwordError} shouldDisablePasswordMeter - showMessage={false} /> {passwordError && {passwordErrorHints}}
@@ -66,7 +74,7 @@ const EnterPassword: React.FC = ({ Forgot password?