Merge pull request #940 from topcoder-platform/qa

New DICE

Author: eisbilir

package.json

@@ -246,5 +246,9 @@
         }
       }
     ]
+  },
+  "volta": {
+    "node": "16.15.0",
+    "yarn": "1.22.19"
   }
 }

src/apps/accounts/src/lib/assets/security/credential.png

@@ -1,17 +1,17 @@
 import { ReactComponent as MFAImage } from './mfa.svg'
 import { ReactComponent as AppleStore } from './apple-store.svg'
-import { ReactComponent as UnSuccessfullDiceVerificationIcon } from './unsuccessful.svg'
+import credentialImage from './credential.png'
 import diceIdLogo from './dicelogo.png'
 import diceIdLogoBig from './dicelogobig.png'
 import diceIdLogoSmall from './dicelogosmall.png'
 import googlePlay from './google-play.png'
 
 export {
     AppleStore,
+    credentialImage,
     diceIdLogo,
     diceIdLogoBig,
     diceIdLogoSmall,
     googlePlay,
     MFAImage,
-    UnSuccessfullDiceVerificationIcon,
 }

src/apps/accounts/src/lib/assets/security/index.ts

@@ -1,9 +1,8 @@
 import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
 import { toast } from 'react-toastify'
 import { KeyedMutator } from 'swr'
-import { noop } from 'lodash'
 
-import { Button, Collapsible, FormToggleSwitch, IconSolid, Tooltip } from '~/libs/ui'
+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'
 
@@ -23,10 +22,12 @@ const Security: FC<SecurityProps> = (props: SecurityProps) => {
     } = useMemberMFAStatus(props.profile.userId)
 
     const [mfaEnabled, setMFAEnabled]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false)
+    const [diceEnabled, setDiceEnabled]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false)
 
     useEffect(() => {
         if (mfaStatusData) {
             setMFAEnabled(mfaStatusData.mfaEnabled)
+            setDiceEnabled(mfaStatusData.diceEnabled)
         }
     }, [mfaStatusData])
 
@@ -36,8 +37,9 @@ const Security: FC<SecurityProps> = (props: SecurityProps) => {
                 mfaEnabled: !mfaEnabled,
             },
         })
-            .then(() => {
-                setMFAEnabled(!mfaEnabled)
+            .then(response => {
+                setMFAEnabled(response.result.content.mfaEnabled)
+                setDiceEnabled(response.result.content.diceEnabled)
                 toast.success('Your Multi Factor Authentication (MFA) status was updated.')
                 triggerSurvey()
             })
@@ -46,6 +48,27 @@ const Security: FC<SecurityProps> = (props: SecurityProps) => {
             })
     }
 
+    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)
     }
@@ -70,7 +93,6 @@ const Security: FC<SecurityProps> = (props: SecurityProps) => {
                         name='mfaStatus'
                         onChange={handleUserMFAChange}
                         value={mfaEnabled}
-                        disabled={mfaStatusData?.diceEnabled}
                     />
                 )}
             />
@@ -86,12 +108,11 @@ const Security: FC<SecurityProps> = (props: SecurityProps) => {
                 actionElement={(
                     <div className={styles.diceBtnWrap}>
                         {
-                            mfaStatusData?.diceEnabled ? (
+                            diceEnabled ? (
                                 <FormToggleSwitch
                                     name='diceEnabled'
-                                    onChange={noop}
+                                    onChange={handleUserDiceChange}
                                     value={mfaStatusData?.diceEnabled as boolean}
-                                    disabled={mfaStatusData?.diceEnabled}
                                 />
                             ) : (
                                 <Button
@@ -104,15 +125,6 @@ const Security: FC<SecurityProps> = (props: SecurityProps) => {
                                 />
                             )
                         }
-                        {
-                            mfaStatusData?.diceEnabled && (
-                                <Tooltip
-                                    content='Please reach out to support@topcoder.com for deactivating Dice ID.'
-                                >
-                                    <IconSolid.InformationCircleIcon />
-                                </Tooltip>
-                            )
-                        }
                     </div>
                 )}
             />

src/apps/accounts/src/settings/tabs/account/security/Security.tsx

@@ -0,0 +1,24 @@
+import { FC, useEffect } from 'react'
+
+import { DiceConnectionStatus, useDiceIdConnection } from '~/libs/core'
+
+interface ConnectionHandlerProps {
+    onChange: (newStatus: DiceConnectionStatus) => void;
+    userId: number;
+}
+
+export const ConnectionHandler: FC<ConnectionHandlerProps> = (
+    props: ConnectionHandlerProps,
+) => {
+    const diceConnection: DiceConnectionStatus | undefined = useDiceIdConnection(props.userId)
+
+    useEffect(() => {
+        if (diceConnection) {
+            props.onChange(diceConnection)
+        }
+    }, [diceConnection, props])
+
+    return (
+        <></>
+    )
+}

src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/ConnectionHandler/index.tsx

@@ -34,6 +34,12 @@
         margin: auto;
     }
 
+    .credentialImage {
+        height: 280px;
+        width: 400px;
+        align-self: center;
+    }
+
     .diceBigLogo {
         margin: $sp-4 0;
     }