diff options
Diffstat (limited to 'src/screens/Settings/components')
| -rw-r--r-- | src/screens/Settings/components/DisableEmail2FADialog.tsx | 201 | ||||
| -rw-r--r-- | src/screens/Settings/components/Email2FAToggle.tsx | 2 | ||||
| -rw-r--r-- | src/screens/Settings/components/ExportCarDialog.tsx | 110 |
3 files changed, 312 insertions, 1 deletions
diff --git a/src/screens/Settings/components/DisableEmail2FADialog.tsx b/src/screens/Settings/components/DisableEmail2FADialog.tsx new file mode 100644 index 000000000..1378759b0 --- /dev/null +++ b/src/screens/Settings/components/DisableEmail2FADialog.tsx @@ -0,0 +1,201 @@ +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 {useAgent, useSession} 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 agent = useAgent() + + 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 agent.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 agent.com.atproto.server.updateEmail({ + email: currentAccount!.email, + token: confirmationCode.trim(), + emailAuthFactor: false, + }) + await agent.resumeSession(agent.session!) + 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"> + {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={[ + a.gap_sm, + 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} /> + <Dialog.Input + testID="confirmationCode" + label={_(msg`Confirmation code`)} + autoCapitalize="none" + autoFocus + autoCorrect={false} + autoComplete="off" + value={confirmationCode} + onChangeText={setConfirmationCode} + onSubmitEditing={onConfirmDisable} + editable={!isProcessing} + /> + </TextField.Root> + </View> + <View + style={[ + a.gap_sm, + gtMobile && [a.flex_row, a.justify_end, a.gap_md], + ]}> + <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/screens/Settings/components/Email2FAToggle.tsx b/src/screens/Settings/components/Email2FAToggle.tsx index 85ae89dea..a74f9fce7 100644 --- a/src/screens/Settings/components/Email2FAToggle.tsx +++ b/src/screens/Settings/components/Email2FAToggle.tsx @@ -4,9 +4,9 @@ import {useLingui} from '@lingui/react' import {useModalControls} from '#/state/modals' import {useAgent, useSession} from '#/state/session' -import {DisableEmail2FADialog} from '#/view/screens/Settings/DisableEmail2FADialog' import {useDialogControl} from '#/components/Dialog' import * as Prompt from '#/components/Prompt' +import {DisableEmail2FADialog} from './DisableEmail2FADialog' import * as SettingsList from './SettingsList' export function Email2FAToggle() { diff --git a/src/screens/Settings/components/ExportCarDialog.tsx b/src/screens/Settings/components/ExportCarDialog.tsx new file mode 100644 index 000000000..2de3895d3 --- /dev/null +++ b/src/screens/Settings/components/ExportCarDialog.tsx @@ -0,0 +1,110 @@ +import React from 'react' +import {View} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {saveBytesToDisk} from '#/lib/media/manip' +import {logger} from '#/logger' +import {useAgent} from '#/state/session' +import * as Toast from '#/view/com/util/Toast' +import {atoms as a, useTheme} from '#/alf' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import * as Dialog from '#/components/Dialog' +import {Download_Stroke2_Corner0_Rounded as DownloadIcon} from '#/components/icons/Download' +import {InlineLinkText} from '#/components/Link' +import {Loader} from '#/components/Loader' +import {Text} from '#/components/Typography' + +export function ExportCarDialog({ + control, +}: { + control: Dialog.DialogOuterProps['control'] +}) { + const {_} = useLingui() + const t = useTheme() + const agent = useAgent() + const [loading, setLoading] = React.useState(false) + + const download = React.useCallback(async () => { + if (!agent.session) { + return // shouldnt ever happen + } + try { + setLoading(true) + const did = agent.session.did + const downloadRes = await agent.com.atproto.sync.getRepo({did}) + const saveRes = await saveBytesToDisk( + 'repo.car', + downloadRes.data, + downloadRes.headers['content-type'], + ) + + if (saveRes) { + Toast.show(_(msg`File saved successfully!`)) + } + } catch (e) { + logger.error('Error occurred while downloading CAR file', {message: e}) + Toast.show(_(msg`Error occurred while saving file`), 'xmark') + } finally { + setLoading(false) + control.close() + } + }, [_, control, agent]) + + return ( + <Dialog.Outer control={control}> + <Dialog.Handle /> + <Dialog.ScrollableInner + accessibilityDescribedBy="dialog-description" + accessibilityLabelledBy="dialog-title"> + <View style={[a.relative, a.gap_lg, a.w_full]}> + <Text nativeID="dialog-title" style={[a.text_2xl, a.font_bold]}> + <Trans>Export My Data</Trans> + </Text> + <Text nativeID="dialog-description" style={[a.text_sm]}> + <Trans> + Your account repository, containing all public data records, can + be downloaded as a "CAR" file. This file does not include media + embeds, such as images, or your private data, which must be + fetched separately. + </Trans> + </Text> + + <Button + variant="solid" + color="primary" + size="large" + label={_(msg`Download CAR file`)} + disabled={loading} + onPress={download}> + <ButtonIcon icon={DownloadIcon} /> + <ButtonText> + <Trans>Download CAR file</Trans> + </ButtonText> + {loading && <ButtonIcon icon={Loader} />} + </Button> + + <Text + style={[ + t.atoms.text_contrast_medium, + a.text_sm, + a.leading_snug, + a.flex_1, + ]}> + <Trans> + This feature is in beta. You can read more about repository + exports in{' '} + <InlineLinkText + label={_(msg`View blogpost for more details`)} + to="https://docs.bsky.app/blog/repo-export" + style={[a.text_sm]}> + this blogpost + </InlineLinkText> + . + </Trans> + </Text> + </View> + </Dialog.ScrollableInner> + </Dialog.Outer> + ) +} |