diff options
Diffstat (limited to 'src/view/com/modals/ChangeEmail.tsx')
| -rw-r--r-- | src/view/com/modals/ChangeEmail.tsx | 83 |
1 files changed, 45 insertions, 38 deletions
diff --git a/src/view/com/modals/ChangeEmail.tsx b/src/view/com/modals/ChangeEmail.tsx index 012570556..73ab33dd4 100644 --- a/src/view/com/modals/ChangeEmail.tsx +++ b/src/view/com/modals/ChangeEmail.tsx @@ -1,17 +1,19 @@ import React, {useState} from 'react' import {ActivityIndicator, SafeAreaView, StyleSheet, View} from 'react-native' import {ScrollView, TextInput} from './util' -import {observer} from 'mobx-react-lite' import {Text} from '../util/text/Text' import {Button} from '../util/forms/Button' import {ErrorMessage} from '../util/error/ErrorMessage' import * as Toast from '../util/Toast' -import {useStores} from 'state/index' import {s, colors} from 'lib/styles' import {usePalette} from 'lib/hooks/usePalette' import {isWeb} from 'platform/detection' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {cleanError} from 'lib/strings/errors' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useModalControls} from '#/state/modals' +import {useSession, useSessionApi, getAgent} from '#/state/session' enum Stages { InputEmail, @@ -21,32 +23,33 @@ enum Stages { export const snapPoints = ['90%'] -export const Component = observer(function Component({}: {}) { +export function Component() { const pal = usePalette('default') - const store = useStores() + const {currentAccount} = useSession() + const {updateCurrentAccount} = useSessionApi() + const {_} = useLingui() const [stage, setStage] = useState<Stages>(Stages.InputEmail) - const [email, setEmail] = useState<string>( - store.session.currentSession?.email || '', - ) + const [email, setEmail] = useState<string>(currentAccount?.email || '') const [confirmationCode, setConfirmationCode] = useState<string>('') const [isProcessing, setIsProcessing] = useState<boolean>(false) const [error, setError] = useState<string>('') const {isMobile} = useWebMediaQueries() + const {openModal, closeModal} = useModalControls() const onRequestChange = async () => { - if (email === store.session.currentSession?.email) { + if (email === currentAccount?.email) { setError('Enter your new email above') return } setError('') setIsProcessing(true) try { - const res = await store.agent.com.atproto.server.requestEmailUpdate() + const res = await getAgent().com.atproto.server.requestEmailUpdate() if (res.data.tokenRequired) { setStage(Stages.ConfirmCode) } else { - await store.agent.com.atproto.server.updateEmail({email: email.trim()}) - store.session.updateLocalAccountData({ + await getAgent().com.atproto.server.updateEmail({email: email.trim()}) + updateCurrentAccount({ email: email.trim(), emailConfirmed: false, }) @@ -60,7 +63,9 @@ export const Component = observer(function Component({}: {}) { // you can remove this any time after Oct2023 // -prf if (err === 'email must be confirmed (temporary)') { - err = `Please confirm your email before changing it. This is a temporary requirement while email-updating tools are added, and it will soon be removed.` + err = _( + msg`Please confirm your email before changing it. This is a temporary requirement while email-updating tools are added, and it will soon be removed.`, + ) } setError(err) } finally { @@ -72,11 +77,11 @@ export const Component = observer(function Component({}: {}) { setError('') setIsProcessing(true) try { - await store.agent.com.atproto.server.updateEmail({ + await getAgent().com.atproto.server.updateEmail({ email: email.trim(), token: confirmationCode.trim(), }) - store.session.updateLocalAccountData({ + updateCurrentAccount({ email: email.trim(), emailConfirmed: false, }) @@ -90,8 +95,8 @@ export const Component = observer(function Component({}: {}) { } const onVerify = async () => { - store.shell.closeModal() - store.shell.openModal({name: 'verify-email'}) + closeModal() + openModal({name: 'verify-email'}) } return ( @@ -101,26 +106,26 @@ export const Component = observer(function Component({}: {}) { style={[s.flex1, isMobile && {paddingHorizontal: 18}]}> <View style={styles.titleSection}> <Text type="title-lg" style={[pal.text, styles.title]}> - {stage === Stages.InputEmail ? 'Change Your Email' : ''} - {stage === Stages.ConfirmCode ? 'Security Step Required' : ''} - {stage === Stages.Done ? 'Email Updated' : ''} + {stage === Stages.InputEmail ? _(msg`Change Your Email`) : ''} + {stage === Stages.ConfirmCode ? _(msg`Security Step Required`) : ''} + {stage === Stages.Done ? _(msg`Email Updated`) : ''} </Text> </View> <Text type="lg" style={[pal.textLight, {marginBottom: 10}]}> {stage === Stages.InputEmail ? ( - <>Enter your new email address below.</> + <Trans>Enter your new email address below.</Trans> ) : stage === Stages.ConfirmCode ? ( - <> + <Trans> An email has been sent to your previous address,{' '} - {store.session.currentSession?.email || ''}. It includes a - confirmation code which you can enter below. - </> + {currentAccount?.email || ''}. It includes a confirmation code + which you can enter below. + </Trans> ) : ( - <> + <Trans> Your email has been updated but not verified. As a next step, please verify your new email. - </> + </Trans> )} </Text> @@ -133,7 +138,7 @@ export const Component = observer(function Component({}: {}) { value={email} onChangeText={setEmail} accessible={true} - accessibilityLabel="Email" + accessibilityLabel={_(msg`Email`)} accessibilityHint="" autoCapitalize="none" autoComplete="email" @@ -149,7 +154,7 @@ export const Component = observer(function Component({}: {}) { value={confirmationCode} onChangeText={setConfirmationCode} accessible={true} - accessibilityLabel="Confirmation code" + accessibilityLabel={_(msg`Confirmation code`)} accessibilityHint="" autoCapitalize="none" autoComplete="off" @@ -173,9 +178,9 @@ export const Component = observer(function Component({}: {}) { testID="requestChangeBtn" type="primary" onPress={onRequestChange} - accessibilityLabel="Request Change" + accessibilityLabel={_(msg`Request Change`)} accessibilityHint="" - label="Request Change" + label={_(msg`Request Change`)} labelContainerStyle={{justifyContent: 'center', padding: 4}} labelStyle={[s.f18]} /> @@ -185,9 +190,9 @@ export const Component = observer(function Component({}: {}) { testID="confirmBtn" type="primary" onPress={onConfirm} - accessibilityLabel="Confirm Change" + accessibilityLabel={_(msg`Confirm Change`)} accessibilityHint="" - label="Confirm Change" + label={_(msg`Confirm Change`)} labelContainerStyle={{justifyContent: 'center', padding: 4}} labelStyle={[s.f18]} /> @@ -197,9 +202,9 @@ export const Component = observer(function Component({}: {}) { testID="verifyBtn" type="primary" onPress={onVerify} - accessibilityLabel="Verify New Email" + accessibilityLabel={_(msg`Verify New Email`)} accessibilityHint="" - label="Verify New Email" + label={_(msg`Verify New Email`)} labelContainerStyle={{justifyContent: 'center', padding: 4}} labelStyle={[s.f18]} /> @@ -207,10 +212,12 @@ export const Component = observer(function Component({}: {}) { <Button testID="cancelBtn" type="default" - onPress={() => store.shell.closeModal()} - accessibilityLabel="Cancel" + onPress={() => { + closeModal() + }} + accessibilityLabel={_(msg`Cancel`)} accessibilityHint="" - label="Cancel" + label={_(msg`Cancel`)} labelContainerStyle={{justifyContent: 'center', padding: 4}} labelStyle={[s.f18]} /> @@ -220,7 +227,7 @@ export const Component = observer(function Component({}: {}) { </ScrollView> </SafeAreaView> ) -}) +} const styles = StyleSheet.create({ titleSection: { |