MP39 -> username&password settings -> dev

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

@@ -1,7 +1,13 @@
 import { ReactComponent as MFAImage } from './mfa.svg'
+import { ReactComponent as AppleStore } from './apple-store.svg'
 import diceIdLogo from './dicelogo.png'
+import diceIdLogoBig from './dicelogobig.png'
+import googlePlay from './google-play.png'
 
 export {
+    AppleStore,
     diceIdLogo,
+    diceIdLogoBig,
+    googlePlay,
     MFAImage,
 }

src/apps/accounts/src/settings/tabs/AccountSettingsTabs.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, FC, SetStateAction, useMemo, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 
-import { UserProfile } from '~/libs/core'
+import { useMemberTraits, UserProfile, UserTraits } from '~/libs/core'
 import { TabsNavbar } from '~/libs/ui'
 
 import { AccountSettingsTabsConfig, AccountSettingsTabViews, getHashFromTabId, getTabIdFromHash } from './config'
@@ -22,6 +22,8 @@ const AccountSettingsTabs: FC<AccountSettingsTabsProps> = (props: AccountSetting
     const [activeTab, setActiveTab]: [string, Dispatch<SetStateAction<string>>]
         = useState<string>(activeTabHash)
 
+    const memberTraits: UserTraits[] | undefined = useMemberTraits(props.profile.handle)
+
     function handleTabChange(tabId: string): void {
         setActiveTab(tabId)
         window.location.hash = getHashFromTabId(tabId)
@@ -36,7 +38,7 @@ const AccountSettingsTabs: FC<AccountSettingsTabsProps> = (props: AccountSetting
             />
 
             {activeTab === AccountSettingsTabViews.account && (
-                <AccountTab profile={props.profile} />
+                <AccountTab profile={props.profile} memberTraits={memberTraits} />
             )}
 
             {activeTab === AccountSettingsTabViews.preferences && (

src/apps/accounts/src/settings/tabs/account/AccountTab.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react'
 
-import { UserProfile } from '~/libs/core'
+import { UserProfile, UserTraits } from '~/libs/core'
 
 import { AccountRole } from './account-role'
 import { SecuritySection } from './security'
@@ -9,6 +9,7 @@ import styles from './AccountTab.module.scss'
 
 interface AccountTabProps {
     profile: UserProfile
+    memberTraits: UserTraits[] | undefined
 }
 
 const AccountTab: FC<AccountTabProps> = (props: AccountTabProps) => (
@@ -17,9 +18,9 @@ const AccountTab: FC<AccountTabProps> = (props: AccountTabProps) => (
 
         <AccountRole profile={props.profile} />
 
-        <UserAndPassword profile={props.profile} />
+        <UserAndPassword profile={props.profile} memberTraits={props.memberTraits} />
 
-        <SecuritySection />
+        <SecuritySection profile={props.profile} />
     </div>
 )
 

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

@@ -1,18 +1,43 @@
-import { Dispatch, FC, SetStateAction, useState } from 'react'
+import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
+import { toast } from 'react-toastify'
 
 import { Button, Collapsible, FormToggleSwitch } from '~/libs/ui'
 import { diceIdLogo, MFAImage, SettingSection } 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'
 
-const Security: FC<{}> = () => {
-    const [mfaStatus, setMFAStatus]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false)
+interface SecurityProps {
+    profile: UserProfile
+}
+
+const Security: FC<SecurityProps> = (props: SecurityProps) => {
     const [setupDiceModalOpen, setSetupDiceModalOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false)
 
-    function handleUserMFAChange(event: any): void {
-        console.log('handleUserMFAChange', event)
-        setMFAStatus(!mfaStatus)
+    const mfaStatusData: MemberMFAStatus | undefined = useMemberMFAStatus(props.profile.userId)
+
+    const [mfaEnabled, setMFAEnabled]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false)
+
+    useEffect(() => {
+        if (mfaStatusData) {
+            setMFAEnabled(mfaStatusData.mfaEnabled)
+        }
+    }, [mfaStatusData])
+
+    function handleUserMFAChange(): void {
+        updateMemberMFAStatusAsync(props.profile.userId, {
+            param: {
+                mfaEnabled: !mfaEnabled,
+            },
+        })
+            .then(() => {
+                setMFAEnabled(!mfaEnabled)
+                toast.success('Your Multi Factor Authentication (MFA) status was updated.')
+            })
+            .catch(() => {
+                toast.error('Something went wrong. Please try again later.')
+            })
     }
 
     function handleDiceModalStatus(): void {
@@ -38,7 +63,8 @@ const Security: FC<{}> = () => {
                     <FormToggleSwitch
                         name='mfaStatus'
                         onChange={handleUserMFAChange}
-                        value={mfaStatus}
+                        value={mfaEnabled}
+                        disabled={mfaStatusData?.diceEnabled}
                     />
                 )}
             />
@@ -58,13 +84,15 @@ const Security: FC<{}> = () => {
                         size='lg'
                         className={styles.diceIdButton}
                         onClick={handleDiceModalStatus}
+                        disabled={!mfaEnabled || mfaStatusData?.diceEnabled}
                     />
                 )}
             />
 
             {setupDiceModalOpen && (
                 <DiceSetupModal
                     onClose={handleDiceModalStatus}
+                    profile={props.profile}
                 />
             )}
         </Collapsible>

src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/DiceSetupModal.module.scss

@@ -0,0 +1,30 @@
+@import '@libs/ui/styles/includes';
+
+.diceModal {
+    :global(.react-responsive-modal-closeButton) {
+        display: flex;
+    }
+
+    .appSoresWrap {
+        display: flex;
+        justify-content: space-evenly;
+        margin: $sp-4 0;
+
+        .appStoreCard {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+    }
+
+    .qrCode {
+        margin: auto;
+    }
+
+    .ctaButtons {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        flex: 1;
+    }
+}