Skip to content

Commit

Permalink
[WALL] Aizad/WALL-3822/Added Wrong Password Validation for MT5EnterPa…
Browse files Browse the repository at this point in the history
…ssword (deriv-com#14724)

* chore: added wrong password validation on MT5EnterPassword modal

* chore: update component with useEffect

* chore: refactor WalletPasswodField
  • Loading branch information
aizad-deriv authored Apr 23, 2024
1 parent 7368ce9 commit 0b1c2fd
Show file tree
Hide file tree
Showing 4 changed files with 22 additions and 15 deletions.
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -45,7 +45,6 @@ export const validatePassword = (password: string, mt5Policy: boolean) => {
const WalletPasswordField: React.FC<WalletPasswordFieldProps> = ({
autoComplete,
label,
message,
mt5Policy = false,
name = 'walletPasswordField',
onChange,
Expand All @@ -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);
Expand All @@ -66,6 +66,7 @@ const WalletPasswordField: React.FC<WalletPasswordFieldProps> = ({
if (!isTouched) {
setIsTouched(true);
}
setShowErrorMessage(false);
},
[isTouched, onChange]
);
Expand All @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,7 @@ const DxtradeEnterPasswordModal = () => {
password={password}
passwordError={error?.error?.code === 'PasswordError'}
platform={dxtradePlatform}
setPassword={setPassword}
/>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -248,6 +248,7 @@ const MT5PasswordModal: React.FC<TProps> = ({ marketType, platform }) => {
password={password}
passwordError={createMT5AccountError?.error?.code === 'PasswordError'}
platform={mt5Platform}
setPassword={setPassword}
/>
);
}, [
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -16,6 +16,7 @@ type TProps = {
password: string;
passwordError?: boolean;
platform: TPlatforms.All;
setPassword: (value: string) => void;
};

const EnterPassword: React.FC<TProps> = ({
Expand All @@ -27,6 +28,7 @@ const EnterPassword: React.FC<TProps> = ({
password,
passwordError,
platform,
setPassword,
}) => {
const { isDesktop } = useDevice();
const { data } = useActiveWalletAccount();
Expand All @@ -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'>
Expand All @@ -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>
Expand All @@ -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'
Expand Down

0 comments on commit 0b1c2fd

Please sign in to comment.