541 lines
16 KiB
TypeScript
541 lines
16 KiB
TypeScript
|
import { FC, useCallback, useEffect, useRef, useState } from "react"
|
|||
|
|
import { TextStyle, View, ViewStyle } from "react-native"
|
|||
|
|
import { KeyboardAwareScrollView } from "react-native-keyboard-controller"
|
|||
|
|
|
|||
|
|
import { Button } from "@/components/Button"
|
|||
|
|
import { Dialog } from "@/components/Dialog"
|
|||
|
|
import { Screen } from "@/components/Screen"
|
|||
|
|
import { Text } from "@/components/Text"
|
|||
|
|
import { TextField } from "@/components/TextField"
|
|||
|
|
import { useAuth } from "@/context/AuthContext"
|
|||
|
|
import { translate } from "@/i18n/translate"
|
|||
|
|
import { AppStackScreenProps } from "@/navigators/navigationTypes"
|
|||
|
|
import { useAppTheme } from "@/theme/context"
|
|||
|
|
import { $styles } from "@/theme/styles"
|
|||
|
|
import type { ThemedStyle } from "@/theme/types"
|
|||
|
|
import { s } from "@/utils/responsive"
|
|||
|
|
import { useHeader } from "@/utils/useHeader"
|
|||
|
|
|
|||
|
|
const COUNTDOWN_SECONDS = 60
|
|||
|
|
|
|||
|
|
export const ChangeEmailScreen: FC<AppStackScreenProps<"ChangeEmail">> =
|
|||
|
|
function ChangeEmailScreen({ navigation }) {
|
|||
|
|
const {
|
|||
|
|
user,
|
|||
|
|
emailChangeStep,
|
|||
|
|
sendEmailCode,
|
|||
|
|
verifyCurrentEmail,
|
|||
|
|
bindNewEmail,
|
|||
|
|
resetEmailChangeStep,
|
|||
|
|
isLoading,
|
|||
|
|
error,
|
|||
|
|
clearError,
|
|||
|
|
} = useAuth()
|
|||
|
|
const { themed } = useAppTheme()
|
|||
|
|
|
|||
|
|
// Step 1: Verify current email
|
|||
|
|
const [currentEmailCode, setCurrentEmailCode] = useState("")
|
|||
|
|
|
|||
|
|
// Step 2: Bind new email
|
|||
|
|
const [newEmail, setNewEmail] = useState("")
|
|||
|
|
const [newEmailCode, setNewEmailCode] = useState("")
|
|||
|
|
const [newEmailCodeSent, setNewEmailCodeSent] = useState(false)
|
|||
|
|
|
|||
|
|
const [localError, setLocalError] = useState("")
|
|||
|
|
const [successDialogVisible, setSuccessDialogVisible] = useState(false)
|
|||
|
|
|
|||
|
|
// Countdown timers
|
|||
|
|
const [currentEmailCountdown, setCurrentEmailCountdown] = useState(0)
|
|||
|
|
const [newEmailCountdown, setNewEmailCountdown] = useState(0)
|
|||
|
|
const currentEmailTimerRef = useRef<ReturnType<typeof setInterval> | null>(null)
|
|||
|
|
const newEmailTimerRef = useRef<ReturnType<typeof setInterval> | null>(null)
|
|||
|
|
|
|||
|
|
// Start countdown for current email
|
|||
|
|
const startCurrentEmailCountdown = useCallback(() => {
|
|||
|
|
setCurrentEmailCountdown(COUNTDOWN_SECONDS)
|
|||
|
|
if (currentEmailTimerRef.current) {
|
|||
|
|
clearInterval(currentEmailTimerRef.current)
|
|||
|
|
}
|
|||
|
|
currentEmailTimerRef.current = setInterval(() => {
|
|||
|
|
setCurrentEmailCountdown((prev) => {
|
|||
|
|
if (prev <= 1) {
|
|||
|
|
if (currentEmailTimerRef.current) {
|
|||
|
|
clearInterval(currentEmailTimerRef.current)
|
|||
|
|
currentEmailTimerRef.current = null
|
|||
|
|
}
|
|||
|
|
return 0
|
|||
|
|
}
|
|||
|
|
return prev - 1
|
|||
|
|
})
|
|||
|
|
}, 1000)
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
// Start countdown for new email
|
|||
|
|
const startNewEmailCountdown = useCallback(() => {
|
|||
|
|
setNewEmailCountdown(COUNTDOWN_SECONDS)
|
|||
|
|
if (newEmailTimerRef.current) {
|
|||
|
|
clearInterval(newEmailTimerRef.current)
|
|||
|
|
}
|
|||
|
|
newEmailTimerRef.current = setInterval(() => {
|
|||
|
|
setNewEmailCountdown((prev) => {
|
|||
|
|
if (prev <= 1) {
|
|||
|
|
if (newEmailTimerRef.current) {
|
|||
|
|
clearInterval(newEmailTimerRef.current)
|
|||
|
|
newEmailTimerRef.current = null
|
|||
|
|
}
|
|||
|
|
return 0
|
|||
|
|
}
|
|||
|
|
return prev - 1
|
|||
|
|
})
|
|||
|
|
}, 1000)
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
// Reset state when unmounting
|
|||
|
|
useEffect(() => {
|
|||
|
|
return () => {
|
|||
|
|
resetEmailChangeStep()
|
|||
|
|
if (currentEmailTimerRef.current) {
|
|||
|
|
clearInterval(currentEmailTimerRef.current)
|
|||
|
|
}
|
|||
|
|
if (newEmailTimerRef.current) {
|
|||
|
|
clearInterval(newEmailTimerRef.current)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, [resetEmailChangeStep])
|
|||
|
|
|
|||
|
|
// Step 1: Send verification code to current email
|
|||
|
|
const handleSendCurrentEmailCode = useCallback(async () => {
|
|||
|
|
clearError()
|
|||
|
|
setLocalError("")
|
|||
|
|
if (user?.email) {
|
|||
|
|
const success = await sendEmailCode(user.email)
|
|||
|
|
if (success) {
|
|||
|
|
startCurrentEmailCountdown()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, [sendEmailCode, clearError, user?.email, startCurrentEmailCountdown])
|
|||
|
|
|
|||
|
|
// Step 1: Verify current email code
|
|||
|
|
const handleVerifyCurrentEmail = useCallback(async () => {
|
|||
|
|
clearError()
|
|||
|
|
setLocalError("")
|
|||
|
|
|
|||
|
|
if (!currentEmailCode) {
|
|||
|
|
setLocalError(translate("changeEmailScreen:codeRequired"))
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (currentEmailCode.length !== 6) {
|
|||
|
|
setLocalError(translate("changeEmailScreen:codeInvalid"))
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
await verifyCurrentEmail(currentEmailCode)
|
|||
|
|
}, [currentEmailCode, verifyCurrentEmail, clearError])
|
|||
|
|
|
|||
|
|
// Step 2: Send verification code to new email
|
|||
|
|
const handleSendNewEmailCode = useCallback(async () => {
|
|||
|
|
clearError()
|
|||
|
|
setLocalError("")
|
|||
|
|
|
|||
|
|
if (!newEmail) {
|
|||
|
|
setLocalError(translate("changeEmailScreen:newEmailRequired"))
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Basic email validation
|
|||
|
|
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(newEmail)) {
|
|||
|
|
setLocalError(translate("changeEmailScreen:emailInvalid"))
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (newEmail.toLowerCase() === user?.email?.toLowerCase()) {
|
|||
|
|
setLocalError(translate("changeEmailScreen:sameEmail"))
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const success = await sendEmailCode(newEmail)
|
|||
|
|
if (success) {
|
|||
|
|
setNewEmailCodeSent(true)
|
|||
|
|
startNewEmailCountdown()
|
|||
|
|
}
|
|||
|
|
}, [newEmail, user?.email, sendEmailCode, clearError, startNewEmailCountdown])
|
|||
|
|
|
|||
|
|
// Step 2: Bind new email
|
|||
|
|
const handleBindNewEmail = useCallback(async () => {
|
|||
|
|
clearError()
|
|||
|
|
setLocalError("")
|
|||
|
|
|
|||
|
|
if (!newEmailCode) {
|
|||
|
|
setLocalError(translate("changeEmailScreen:codeRequired"))
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (newEmailCode.length !== 6) {
|
|||
|
|
setLocalError(translate("changeEmailScreen:codeInvalid"))
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const success = await bindNewEmail(newEmail, newEmailCode)
|
|||
|
|
if (success) {
|
|||
|
|
setSuccessDialogVisible(true)
|
|||
|
|
}
|
|||
|
|
}, [newEmail, newEmailCode, bindNewEmail, clearError])
|
|||
|
|
|
|||
|
|
const displayError = localError || error
|
|||
|
|
|
|||
|
|
// Render Step 1 content (without buttons)
|
|||
|
|
const renderStep1Content = () => (
|
|||
|
|
<View style={themed($content)}>
|
|||
|
|
<Text tx="changeEmailScreen:step1Title" preset="subheading" style={themed($stepTitle)} />
|
|||
|
|
<Text tx="changeEmailScreen:step1Description" style={themed($description)} />
|
|||
|
|
|
|||
|
|
<View style={themed($currentEmailContainer)}>
|
|||
|
|
<Text size="xs" style={themed($currentEmailLabel)}>
|
|||
|
|
{translate("changeEmailScreen:currentEmail")}
|
|||
|
|
</Text>
|
|||
|
|
<Text preset="bold" style={themed($currentEmailText)}>
|
|||
|
|
{user?.email || ""}
|
|||
|
|
</Text>
|
|||
|
|
</View>
|
|||
|
|
|
|||
|
|
{emailChangeStep !== "idle" && (
|
|||
|
|
<>
|
|||
|
|
<TextField
|
|||
|
|
labelTx="changeEmailScreen:verificationCode"
|
|||
|
|
value={currentEmailCode}
|
|||
|
|
onChangeText={setCurrentEmailCode}
|
|||
|
|
containerStyle={themed($inputContainer)}
|
|||
|
|
keyboardType="number-pad"
|
|||
|
|
maxLength={6}
|
|||
|
|
placeholder="000000"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{displayError ? (
|
|||
|
|
<Text size="sm" style={themed($errorText)}>
|
|||
|
|
{displayError}
|
|||
|
|
</Text>
|
|||
|
|
) : null}
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</View>
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
// Render Step 2 content (without buttons)
|
|||
|
|
const renderStep2Content = () => (
|
|||
|
|
<View style={themed($content)}>
|
|||
|
|
<Text tx="changeEmailScreen:step2Title" preset="subheading" style={themed($stepTitle)} />
|
|||
|
|
<Text tx="changeEmailScreen:step2Description" style={themed($description)} />
|
|||
|
|
|
|||
|
|
<TextField
|
|||
|
|
labelTx="changeEmailScreen:newEmail"
|
|||
|
|
value={newEmail}
|
|||
|
|
onChangeText={setNewEmail}
|
|||
|
|
containerStyle={themed($inputContainer)}
|
|||
|
|
keyboardType="email-address"
|
|||
|
|
autoCapitalize="none"
|
|||
|
|
autoCorrect={false}
|
|||
|
|
editable={!newEmailCodeSent}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{!newEmailCodeSent ? (
|
|||
|
|
displayError ? (
|
|||
|
|
<Text size="sm" style={themed($errorText)}>
|
|||
|
|
{displayError}
|
|||
|
|
</Text>
|
|||
|
|
) : null
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
<TextField
|
|||
|
|
labelTx="changeEmailScreen:verificationCode"
|
|||
|
|
value={newEmailCode}
|
|||
|
|
onChangeText={setNewEmailCode}
|
|||
|
|
containerStyle={themed($inputContainer)}
|
|||
|
|
keyboardType="number-pad"
|
|||
|
|
maxLength={6}
|
|||
|
|
placeholder="000000"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{displayError ? (
|
|||
|
|
<Text size="sm" style={themed($errorText)}>
|
|||
|
|
{displayError}
|
|||
|
|
</Text>
|
|||
|
|
) : null}
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</View>
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
// Render bottom buttons for Step 1
|
|||
|
|
const renderStep1Buttons = () => {
|
|||
|
|
if (emailChangeStep === "idle") {
|
|||
|
|
return (
|
|||
|
|
<Button
|
|||
|
|
tx="changeEmailScreen:sendCode"
|
|||
|
|
preset="reversed"
|
|||
|
|
onPress={handleSendCurrentEmailCode}
|
|||
|
|
disabled={isLoading}
|
|||
|
|
loading={isLoading}
|
|||
|
|
/>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<Button
|
|||
|
|
tx="changeEmailScreen:verify"
|
|||
|
|
preset="reversed"
|
|||
|
|
onPress={handleVerifyCurrentEmail}
|
|||
|
|
disabled={isLoading}
|
|||
|
|
loading={isLoading}
|
|||
|
|
/>
|
|||
|
|
<Button
|
|||
|
|
text={
|
|||
|
|
currentEmailCountdown > 0
|
|||
|
|
? `${translate("changeEmailScreen:resendCode")} (${currentEmailCountdown}s)`
|
|||
|
|
: undefined
|
|||
|
|
}
|
|||
|
|
tx={currentEmailCountdown > 0 ? undefined : "changeEmailScreen:resendCode"}
|
|||
|
|
preset="default"
|
|||
|
|
style={themed($resendButton)}
|
|||
|
|
onPress={handleSendCurrentEmailCode}
|
|||
|
|
disabled={isLoading || currentEmailCountdown > 0}
|
|||
|
|
/>
|
|||
|
|
</>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Render bottom buttons for Step 2
|
|||
|
|
const renderStep2Buttons = () => {
|
|||
|
|
if (!newEmailCodeSent) {
|
|||
|
|
return (
|
|||
|
|
<Button
|
|||
|
|
tx="changeEmailScreen:sendCodeToNewEmail"
|
|||
|
|
preset="reversed"
|
|||
|
|
onPress={handleSendNewEmailCode}
|
|||
|
|
disabled={isLoading || !newEmail}
|
|||
|
|
loading={isLoading}
|
|||
|
|
/>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<Button
|
|||
|
|
tx="changeEmailScreen:confirmNewEmail"
|
|||
|
|
preset="reversed"
|
|||
|
|
onPress={handleBindNewEmail}
|
|||
|
|
disabled={isLoading}
|
|||
|
|
loading={isLoading}
|
|||
|
|
/>
|
|||
|
|
<Button
|
|||
|
|
text={
|
|||
|
|
newEmailCountdown > 0
|
|||
|
|
? `${translate("changeEmailScreen:resendCode")} (${newEmailCountdown}s)`
|
|||
|
|
: undefined
|
|||
|
|
}
|
|||
|
|
tx={newEmailCountdown > 0 ? undefined : "changeEmailScreen:resendCode"}
|
|||
|
|
preset="default"
|
|||
|
|
style={themed($resendButton)}
|
|||
|
|
onPress={handleSendNewEmailCode}
|
|||
|
|
disabled={isLoading || newEmailCountdown > 0}
|
|||
|
|
/>
|
|||
|
|
</>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
useHeader(
|
|||
|
|
{
|
|||
|
|
title: translate("changeEmailScreen:title"),
|
|||
|
|
leftIcon: "back",
|
|||
|
|
onLeftPress: () => navigation.goBack(),
|
|||
|
|
},
|
|||
|
|
[],
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Screen preset="fixed" safeAreaEdges={["bottom"]} contentContainerStyle={$styles.flex1}>
|
|||
|
|
<KeyboardAwareScrollView
|
|||
|
|
contentContainerStyle={[$styles.container, themed($container)]}
|
|||
|
|
keyboardShouldPersistTaps="handled"
|
|||
|
|
showsVerticalScrollIndicator={false}
|
|||
|
|
>
|
|||
|
|
{/* Step indicator */}
|
|||
|
|
<View style={themed($stepIndicator)}>
|
|||
|
|
{/* Step 1 */}
|
|||
|
|
<View style={themed($stepItem)}>
|
|||
|
|
<View
|
|||
|
|
style={[themed($stepDot), emailChangeStep !== "bind-new" && themed($stepDotActive)]}
|
|||
|
|
>
|
|||
|
|
<Text
|
|||
|
|
style={[
|
|||
|
|
themed($stepNumber),
|
|||
|
|
emailChangeStep !== "bind-new" && themed($stepNumberActive),
|
|||
|
|
]}
|
|||
|
|
>
|
|||
|
|
1
|
|||
|
|
</Text>
|
|||
|
|
</View>
|
|||
|
|
<Text
|
|||
|
|
size="xxs"
|
|||
|
|
style={[
|
|||
|
|
themed($stepLabel),
|
|||
|
|
emailChangeStep !== "bind-new" && themed($stepLabelActive),
|
|||
|
|
]}
|
|||
|
|
>
|
|||
|
|
{translate("changeEmailScreen:step1Label")}
|
|||
|
|
</Text>
|
|||
|
|
</View>
|
|||
|
|
|
|||
|
|
{/* Line */}
|
|||
|
|
<View style={themed($stepLine)} />
|
|||
|
|
|
|||
|
|
{/* Step 2 */}
|
|||
|
|
<View style={themed($stepItem)}>
|
|||
|
|
<View
|
|||
|
|
style={[themed($stepDot), emailChangeStep === "bind-new" && themed($stepDotActive)]}
|
|||
|
|
>
|
|||
|
|
<Text
|
|||
|
|
style={[
|
|||
|
|
themed($stepNumber),
|
|||
|
|
emailChangeStep === "bind-new" && themed($stepNumberActive),
|
|||
|
|
]}
|
|||
|
|
>
|
|||
|
|
2
|
|||
|
|
</Text>
|
|||
|
|
</View>
|
|||
|
|
<Text
|
|||
|
|
size="xxs"
|
|||
|
|
style={[
|
|||
|
|
themed($stepLabel),
|
|||
|
|
emailChangeStep === "bind-new" && themed($stepLabelActive),
|
|||
|
|
]}
|
|||
|
|
>
|
|||
|
|
{translate("changeEmailScreen:step2Label")}
|
|||
|
|
</Text>
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
|
|||
|
|
{emailChangeStep === "bind-new" ? renderStep2Content() : renderStep1Content()}
|
|||
|
|
</KeyboardAwareScrollView>
|
|||
|
|
|
|||
|
|
{/* Fixed Bottom Buttons */}
|
|||
|
|
<View style={themed($bottomContainer)}>
|
|||
|
|
{emailChangeStep === "bind-new" ? renderStep2Buttons() : renderStep1Buttons()}
|
|||
|
|
</View>
|
|||
|
|
|
|||
|
|
{/* Success Dialog */}
|
|||
|
|
<Dialog
|
|||
|
|
visible={successDialogVisible}
|
|||
|
|
onClose={() => {
|
|||
|
|
setSuccessDialogVisible(false)
|
|||
|
|
navigation.goBack()
|
|||
|
|
}}
|
|||
|
|
titleTx="changeEmailScreen:success"
|
|||
|
|
messageTx="changeEmailScreen:successMessage"
|
|||
|
|
onConfirm={() => {
|
|||
|
|
setSuccessDialogVisible(false)
|
|||
|
|
navigation.goBack()
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</Screen>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const $container: ThemedStyle<ViewStyle> = ({ spacing }) => ({
|
|||
|
|
paddingTop: spacing.lg, // 覆盖 $styles.container 的 56px，使用 useHeader 时只需 24px
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const $content: ThemedStyle<ViewStyle> = () => ({})
|
|||
|
|
|
|||
|
|
const $stepIndicator: ThemedStyle<ViewStyle> = ({ spacing }) => ({
|
|||
|
|
flexDirection: "row",
|
|||
|
|
alignItems: "flex-start",
|
|||
|
|
justifyContent: "center",
|
|||
|
|
marginBottom: spacing.lg,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const $stepItem: ThemedStyle<ViewStyle> = () => ({
|
|||
|
|
alignItems: "center",
|
|||
|
|
width: s(80),
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const $stepDot: ThemedStyle<ViewStyle> = ({ colors }) => ({
|
|||
|
|
width: s(32),
|
|||
|
|
height: s(32),
|
|||
|
|
borderRadius: s(16),
|
|||
|
|
backgroundColor: colors.palette.neutral300,
|
|||
|
|
justifyContent: "center",
|
|||
|
|
alignItems: "center",
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const $stepDotActive: ThemedStyle<ViewStyle> = ({ colors }) => ({
|
|||
|
|
backgroundColor: colors.tint,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const $stepNumber: ThemedStyle<TextStyle> = ({ colors }) => ({
|
|||
|
|
color: colors.textDim,
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const $stepNumberActive: ThemedStyle<TextStyle> = ({ colors }) => ({
|
|||
|
|
color: colors.palette.neutral100,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const $stepLabel: ThemedStyle<TextStyle> = ({ colors, spacing }) => ({
|
|||
|
|
color: colors.textDim,
|
|||
|
|
marginTop: spacing.xs,
|
|||
|
|
textAlign: "center",
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const $stepLabelActive: ThemedStyle<TextStyle> = ({ colors }) => ({
|
|||
|
|
color: colors.tint,
|
|||
|
|
fontWeight: "600",
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const $stepLine: ThemedStyle<ViewStyle> = ({ colors }) => ({
|
|||
|
|
width: s(40),
|
|||
|
|
height: 2,
|
|||
|
|
backgroundColor: colors.palette.neutral300,
|
|||
|
|
marginTop: s(15),
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const $stepTitle: ThemedStyle<TextStyle> = ({ spacing }) => ({
|
|||
|
|
marginBottom: spacing.xs,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const $description: ThemedStyle<TextStyle> = ({ colors, spacing }) => ({
|
|||
|
|
color: colors.textDim,
|
|||
|
|
marginBottom: spacing.lg,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const $currentEmailContainer: ThemedStyle<ViewStyle> = ({ colors, spacing }) => ({
|
|||
|
|
backgroundColor: colors.palette.neutral200,
|
|||
|
|
borderRadius: s(8),
|
|||
|
|
padding: spacing.md,
|
|||
|
|
marginBottom: spacing.lg,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const $currentEmailLabel: ThemedStyle<TextStyle> = ({ colors, spacing }) => ({
|
|||
|
|
color: colors.textDim,
|
|||
|
|
marginBottom: spacing.xxs,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const $currentEmailText: ThemedStyle<TextStyle> = () => ({})
|
|||
|
|
|
|||
|
|
const $inputContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
|
|||
|
|
marginBottom: spacing.md,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const $errorText: ThemedStyle<TextStyle> = ({ colors, spacing }) => ({
|
|||
|
|
color: colors.error,
|
|||
|
|
marginBottom: spacing.md,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const $bottomContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
|
|||
|
|
paddingHorizontal: spacing.lg,
|
|||
|
|
paddingBottom: spacing.md,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const $resendButton: ThemedStyle<ViewStyle> = ({ spacing }) => ({
|
|||
|
|
marginTop: spacing.sm,
|
|||
|
|
})
|