From 16ca231f44907b04ef68a92e7f5eb30d41b1a734 Mon Sep 17 00:00:00 2001 From: himaniraghav3 Date: Tue, 8 Jul 2025 19:42:02 +0530 Subject: [PATCH 1/2] PM-1456 Remove security section from account settings --- .../src/settings/tabs/account/AccountTab.tsx | 3 - .../account/security/Security.module.scss | 43 ---- .../tabs/account/security/Security.tsx | 143 ----------- .../ConnectionHandler/index.tsx | 24 -- .../DiceSetupModal.module.scss | 68 ----- .../dice-setup-modal/DiceSetupModal.tsx | 240 ------------------ .../security/dice-setup-modal/index.ts | 1 - .../settings/tabs/account/security/index.ts | 1 - 8 files changed, 523 deletions(-) delete mode 100644 src/apps/accounts/src/settings/tabs/account/security/Security.module.scss delete mode 100644 src/apps/accounts/src/settings/tabs/account/security/Security.tsx delete mode 100644 src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/ConnectionHandler/index.tsx delete mode 100644 src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/DiceSetupModal.module.scss delete mode 100644 src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/DiceSetupModal.tsx delete mode 100644 src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/index.ts delete mode 100644 src/apps/accounts/src/settings/tabs/account/security/index.ts diff --git a/src/apps/accounts/src/settings/tabs/account/AccountTab.tsx b/src/apps/accounts/src/settings/tabs/account/AccountTab.tsx index b0551acda..3d33610b7 100644 --- a/src/apps/accounts/src/settings/tabs/account/AccountTab.tsx +++ b/src/apps/accounts/src/settings/tabs/account/AccountTab.tsx @@ -3,7 +3,6 @@ import { FC } from 'react' import { UserProfile, UserTraits } from '~/libs/core' import { AccountRole } from './account-role' -import { SecuritySection } from './security' import { UserAndPassword } from './user-and-pass' import { MemberAddress } from './address' import styles from './AccountTab.module.scss' @@ -22,8 +21,6 @@ const AccountTab: FC = (props: AccountTabProps) => ( - - ) diff --git a/src/apps/accounts/src/settings/tabs/account/security/Security.module.scss b/src/apps/accounts/src/settings/tabs/account/security/Security.module.scss deleted file mode 100644 index d80b6953d..000000000 --- a/src/apps/accounts/src/settings/tabs/account/security/Security.module.scss +++ /dev/null @@ -1,43 +0,0 @@ -@import '@libs/ui/styles/includes'; - -.container { - margin: $sp-8 0; - - .content { - display: grid; - grid-template-columns: 1fr; - margin-bottom: 0; - - >p { - max-width: 380px; - } - - .imageWrap { - padding: $sp-2; - background-color: $black-5; - border-radius: 4px; - margin-right: $sp-2; - align-self: flex-start; - } - - .diceBtnWrap { - display: flex; - align-items: center; - color: #767676; - - @include ltelg { - margin-top: $sp-4; - } - - .diceIdButton { - align-self: center; - } - - svg { - width: 24px; - height: 24px; - margin-left: $sp-2; - } - } - } -} \ No newline at end of file diff --git a/src/apps/accounts/src/settings/tabs/account/security/Security.tsx b/src/apps/accounts/src/settings/tabs/account/security/Security.tsx deleted file mode 100644 index f521783bf..000000000 --- a/src/apps/accounts/src/settings/tabs/account/security/Security.tsx +++ /dev/null @@ -1,143 +0,0 @@ -import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react' -import { toast } from 'react-toastify' -import { KeyedMutator } from 'swr' - -import { Button, Collapsible, FormToggleSwitch } from '~/libs/ui' -import { diceIdLogo, MFAImage, SettingSection, triggerSurvey } from '~/apps/accounts/src/lib' -import { MemberMFAStatus, updateMemberMFAStatusAsync, useMemberMFAStatus, UserProfile } from '~/libs/core' - -import { DiceSetupModal } from './dice-setup-modal' -import styles from './Security.module.scss' - -interface SecurityProps { - profile: UserProfile -} - -const Security: FC = (props: SecurityProps) => { - const [setupDiceModalOpen, setSetupDiceModalOpen]: [boolean, Dispatch>] = useState(false) - - const { data: mfaStatusData, mutate: mutateMFAData }: { - data: MemberMFAStatus | undefined - mutate: KeyedMutator, - } = useMemberMFAStatus(props.profile.userId) - - const [mfaEnabled, setMFAEnabled]: [boolean, Dispatch>] = useState(false) - const [diceEnabled, setDiceEnabled]: [boolean, Dispatch>] = useState(false) - - useEffect(() => { - if (mfaStatusData) { - setMFAEnabled(mfaStatusData.mfaEnabled) - setDiceEnabled(mfaStatusData.diceEnabled) - } - }, [mfaStatusData]) - - function handleUserMFAChange(): void { - updateMemberMFAStatusAsync(props.profile.userId, { - param: { - mfaEnabled: !mfaEnabled, - }, - }) - .then(response => { - setMFAEnabled(response.result.content.mfaEnabled) - setDiceEnabled(response.result.content.diceEnabled) - toast.success('Your Multi Factor Authentication (MFA) status was updated.') - triggerSurvey() - }) - .catch(() => { - toast.error('Something went wrong. Please try again later.') - }) - } - - function handleUserDiceChange(): void { - if (!diceEnabled) { - return - } - - updateMemberMFAStatusAsync(props.profile.userId, { - param: { - diceEnabled: !diceEnabled, - }, - }) - .then(response => { - setMFAEnabled(response.result.content.mfaEnabled) - setDiceEnabled(response.result.content.diceEnabled) - toast.success('Your DICE credential was disabled.') - triggerSurvey() - }) - .catch(() => { - toast.error('Something went wrong. Please try again later.') - }) - } - - function handleDiceModalStatus(): void { - setSetupDiceModalOpen(!setupDiceModalOpen) - } - - return ( - Security} - containerClass={styles.container} - contentClass={styles.content} - > - - - - )} - title='Multi Factor Authentication (MFA) Status' - // eslint-disable-next-line max-len - infoText='Status of MFA for your Topcoder account. If enabled, MFA will be enforced during the Topcoder login process.' - actionElement={( - - )} - /> - - - DiceID logo - - )} - title='DICE ID Authenticator App' - infoText='DICE ID authentication application.' - actionElement={( -
- { - diceEnabled ? ( - - ) : ( -
- )} - /> - - {setupDiceModalOpen && ( - - )} - - ) -} - -export default Security diff --git a/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/ConnectionHandler/index.tsx b/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/ConnectionHandler/index.tsx deleted file mode 100644 index 07e3f7075..000000000 --- a/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/ConnectionHandler/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { FC, useEffect } from 'react' - -import { DiceConnectionStatus, useDiceIdConnection } from '~/libs/core' - -interface ConnectionHandlerProps { - onChange: (newStatus: DiceConnectionStatus) => void; - userId: number; -} - -export const ConnectionHandler: FC = ( - props: ConnectionHandlerProps, -) => { - const diceConnection: DiceConnectionStatus | undefined = useDiceIdConnection(props.userId) - - useEffect(() => { - if (diceConnection) { - props.onChange(diceConnection) - } - }, [diceConnection, props]) - - return ( - <> - ) -} diff --git a/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/DiceSetupModal.module.scss b/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/DiceSetupModal.module.scss deleted file mode 100644 index 0fe6f3dec..000000000 --- a/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/DiceSetupModal.module.scss +++ /dev/null @@ -1,68 +0,0 @@ -@import '@libs/ui/styles/includes'; - -.diceModal { - :global(.modal-body) { - align-items: flex-start; - } - - :global(.react-responsive-modal-closeButton) { - display: flex; - } - - .titleWrap { - display: flex; - align-items: center; - - img { - margin-right: $sp-4; - } - } - - .appSoresWrap { - display: flex; - justify-content: space-evenly; - margin: $sp-4 0; - width: 100%; - - .appStoreCard { - display: flex; - flex-direction: column; - } - } - - .qrCode { - margin: auto; - } - - .credentialImage { - height: 280px; - width: 400px; - align-self: center; - } - - .diceBigLogo { - margin: $sp-4 0; - } - - .errorWrap { - display: flex; - align-items: center; - - svg { - margin-right: $sp-2; - width: 28px; - height: 28px; - } - } - - .ctaButtons { - display: flex; - justify-content: space-between; - width: 100%; - flex: 1; - } - - .errorText { - color: #ef476f; - } -} \ No newline at end of file diff --git a/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/DiceSetupModal.tsx b/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/DiceSetupModal.tsx deleted file mode 100644 index 1b03bce41..000000000 --- a/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/DiceSetupModal.tsx +++ /dev/null @@ -1,240 +0,0 @@ -/* eslint-disable complexity */ -import { Dispatch, FC, SetStateAction, useState } from 'react' -import { QRCodeSVG } from 'qrcode.react' -import { toast } from 'react-toastify' -import { KeyedMutator } from 'swr' - -import { BaseModal, Button } from '~/libs/ui' -import { - AppleStore, - credentialImage, - diceIdLogoBig, - diceIdLogoSmall, - googlePlay, -} from '~/apps/accounts/src/lib' -import { DiceConnectionStatus, UserProfile } from '~/libs/core' - -import { ConnectionHandler } from './ConnectionHandler' -import styles from './DiceSetupModal.module.scss' - -const GooglePlayLink: string = 'https://play.google.com/store/apps/details?id=com.diwallet1' -const AppleStoreLink: string = 'https://apps.apple.com/us/app/dice-id/id1624858853' -interface DiceSetupModalProps { - mutateMFAData: KeyedMutator - onClose: () => void - profile: UserProfile -} - -const DiceSetupModal: FC = (props: DiceSetupModalProps) => { - const [step, setStep]: [number, Dispatch>] = useState(1) - - const [diceConnectionUrl, setDiceConnectionUrl] = useState() - - function handleSecondaryButtonClick(): void { - switch (step) { - case 2: return setStep(step - 1) - default: return props.onClose() - } - } - - function handlePrimaryButtonClick(): void { - switch (step) { - case 1: - return setStep(step + 1) - default: return props.onClose() - } - } - - function handleDiceConnectionStatusChange(newStatus: DiceConnectionStatus): void { - if (newStatus.diceEnabled) { - setStep(4) - toast.success('Your credentials have been verified and you are all set for' - + ' MFA using your decentralized identity (DICE ID).') - props.mutateMFAData() - } else if (newStatus.accepted) { - setStep(3) - } else if (newStatus.connection) { - setDiceConnectionUrl(newStatus.connection) - setStep(2) - } - } - - return ( - - DICE ID Title Logo -

DICE ID AUTHENTICATOR SETUP

- - )} - size='body' - classNames={{ modal: styles.diceModal }} - buttons={( -
-
- )} - > - { - step < 4 && ( -

- Step - {' '} - {step} - {' '} - of 3 -

- ) - } - { - step === 1 && ( - <> -

First, please download the DICE ID App from the Google Play Store or the iOS App Store.

-
-
- - Google Play Store - - -
-
- - - - -
-
-

- After you have downloaded and installed the mobile app, - make sure to complete the configuration process. - When ready, click next below. -

- - ) - } - { - step === 2 && ( - <> - -

- Scan the following DICE ID QR Code in your DICE ID - mobile application. -

- {diceConnectionUrl ? ( - - ) : ( -

Loading...

- )} -

- Once the connection is established, the service will - offer you a Verifiable Credential. -
- Press the ACCEPT button in your DICE ID App. -
- If you DECLINE the invitation, please try again after 5 - minutes. -

- - ) - } - { - step === 3 && ( - <> - -

- You will receive the credential offer from Topcoder in the DICE ID wallet home page. -
- Your credentials should get automatically processed in few seconds. -
- If you have disabled the auto-accept feature, - please review the credential offer and manually accept it. -
-
- Example credential offer: -

- Example Credential Offer - - ) - } - { - step === 4 && ( - <> -

Setup completed!

-

- Hello - {' '} - {props.profile.handle} - , -
-
- Your credentials have been verified and you are all set - for MFA using your decentralized identity (DICE ID). -

- DICE ID Logo -

- For more information on DICE ID, please visit - {' '} - - https://www.diceid.com - -

-

Please click Finish below.

- - ) - } - - ) -} - -export default DiceSetupModal diff --git a/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/index.ts b/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/index.ts deleted file mode 100644 index da7fd8d0c..000000000 --- a/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as DiceSetupModal } from './DiceSetupModal' diff --git a/src/apps/accounts/src/settings/tabs/account/security/index.ts b/src/apps/accounts/src/settings/tabs/account/security/index.ts deleted file mode 100644 index 998d0b21d..000000000 --- a/src/apps/accounts/src/settings/tabs/account/security/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SecuritySection } from './Security' From 316229f5bb7e6e61e894dfb3f69604c475e8f612 Mon Sep 17 00:00:00 2001 From: himaniraghav3 Date: Tue, 8 Jul 2025 20:10:50 +0530 Subject: [PATCH 2/2] Rename tab --- src/apps/accounts/src/settings/tabs/account/AccountTab.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/apps/accounts/src/settings/tabs/account/AccountTab.tsx b/src/apps/accounts/src/settings/tabs/account/AccountTab.tsx index 3d33610b7..39999ac33 100644 --- a/src/apps/accounts/src/settings/tabs/account/AccountTab.tsx +++ b/src/apps/accounts/src/settings/tabs/account/AccountTab.tsx @@ -14,7 +14,7 @@ interface AccountTabProps { const AccountTab: FC = (props: AccountTabProps) => (
-

ACCOUNT INFORMATION & SECURITY

+

ACCOUNT INFORMATION