delete old change/verify email modals (#8122)
This commit is contained in:
Samuel Newman
@@ -55,16 +55,6 @@ export interface PostLanguagesSettingsModal {
|
||||
name: 'post-languages-settings'
|
||||
}
|
||||
|
||||
export interface VerifyEmailModal {
|
||||
name: 'verify-email'
|
||||
showReminder?: boolean
|
||||
onSuccess?: () => void
|
||||
}
|
||||
|
||||
export interface ChangeEmailModal {
|
||||
name: 'change-email'
|
||||
}
|
||||
|
||||
export interface ChangePasswordModal {
|
||||
name: 'change-password'
|
||||
}
|
||||
@@ -84,8 +74,6 @@ export interface InAppBrowserConsentModal {
|
||||
export type Modal =
|
||||
// Account
|
||||
| DeleteAccountModal
|
||||
| VerifyEmailModal
|
||||
| ChangeEmailModal
|
||||
| ChangePasswordModal
|
||||
|
||||
// Temp
|
||||
|
||||
@@ -1,268 +0,0 @@
|
||||
import {useState} from 'react'
|
||||
import {ActivityIndicator, SafeAreaView, StyleSheet, View} from 'react-native'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {usePalette} from '#/lib/hooks/usePalette'
|
||||
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
|
||||
import {cleanError} from '#/lib/strings/errors'
|
||||
import {colors, s} from '#/lib/styles'
|
||||
import {isWeb} from '#/platform/detection'
|
||||
import {useModalControls} from '#/state/modals'
|
||||
import {useAgent, useSession} from '#/state/session'
|
||||
import {ErrorMessage} from '../util/error/ErrorMessage'
|
||||
import {Button} from '../util/forms/Button'
|
||||
import {Text} from '../util/text/Text'
|
||||
import * as Toast from '../util/Toast'
|
||||
import {ScrollView, TextInput} from './util'
|
||||
|
||||
enum Stages {
|
||||
InputEmail,
|
||||
ConfirmCode,
|
||||
Done,
|
||||
}
|
||||
|
||||
export const snapPoints = ['90%']
|
||||
|
||||
export function Component() {
|
||||
const pal = usePalette('default')
|
||||
const {currentAccount} = useSession()
|
||||
const agent = useAgent()
|
||||
const {_} = useLingui()
|
||||
const [stage, setStage] = useState<Stages>(Stages.InputEmail)
|
||||
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 === currentAccount?.email) {
|
||||
setError(_(msg`Enter your new email above`))
|
||||
return
|
||||
}
|
||||
setError('')
|
||||
setIsProcessing(true)
|
||||
try {
|
||||
const res = await agent.com.atproto.server.requestEmailUpdate()
|
||||
if (res.data.tokenRequired) {
|
||||
setStage(Stages.ConfirmCode)
|
||||
} else {
|
||||
await agent.com.atproto.server.updateEmail({email: email.trim()})
|
||||
await agent.resumeSession(agent.session!)
|
||||
Toast.show(_(msg({message: 'Email updated', context: 'toast'})))
|
||||
setStage(Stages.Done)
|
||||
}
|
||||
} catch (e) {
|
||||
let err = cleanError(String(e))
|
||||
// TEMP
|
||||
// while rollout is occuring, we're giving a temporary error message
|
||||
// you can remove this any time after Oct2023
|
||||
// -prf
|
||||
if (err === 'email must be confirmed (temporary)') {
|
||||
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 {
|
||||
setIsProcessing(false)
|
||||
}
|
||||
}
|
||||
|
||||
const onConfirm = async () => {
|
||||
setError('')
|
||||
setIsProcessing(true)
|
||||
try {
|
||||
await agent.com.atproto.server.updateEmail({
|
||||
email: email.trim(),
|
||||
token: confirmationCode.trim(),
|
||||
})
|
||||
await agent.resumeSession(agent.session!)
|
||||
Toast.show(_(msg({message: 'Email updated', context: 'toast'})))
|
||||
setStage(Stages.Done)
|
||||
} catch (e) {
|
||||
setError(cleanError(String(e)))
|
||||
} finally {
|
||||
setIsProcessing(false)
|
||||
}
|
||||
}
|
||||
|
||||
const onVerify = async () => {
|
||||
closeModal()
|
||||
openModal({name: 'verify-email'})
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView style={[pal.view, s.flex1]}>
|
||||
<ScrollView
|
||||
testID="changeEmailModal"
|
||||
style={[s.flex1, isMobile && {paddingHorizontal: 18}]}>
|
||||
<View style={styles.titleSection}>
|
||||
<Text type="title-lg" style={[pal.text, styles.title]}>
|
||||
{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 ? (
|
||||
<Trans>Enter your new email address below.</Trans>
|
||||
) : stage === Stages.ConfirmCode ? (
|
||||
<Trans>
|
||||
An email has been sent to your previous address,{' '}
|
||||
{currentAccount?.email || '(no 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>
|
||||
|
||||
{stage === Stages.InputEmail && (
|
||||
<TextInput
|
||||
testID="emailInput"
|
||||
style={[styles.textInput, pal.border, pal.text]}
|
||||
placeholder="alice@mail.com"
|
||||
placeholderTextColor={pal.colors.textLight}
|
||||
value={email}
|
||||
onChangeText={setEmail}
|
||||
accessible={true}
|
||||
accessibilityLabel={_(msg`Email`)}
|
||||
accessibilityHint=""
|
||||
autoCapitalize="none"
|
||||
autoComplete="email"
|
||||
autoCorrect={false}
|
||||
/>
|
||||
)}
|
||||
{stage === Stages.ConfirmCode && (
|
||||
<TextInput
|
||||
testID="confirmCodeInput"
|
||||
style={[styles.textInput, pal.border, pal.text]}
|
||||
placeholder="XXXXX-XXXXX"
|
||||
placeholderTextColor={pal.colors.textLight}
|
||||
value={confirmationCode}
|
||||
onChangeText={setConfirmationCode}
|
||||
accessible={true}
|
||||
accessibilityLabel={_(msg`Confirmation code`)}
|
||||
accessibilityHint=""
|
||||
autoCapitalize="none"
|
||||
autoComplete="off"
|
||||
autoCorrect={false}
|
||||
/>
|
||||
)}
|
||||
|
||||
{error ? (
|
||||
<ErrorMessage message={error} style={styles.error} />
|
||||
) : undefined}
|
||||
|
||||
<View style={[styles.btnContainer]}>
|
||||
{isProcessing ? (
|
||||
<View style={styles.btn}>
|
||||
<ActivityIndicator color="#fff" />
|
||||
</View>
|
||||
) : (
|
||||
<View style={{gap: 6}}>
|
||||
{stage === Stages.InputEmail && (
|
||||
<Button
|
||||
testID="requestChangeBtn"
|
||||
type="primary"
|
||||
onPress={onRequestChange}
|
||||
accessibilityLabel={_(msg`Request Change`)}
|
||||
accessibilityHint=""
|
||||
label={_(msg`Request Change`)}
|
||||
labelContainerStyle={{justifyContent: 'center', padding: 4}}
|
||||
labelStyle={[s.f18]}
|
||||
/>
|
||||
)}
|
||||
{stage === Stages.ConfirmCode && (
|
||||
<Button
|
||||
testID="confirmBtn"
|
||||
type="primary"
|
||||
onPress={onConfirm}
|
||||
accessibilityLabel={_(msg`Confirm Change`)}
|
||||
accessibilityHint=""
|
||||
label={_(msg`Confirm Change`)}
|
||||
labelContainerStyle={{justifyContent: 'center', padding: 4}}
|
||||
labelStyle={[s.f18]}
|
||||
/>
|
||||
)}
|
||||
{stage === Stages.Done && (
|
||||
<Button
|
||||
testID="verifyBtn"
|
||||
type="primary"
|
||||
onPress={onVerify}
|
||||
accessibilityLabel={_(msg`Verify New Email`)}
|
||||
accessibilityHint=""
|
||||
label={_(msg`Verify New Email`)}
|
||||
labelContainerStyle={{justifyContent: 'center', padding: 4}}
|
||||
labelStyle={[s.f18]}
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
testID="cancelBtn"
|
||||
type="default"
|
||||
onPress={() => {
|
||||
closeModal()
|
||||
}}
|
||||
accessibilityLabel={_(msg`Cancel`)}
|
||||
accessibilityHint=""
|
||||
label={_(msg`Cancel`)}
|
||||
labelContainerStyle={{justifyContent: 'center', padding: 4}}
|
||||
labelStyle={[s.f18]}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
titleSection: {
|
||||
paddingTop: isWeb ? 0 : 4,
|
||||
paddingBottom: isWeb ? 14 : 10,
|
||||
},
|
||||
title: {
|
||||
textAlign: 'center',
|
||||
fontWeight: '600',
|
||||
marginBottom: 5,
|
||||
},
|
||||
error: {
|
||||
borderRadius: 6,
|
||||
marginTop: 10,
|
||||
},
|
||||
emailContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
borderWidth: 1,
|
||||
borderRadius: 6,
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 12,
|
||||
},
|
||||
textInput: {
|
||||
borderWidth: 1,
|
||||
borderRadius: 6,
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 10,
|
||||
fontSize: 16,
|
||||
},
|
||||
btn: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 32,
|
||||
padding: 14,
|
||||
backgroundColor: colors.blue3,
|
||||
},
|
||||
btnContainer: {
|
||||
paddingTop: 20,
|
||||
},
|
||||
})
|
||||
@@ -7,7 +7,6 @@ import {usePalette} from '#/lib/hooks/usePalette'
|
||||
import {useModalControls, useModals} from '#/state/modals'
|
||||
import {FullWindowOverlay} from '#/components/FullWindowOverlay'
|
||||
import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
|
||||
import * as ChangeEmailModal from './ChangeEmail'
|
||||
import * as ChangePasswordModal from './ChangePassword'
|
||||
import * as CreateOrEditListModal from './CreateOrEditList'
|
||||
import * as DeleteAccountModal from './DeleteAccount'
|
||||
@@ -18,7 +17,6 @@ import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguages
|
||||
import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings'
|
||||
import * as LinkWarningModal from './LinkWarning'
|
||||
import * as UserAddRemoveListsModal from './UserAddRemoveLists'
|
||||
import * as VerifyEmailModal from './VerifyEmail'
|
||||
|
||||
const DEFAULT_SNAPPOINTS = ['90%']
|
||||
const HANDLE_HEIGHT = 24
|
||||
@@ -72,12 +70,6 @@ export function ModalsContainer() {
|
||||
} else if (activeModal?.name === 'post-languages-settings') {
|
||||
snapPoints = PostLanguagesSettingsModal.snapPoints
|
||||
element = <PostLanguagesSettingsModal.Component />
|
||||
} else if (activeModal?.name === 'verify-email') {
|
||||
snapPoints = VerifyEmailModal.snapPoints
|
||||
element = <VerifyEmailModal.Component {...activeModal} />
|
||||
} else if (activeModal?.name === 'change-email') {
|
||||
snapPoints = ChangeEmailModal.snapPoints
|
||||
element = <ChangeEmailModal.Component />
|
||||
} else if (activeModal?.name === 'change-password') {
|
||||
snapPoints = ChangePasswordModal.snapPoints
|
||||
element = <ChangePasswordModal.Component />
|
||||
|
||||
@@ -6,7 +6,6 @@ import {usePalette} from '#/lib/hooks/usePalette'
|
||||
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
|
||||
import {type Modal as ModalIface} from '#/state/modals'
|
||||
import {useModalControls, useModals} from '#/state/modals'
|
||||
import * as ChangeEmailModal from './ChangeEmail'
|
||||
import * as ChangePasswordModal from './ChangePassword'
|
||||
import * as CreateOrEditListModal from './CreateOrEditList'
|
||||
import * as CropImageModal from './CropImage.web'
|
||||
@@ -17,7 +16,6 @@ import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguages
|
||||
import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings'
|
||||
import * as LinkWarningModal from './LinkWarning'
|
||||
import * as UserAddRemoveLists from './UserAddRemoveLists'
|
||||
import * as VerifyEmailModal from './VerifyEmail'
|
||||
|
||||
export function ModalsContainer() {
|
||||
const {isModalActive, activeModals} = useModals()
|
||||
@@ -74,10 +72,6 @@ function Modal({modal}: {modal: ModalIface}) {
|
||||
element = <ContentLanguagesSettingsModal.Component />
|
||||
} else if (modal.name === 'post-languages-settings') {
|
||||
element = <PostLanguagesSettingsModal.Component />
|
||||
} else if (modal.name === 'verify-email') {
|
||||
element = <VerifyEmailModal.Component {...modal} />
|
||||
} else if (modal.name === 'change-email') {
|
||||
element = <ChangeEmailModal.Component />
|
||||
} else if (modal.name === 'change-password') {
|
||||
element = <ChangePasswordModal.Component />
|
||||
} else if (modal.name === 'link-warning') {
|
||||
|
||||
@@ -1,342 +0,0 @@
|
||||
import React, {useState} from 'react'
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Pressable,
|
||||
SafeAreaView,
|
||||
StyleSheet,
|
||||
View,
|
||||
} from 'react-native'
|
||||
import {Circle, Path, Svg} from 'react-native-svg'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {usePalette} from '#/lib/hooks/usePalette'
|
||||
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
|
||||
import {cleanError} from '#/lib/strings/errors'
|
||||
import {colors, s} from '#/lib/styles'
|
||||
import {logger} from '#/logger'
|
||||
import {isWeb} from '#/platform/detection'
|
||||
import {useModalControls} from '#/state/modals'
|
||||
import {useAgent, useSession} from '#/state/session'
|
||||
import {ErrorMessage} from '../util/error/ErrorMessage'
|
||||
import {Button} from '../util/forms/Button'
|
||||
import {Text} from '../util/text/Text'
|
||||
import * as Toast from '../util/Toast'
|
||||
import {ScrollView, TextInput} from './util'
|
||||
|
||||
export const snapPoints = ['90%']
|
||||
|
||||
enum Stages {
|
||||
Reminder,
|
||||
Email,
|
||||
ConfirmCode,
|
||||
}
|
||||
|
||||
export function Component({
|
||||
showReminder,
|
||||
onSuccess,
|
||||
}: {
|
||||
showReminder?: boolean
|
||||
onSuccess?: () => void
|
||||
}) {
|
||||
const pal = usePalette('default')
|
||||
const agent = useAgent()
|
||||
const {currentAccount} = useSession()
|
||||
const {_} = useLingui()
|
||||
const [stage, setStage] = useState<Stages>(
|
||||
showReminder ? Stages.Reminder : Stages.Email,
|
||||
)
|
||||
const [confirmationCode, setConfirmationCode] = useState<string>('')
|
||||
const [isProcessing, setIsProcessing] = useState<boolean>(false)
|
||||
const [error, setError] = useState<string>('')
|
||||
const {isMobile} = useWebMediaQueries()
|
||||
const {openModal, closeModal} = useModalControls()
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!currentAccount) {
|
||||
logger.error(`VerifyEmail modal opened without currentAccount`)
|
||||
closeModal()
|
||||
}
|
||||
}, [currentAccount, closeModal])
|
||||
|
||||
const onSendEmail = async () => {
|
||||
setError('')
|
||||
setIsProcessing(true)
|
||||
try {
|
||||
await agent.com.atproto.server.requestEmailConfirmation()
|
||||
setStage(Stages.ConfirmCode)
|
||||
} catch (e) {
|
||||
setError(cleanError(String(e)))
|
||||
} finally {
|
||||
setIsProcessing(false)
|
||||
}
|
||||
}
|
||||
|
||||
const onConfirm = async () => {
|
||||
setError('')
|
||||
setIsProcessing(true)
|
||||
try {
|
||||
await agent.com.atproto.server.confirmEmail({
|
||||
email: (currentAccount?.email || '').trim(),
|
||||
token: confirmationCode.trim(),
|
||||
})
|
||||
await agent.resumeSession(agent.session!)
|
||||
Toast.show(_(msg({message: 'Email verified', context: 'toast'})))
|
||||
closeModal()
|
||||
onSuccess?.()
|
||||
} catch (e) {
|
||||
setError(cleanError(String(e)))
|
||||
} finally {
|
||||
setIsProcessing(false)
|
||||
}
|
||||
}
|
||||
|
||||
const onEmailIncorrect = () => {
|
||||
closeModal()
|
||||
openModal({name: 'change-email'})
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView style={[pal.view, s.flex1]}>
|
||||
<ScrollView
|
||||
testID="verifyEmailModal"
|
||||
style={[s.flex1, isMobile && {paddingHorizontal: 18}]}>
|
||||
{stage === Stages.Reminder && <ReminderIllustration />}
|
||||
<View style={styles.titleSection}>
|
||||
<Text type="title-lg" style={[pal.text, styles.title]}>
|
||||
{stage === Stages.Reminder ? (
|
||||
<Trans>Please Verify Your Email</Trans>
|
||||
) : stage === Stages.Email ? (
|
||||
<Trans>Verify Your Email</Trans>
|
||||
) : stage === Stages.ConfirmCode ? (
|
||||
<Trans>Enter Confirmation Code</Trans>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<Text type="lg" style={[pal.textLight, {marginBottom: 10}]}>
|
||||
{stage === Stages.Reminder ? (
|
||||
<Trans>
|
||||
Your email has not yet been verified. This is an important
|
||||
security step which we recommend.
|
||||
</Trans>
|
||||
) : stage === Stages.Email ? (
|
||||
<Trans>
|
||||
This is important in case you ever need to change your email or
|
||||
reset your password.
|
||||
</Trans>
|
||||
) : 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>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</Text>
|
||||
|
||||
{stage === Stages.Email ? (
|
||||
<>
|
||||
<View style={styles.emailContainer}>
|
||||
<FontAwesomeIcon
|
||||
icon="envelope"
|
||||
color={pal.colors.text}
|
||||
size={16}
|
||||
/>
|
||||
<Text type="xl-medium" style={[pal.text, s.flex1, {minWidth: 0}]}>
|
||||
{currentAccount?.email || _(msg`(no email)`)}
|
||||
</Text>
|
||||
</View>
|
||||
<Pressable
|
||||
accessibilityRole="link"
|
||||
accessibilityLabel={_(msg`Change my email`)}
|
||||
accessibilityHint=""
|
||||
onPress={onEmailIncorrect}
|
||||
style={styles.changeEmailLink}>
|
||||
<Text type="lg" style={pal.link}>
|
||||
<Trans>Change</Trans>
|
||||
</Text>
|
||||
</Pressable>
|
||||
</>
|
||||
) : stage === Stages.ConfirmCode ? (
|
||||
<TextInput
|
||||
testID="confirmCodeInput"
|
||||
style={[styles.textInput, pal.border, pal.text]}
|
||||
placeholder="XXXXX-XXXXX"
|
||||
placeholderTextColor={pal.colors.textLight}
|
||||
value={confirmationCode}
|
||||
onChangeText={setConfirmationCode}
|
||||
accessible={true}
|
||||
accessibilityLabel={_(msg`Confirmation code`)}
|
||||
accessibilityHint=""
|
||||
autoCapitalize="none"
|
||||
autoComplete="one-time-code"
|
||||
autoCorrect={false}
|
||||
/>
|
||||
) : undefined}
|
||||
|
||||
{error ? (
|
||||
<ErrorMessage message={error} style={styles.error} />
|
||||
) : undefined}
|
||||
|
||||
<View style={[styles.btnContainer]}>
|
||||
{isProcessing ? (
|
||||
<View style={styles.btn}>
|
||||
<ActivityIndicator color="#fff" />
|
||||
</View>
|
||||
) : (
|
||||
<View style={{gap: 6}}>
|
||||
{stage === Stages.Reminder && (
|
||||
<Button
|
||||
testID="getStartedBtn"
|
||||
type="primary"
|
||||
onPress={() => setStage(Stages.Email)}
|
||||
accessibilityLabel={_(msg`Get Started`)}
|
||||
accessibilityHint=""
|
||||
label={_(msg`Get Started`)}
|
||||
labelContainerStyle={{justifyContent: 'center', padding: 4}}
|
||||
labelStyle={[s.f18]}
|
||||
/>
|
||||
)}
|
||||
{stage === Stages.Email && (
|
||||
<>
|
||||
<Button
|
||||
testID="sendEmailBtn"
|
||||
type="primary"
|
||||
onPress={onSendEmail}
|
||||
accessibilityLabel={_(msg`Send Confirmation Email`)}
|
||||
accessibilityHint=""
|
||||
label={_(msg`Send Confirmation Email`)}
|
||||
labelContainerStyle={{
|
||||
justifyContent: 'center',
|
||||
padding: 4,
|
||||
}}
|
||||
labelStyle={[s.f18]}
|
||||
/>
|
||||
<Button
|
||||
testID="haveCodeBtn"
|
||||
type="default"
|
||||
accessibilityLabel={_(msg`I have a code`)}
|
||||
accessibilityHint=""
|
||||
label={_(msg`I have a confirmation code`)}
|
||||
labelContainerStyle={{
|
||||
justifyContent: 'center',
|
||||
padding: 4,
|
||||
}}
|
||||
labelStyle={[s.f18]}
|
||||
onPress={() => setStage(Stages.ConfirmCode)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{stage === Stages.ConfirmCode && (
|
||||
<Button
|
||||
testID="confirmBtn"
|
||||
type="primary"
|
||||
onPress={onConfirm}
|
||||
accessibilityLabel={_(msg`Confirm`)}
|
||||
accessibilityHint=""
|
||||
label={_(msg`Confirm`)}
|
||||
labelContainerStyle={{justifyContent: 'center', padding: 4}}
|
||||
labelStyle={[s.f18]}
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
testID="cancelBtn"
|
||||
type="default"
|
||||
onPress={() => {
|
||||
closeModal()
|
||||
}}
|
||||
accessibilityLabel={
|
||||
stage === Stages.Reminder
|
||||
? _(msg`Not right now`)
|
||||
: _(msg`Cancel`)
|
||||
}
|
||||
accessibilityHint=""
|
||||
label={
|
||||
stage === Stages.Reminder
|
||||
? _(msg`Not right now`)
|
||||
: _(msg`Cancel`)
|
||||
}
|
||||
labelContainerStyle={{justifyContent: 'center', padding: 4}}
|
||||
labelStyle={[s.f18]}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
|
||||
function ReminderIllustration() {
|
||||
const pal = usePalette('default')
|
||||
const palInverted = usePalette('inverted')
|
||||
return (
|
||||
<View style={[pal.viewLight, {borderRadius: 8, marginBottom: 20}]}>
|
||||
<Svg viewBox="0 0 112 84" fill="none" height={200}>
|
||||
<Path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M26 26.4264V55C26 60.5229 30.4772 65 36 65H76C81.5228 65 86 60.5229 86 55V27.4214L63.5685 49.8528C59.6633 53.7581 53.3316 53.7581 49.4264 49.8528L26 26.4264Z"
|
||||
fill={palInverted.colors.background}
|
||||
/>
|
||||
<Path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M83.666 19.5784C85.47 21.7297 84.4897 24.7895 82.5044 26.7748L60.669 48.6102C58.3259 50.9533 54.5269 50.9533 52.1838 48.6102L29.9502 26.3766C27.8241 24.2505 26.8952 20.8876 29.0597 18.8005C30.8581 17.0665 33.3045 16 36 16H76C79.0782 16 81.8316 17.3908 83.666 19.5784Z"
|
||||
fill={palInverted.colors.background}
|
||||
/>
|
||||
<Circle cx="82" cy="61" r="13" fill="#20BC07" />
|
||||
<Path d="M75 61L80 66L89 57" stroke="white" strokeWidth="2" />
|
||||
</Svg>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
titleSection: {
|
||||
paddingTop: isWeb ? 0 : 4,
|
||||
paddingBottom: isWeb ? 14 : 10,
|
||||
},
|
||||
title: {
|
||||
textAlign: 'center',
|
||||
fontWeight: '600',
|
||||
marginBottom: 5,
|
||||
},
|
||||
error: {
|
||||
borderRadius: 6,
|
||||
marginTop: 10,
|
||||
},
|
||||
emailContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
paddingHorizontal: 14,
|
||||
marginTop: 10,
|
||||
},
|
||||
changeEmailLink: {
|
||||
marginHorizontal: 12,
|
||||
marginBottom: 12,
|
||||
},
|
||||
textInput: {
|
||||
borderWidth: 1,
|
||||
borderRadius: 6,
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 10,
|
||||
fontSize: 16,
|
||||
},
|
||||
btn: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 32,
|
||||
padding: 14,
|
||||
backgroundColor: colors.blue3,
|
||||
},
|
||||
btnContainer: {
|
||||
paddingTop: 20,
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user