-
Notifications
You must be signed in to change notification settings - Fork 322
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[WALL] Aizad/WALL-2807/Create Reset Password Popup and Success Popup (#…
…11906) * feat: intermediate result * feat: add formik * feat: separate components to different screens * refactor: create mt5ChangeInvestorPasswordScreens scss file * chore: adding logic and stitching for the last modal - created the remaining modals for the user flow - implement logic that will send request for resetting the password - added some props to ModalStepWrapper * fix: typescript errors and refactor some stuffs * fix: resolve pt.1 * feat: add send email handler * feat: rename form submit handler * fix: resolve comments * feat: complete reset mt5 investor password * feat: fix small issue * feat: implement review suggestions * feat: change imports * fix: build errors * fix: test case * fix: sonarcloud issue * fix: updated WalletPasswordField component to WalletPasswordFieldLazy * fix: ui issues on desktop and mobile view * fix: sonarcloud issue * fix: sonarcloud issue * fix: failed test * fix: failed test * fix: font size for reset mt5 password modal * fix: added mobile styling differences --------- Co-authored-by: Sergei Baranovski <[email protected]> Co-authored-by: lubega-deriv <[email protected]>
- Loading branch information
3 people
authored
Jan 22, 2024
1 parent
b252dde
commit 278a8b2
Showing
18 changed files
with
403 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
61 changes: 61 additions & 0 deletions
61
packages/wallets/src/components/WalletsResetMT5Password/WalletSuccessResetMT5Password.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import React, { FC, useCallback } from 'react'; | ||
| import { Trans } from 'react-i18next'; | ||
| import useDevice from '../../hooks/useDevice'; | ||
| import MT5PasswordUpdatedIcon from '../../public/images/ic-mt5-password-updated.svg'; | ||
| import MT5SuccessPasswordReset from '../../public/images/mt5-success-password-reset.svg'; | ||
| import { ModalStepWrapper, WalletButton } from '../Base'; | ||
| import { useModal } from '../ModalProvider'; | ||
| import { WalletsActionScreen } from '../WalletsActionScreen'; | ||
|
|
||
| type WalletSuccessResetMT5PasswordProps = { | ||
| isInvestorPassword?: boolean; | ||
| title: string; | ||
| }; | ||
|
|
||
| const WalletSuccessResetMT5Password: FC<WalletSuccessResetMT5PasswordProps> = ({ | ||
| isInvestorPassword = false, | ||
| title, | ||
| }) => { | ||
| const { hide } = useModal(); | ||
| const { isDesktop, isMobile } = useDevice(); | ||
|
|
||
| const renderFooter = useCallback(() => { | ||
| return isMobile ? ( | ||
| <WalletButton isFullWidth onClick={() => hide()} size='lg'> | ||
| <Trans defaults='Done' /> | ||
| </WalletButton> | ||
| ) : null; | ||
| }, [isMobile, hide]); | ||
|
|
||
| const renderButtons = useCallback(() => { | ||
| return isDesktop ? ( | ||
| <WalletButton onClick={() => hide()} size='lg'> | ||
| <Trans defaults='Done' /> | ||
| </WalletButton> | ||
| ) : null; | ||
| }, [isDesktop, hide]); | ||
|
|
||
| return ( | ||
| <ModalStepWrapper | ||
| renderFooter={isMobile ? renderFooter : undefined} | ||
| shouldFixedFooter={isMobile} | ||
| title={`Manage ${title} password`} | ||
| > | ||
| <div className='wallets-reset-mt5-password'> | ||
| <WalletsActionScreen | ||
| description={ | ||
| isInvestorPassword | ||
| ? 'Your investor password has been changed.' | ||
| : `You have a new ${title} password to log in to your ${title} accounts on the web and mobile apps.` | ||
| } | ||
| descriptionSize='sm' | ||
| icon={isInvestorPassword ? <MT5PasswordUpdatedIcon /> : <MT5SuccessPasswordReset />} | ||
| renderButtons={renderButtons} | ||
| title={isInvestorPassword ? 'Password saved' : 'Success'} | ||
| /> | ||
| </div> | ||
| </ModalStepWrapper> | ||
| ); | ||
| }; | ||
|
|
||
| export default WalletSuccessResetMT5Password; |
19 changes: 19 additions & 0 deletions
19
packages/wallets/src/components/WalletsResetMT5Password/WalletsResetMT5Password.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| .wallets-reset-mt5-password { | ||
| width: 44rem; | ||
| padding: 2.4rem; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 2.4rem; | ||
|
|
||
| @include mobile { | ||
| align-items: center; | ||
| width: 100%; | ||
| padding-inline: 1.6rem; | ||
| } | ||
|
|
||
| &__button-group { | ||
| display: flex; | ||
| justify-content: flex-end; | ||
| gap: 0.8rem; | ||
| } | ||
| } |
140 changes: 140 additions & 0 deletions
140
packages/wallets/src/components/WalletsResetMT5Password/WalletsResetMT5Password.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| import React, { useEffect } from 'react'; | ||
| import { Trans } from 'react-i18next'; | ||
| import { useTradingPlatformInvestorPasswordReset, useTradingPlatformPasswordReset } from '@deriv/api'; | ||
| import { PlatformDetails } from '../../features/cfd/constants'; | ||
| import useDevice from '../../hooks/useDevice'; | ||
| import { TPlatforms } from '../../types'; | ||
| import { validPassword } from '../../utils/password'; | ||
| import { ModalStepWrapper, WalletButton, WalletButtonGroup, WalletPasswordFieldLazy, WalletText } from '../Base'; | ||
| import { WalletPasswordFieldProps } from '../Base/WalletPasswordFieldLazy/WalletPasswordFieldLazy'; | ||
| import { useModal } from '../ModalProvider'; | ||
| import WalletSuccessResetMT5Password from './WalletSuccessResetMT5Password'; | ||
| import './WalletsResetMT5Password.scss'; | ||
|
|
||
| type WalletsResetMT5PasswordProps = { | ||
| actionParams: string; | ||
| isInvestorPassword?: boolean; | ||
| onChange: WalletPasswordFieldProps['onChange']; | ||
| password: WalletPasswordFieldProps['password']; | ||
| platform: Exclude<TPlatforms.All, 'ctrader'>; | ||
| verificationCode: string; | ||
| }; | ||
|
|
||
| const WalletsResetMT5Password = ({ | ||
| actionParams, | ||
| isInvestorPassword = false, | ||
| onChange, | ||
| password, | ||
| platform, | ||
| verificationCode, | ||
| }: WalletsResetMT5PasswordProps) => { | ||
| const { title } = PlatformDetails[platform]; | ||
| const { | ||
| isError: isChangePasswordError, | ||
| isLoading: isChangePasswordLoading, | ||
| isSuccess: isChangePasswordSuccess, | ||
| mutate: changePassword, | ||
| } = useTradingPlatformPasswordReset(); | ||
| const { | ||
| isError: isChangeInvestorPasswordError, | ||
| isLoading: isChangeInvestorPasswordLoading, | ||
| isSuccess: isChangeInvestorPasswordSuccess, | ||
| mutate: changeInvestorPassword, | ||
| } = useTradingPlatformInvestorPasswordReset(); | ||
|
|
||
| const { hide, show } = useModal(); | ||
| const { isDesktop, isMobile } = useDevice(); | ||
|
|
||
| const handleSubmit = () => { | ||
| if (isInvestorPassword) { | ||
| const accountId = localStorage.getItem('trading_platform_investor_password_reset_account_id') ?? ''; | ||
| changeInvestorPassword({ | ||
| account_id: accountId, | ||
| new_password: password, | ||
| platform: 'mt5', | ||
| verification_code: verificationCode, | ||
| }); | ||
| } else { | ||
| changePassword({ | ||
| new_password: password, | ||
| platform, | ||
| verification_code: verificationCode, | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| if (isChangePasswordSuccess) { | ||
| localStorage.removeItem(`verification_code.${actionParams}`); // TODO:Remove verification code from local storage | ||
| show(<WalletSuccessResetMT5Password title={title} />); | ||
| } else if (isChangePasswordError) { | ||
| hide(); | ||
| } | ||
| }, [hide, platform, title, show, actionParams, isChangePasswordSuccess, isChangePasswordError]); | ||
|
|
||
| useEffect(() => { | ||
| if (isChangeInvestorPasswordSuccess) { | ||
| localStorage.removeItem(`verification_code.${actionParams}`); // TODO:Remove verification code from local storage | ||
| show(<WalletSuccessResetMT5Password isInvestorPassword title={title} />); | ||
| } else if (isChangeInvestorPasswordError) { | ||
| hide(); | ||
| } | ||
| }, [hide, platform, title, show, actionParams, isChangeInvestorPasswordSuccess, isChangeInvestorPasswordError]); | ||
|
|
||
| const renderFooter = () => { | ||
| return isMobile ? ( | ||
| <WalletButtonGroup isFullWidth> | ||
| <WalletButton onClick={() => hide()} size='lg' variant='outlined'> | ||
| <Trans defaults='Cancel' /> | ||
| </WalletButton> | ||
| <WalletButton | ||
| disabled={!validPassword(password)} | ||
| isLoading={isChangeInvestorPasswordLoading || isChangePasswordLoading} | ||
| onClick={handleSubmit} | ||
| size='lg' | ||
| variant='contained' | ||
| > | ||
| <Trans defaults='Create' /> | ||
| </WalletButton> | ||
| </WalletButtonGroup> | ||
| ) : null; | ||
| }; | ||
|
|
||
| return ( | ||
| <ModalStepWrapper renderFooter={renderFooter} shouldHideHeader={isDesktop} title={`Manage ${title} password`}> | ||
| <div className='wallets-reset-mt5-password'> | ||
| <WalletText weight='bold'> | ||
| Create a new {title} {isInvestorPassword && 'investor'} Password | ||
| </WalletText> | ||
| <WalletPasswordFieldLazy | ||
| label={isInvestorPassword ? 'New investor password' : `${title} password`} | ||
| onChange={onChange} | ||
| password={password} | ||
| /> | ||
| {!isInvestorPassword && ( | ||
| <WalletText size='sm'> | ||
| Strong passwords contain at least 8 characters, combine uppercase and lowercase letters, | ||
| numbers, and symbols. | ||
| </WalletText> | ||
| )} | ||
| {isDesktop && ( | ||
| <div className='wallets-reset-mt5-password__button-group'> | ||
| <WalletButton onClick={() => hide()} variant='outlined'> | ||
| <Trans defaults='Cancel' /> | ||
| </WalletButton> | ||
| <WalletButton | ||
| disabled={!validPassword(password)} | ||
| isLoading={isChangeInvestorPasswordLoading || isChangePasswordLoading} | ||
| onClick={handleSubmit} | ||
| variant='contained' | ||
| > | ||
| <Trans defaults='Create' /> | ||
| </WalletButton> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </ModalStepWrapper> | ||
| ); | ||
| }; | ||
|
|
||
| export default WalletsResetMT5Password; |
1 change: 1 addition & 0 deletions
1
packages/wallets/src/components/WalletsResetMT5Password/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default as WalletsResetMT5Password } from './WalletsResetMT5Password'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
278a8b2There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
deriv-app – ./
deriv-app.vercel.app
deriv-app.binary.sx
binary.sx
deriv-app-git-master.binary.sx