fix(wallets): 🚑 allow adding an account with common password

deriv-com · Oct 31, 2024 · cb10c8a · cb10c8a
1 parent 792d672
commit cb10c8a
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 18 deletions.
diff --git a/packages/wallets/src/components/Base/WalletPasswordField/WalletPasswordField.tsx b/packages/wallets/src/components/Base/WalletPasswordField/WalletPasswordField.tsx
@@ -20,11 +20,15 @@ import PasswordMeter from './PasswordMeter';
 import PasswordViewerIcon from './PasswordViewerIcon';
 import './WalletPasswordField.scss';
 
-export const validatePassword = (
-    password: string,
-    mt5Policy: boolean,
-    localize: ReturnType<typeof useTranslations>['localize']
-) => {
+type TValidatePasswordProps = {
+    isMT5PasswordNotSet?: boolean;
+    localize: ReturnType<typeof useTranslations>['localize'];
+    mt5Policy: boolean;
+    password: string;
+};
+
+export const validatePassword = (values: TValidatePasswordProps) => {
+    const { isMT5PasswordNotSet, localize, mt5Policy, password } = values;
     const score = mt5Policy ? calculateScoreMT5(password) : calculateScoreCFD(password);
     let validationErrorMessage = '';
 
@@ -38,7 +42,9 @@ export const validatePassword = (
         } else {
             cfdSchema(localize).validateSync(password);
         }
-        validationErrorMessage = getWarningMessages(localize)[feedback.warning as passwordKeys] ?? '';
+        validationErrorMessage = isMT5PasswordNotSet
+            ? getWarningMessages(localize)[feedback.warning as passwordKeys] ?? ''
+            : '';
     } catch (err) {
         if (err instanceof ValidationError) {
             validationErrorMessage = err?.message;
@@ -50,6 +56,7 @@ export const validatePassword = (
 
 const WalletPasswordField: React.FC<WalletPasswordFieldProps> = ({
     autoComplete,
+    isMT5PasswordNotSet,
     label,
     mt5Policy = false,
     name = 'walletPasswordField',
@@ -67,8 +74,8 @@ const WalletPasswordField: React.FC<WalletPasswordFieldProps> = ({
     const [errorMessage, setErrorMessage] = useState('');
 
     const { score, validationErrorMessage } = useMemo(
-        () => validatePassword(password, mt5Policy, localize),
-        [password, mt5Policy, localize]
+        () => validatePassword({ isMT5PasswordNotSet, localize, mt5Policy, password }),
+        [password, mt5Policy, localize, isMT5PasswordNotSet]
     );
     const passwordValidation = mt5Policy ? !validPasswordMT5(password) : !validPassword(password);
 

diff --git a/packages/wallets/src/components/Base/WalletPasswordFieldLazy/WalletPasswordFieldLazy.tsx b/packages/wallets/src/components/Base/WalletPasswordFieldLazy/WalletPasswordFieldLazy.tsx
@@ -3,6 +3,7 @@ import { Loader } from '@deriv-com/ui';
 import { WalletTextFieldProps } from '../WalletTextField/WalletTextField';
 
 export interface WalletPasswordFieldProps extends WalletTextFieldProps {
+    isMT5PasswordNotSet?: boolean;
     mt5Policy?: boolean; // This prop is used to utilize the new password validation for MT5.
     password: string;
     passwordError?: boolean;

diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx
@@ -292,6 +292,7 @@ const MT5PasswordModal: React.FC<TProps> = ({ isVirtual, marketType, platform, p
         return (
             <EnterPassword
                 isLoading={tradingPlatformPasswordChangeLoading || createMT5AccountLoading}
+                isMT5PasswordNotSet={isMT5PasswordNotSet}
                 isTncChecked={isTncChecked}
                 isVirtual={activeWalletData?.is_virtual}
                 marketType={marketType}

diff --git a/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx b/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx
@@ -4,14 +4,15 @@ import { Localize, useTranslations } from '@deriv-com/translations';
 import { Button, Text, useDevice } from '@deriv-com/ui';
 import { WalletPasswordFieldLazy } from '../../../../components/Base';
 import { THooks, TMarketTypes, TPlatforms } from '../../../../types';
-import { validPassword, validPasswordMT5 } from '../../../../utils/password-validation';
+import { validPassword } from '../../../../utils/password-validation';
 import { CFDPasswordModalTnc } from '../../components/CFDPasswordModalTnc';
 import { CFD_PLATFORMS, getMarketTypeDetails, PlatformDetails, PRODUCT } from '../../constants';
 import './EnterPassword.scss';
 
 type TProps = {
     isForgotPasswordLoading?: boolean;
     isLoading?: boolean;
+    isMT5PasswordNotSet?: boolean;
     isTncChecked?: boolean;
     isVirtual?: boolean;
     marketType: TMarketTypes.CreateOtherCFDAccount;
@@ -30,6 +31,7 @@ type TProps = {
 const EnterPassword: React.FC<TProps> = ({
     isForgotPasswordLoading,
     isLoading,
+    isMT5PasswordNotSet,
     isTncChecked = true,
     isVirtual,
     marketType,
@@ -48,8 +50,6 @@ const EnterPassword: React.FC<TProps> = ({
     const { localize } = useTranslations();
     const { data } = useActiveWalletAccount();
 
-    const isMT5 = platform === CFD_PLATFORMS.MT5;
-    const disableButton = isMT5 ? !validPasswordMT5(password) : !validPassword(password);
     const accountType = data?.is_virtual ? localize('Demo') : localize('Real');
     const title = PlatformDetails[platform].title;
     const marketTypeTitle =
@@ -60,6 +60,7 @@ const EnterPassword: React.FC<TProps> = ({
         'Hint: You may have entered your Deriv password, which is different from your {{title}} password.',
         { title }
     );
+    const isAddAccountBtnDisabled = !password || isLoading || !isTncChecked;
 
     useEffect(() => {
         if (passwordError) {
@@ -89,6 +90,7 @@ const EnterPassword: React.FC<TProps> = ({
                     />
                 </Text>
                 <WalletPasswordFieldLazy
+                    isMT5PasswordNotSet={isMT5PasswordNotSet}
                     label={localize('{{title}} password', { title })}
                     onChange={onPasswordChange}
                     password={password}
@@ -122,7 +124,7 @@ const EnterPassword: React.FC<TProps> = ({
                         <Localize i18n_default_text='Forgot password?' />
                     </Button>
                     <Button
-                        disabled={!password || isLoading || disableButton || !isTncChecked}
+                        disabled={isAddAccountBtnDisabled}
                         isLoading={isLoading}
                         onClick={onPrimaryClick}
                         size='lg'

diff --git a/packages/wallets/src/features/cfd/screens/EnterPassword/__test__/EnterPassword.spec.tsx b/packages/wallets/src/features/cfd/screens/EnterPassword/__test__/EnterPassword.spec.tsx
@@ -76,12 +76,6 @@ describe('EnterPassword', () => {
         expect(defaultProps.onPrimaryClick).toHaveBeenCalled();
     });
 
-    it('disables the "Add account" button when password is invalid', () => {
-        renderComponent({ password: shortPassword });
-        const addAccountButton = screen.getByRole('button', { name: 'Add account' });
-        expect(addAccountButton).toBeDisabled();
-    });
-
     it('shows password error hints when passwordError is true', () => {
         renderComponent({ passwordError: true });
         expect(