From ae0f1e6cc9321bab9061f9d7e1c904162935055c Mon Sep 17 00:00:00 2001
From: Mohammadreza Ghorbani <reza@firstsource.email>
Date: Tue, 16 Mar 2021 16:15:16 +0330
Subject: [PATCH 1/3] Add trading password modals

---
 .../MT5/Containers/mt5-password-modal.jsx     | 322 ++++++++++++------
 .../Containers/mt5-server-error-dialog.jsx    |   5 +-
 .../src/Stores/Modules/MT5/mt5-store.js       |  12 +-
 .../trader/src/sass/app/modules/mt5/mt5.scss  |  44 +--
 4 files changed, 252 insertions(+), 131 deletions(-)

diff --git a/packages/trader/src/Modules/MT5/Containers/mt5-password-modal.jsx b/packages/trader/src/Modules/MT5/Containers/mt5-password-modal.jsx
index e333d23e59f0..86aba7058a51 100644
--- a/packages/trader/src/Modules/MT5/Containers/mt5-password-modal.jsx
+++ b/packages/trader/src/Modules/MT5/Containers/mt5-password-modal.jsx
@@ -2,6 +2,7 @@ import { Formik } from 'formik';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withRouter } from 'react-router';
+import { useHistory } from 'react-router-dom';
 import {
     DesktopWrapper,
     FormSubmitButton,
@@ -12,6 +13,7 @@ import {
     PasswordInput,
     PasswordMeter,
     RadioGroup,
+    Text,
 } from '@deriv/components';
 import { isMobile, routes, validLength, validPassword, getErrorMessages } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
@@ -19,6 +21,30 @@ import SuccessDialog from 'App/Containers/Modals/success-dialog.jsx';
 import 'Sass/app/modules/mt5/mt5.scss';
 import { connect } from 'Stores/connect';
 
+const PasswordModalHeader = ({
+    should_set_trading_password,
+    should_show_server_form,
+    account_title,
+    is_password_reset_error,
+}) => (
+    <Text as='span' line_height='24' weight='bold' size='xs'>
+        {!should_show_server_form && should_set_trading_password && !is_password_reset_error && (
+            <Localize i18n_default_text='Set a trading password' />
+        )}
+        {!should_show_server_form && !should_set_trading_password && !is_password_reset_error && (
+            <Localize i18n_default_text='Enter your trading password' />
+        )}
+        {!should_show_server_form && is_password_reset_error && <Localize i18n_default_text='Too many attempts' />}
+        {should_show_server_form && (
+            <Localize
+                i18n_default_text='Choose a server for your DMT5 {{ account_type }} account'
+                values={{
+                    account_type: account_title,
+                }}
+            />
+        )}
+    </Text>
+);
 const getSubmitText = (account_title, category) => {
     if (category === 'real') {
         return localize(
@@ -41,89 +67,149 @@ const getIconFromType = type => {
     }
 };
 
-const MT5PasswordForm = props => (
-    <Formik
-        initialValues={{
-            password: '',
-        }}
-        validate={props.validatePassword}
-        onSubmit={values => props.submitMt5Password(values.password)}
-    >
-        {({
-            handleSubmit,
-            // setFieldValue,
-            setFieldTouched,
-            handleChange,
-            handleBlur,
-            errors,
-            values,
-            touched,
-        }) => (
-            <form onSubmit={handleSubmit}>
-                <div className='mt5-password-modal__content'>
-                    <h2 className='mt5-password-modal__title'>
-                        <Localize
-                            i18n_default_text='Choose a password for your DMT5 {{ account_type }} account'
-                            values={{
-                                account_type: props.account_title,
-                            }}
-                        />
-                    </h2>
-                    <div className='dc-modal__container_mt5-password-modal__body'>
-                        <div className='input-element'>
-                            <PasswordMeter
-                                input={values.password}
-                                has_error={!!(touched.password && errors.password)}
-                                custom_feedback_messages={getErrorMessages().password_warnings}
-                            >
-                                {({ has_warning }) => (
-                                    <PasswordInput
-                                        autoComplete='new-password'
-                                        label={localize('Create a password')}
-                                        error={touched.password && errors.password}
-                                        hint={
-                                            !has_warning &&
-                                            localize(
-                                                'Minimum of eight lower and uppercase English letters with numbers'
-                                            )
-                                        }
-                                        name='password'
-                                        value={values.password}
-                                        onBlur={handleBlur}
-                                        onChange={e => {
-                                            setFieldTouched('password', true);
-                                            handleChange(e);
-                                        }}
-                                    />
-                                )}
-                            </PasswordMeter>
-                        </div>
-                        {props.is_real_financial_stp && !props.is_bvi && (
-                            <div className='dc-modal__container_mt5-password-modal__description'>
-                                <Localize i18n_default_text='Your MT5 Financial STP account will be opened through Deriv (FX) Ltd. All trading in this account is subject to the regulations and guidelines of the Labuan Financial Service Authority (LFSA). None of your other accounts, including your Deriv account, is subject to the regulations and guidelines of the Labuan Financial Service Authority (LFSA).' />
-                            </div>
+const MT5PasswordForm = props => {
+    const button_label = React.useMemo(() => {
+        if (props.should_show_server_form) {
+            return localize('Next');
+        } else if (!props.should_show_server_form && props.should_set_trading_password) {
+            return localize('Set trading password');
+        } else if (props.error_type === 'PasswordReset') {
+            return localize('Try later');
+        }
+        return localize('Add account');
+    }, [props.should_show_server_form, props.should_set_trading_password, props.error_type]);
+    const has_cancel_button = React.useMemo(() => {
+        return (
+            props.should_show_server_form || !props.should_set_trading_password || props.error_type === 'PasswordReset'
+        );
+    }, [props.should_show_server_form, props.should_set_trading_password, props.error_type]);
+    const cancel_button_label = React.useMemo(() => {
+        if (props.should_set_trading_password && props.error_type !== 'PasswordReset') {
+            return null;
+        }
+        if (props.should_show_server_form) {
+            return localize('Cancel');
+        }
+
+        return localize('Forgot password?');
+    }, [props.should_show_server_form, props.should_set_trading_password]);
+    const history = useHistory();
+    const handleCancel = React.useCallback(() => {
+        if (!has_cancel_button) {
+            return undefined;
+        }
+        if (!props.should_set_trading_password) {
+            return history.push(routes.deriv_password);
+        }
+        return props.onCancel();
+    }, [has_cancel_button, props.should_show_server_form, props.should_set_trading_password]);
+    if (props.error_type === 'PasswordReset') {
+        return (
+            <React.Fragment>
+                <div className='mt5-password-reset'>
+                    <div className='mt5-password-modal__content mt5-password-modal__content--password-reset'>
+                        <Text as='p' line_height='24' size='xs'>
+                            <Localize i18n_default_text='Please try again in a minute.' />
+                        </Text>
+                    </div>
+                    <Formik onSubmit={props.closeModal} initialValues={{}}>
+                        {({ handleSubmit }) => (
+                            <form onSubmit={handleSubmit}>
+                                <FormSubmitButton
+                                    has_cancel={has_cancel_button}
+                                    cancel_label={cancel_button_label}
+                                    onCancel={handleCancel}
+                                    is_absolute={isMobile()}
+                                    label={button_label}
+                                />
+                            </form>
                         )}
-                        {props.is_real_financial_stp && props.is_bvi && (
-                            <div className='dc-modal__container_mt5-password-modal__description'>
-                                <Localize i18n_default_text='Your MT5 Financial STP account will be opened through Deriv (BVI) Ltd. All trading in this account is subject to the regulations and guidelines of the British Virgin Islands Financial Services Commission (BVIFSC). None of your other accounts, including your Deriv account, is subject to the regulations and guidelines of the British Virgin Islands Financial Services Commission (BVIFSC).' />
+                    </Formik>
+                </div>
+            </React.Fragment>
+        );
+    }
+
+    return (
+        <Formik
+            initialValues={props.values}
+            validate={props.validatePassword}
+            enableReinitialize
+            onSubmit={values => props.submitMt5Password(values.password)}
+        >
+            {({
+                handleSubmit,
+                // setFieldValue,
+                setFieldTouched,
+                handleChange,
+                handleBlur,
+                errors,
+                values,
+                touched,
+            }) => (
+                <form onSubmit={handleSubmit}>
+                    <div className='mt5-password-modal__content'>
+                        <div className='dc-modal__container_mt5-password-modal__body'>
+                            <div className='input-element'>
+                                <PasswordMeter
+                                    input={values.password}
+                                    has_error={!!(touched.password && errors.password) || props.error_message}
+                                    custom_feedback_messages={getErrorMessages().password_warnings}
+                                >
+                                    {({ has_warning }) => (
+                                        <PasswordInput
+                                            autoComplete='new-password'
+                                            label={localize('Trading password')}
+                                            error={(touched.password && errors.password) || props.error_message}
+                                            hint={
+                                                !has_warning &&
+                                                localize(
+                                                    'Minimum of eight lower and uppercase English letters with numbers'
+                                                )
+                                            }
+                                            name='password'
+                                            value={values.password}
+                                            onBlur={handleBlur}
+                                            onChange={e => {
+                                                setFieldTouched('password', true);
+                                                handleChange(e);
+                                            }}
+                                        />
+                                    )}
+                                </PasswordMeter>
                             </div>
-                        )}
+                            {props.is_real_financial_stp && !props.is_bvi && (
+                                <div className='dc-modal__container_mt5-password-modal__description'>
+                                    <Localize i18n_default_text='Your MT5 Financial STP account will be opened through Deriv (FX) Ltd. All trading in this account is subject to the regulations and guidelines of the Labuan Financial Service Authority (LFSA). None of your other accounts, including your Deriv account, is subject to the regulations and guidelines of the Labuan Financial Service Authority (LFSA).' />
+                                </div>
+                            )}
+                            {props.should_set_trading_password && (
+                                <Text size='xs' as='p'>
+                                    <Localize i18n_default_text='Use this to log in and trade on MT5 and DXTrade. ' />
+                                </Text>
+                            )}
+                            {props.is_real_financial_stp && props.is_bvi && (
+                                <div className='dc-modal__container_mt5-password-modal__description'>
+                                    <Localize i18n_default_text='Your MT5 Financial STP account will be opened through Deriv (BVI) Ltd. All trading in this account is subject to the regulations and guidelines of the British Virgin Islands Financial Services Commission (BVIFSC). None of your other accounts, including your Deriv account, is subject to the regulations and guidelines of the British Virgin Islands Financial Services Commission (BVIFSC).' />
+                                </div>
+                            )}
+                        </div>
                     </div>
-                </div>
-                <FormSubmitButton
-                    is_disabled={!values.password || Object.keys(errors).length > 0}
-                    has_cancel
-                    cancel_label={localize('Cancel')}
-                    onCancel={props.closeModal}
-                    is_absolute={isMobile()}
-                    is_loading={props.is_submitting}
-                    label={props.should_show_server_form ? localize('Next') : localize('Add account')}
-                    form_error={props.form_error}
-                />
-            </form>
-        )}
-    </Formik>
-);
+                    <FormSubmitButton
+                        is_disabled={!values.password || Object.keys(errors).length > 0}
+                        has_cancel={has_cancel_button}
+                        cancel_label={cancel_button_label}
+                        onCancel={handleCancel}
+                        is_absolute={isMobile()}
+                        is_loading={props.is_submitting}
+                        label={button_label}
+                        form_error={props.form_error}
+                    />
+                </form>
+            )}
+        </Formik>
+    );
+};
 
 const MT5ServerForm = ({ ...props }) => {
     const available_servers = React.useMemo(() => {
@@ -171,14 +257,6 @@ const MT5ServerForm = ({ ...props }) => {
             {({ handleSubmit, setFieldValue, errors, values, isSubmitting }) => (
                 <form onSubmit={handleSubmit}>
                     <div className='mt5-password-modal__content'>
-                        <h2>
-                            <Localize
-                                i18n_default_text='Choose a server for your DMT5 {{ account_type }} account'
-                                values={{
-                                    account_type: props.account_title,
-                                }}
-                            />
-                        </h2>
                         <div className='dc-modal__container_mt5-password-modal__body'>
                             <div className='input-element'>
                                 <RadioGroup
@@ -230,24 +308,26 @@ const MT5ServerForm = ({ ...props }) => {
 const MT5PasswordModal = ({
     account_title,
     account_type,
+    account_status,
     disableMt5PasswordModal,
     email,
-    // error_message,
-    landing_companies,
+    error_message,
+    error_type,
+    form_error,
+    history,
     is_eu,
     is_eu_country,
     is_logged_in,
-    form_error,
-    history,
-    has_mt5_error,
     is_mt5_password_modal_enabled,
     is_mt5_success_dialog_enabled,
+    has_mt5_error,
+    landing_companies,
+    mt5_login_list,
+    mt5_new_account,
     setMt5SuccessDialog,
     setMt5Error,
     submitMt5Password,
     trading_servers,
-    mt5_login_list,
-    mt5_new_account,
 }) => {
     const [password, setPassword] = React.useState('');
     const [is_submitting, setIsSubmitting] = React.useState(false); // TODO handle this better
@@ -256,6 +336,27 @@ const MT5PasswordModal = ({
         return landing_companies?.mt_financial_company?.financial_stp?.shortcode === 'bvi';
     }, [landing_companies]);
 
+    const should_set_trading_password = React.useMemo(
+        () => Array.isArray(account_status.status) && account_status.status.includes('trading_password_required'),
+        [account_status]
+    );
+
+    const is_password_error = error_type === 'PasswordError';
+    const is_password_reset = error_type === 'PasswordReset';
+
+    const should_show_password =
+        is_mt5_password_modal_enabled &&
+        !is_mt5_success_dialog_enabled &&
+        (!has_mt5_error || is_password_reset || is_password_error);
+
+    const should_show_success = !has_mt5_error && is_mt5_success_dialog_enabled;
+
+    const is_real_financial_stp = [account_type.category, account_type.type].join('_') === 'real_financial_stp';
+
+    const is_real_synthetic = [account_type.category, account_type.type].join('_') === 'real_synthetic';
+
+    const should_show_server_form = (is_logged_in ? !is_eu : !is_eu_country) && is_real_synthetic && !!password;
+
     const validatePassword = values => {
         const errors = {};
 
@@ -300,11 +401,6 @@ const MT5PasswordModal = ({
     };
 
     const IconType = () => getIconFromType(account_type.type);
-    const should_show_password = is_mt5_password_modal_enabled && !has_mt5_error && !is_mt5_success_dialog_enabled;
-    const should_show_success = !has_mt5_error && is_mt5_success_dialog_enabled;
-    const is_real_financial_stp = [account_type.category, account_type.type].join('_') === 'real_financial_stp';
-    const is_real_synthetic = [account_type.category, account_type.type].join('_') === 'real_synthetic';
-    const should_show_server_form = (is_logged_in ? !is_eu : !is_eu_country) && is_real_synthetic && !!password;
 
     // TODO handle submitting password without server in a better way
     React.useEffect(() => {
@@ -319,10 +415,10 @@ const MT5PasswordModal = ({
     }, [password, should_show_server_form, is_submitting]);
 
     React.useEffect(() => {
-        if (has_mt5_error || is_mt5_success_dialog_enabled) {
+        if (has_mt5_error || is_mt5_success_dialog_enabled || is_password_error) {
             setPassword('');
         }
-    }, [has_mt5_error, is_mt5_success_dialog_enabled]);
+    }, [has_mt5_error, is_mt5_success_dialog_enabled, is_password_error]);
 
     return (
         <React.Fragment>
@@ -331,7 +427,15 @@ const MT5PasswordModal = ({
                     className='mt5-password-modal'
                     is_open={should_show_password}
                     toggleModal={closeModal}
-                    has_close_icon
+                    should_header_stick_body
+                    renderTitle={() => (
+                        <PasswordModalHeader
+                            should_show_server_form={should_show_server_form}
+                            should_set_trading_password={should_set_trading_password}
+                            account_title={account_title}
+                            is_password_reset_error={is_password_reset}
+                        />
+                    )}
                 >
                     {should_show_server_form ? (
                         <MT5ServerForm
@@ -348,11 +452,17 @@ const MT5PasswordModal = ({
                             is_submitting={is_submitting}
                             account_title={account_title}
                             closeModal={closeModal}
+                            error_type={error_type}
+                            error_message={error_message}
                             form_error={form_error}
+                            should_set_trading_password={should_set_trading_password}
                             submitMt5Password={setPassword}
                             is_real_financial_stp={is_real_financial_stp}
                             validatePassword={validatePassword}
                             should_show_server_form={should_show_server_form}
+                            values={{
+                                password,
+                            }}
                         />
                     )}
                 </Modal>
@@ -380,8 +490,12 @@ const MT5PasswordModal = ({
                             is_submitting={is_submitting}
                             account_title={account_title}
                             closeModal={closeModal}
+                            error_type={error_type}
+                            error_message={error_message}
                             form_error={form_error}
+                            has_mt5_error={has_mt5_error}
                             is_real_financial_stp={is_real_financial_stp}
+                            should_set_trading_password={should_set_trading_password}
                             submitMt5Password={setPassword}
                             validatePassword={validatePassword}
                             should_show_server_form={should_show_server_form}
@@ -427,8 +541,10 @@ export default connect(({ client, modules }) => ({
     email: client.email,
     account_title: modules.mt5.account_title,
     account_type: modules.mt5.account_type,
+    account_status: client.account_status,
     disableMt5PasswordModal: modules.mt5.disableMt5PasswordModal,
     error_message: modules.mt5.error_message,
+    error_type: modules.mt5.error_type,
     has_mt5_error: modules.mt5.has_mt5_error,
     landing_companies: client.landing_companies,
     is_eu: client.is_eu,
diff --git a/packages/trader/src/Modules/MT5/Containers/mt5-server-error-dialog.jsx b/packages/trader/src/Modules/MT5/Containers/mt5-server-error-dialog.jsx
index 7d19be5a181b..380e56f64836 100644
--- a/packages/trader/src/Modules/MT5/Containers/mt5-server-error-dialog.jsx
+++ b/packages/trader/src/Modules/MT5/Containers/mt5-server-error-dialog.jsx
@@ -9,10 +9,12 @@ const MT5ServerErrorDialog = ({
     disableApp,
     enableApp,
     error_message,
+    error_type,
     has_mt5_error,
     is_mt5_success_dialog_enabled,
 }) => {
-    const should_show_error = has_mt5_error && !is_mt5_success_dialog_enabled;
+    const should_show_error =
+        has_mt5_error && !is_mt5_success_dialog_enabled && !['PasswordReset', 'PasswordError'].includes(error_type);
     return (
         <Dialog
             title={localize('Something’s not right')}
@@ -41,6 +43,7 @@ export default connect(({ ui, modules }) => ({
     disableApp: ui.disableApp,
     enableApp: ui.enableApp,
     error_message: modules.mt5.error_message,
+    error_type: modules.mt5.error_type,
     has_mt5_error: modules.mt5.has_mt5_error,
     is_mt5_success_dialog_enabled: modules.mt5.is_mt5_success_dialog_enabled,
 }))(MT5ServerErrorDialog);
diff --git a/packages/trader/src/Stores/Modules/MT5/mt5-store.js b/packages/trader/src/Stores/Modules/MT5/mt5-store.js
index 9892aee7f7da..f7025b584324 100644
--- a/packages/trader/src/Stores/Modules/MT5/mt5-store.js
+++ b/packages/trader/src/Stores/Modules/MT5/mt5-store.js
@@ -25,6 +25,8 @@ export default class MT5Store extends BaseStore {
 
     @observable current_account = undefined; // this is a tmp value, don't rely on it, unless you set it first.
 
+    @observable error_type = undefined;
+
     constructor({ root_store }) {
         super({ root_store });
     }
@@ -95,14 +97,21 @@ export default class MT5Store extends BaseStore {
     }
 
     @action.bound
-    clearMt5Error() {
+    resetFormErrors() {
         this.error_message = '';
+        this.error_type = undefined;
         this.has_mt5_error = false;
+    }
+
+    @action.bound
+    clearMt5Error() {
+        this.resetFormErrors();
         this.is_mt5_password_modal_enabled = false;
     }
 
     @action.bound
     createMT5Account({ category, type, set_password }) {
+        this.clearMt5Error();
         this.setAccountType({
             category,
             type,
@@ -204,6 +213,7 @@ export default class MT5Store extends BaseStore {
     setError(state, obj) {
         this.has_mt5_error = state;
         this.error_message = obj ? obj.message : '';
+        this.error_type = obj?.code ?? undefined;
     }
 
     @action.bound
diff --git a/packages/trader/src/sass/app/modules/mt5/mt5.scss b/packages/trader/src/sass/app/modules/mt5/mt5.scss
index e6bb251b43a4..aed4bf7bfc91 100644
--- a/packages/trader/src/sass/app/modules/mt5/mt5.scss
+++ b/packages/trader/src/sass/app/modules/mt5/mt5.scss
@@ -1,25 +1,16 @@
 .dc-modal__container_mt5-password-modal,
 .dc-mobile-dialog__mt5-password-modal {
-    max-width: 424px;
-    min-height: 300px;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
 
-    h2 {
-        @include typeface(--title-center-bold-black);
-        color: var(--text-prominent);
-        text-transform: none;
-        margin: 0.4rem 2.2rem 2.4rem;
-        max-width: 30rem;
-    }
     form {
         flex-grow: 1;
         display: flex;
         flex-direction: column;
-        align-items: center;
+        align-items: flex-start;
         justify-content: space-between;
-        padding: 2rem;
+        padding: 0 2rem 1.2rem;
 
         @include mobile {
             padding: 0;
@@ -36,10 +27,7 @@
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
-        align-items: center;
-    }
-    .dc-modal-header {
-        display: none;
+        align-items: flex-start;
     }
     .dc-input {
         &__label {
@@ -64,12 +52,11 @@
         margin-top: 3em;
     }
     & .dc-password-meter__container {
-        flex-grow: 0;
-        width: 30rem;
+        flex-grow: 1;
         margin: auto;
 
         .dc-password-input__field {
-            margin-bottom: 9.7rem;
+            margin-bottom: 5rem;
         }
         @include mobile {
             width: calc(100vw - 4.8rem);
@@ -92,6 +79,18 @@
             padding: 2rem;
         }
     }
+    @include tablet-up {
+        .mt5-password-modal__content {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            margin-bottom: 2rem;
+
+            &--password-reset {
+                padding: 0 2.5rem;
+            }
+        }
+    }
 }
 
 .mt5-password-modal {
@@ -230,10 +229,6 @@
         }
     }
     &__password-area {
-        @include desktop {
-            width: 30rem;
-            height: 12rem;
-        }
         @include mobile {
             width: 100%;
             max-width: calc(100% - 2.4rem);
@@ -274,10 +269,7 @@
     }
     @include mobile {
         & .dc-form-submit-button {
-            position: relative;
-            background-color: unset;
-            border: none;
-            bottom: unset;
+            all: unset;
         }
     }
 }

From 1b585b97d58489d3723ebeb3751b69e7e647cb7d Mon Sep 17 00:00:00 2001
From: Mohammadreza Ghorbani <reza@firstsource.email>
Date: Tue, 16 Mar 2021 17:27:28 +0330
Subject: [PATCH 2/3] Main password manager was updated to reflect Trading
 Password

---
 .../components/src/components/icon/icons.js   |   1 +
 .../icon/mt5/ic-mt5-one-password.svg          |   1 +
 packages/components/stories/icon/icons.js     |   1 +
 .../Containers/mt5-password-manager-modal.jsx | 147 ++++++------------
 .../MT5/Containers/mt5-password-modal.jsx     |   2 +-
 .../sass/app/modules/mt5/mt5-dashboard.scss   |   8 +-
 6 files changed, 56 insertions(+), 104 deletions(-)
 create mode 100644 packages/components/src/components/icon/mt5/ic-mt5-one-password.svg

diff --git a/packages/components/src/components/icon/icons.js b/packages/components/src/components/icon/icons.js
index 060f5ff4ff75..cc146a0b125b 100644
--- a/packages/components/src/components/icon/icons.js
+++ b/packages/components/src/components/icon/icons.js
@@ -357,6 +357,7 @@ import './mt5/ic-mt5-financial.svg';
 import './mt5/ic-mt5-high-leverage.svg';
 import './mt5/ic-mt5-liquid-risk.svg';
 import './mt5/ic-mt5-margin-trading.svg';
+import './mt5/ic-mt5-one-password.svg';
 import './mt5/ic-mt5-open-markets.svg';
 import './mt5/ic-mt5-password-updated.svg';
 import './mt5/ic-mt5-responsive.svg';
diff --git a/packages/components/src/components/icon/mt5/ic-mt5-one-password.svg b/packages/components/src/components/icon/mt5/ic-mt5-one-password.svg
new file mode 100644
index 000000000000..e035b11ac23f
--- /dev/null
+++ b/packages/components/src/components/icon/mt5/ic-mt5-one-password.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><g fill-rule="nonzero" fill="none"><path fill="#BCE4E5" d="M100 104.4H4.4c-2.4 0-4.4-2-4.4-4.4V4.4C0 2 2 0 4.4 0H100c2.4 0 4.4 2 4.4 4.4v95.2c0 2.8-2 4.8-4.4 4.8z"/><g fill="#FFF"><path d="M89.2 86h-74c-2.4 0-4-2-4-4V68.4c0-2.4 2-4 4-4h73.6c2.4 0 4 2 4 4V82c.4 2-1.6 4-3.6 4z" opacity=".5"/><path d="M26 75.2l2.4 1.2-1.2 1.6-2.4-1.6v2.8h-2v-2.8L20.4 78l-1.2-1.6 2.4-1.2-2.4-1.2 1.2-2 2.4 1.6v-2.8h2v2.8l2.4-1.6 1.2 1.6zm14 0l2.4 1.2-1.2 1.6-2.4-1.6v2.8h-1.6v-2.8L34.8 78l-1.2-1.6 2.4-1.2-2.4-1.2 1.2-2 2.4 1.6v-2.8h2v2.8l2.4-1.6 1.2 1.6zm14.4 0l2.4 1.2-1.2 1.6-2.4-1.6v2.8h-2v-2.8L48.8 78l-1.2-1.6 2.4-1.2-2.4-1.2 1.2-1.6 2.4 1.6v-2.8h2V74l2.4-1.6 1.2 1.6zm14 0l2.4 1.2-1.2 1.6-2.4-1.6v2.8h-2v-2.8L62.8 78l-1.2-1.6 2.4-1.2-2.4-1.2 1.2-1.6 2.4 1.6v-2.8h2V74l2.4-1.6 1.2 1.6zm14.4 0l2.4 1.2L84 78l-2.4-1.6v2.8h-2v-2.8L77.2 78 76 76.4l2.4-1.2-2.4-1.6 1.2-1.6 2.4 1.6v-2.8h2v2.8L84 72l1.2 1.6z"/></g><g transform="translate(28 8)"><circle cx="24.4" cy="24.4" r="23.2" fill="#FFF" opacity=".5"/><path d="M33.2 22.8H14.8c-1.2 0-2.4 1.2-2.4 2.4v11.2c0 1.2 1.2 2.4 2.4 2.4h18.4c1.2 0 2.4-1.2 2.4-2.4V25.6c.4-1.6-.8-2.8-2.4-2.8zM26 35.2h-3.2l.8-4.4c-.8-.4-1.2-1.2-1.2-2 0-1.2.8-2.4 2.4-2.4 1.2 0 2.4.8 2.4 2.4 0 .8-.4 1.6-1.2 2v4.4zm-7.2-14l-.4-1.6c-.8-3.2 1.2-6 4.4-6.8 3.2-.8 6 1.2 6.8 4.4l.4 1.6 3.2-.8-.4-1.6c-.8-4.8-5.6-8-10.4-6.8-4.8.8-8 5.6-6.8 10.4l.4 1.6 2.8-.4z" fill="#72AEB2"/></g><path fill="#000" d="M65.2 93.6h-26c-.8 0-1.2-.4-1.2-1.2 0-.8.4-1.2 1.2-1.2h26c.8 0 1.2.4 1.2 1.2 0 .8-.4 1.2-1.2 1.2z" opacity=".2"/><circle cx="105.6" cy="105.6" r="22.4" fill="#72AEB2"/><path fill="#FFF" d="M99.6 115.2V112h5.2V99.2h-.4l-4 5.2-2.8-2 4.8-6h6.4v16h4v3.2H99.6z"/></g></svg>
diff --git a/packages/components/stories/icon/icons.js b/packages/components/stories/icon/icons.js
index a3a2ff1f6860..f189913bd43d 100644
--- a/packages/components/stories/icon/icons.js
+++ b/packages/components/stories/icon/icons.js
@@ -373,6 +373,7 @@ export const icons = {
         'IcMt5HighLeverage',
         'IcMt5LiquidRisk',
         'IcMt5MarginTrading',
+        'IcMt5OnePassword',
         'IcMt5OpenMarkets',
         'IcMt5PasswordUpdated',
         'IcMt5Responsive',
diff --git a/packages/trader/src/Modules/MT5/Containers/mt5-password-manager-modal.jsx b/packages/trader/src/Modules/MT5/Containers/mt5-password-manager-modal.jsx
index 60be1f72310f..d4eabca81468 100644
--- a/packages/trader/src/Modules/MT5/Containers/mt5-password-manager-modal.jsx
+++ b/packages/trader/src/Modules/MT5/Containers/mt5-password-manager-modal.jsx
@@ -1,6 +1,7 @@
 import { Field, Form, Formik } from 'formik';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { NavLink } from 'react-router-dom';
 import {
     Icon,
     Modal,
@@ -18,7 +19,7 @@ import {
     Text,
 } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
-import { isMobile, validLength, validPassword, getErrorMessages } from '@deriv/shared';
+import { routes, isMobile, validLength, validPassword, getErrorMessages } from '@deriv/shared';
 import { connect } from 'Stores/connect';
 import MT5Store from 'Stores/Modules/MT5/mt5-store';
 
@@ -142,96 +143,36 @@ const MT5PasswordManagerTabContentWrapper = ({ multi_step_ref, steps }) => (
     <MultiStep ref={multi_step_ref} steps={steps} className='mt5-password-manager' lbl_previous={localize('Back')} />
 );
 
-const MainPasswordManager = ({
-    is_submit_success_main,
-    toggleModal,
-    onSubmit,
-    validatePassword,
-    error_message_main,
-    setPasswordType,
-    multi_step_ref,
-}) => {
-    if (is_submit_success_main) {
-        return <MT5PasswordSuccessMessage toggleModal={toggleModal} />;
-    }
-
-    const initial_values = { old_password: '', new_password: '', password_type: 'main' };
-
+const TradingPasswordManager = ({ status }) => {
+    const is_existing_user = status?.includes('trading_password_required');
     return (
-        <Formik initialValues={initial_values} validate={validatePassword} onSubmit={onSubmit}>
-            {({ isSubmitting, errors, setFieldTouched, values, touched }) => (
-                <Form className='mt5-password-manager__main-form' noValidate>
-                    {error_message_main && <p className='mt5-password-manager--error-message'>{error_message_main}</p>}
-                    <Field name='old_password'>
-                        {({ field }) => (
-                            <PasswordInput
-                                {...field}
-                                autoComplete='current-password'
-                                label={localize('Current password')}
-                                error={touched.old_password && errors.old_password}
-                                required
-                            />
-                        )}
-                    </Field>
-                    <Field name='new_password'>
-                        {({ field }) => (
-                            <PasswordMeter
-                                input={field.value}
-                                has_error={!!(touched.new_password && errors.new_password)}
-                                custom_feedback_messages={getErrorMessages().password_warnings}
-                            >
-                                {({ has_warning }) => (
-                                    <PasswordInput
-                                        {...field}
-                                        autoComplete='new-password'
-                                        label={localize('New password')}
-                                        hint={
-                                            !has_warning &&
-                                            localize(
-                                                'Strong passwords contain at least 8 characters, combine uppercase and lowercase letters and numbers.'
-                                            )
-                                        }
-                                        error={touched.new_password && errors.new_password}
-                                        onChange={e => {
-                                            setFieldTouched('new_password', true, true);
-                                            field.onChange(e);
-                                        }}
-                                        className='mt5-password-manager__new-password'
-                                        required
-                                    />
-                                )}
-                            </PasswordMeter>
-                        )}
-                    </Field>
-                    <div className='mt5-password-manager__actions'>
-                        <Button
-                            className='mt5-password-manager--button'
-                            is_disabled={
-                                isSubmitting ||
-                                !values.old_password ||
-                                !values.new_password ||
-                                Object.keys(errors).length > 0
-                            }
-                            is_loading={isSubmitting}
-                            text={localize('Change password')}
-                            primary
-                            large
-                        />
-                        <Button
-                            className='mt5-password-manager--button'
-                            type='button'
-                            onClick={() => {
-                                setPasswordType('main');
-                                multi_step_ref.current?.goNextStep();
-                            }}
-                            text={localize('Reset main password')}
-                            tertiary
-                            large
-                        />
-                    </div>
-                </Form>
-            )}
-        </Formik>
+        <div className='mt5-password-manager__trading-password-wrapper'>
+            <Icon icon='IcMt5OnePassword' size='128' />
+            <Text as='p' align='center' size='s' weight='bold'>
+                {is_existing_user && <Localize i18n_default_text='Set your trading password' />}
+                {!is_existing_user && <Localize i18n_default_text='All you’ll need from now is trading password' />}
+            </Text>
+            <Text as='p' align='center' size='xs'>
+                {!is_existing_user && (
+                    <Localize
+                        i18n_default_text='Your DMT5 password is now same as your trading password. To reset, please go to <0>Settings</0> to change your trading password. '
+                        components={[<Text weight='bold' key={0} />]}
+                    />
+                )}
+                {is_existing_user && (
+                    <Localize i18n_default_text='You can now create one secure password to log into all your DMT5 accounts.' />
+                )}
+            </Text>
+            <NavLink
+                to={routes.passwords}
+                className='dc-btn dc-btn--primary dc-btn__large dc-modal__container_mt5-reset-password-modal__button'
+            >
+                <Text size='xs' weight='bold' color='colored-background'>
+                    {is_existing_user && <Localize i18n_default_text='Trading password' />}
+                    {!is_existing_user && <Localize i18n_default_text='Go to settings' />}
+                </Text>
+            </NavLink>
+        </div>
     );
 };
 
@@ -340,7 +281,14 @@ const InvestorPasswordManager = ({
     );
 };
 
-const MT5PasswordManagerTabContent = ({ toggleModal, selected_login, email, setPasswordType, multi_step_ref }) => {
+const MT5PasswordManagerTabContent = ({
+    toggleModal,
+    selected_login,
+    email,
+    setPasswordType,
+    multi_step_ref,
+    account_status,
+}) => {
     const [active_tab_index, setActiveTabIndex] = React.useState(0);
     const [error_message_main, setErrorMessageMain] = React.useState('');
     const [is_submit_success_main, setSubmitSuccessMain] = React.useState(false);
@@ -418,23 +366,15 @@ const MT5PasswordManagerTabContent = ({ toggleModal, selected_login, email, setP
     return (
         <>
             <Tabs active_index={active_tab_index} onTabItemClick={updateAccountTabIndex} top>
-                <div label={localize('Main password')}>
+                <div label={localize('Trading password')}>
                     <DesktopWrapper>
                         <ThemedScrollbars height={password_container_height} is_bypassed={isMobile()} autohide={false}>
-                            <MainPasswordManager
-                                is_submit_success_main={is_submit_success_main}
-                                toggleModal={toggleModal}
-                                onSubmit={onSubmit}
-                                validatePassword={validatePassword}
-                                error_message_main={error_message_main}
-                                setPasswordType={setPasswordType}
-                                multi_step_ref={multi_step_ref}
-                            />
+                            <TradingPasswordManager status={account_status.status} />
                         </ThemedScrollbars>
                     </DesktopWrapper>
                     <MobileWrapper>
                         <Div100vhContainer className='mt5-password-manager__scroll-wrapper' height_offset='120px'>
-                            <MainPasswordManager
+                            <TradingPasswordManager
                                 is_submit_success_main={is_submit_success_main}
                                 toggleModal={toggleModal}
                                 onSubmit={onSubmit}
@@ -480,6 +420,7 @@ const MT5PasswordManagerTabContent = ({ toggleModal, selected_login, email, setP
 };
 
 const MT5PasswordManagerModal = ({
+    account_status,
     enableApp,
     email,
     disableApp,
@@ -502,6 +443,7 @@ const MT5PasswordManagerModal = ({
         {
             component: (
                 <MT5PasswordManagerTabContent
+                    account_status={account_status}
                     email={email}
                     selected_login={selected_login}
                     toggleModal={toggleModal}
@@ -572,6 +514,7 @@ MT5PasswordManagerModal.propTypes = {
 };
 
 export default connect(({ modules: { mt5 }, client, ui }) => ({
+    account_status: client.account_status,
     email: client.email,
     enableApp: ui.enableApp,
     disableApp: ui.disableApp,
diff --git a/packages/trader/src/Modules/MT5/Containers/mt5-password-modal.jsx b/packages/trader/src/Modules/MT5/Containers/mt5-password-modal.jsx
index 86aba7058a51..7de9d00f0d0b 100644
--- a/packages/trader/src/Modules/MT5/Containers/mt5-password-modal.jsx
+++ b/packages/trader/src/Modules/MT5/Containers/mt5-password-modal.jsx
@@ -99,7 +99,7 @@ const MT5PasswordForm = props => {
             return undefined;
         }
         if (!props.should_set_trading_password) {
-            return history.push(routes.deriv_password);
+            return history.push(routes.passwords);
         }
         return props.onCancel();
     }, [has_cancel_button, props.should_show_server_form, props.should_set_trading_password]);
diff --git a/packages/trader/src/sass/app/modules/mt5/mt5-dashboard.scss b/packages/trader/src/sass/app/modules/mt5/mt5-dashboard.scss
index 059e370534ec..7fa23c2b524a 100644
--- a/packages/trader/src/sass/app/modules/mt5/mt5-dashboard.scss
+++ b/packages/trader/src/sass/app/modules/mt5/mt5-dashboard.scss
@@ -788,7 +788,13 @@
     &--error-message {
         margin-bottom: 1em;
     }
-    &__main-form,
+    &__trading-password-wrapper {
+        display: grid;
+        grid-auto-rows: auto;
+        justify-items: center;
+        grid-gap: 1rem;
+        margin-top: 3.2rem;
+    }
     &__investor-wrapper {
         margin: 3.2rem 0.5rem 0;
 

From 81c425b476598fe57a02a922fbb9f48901e08397 Mon Sep 17 00:00:00 2001
From: Mohammadreza Ghorbani <reza@firstsource.email>
Date: Wed, 17 Mar 2021 13:05:03 +0330
Subject: [PATCH 3/3] Existing MT5 clients prompt

---
 .../MT5/Containers/mt5-password-modal.jsx     | 134 +++++++++++-------
 .../trader/src/sass/app/modules/mt5/mt5.scss  |  11 ++
 2 files changed, 97 insertions(+), 48 deletions(-)

diff --git a/packages/trader/src/Modules/MT5/Containers/mt5-password-modal.jsx b/packages/trader/src/Modules/MT5/Containers/mt5-password-modal.jsx
index 7de9d00f0d0b..2ae1eb095ca9 100644
--- a/packages/trader/src/Modules/MT5/Containers/mt5-password-modal.jsx
+++ b/packages/trader/src/Modules/MT5/Containers/mt5-password-modal.jsx
@@ -2,7 +2,7 @@ import { Formik } from 'formik';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withRouter } from 'react-router';
-import { useHistory } from 'react-router-dom';
+import { useHistory, NavLink } from 'react-router-dom';
 import {
     DesktopWrapper,
     FormSubmitButton,
@@ -21,30 +21,59 @@ import SuccessDialog from 'App/Containers/Modals/success-dialog.jsx';
 import 'Sass/app/modules/mt5/mt5.scss';
 import { connect } from 'Stores/connect';
 
+const RequireTradingPasswordModal = ({ should_set_trading_password, has_mt5_account, children }) => {
+    if (should_set_trading_password && has_mt5_account) {
+        return (
+            <div className='mt5-trading-password-required'>
+                <Icon icon='IcMt5OnePassword' size='128' />
+                <Text as='h2' size='s' line_height='24' weight='bold'>
+                    <Localize i18n_default_text='Set your trading password' />
+                </Text>
+                <Text as='p' size='xs' align='center'>
+                    <Localize i18n_default_text='You can now create one secure password to log into all your DMT5 accounts.' />
+                </Text>
+                <NavLink to={routes.passwords} className='dc-btn dc-btn--primary dc-btn__large'>
+                    <Text color='colored-background' weight='bold' size='xs'>
+                        <Localize i18n_default_text='Set your trading password' />
+                    </Text>
+                </NavLink>
+            </div>
+        );
+    }
+    return children;
+};
+
 const PasswordModalHeader = ({
     should_set_trading_password,
     should_show_server_form,
     account_title,
     is_password_reset_error,
-}) => (
-    <Text as='span' line_height='24' weight='bold' size='xs'>
-        {!should_show_server_form && should_set_trading_password && !is_password_reset_error && (
-            <Localize i18n_default_text='Set a trading password' />
-        )}
-        {!should_show_server_form && !should_set_trading_password && !is_password_reset_error && (
-            <Localize i18n_default_text='Enter your trading password' />
-        )}
-        {!should_show_server_form && is_password_reset_error && <Localize i18n_default_text='Too many attempts' />}
-        {should_show_server_form && (
-            <Localize
-                i18n_default_text='Choose a server for your DMT5 {{ account_type }} account'
-                values={{
-                    account_type: account_title,
-                }}
-            />
-        )}
-    </Text>
-);
+    has_mt5_account,
+}) => {
+    if (should_set_trading_password && has_mt5_account && !should_show_server_form) {
+        return null;
+    }
+
+    return (
+        <Text as='span' line_height='24' weight='bold' size='xs'>
+            {!should_show_server_form && should_set_trading_password && !is_password_reset_error && (
+                <Localize i18n_default_text='Set a trading password' />
+            )}
+            {!should_show_server_form && !should_set_trading_password && !is_password_reset_error && (
+                <Localize i18n_default_text='Enter your trading password' />
+            )}
+            {!should_show_server_form && is_password_reset_error && <Localize i18n_default_text='Too many attempts' />}
+            {should_show_server_form && (
+                <Localize
+                    i18n_default_text='Choose a server for your DMT5 {{ account_type }} account'
+                    values={{
+                        account_type: account_title,
+                    }}
+                />
+            )}
+        </Text>
+    );
+};
 const getSubmitText = (account_title, category) => {
     if (category === 'real') {
         return localize(
@@ -335,6 +364,7 @@ const MT5PasswordModal = ({
     const is_bvi = React.useMemo(() => {
         return landing_companies?.mt_financial_company?.financial_stp?.shortcode === 'bvi';
     }, [landing_companies]);
+    const has_mt5_account = React.useMemo(() => Boolean(mt5_login_list?.length), [mt5_login_list]);
 
     const should_set_trading_password = React.useMemo(
         () => Array.isArray(account_status.status) && account_status.status.includes('trading_password_required'),
@@ -433,38 +463,45 @@ const MT5PasswordModal = ({
                             should_show_server_form={should_show_server_form}
                             should_set_trading_password={should_set_trading_password}
                             account_title={account_title}
+                            has_mt5_account={has_mt5_account}
                             is_password_reset_error={is_password_reset}
                         />
                     )}
                 >
-                    {should_show_server_form ? (
-                        <MT5ServerForm
-                            trading_servers={trading_servers}
-                            mt5_login_list={mt5_login_list}
-                            account_title={account_title}
-                            password={password}
-                            submitMt5Form={(v, setSubmitting) => submitMt5Password(v, setSubmitting)}
-                            onBack={() => setPassword('')}
-                        />
-                    ) : (
-                        <MT5PasswordForm
-                            is_bvi={is_bvi}
-                            is_submitting={is_submitting}
-                            account_title={account_title}
-                            closeModal={closeModal}
-                            error_type={error_type}
-                            error_message={error_message}
-                            form_error={form_error}
-                            should_set_trading_password={should_set_trading_password}
-                            submitMt5Password={setPassword}
-                            is_real_financial_stp={is_real_financial_stp}
-                            validatePassword={validatePassword}
-                            should_show_server_form={should_show_server_form}
-                            values={{
-                                password,
-                            }}
-                        />
-                    )}
+                    <RequireTradingPasswordModal
+                        has_mt5_account={has_mt5_account}
+                        should_set_trading_password={should_set_trading_password}
+                    >
+                        {should_show_server_form ? (
+                            <MT5ServerForm
+                                trading_servers={trading_servers}
+                                mt5_login_list={mt5_login_list}
+                                account_title={account_title}
+                                password={password}
+                                submitMt5Form={(v, setSubmitting) => submitMt5Password(v, setSubmitting)}
+                                onBack={() => setPassword('')}
+                            />
+                        ) : (
+                            <MT5PasswordForm
+                                is_bvi={is_bvi}
+                                is_submitting={is_submitting}
+                                account_title={account_title}
+                                closeModal={closeModal}
+                                error_type={error_type}
+                                error_message={error_message}
+                                has_mt5_account={has_mt5_account}
+                                form_error={form_error}
+                                should_set_trading_password={should_set_trading_password}
+                                submitMt5Password={setPassword}
+                                is_real_financial_stp={is_real_financial_stp}
+                                validatePassword={validatePassword}
+                                should_show_server_form={should_show_server_form}
+                                values={{
+                                    password,
+                                }}
+                            />
+                        )}
+                    </RequireTradingPasswordModal>
                 </Modal>
             </DesktopWrapper>
             <MobileWrapper>
@@ -498,6 +535,7 @@ const MT5PasswordModal = ({
                             should_set_trading_password={should_set_trading_password}
                             submitMt5Password={setPassword}
                             validatePassword={validatePassword}
+                            has_mt5_account={has_mt5_account}
                             should_show_server_form={should_show_server_form}
                         />
                     )}
diff --git a/packages/trader/src/sass/app/modules/mt5/mt5.scss b/packages/trader/src/sass/app/modules/mt5/mt5.scss
index aed4bf7bfc91..0316ff752520 100644
--- a/packages/trader/src/sass/app/modules/mt5/mt5.scss
+++ b/packages/trader/src/sass/app/modules/mt5/mt5.scss
@@ -274,6 +274,17 @@
     }
 }
 
+.mt5-trading-password-required {
+    display: grid;
+    grid-auto-rows: auto;
+    grid-gap: 1.2rem;
+    justify-items: center;
+    @include tablet-up {
+        max-width: 364px;
+        margin: 0 3.2rem 3.2rem;
+    }
+}
+
 /** @define poi-icon-row; weak */
 .poi-icon-row {
     display: flex;