diff options
Diffstat (limited to 'src/screens/Settings')
| -rw-r--r-- | src/screens/Settings/AccountSettings.tsx | 33 | ||||
| -rw-r--r-- | src/screens/Settings/components/Email2FAToggle.tsx | 65 |
2 files changed, 27 insertions, 71 deletions
diff --git a/src/screens/Settings/AccountSettings.tsx b/src/screens/Settings/AccountSettings.tsx index 7c50bd8df..393bad2f8 100644 --- a/src/screens/Settings/AccountSettings.tsx +++ b/src/screens/Settings/AccountSettings.tsx @@ -9,8 +9,10 @@ import * as SettingsList from '#/screens/Settings/components/SettingsList' import {atoms as a, useTheme} from '#/alf' import {useDialogControl} from '#/components/Dialog' import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings' -import {ChangeEmailDialog} from '#/components/dialogs/ChangeEmailDialog' -import {VerifyEmailDialog} from '#/components/dialogs/VerifyEmailDialog' +import { + EmailDialogScreenID, + useEmailDialogControl, +} from '#/components/dialogs/EmailDialog' import {At_Stroke2_Corner2_Rounded as AtIcon} from '#/components/icons/At' import {BirthdayCake_Stroke2_Corner2_Rounded as BirthdayCakeIcon} from '#/components/icons/BirthdayCake' import {Car_Stroke2_Corner2_Rounded as CarIcon} from '#/components/icons/Car' @@ -31,8 +33,7 @@ export function AccountSettingsScreen({}: Props) { const {_} = useLingui() const {currentAccount} = useSession() const {openModal} = useModalControls() - const verifyEmailControl = useDialogControl() - const changeEmailControl = useDialogControl() + const emailDialogControl = useEmailDialogControl() const birthdayControl = useDialogControl() const changeHandleControl = useDialogControl() const exportCarControl = useDialogControl() @@ -75,7 +76,11 @@ export function AccountSettingsScreen({}: Props) { {currentAccount && !currentAccount.emailConfirmed && ( <SettingsList.PressableItem label={_(msg`Verify your email`)} - onPress={() => verifyEmailControl.open()} + onPress={() => + emailDialogControl.open({ + id: EmailDialogScreenID.Verify, + }) + } style={[ a.my_xs, a.mx_lg, @@ -96,11 +101,15 @@ export function AccountSettingsScreen({}: Props) { </SettingsList.PressableItem> )} <SettingsList.PressableItem - label={_(msg`Change email`)} - onPress={() => changeEmailControl.open()}> + label={_(msg`Update email`)} + onPress={() => + emailDialogControl.open({ + id: EmailDialogScreenID.Update, + }) + }> <SettingsList.ItemIcon icon={PencilIcon} /> <SettingsList.ItemText> - <Trans>Change email</Trans> + <Trans>Update email</Trans> </SettingsList.ItemText> <SettingsList.Chevron /> </SettingsList.PressableItem> @@ -167,14 +176,6 @@ export function AccountSettingsScreen({}: Props) { </SettingsList.Container> </Layout.Content> - <ChangeEmailDialog - control={changeEmailControl} - verifyEmailControl={verifyEmailControl} - /> - <VerifyEmailDialog - control={verifyEmailControl} - changeEmailControl={changeEmailControl} - /> <BirthDateSettingsDialog control={birthdayControl} /> <ChangeHandleDialog control={changeHandleControl} /> <ExportCarDialog control={exportCarControl} /> diff --git a/src/screens/Settings/components/Email2FAToggle.tsx b/src/screens/Settings/components/Email2FAToggle.tsx index 3e341cd73..584026298 100644 --- a/src/screens/Settings/components/Email2FAToggle.tsx +++ b/src/screens/Settings/components/Email2FAToggle.tsx @@ -2,11 +2,12 @@ import React from 'react' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {useAgent, useSession} from '#/state/session' +import {useSession} from '#/state/session' import {useDialogControl} from '#/components/Dialog' -import {ChangeEmailDialog} from '#/components/dialogs/ChangeEmailDialog' -import {VerifyEmailDialog} from '#/components/dialogs/VerifyEmailDialog' -import * as Prompt from '#/components/Prompt' +import { + EmailDialogScreenID, + useEmailDialogControl, +} from '#/components/dialogs/EmailDialog' import {DisableEmail2FADialog} from './DisableEmail2FADialog' import * as SettingsList from './SettingsList' @@ -14,63 +15,17 @@ export function Email2FAToggle() { const {_} = useLingui() const {currentAccount} = useSession() const disableDialogControl = useDialogControl() - const enableDialogControl = useDialogControl() - const verifyEmailDialogControl = useDialogControl() - const changeEmailDialogControl = useDialogControl() - const agent = useAgent() - - const enableEmailAuthFactor = React.useCallback(async () => { - if (currentAccount?.email) { - await agent.com.atproto.server.updateEmail({ - email: currentAccount.email, - emailAuthFactor: true, - }) - await agent.resumeSession(agent.session!) - } - }, [currentAccount, agent]) + const emailDialogControl = useEmailDialogControl() const onToggle = React.useCallback(() => { - if (!currentAccount) { - return - } - if (currentAccount.emailAuthFactor) { - disableDialogControl.open() - } else { - if (!currentAccount.emailConfirmed) { - verifyEmailDialogControl.open() - return - } - enableDialogControl.open() - } - }, [ - currentAccount, - enableDialogControl, - verifyEmailDialogControl, - disableDialogControl, - ]) + emailDialogControl.open({ + id: EmailDialogScreenID.Manage2FA, + }) + }, [emailDialogControl]) return ( <> <DisableEmail2FADialog control={disableDialogControl} /> - <Prompt.Basic - control={enableDialogControl} - title={_(msg`Enable Email 2FA`)} - description={_(msg`Require an email code to sign in to your account.`)} - onConfirm={enableEmailAuthFactor} - confirmButtonCta={_(msg`Enable`)} - /> - <VerifyEmailDialog - control={verifyEmailDialogControl} - changeEmailControl={changeEmailDialogControl} - onCloseAfterVerifying={enableDialogControl.open} - reasonText={_( - msg`You need to verify your email address before you can enable email 2FA.`, - )} - /> - <ChangeEmailDialog - control={changeEmailDialogControl} - verifyEmailControl={verifyEmailDialogControl} - /> <SettingsList.BadgeButton label={ currentAccount?.emailAuthFactor ? _(msg`Change`) : _(msg`Enable`) |