diff options
Diffstat (limited to 'src/view/screens')
| -rw-r--r-- | src/view/screens/Settings/DisableEmail2FADialog.tsx | 195 | ||||
| -rw-r--r-- | src/view/screens/Settings/Email2FAToggle.tsx | 60 | ||||
| -rw-r--r-- | src/view/screens/Settings/index.tsx | 8 |
3 files changed, 263 insertions, 0 deletions
diff --git a/src/view/screens/Settings/DisableEmail2FADialog.tsx b/src/view/screens/Settings/DisableEmail2FADialog.tsx new file mode 100644 index 000000000..4e9a810ca --- /dev/null +++ b/src/view/screens/Settings/DisableEmail2FADialog.tsx @@ -0,0 +1,195 @@ +import React, {useState} from 'react' +import {View} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {cleanError} from '#/lib/strings/errors' +import {isNative} from '#/platform/detection' +import {getAgent, useSession, useSessionApi} from '#/state/session' +import {ErrorMessage} from '#/view/com/util/error/ErrorMessage' +import * as Toast from '#/view/com/util/Toast' +import {atoms as a, useBreakpoints, useTheme} from '#/alf' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import * as Dialog from '#/components/Dialog' +import * as TextField from '#/components/forms/TextField' +import {Lock_Stroke2_Corner0_Rounded as Lock} from '#/components/icons/Lock' +import {Loader} from '#/components/Loader' +import {P, Text} from '#/components/Typography' + +enum Stages { + Email, + ConfirmCode, +} + +export function DisableEmail2FADialog({ + control, +}: { + control: Dialog.DialogOuterProps['control'] +}) { + const {_} = useLingui() + const t = useTheme() + const {gtMobile} = useBreakpoints() + const {currentAccount} = useSession() + const {updateCurrentAccount} = useSessionApi() + + const [stage, setStage] = useState<Stages>(Stages.Email) + const [confirmationCode, setConfirmationCode] = useState<string>('') + const [isProcessing, setIsProcessing] = useState<boolean>(false) + const [error, setError] = useState<string>('') + + const onSendEmail = async () => { + setError('') + setIsProcessing(true) + try { + await getAgent().com.atproto.server.requestEmailUpdate() + setStage(Stages.ConfirmCode) + } catch (e) { + setError(cleanError(String(e))) + } finally { + setIsProcessing(false) + } + } + + const onConfirmDisable = async () => { + setError('') + setIsProcessing(true) + try { + if (currentAccount?.email) { + await getAgent().com.atproto.server.updateEmail({ + email: currentAccount!.email, + token: confirmationCode.trim(), + emailAuthFactor: false, + }) + updateCurrentAccount({emailAuthFactor: false}) + Toast.show(_(msg`Email 2FA disabled`)) + } + control.close() + } catch (e) { + const errMsg = String(e) + if (errMsg.includes('Token is invalid')) { + setError(_(msg`Invalid 2FA confirmation code.`)) + } else { + setError(cleanError(errMsg)) + } + } finally { + setIsProcessing(false) + } + } + + return ( + <Dialog.Outer control={control}> + <Dialog.Handle /> + + <Dialog.ScrollableInner + accessibilityDescribedBy="dialog-description" + accessibilityLabelledBy="dialog-title"> + <View style={[a.relative, a.gap_md, a.w_full]}> + <Text + nativeID="dialog-title" + style={[a.text_2xl, a.font_bold, t.atoms.text]}> + <Trans>Disable Email 2FA</Trans> + </Text> + <P + nativeID="dialog-description" + style={[a.text_sm, t.atoms.text, a.leading_snug]}> + {stage === Stages.ConfirmCode ? ( + <Trans> + An email has been sent to{' '} + {currentAccount?.email || '(no email)'}. It includes a + confirmation code which you can enter below. + </Trans> + ) : ( + <Trans> + To disable the email 2FA method, please verify your access to + the email address. + </Trans> + )} + </P> + + {error ? <ErrorMessage message={error} /> : undefined} + + {stage === Stages.Email ? ( + <View style={gtMobile && [a.flex_row, a.justify_end, a.gap_md]}> + <Button + testID="sendEmailButton" + variant="solid" + color="primary" + size={gtMobile ? 'small' : 'large'} + onPress={onSendEmail} + label={_(msg`Send verification email`)} + disabled={isProcessing}> + <ButtonText> + <Trans>Send verification email</Trans> + </ButtonText> + {isProcessing && <ButtonIcon icon={Loader} />} + </Button> + <Button + testID="haveCodeButton" + variant="ghost" + color="primary" + size={gtMobile ? 'small' : 'large'} + onPress={() => setStage(Stages.ConfirmCode)} + label={_(msg`I have a code`)} + disabled={isProcessing}> + <ButtonText> + <Trans>I have a code</Trans> + </ButtonText> + </Button> + </View> + ) : stage === Stages.ConfirmCode ? ( + <View> + <View style={[a.mb_md]}> + <TextField.LabelText> + <Trans>Confirmation code</Trans> + </TextField.LabelText> + <TextField.Root> + <TextField.Icon icon={Lock} /> + <TextField.Input + testID="confirmationCode" + label={_(msg`Confirmation code`)} + autoCapitalize="none" + autoFocus + autoCorrect={false} + autoComplete="off" + value={confirmationCode} + onChangeText={setConfirmationCode} + editable={!isProcessing} + /> + </TextField.Root> + </View> + <View style={gtMobile && [a.flex_row, a.justify_end]}> + <Button + testID="resendCodeBtn" + variant="ghost" + color="primary" + size={gtMobile ? 'small' : 'large'} + onPress={onSendEmail} + label={_(msg`Resend email`)} + disabled={isProcessing}> + <ButtonText> + <Trans>Resend email</Trans> + </ButtonText> + </Button> + <Button + testID="confirmBtn" + variant="solid" + color="primary" + size={gtMobile ? 'small' : 'large'} + onPress={onConfirmDisable} + label={_(msg`Confirm`)} + disabled={isProcessing}> + <ButtonText> + <Trans>Confirm</Trans> + </ButtonText> + {isProcessing && <ButtonIcon icon={Loader} />} + </Button> + </View> + </View> + ) : undefined} + + {!gtMobile && isNative && <View style={{height: 40}} />} + </View> + </Dialog.ScrollableInner> + </Dialog.Outer> + ) +} diff --git a/src/view/screens/Settings/Email2FAToggle.tsx b/src/view/screens/Settings/Email2FAToggle.tsx new file mode 100644 index 000000000..93f1b2042 --- /dev/null +++ b/src/view/screens/Settings/Email2FAToggle.tsx @@ -0,0 +1,60 @@ +import React from 'react' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {useModalControls} from '#/state/modals' +import {getAgent, useSession, useSessionApi} from '#/state/session' +import {ToggleButton} from 'view/com/util/forms/ToggleButton' +import {useDialogControl} from '#/components/Dialog' +import {DisableEmail2FADialog} from './DisableEmail2FADialog' + +export function Email2FAToggle() { + const {_} = useLingui() + const {currentAccount} = useSession() + const {updateCurrentAccount} = useSessionApi() + const {openModal} = useModalControls() + const disableDialogCtrl = useDialogControl() + + const enableEmailAuthFactor = React.useCallback(async () => { + if (currentAccount?.email) { + await getAgent().com.atproto.server.updateEmail({ + email: currentAccount.email, + emailAuthFactor: true, + }) + updateCurrentAccount({ + emailAuthFactor: true, + }) + } + }, [currentAccount, updateCurrentAccount]) + + const onToggle = React.useCallback(() => { + if (!currentAccount) { + return + } + if (currentAccount.emailAuthFactor) { + disableDialogCtrl.open() + } else { + if (!currentAccount.emailConfirmed) { + openModal({ + name: 'verify-email', + onSuccess: enableEmailAuthFactor, + }) + return + } + enableEmailAuthFactor() + } + }, [currentAccount, enableEmailAuthFactor, openModal, disableDialogCtrl]) + + return ( + <> + <DisableEmail2FADialog control={disableDialogCtrl} /> + <ToggleButton + type="default-light" + label={_(msg`Require email code to log into your account`)} + labelType="lg" + isSelected={!!currentAccount?.emailAuthFactor} + onPress={onToggle} + /> + </> + ) +} diff --git a/src/view/screens/Settings/index.tsx b/src/view/screens/Settings/index.tsx index bb38da676..1211aa5c5 100644 --- a/src/view/screens/Settings/index.tsx +++ b/src/view/screens/Settings/index.tsx @@ -64,6 +64,7 @@ import {ScrollView} from 'view/com/util/Views' import {useDialogControl} from '#/components/Dialog' import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings' import {navigate, resetToTab} from '#/Navigation' +import {Email2FAToggle} from './Email2FAToggle' import {ExportCarDialog} from './ExportCarDialog' function SettingsAccountCard({account}: {account: SessionAccount}) { @@ -691,6 +692,13 @@ export function SettingsScreen({}: Props) { )} <View style={styles.spacer20} /> <Text type="xl-bold" style={[pal.text, styles.heading]}> + <Trans>Two-factor authentication</Trans> + </Text> + <View style={[pal.view, styles.toggleCard]}> + <Email2FAToggle /> + </View> + <View style={styles.spacer20} /> + <Text type="xl-bold" style={[pal.text, styles.heading]}> <Trans>Account</Trans> </Text> <TouchableOpacity |