diff --git a/packages/wallets/src/components/Base/WalletButton/WalletButton.scss b/packages/wallets/src/components/Base/WalletButton/WalletButton.scss index 85ff27e1ac01..c809f4bd5d99 100644 --- a/packages/wallets/src/components/Base/WalletButton/WalletButton.scss +++ b/packages/wallets/src/components/Base/WalletButton/WalletButton.scss @@ -34,7 +34,7 @@ $size-map: ( ); .wallets-button { - display: inline-flex; + display: flex; justify-content: center; align-items: center; gap: 0.8rem; diff --git a/packages/wallets/src/components/Base/WalletButton/WalletButton.tsx b/packages/wallets/src/components/Base/WalletButton/WalletButton.tsx index cefdbc68322e..8f071639d47a 100644 --- a/packages/wallets/src/components/Base/WalletButton/WalletButton.tsx +++ b/packages/wallets/src/components/Base/WalletButton/WalletButton.tsx @@ -81,7 +81,7 @@ const WalletButton: React.FC = ({ }; const buttonFontSizeMapper = { - lg: 'sm', + lg: 'md', md: 'sm', sm: 'xs', } as const; diff --git a/packages/wallets/src/components/SentEmailContent/SentEmailContent.tsx b/packages/wallets/src/components/SentEmailContent/SentEmailContent.tsx index 73f0e06ff903..eeaffd26deda 100644 --- a/packages/wallets/src/components/SentEmailContent/SentEmailContent.tsx +++ b/packages/wallets/src/components/SentEmailContent/SentEmailContent.tsx @@ -14,6 +14,7 @@ import { WalletsActionScreen } from '../WalletsActionScreen'; import './SentEmailContent.scss'; type TProps = { + description?: string; platform?: TPlatforms.All; }; @@ -36,14 +37,16 @@ const REASONS = [ }, ]; -const SentEmailContent: React.FC = ({ platform }) => { +const SentEmailContent: React.FC = ({ description, platform }) => { const [shouldShowResendEmailReasons, setShouldShowResendEmailReasons] = useState(false); const [hasCountdownStarted, setHasCountdownStarted] = useState(false); const { data } = useSettings(); const { mutate: verifyEmail } = useVerifyEmail(); const { isMobile } = useDevice(); const title = PlatformDetails[platform || 'mt5'].title; - const deviceSize = isMobile ? 'lg' : 'md'; + const titleSize = 'md'; + const descriptionSize = 'sm'; + const emailLinkSize = isMobile ? 'lg' : 'md'; const [count, { resetCountdown, startCountdown }] = useCountdown({ countStart: 60, intervalMs: 1000, @@ -56,21 +59,21 @@ const SentEmailContent: React.FC = ({ platform }) => { return (
} renderButtons={() => ( { setShouldShowResendEmailReasons(true); }} - size={deviceSize} + size={emailLinkSize} text="Didn't receive the email?" variant='ghost' /> )} title='We’ve sent you an email' - titleSize={deviceSize} + titleSize={titleSize} /> {shouldShowResendEmailReasons && (
diff --git a/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.scss b/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.scss index 5787ac6145f5..0f50768eec6d 100644 --- a/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.scss +++ b/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.scss @@ -49,4 +49,26 @@ } } } + + &__investor-password { + display: flex; + flex-direction: column; + align-items: center; + gap: 2.4rem; + + &-fields { + display: flex; + flex-direction: column; + align-items: center; + gap: 1.6rem; + min-width: 32.8rem; + } + + &-buttons { + display: flex; + flex-direction: column; + align-items: center; + gap: 1.6rem; + } + } } diff --git a/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.tsx b/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.tsx index 07939608a659..219ed1a2f81b 100644 --- a/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.tsx +++ b/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { ModalStepWrapper, Tab, Tabs } from '../../../../components/Base'; +import MT5ChangeInvestorPasswordScreens from './MT5ChangeInvestorPasswordScreens'; import MT5ChangePasswordScreens from './MT5ChangePasswordScreens'; import './ChangePassword.scss'; @@ -12,8 +13,7 @@ const ChangePassword = () => { - {/* TODO: Add Investor Password */} - <> +
diff --git a/packages/wallets/src/features/cfd/screens/ChangePassword/MT5ChangeInvestorPasswordScreens.tsx b/packages/wallets/src/features/cfd/screens/ChangePassword/MT5ChangeInvestorPasswordScreens.tsx new file mode 100644 index 000000000000..31bb51ba6e27 --- /dev/null +++ b/packages/wallets/src/features/cfd/screens/ChangePassword/MT5ChangeInvestorPasswordScreens.tsx @@ -0,0 +1,106 @@ +import React, { useState } from 'react'; +import { + SentEmailContent, + WalletButton, + WalletPasswordField, + WalletsActionScreen, + WalletText, +} from '../../../../components'; +import { useModal } from '../../../../components/ModalProvider'; +import useDevice from '../../../../hooks/useDevice'; +import MT5PasswordUpdatedIcon from '../../../../public/images/ic-mt5-password-updated.svg'; + +type TChangeInvestorPasswordScreenIndex = 'emailVerification' | 'introScreen' | 'savedScreen'; + +const MT5ChangeInvestorPasswordScreens = () => { + const [currentInvestorPassword, setCurrentInvestorPassword] = useState(''); + const [newInvestorPassword, setNewInvestorPassword] = useState(''); + + const [activeScreen, setActiveScreen] = useState('introScreen'); + const handleClick = (nextScreen: TChangeInvestorPasswordScreenIndex) => setActiveScreen(nextScreen); + + const { isMobile } = useDevice(); + const { hide } = useModal(); + + const ChangeInvestorPasswordScreens = { + introScreen: { + bodyText: ( + <> + + Use this password to grant viewing access to another user. While they may view your trading + account, they will not be able to trade or take any other actions. + + + If this is the first time you try to create a password, or you have forgotten your password, + please reset it. + + + ), + button: ( +
+
+ setCurrentInvestorPassword(e.target.value)} + password={currentInvestorPassword} + /> + setNewInvestorPassword(e.target.value)} + password={newInvestorPassword} + /> +
+
+ handleClick('savedScreen')} + size={isMobile ? 'lg' : 'md'} + text='Change investor password' + /> + handleClick('emailVerification')} + size={isMobile ? 'lg' : 'md'} + text='Create or reset investor password' + variant='ghost' + /> +
+
+ ), + headingText: undefined, + icon: undefined, + }, + savedScreen: { + bodyText: ( + + Your investor password has been changed. + + ), + button: hide()} size='lg' text='Okay' />, + headingText: 'Password saved', + icon: , + }, + }; + + if (activeScreen === 'emailVerification') + return ( +
+ +
+ ); + + return ( +
+ ChangeInvestorPasswordScreens[activeScreen].button} + title={ChangeInvestorPasswordScreens[activeScreen].headingText} + /> +
+ ); +}; + +export default MT5ChangeInvestorPasswordScreens; diff --git a/packages/wallets/src/public/images/ic-mt5-password-updated.svg b/packages/wallets/src/public/images/ic-mt5-password-updated.svg new file mode 100644 index 000000000000..afa6f50d015b --- /dev/null +++ b/packages/wallets/src/public/images/ic-mt5-password-updated.svg @@ -0,0 +1 @@ + \ No newline at end of file