430 lines
11 KiB
TypeScript
430 lines
11 KiB
TypeScript
import React, { useState, useEffect, useRef } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
ScrollView,
|
|
TouchableOpacity,
|
|
Modal,
|
|
TextInput,
|
|
ActivityIndicator,
|
|
} from 'react-native';
|
|
import { router, useLocalSearchParams } from 'expo-router';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { useAuth } from '@/contexts/AuthContext';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { ErrorMessage } from '@/components/ui/ErrorMessage';
|
|
import { AppColors, BorderRadius, FontSizes, Spacing } from '@/constants/theme';
|
|
|
|
export default function VerifyEmailScreen() {
|
|
const { requestOtp, isLoading, error, clearError } = useAuth();
|
|
const params = useLocalSearchParams<{ email: string }>();
|
|
|
|
const email = params.email || '';
|
|
|
|
// Partner code state
|
|
const [partnerCode, setPartnerCode] = useState('');
|
|
const [partnerModalVisible, setPartnerModalVisible] = useState(false);
|
|
const [tempPartnerCode, setTempPartnerCode] = useState('');
|
|
|
|
// OTP sending state
|
|
const [codeSent, setCodeSent] = useState(false);
|
|
const [sendingOtp, setSendingOtp] = useState(false);
|
|
const hasSentOtp = useRef(false);
|
|
|
|
// Clear errors on mount
|
|
useEffect(() => {
|
|
clearError();
|
|
}, []);
|
|
|
|
// Auto-send OTP on mount
|
|
useEffect(() => {
|
|
if (!email || hasSentOtp.current) return;
|
|
|
|
const sendOtp = async () => {
|
|
hasSentOtp.current = true;
|
|
setSendingOtp(true);
|
|
console.log('[VerifyEmail] Auto-sending OTP to:', email);
|
|
|
|
const result = await requestOtp(email);
|
|
console.log('[VerifyEmail] Result:', JSON.stringify(result));
|
|
|
|
setSendingOtp(false);
|
|
if (result.success) {
|
|
setCodeSent(true);
|
|
}
|
|
};
|
|
|
|
sendOtp();
|
|
}, [email]);
|
|
|
|
const handleContinue = async () => {
|
|
clearError();
|
|
|
|
if (!email) {
|
|
router.replace('/(auth)/login');
|
|
return;
|
|
}
|
|
|
|
// If code wasn't sent, try sending first
|
|
if (!codeSent) {
|
|
setSendingOtp(true);
|
|
const result = await requestOtp(email);
|
|
setSendingOtp(false);
|
|
|
|
if (!result.success) return;
|
|
setCodeSent(true);
|
|
}
|
|
|
|
// Navigate to OTP verification for new user
|
|
console.log('[VerifyEmail] -> verify-otp');
|
|
router.push({
|
|
pathname: '/(auth)/verify-otp',
|
|
params: { email, isNewUser: '1', partnerCode }
|
|
});
|
|
};
|
|
|
|
const handleBack = () => {
|
|
router.back();
|
|
};
|
|
|
|
const handlePartnerCodeSubmit = () => {
|
|
setPartnerCode(tempPartnerCode);
|
|
setPartnerModalVisible(false);
|
|
};
|
|
|
|
const openPartnerModal = () => {
|
|
setTempPartnerCode(partnerCode);
|
|
setPartnerModalVisible(true);
|
|
};
|
|
|
|
return (
|
|
<KeyboardAvoidingView
|
|
style={styles.container}
|
|
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
|
>
|
|
<ScrollView
|
|
contentContainerStyle={styles.scrollContent}
|
|
keyboardShouldPersistTaps="handled"
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
<TouchableOpacity style={styles.backButton} onPress={handleBack}>
|
|
<Ionicons name="arrow-back" size={24} color={AppColors.textPrimary} />
|
|
</TouchableOpacity>
|
|
|
|
<View style={styles.iconContainer}>
|
|
<View style={styles.iconCircle}>
|
|
<Ionicons name="mail" size={48} color={AppColors.primary} />
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.header}>
|
|
<Text style={styles.title}>Let's get started!</Text>
|
|
{sendingOtp ? (
|
|
<View style={styles.sendingContainer}>
|
|
<ActivityIndicator size="small" color={AppColors.primary} />
|
|
<Text style={styles.sendingText}>Sending verification code...</Text>
|
|
</View>
|
|
) : codeSent ? (
|
|
<Text style={styles.subtitle}>We've sent a verification code to</Text>
|
|
) : (
|
|
<Text style={styles.subtitle}>We'll send a verification code to</Text>
|
|
)}
|
|
<Text style={styles.email}>{email}</Text>
|
|
</View>
|
|
|
|
{/* Partner Code */}
|
|
{partnerCode ? (
|
|
<TouchableOpacity style={styles.partnerBadge} onPress={openPartnerModal}>
|
|
<Ionicons name="gift" size={16} color={AppColors.success} />
|
|
<Text style={styles.partnerBadgeText}>Partner code: {partnerCode}</Text>
|
|
<Ionicons name="pencil" size={14} color={AppColors.success} />
|
|
</TouchableOpacity>
|
|
) : (
|
|
<TouchableOpacity style={styles.partnerLink} onPress={openPartnerModal}>
|
|
<Text style={styles.partnerLinkText}>Have a partner code?</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
|
|
{error && (
|
|
<ErrorMessage message={error.message} onDismiss={clearError} />
|
|
)}
|
|
|
|
<View style={styles.buttonContainer}>
|
|
<Button
|
|
title={codeSent ? 'Continue to Verify' : 'Send Code & Continue'}
|
|
onPress={handleContinue}
|
|
loading={isLoading || sendingOtp}
|
|
fullWidth
|
|
size="lg"
|
|
/>
|
|
</View>
|
|
|
|
<View style={styles.infoContainer}>
|
|
<Text style={styles.infoText}>
|
|
After verification, you'll be able to set up your profile and start monitoring your loved ones
|
|
</Text>
|
|
</View>
|
|
</ScrollView>
|
|
|
|
{/* Partner Code Modal */}
|
|
<Modal
|
|
visible={partnerModalVisible}
|
|
transparent
|
|
animationType="slide"
|
|
onRequestClose={() => setPartnerModalVisible(false)}
|
|
>
|
|
<View style={styles.modalOverlay}>
|
|
<View style={styles.modalContent}>
|
|
<Text style={styles.modalTitle}>Enter Partner Code</Text>
|
|
<Text style={styles.modalSubtitle}>
|
|
If you received a referral code from a partner, enter it below
|
|
</Text>
|
|
|
|
<View style={styles.codeContainer}>
|
|
{[0, 1, 2, 3, 4, 5].map((index) => (
|
|
<View
|
|
key={index}
|
|
style={[
|
|
styles.codeCell,
|
|
tempPartnerCode[index] && styles.codeCellFilled,
|
|
]}
|
|
>
|
|
<Text style={styles.codeCellText}>
|
|
{tempPartnerCode[index] || ''}
|
|
</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
|
|
<TextInput
|
|
style={styles.hiddenInput}
|
|
value={tempPartnerCode}
|
|
onChangeText={(text) => setTempPartnerCode(text.replace(/[^0-9]/g, '').slice(0, 6))}
|
|
keyboardType="number-pad"
|
|
maxLength={6}
|
|
autoFocus
|
|
/>
|
|
|
|
<TouchableOpacity
|
|
style={styles.testCodeHint}
|
|
onPress={() => setTempPartnerCode('123456')}
|
|
>
|
|
<Text style={styles.testCodeText}>For testing: tap to use 123456</Text>
|
|
</TouchableOpacity>
|
|
|
|
<View style={styles.modalButtons}>
|
|
<TouchableOpacity
|
|
style={styles.modalCancelButton}
|
|
onPress={() => setPartnerModalVisible(false)}
|
|
>
|
|
<Text style={styles.modalCancelText}>Cancel</Text>
|
|
</TouchableOpacity>
|
|
|
|
<Button
|
|
title="Apply"
|
|
onPress={handlePartnerCodeSubmit}
|
|
size="md"
|
|
style={styles.modalApplyButton}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
</KeyboardAvoidingView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: AppColors.background,
|
|
},
|
|
scrollContent: {
|
|
flexGrow: 1,
|
|
paddingHorizontal: Spacing.lg,
|
|
paddingTop: Spacing.xl,
|
|
paddingBottom: Spacing.xl,
|
|
},
|
|
backButton: {
|
|
width: 44,
|
|
height: 44,
|
|
justifyContent: 'center',
|
|
alignItems: 'flex-start',
|
|
marginBottom: Spacing.xl,
|
|
},
|
|
iconContainer: {
|
|
alignItems: 'center',
|
|
marginBottom: Spacing.xl,
|
|
},
|
|
iconCircle: {
|
|
width: 100,
|
|
height: 100,
|
|
borderRadius: 50,
|
|
backgroundColor: `${AppColors.primary}15`,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
header: {
|
|
alignItems: 'center',
|
|
marginBottom: Spacing.lg,
|
|
},
|
|
title: {
|
|
fontSize: FontSizes['2xl'],
|
|
fontWeight: '700',
|
|
color: AppColors.textPrimary,
|
|
marginBottom: Spacing.md,
|
|
textAlign: 'center',
|
|
},
|
|
subtitle: {
|
|
fontSize: FontSizes.base,
|
|
color: AppColors.textSecondary,
|
|
textAlign: 'center',
|
|
},
|
|
sendingContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: Spacing.sm,
|
|
},
|
|
sendingText: {
|
|
fontSize: FontSizes.base,
|
|
color: AppColors.primary,
|
|
},
|
|
email: {
|
|
fontSize: FontSizes.base,
|
|
fontWeight: '600',
|
|
color: AppColors.textPrimary,
|
|
marginTop: Spacing.xs,
|
|
},
|
|
partnerBadge: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: `${AppColors.success}15`,
|
|
paddingVertical: Spacing.sm,
|
|
paddingHorizontal: Spacing.md,
|
|
borderRadius: BorderRadius.md,
|
|
marginBottom: Spacing.lg,
|
|
gap: Spacing.xs,
|
|
},
|
|
partnerBadgeText: {
|
|
fontSize: FontSizes.sm,
|
|
color: AppColors.success,
|
|
fontWeight: '500',
|
|
},
|
|
partnerLink: {
|
|
alignItems: 'center',
|
|
paddingVertical: Spacing.md,
|
|
marginBottom: Spacing.sm,
|
|
},
|
|
partnerLinkText: {
|
|
fontSize: FontSizes.base,
|
|
color: AppColors.primary,
|
|
fontWeight: '500',
|
|
},
|
|
buttonContainer: {
|
|
marginTop: Spacing.lg,
|
|
},
|
|
infoContainer: {
|
|
alignItems: 'center',
|
|
marginTop: Spacing.xl,
|
|
paddingHorizontal: Spacing.md,
|
|
},
|
|
infoText: {
|
|
fontSize: FontSizes.sm,
|
|
color: AppColors.textMuted,
|
|
textAlign: 'center',
|
|
lineHeight: 20,
|
|
},
|
|
modalOverlay: {
|
|
flex: 1,
|
|
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
padding: Spacing.lg,
|
|
},
|
|
modalContent: {
|
|
backgroundColor: AppColors.background,
|
|
borderRadius: BorderRadius.lg,
|
|
padding: Spacing.xl,
|
|
width: '100%',
|
|
maxWidth: 400,
|
|
},
|
|
modalTitle: {
|
|
fontSize: FontSizes.xl,
|
|
fontWeight: '700',
|
|
color: AppColors.textPrimary,
|
|
marginBottom: Spacing.sm,
|
|
textAlign: 'center',
|
|
},
|
|
modalSubtitle: {
|
|
fontSize: FontSizes.sm,
|
|
color: AppColors.textSecondary,
|
|
textAlign: 'center',
|
|
marginBottom: Spacing.lg,
|
|
},
|
|
codeContainer: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
gap: Spacing.sm,
|
|
marginBottom: Spacing.sm,
|
|
},
|
|
codeCell: {
|
|
width: 44,
|
|
height: 52,
|
|
borderRadius: BorderRadius.md,
|
|
borderWidth: 2,
|
|
borderColor: AppColors.border,
|
|
backgroundColor: AppColors.surface,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
codeCellFilled: {
|
|
borderColor: AppColors.primary,
|
|
backgroundColor: `${AppColors.primary}10`,
|
|
},
|
|
codeCellText: {
|
|
fontSize: FontSizes['2xl'],
|
|
fontWeight: '600',
|
|
color: AppColors.textPrimary,
|
|
},
|
|
hiddenInput: {
|
|
position: 'absolute',
|
|
opacity: 0,
|
|
height: 0,
|
|
},
|
|
testCodeHint: {
|
|
alignItems: 'center',
|
|
paddingVertical: Spacing.sm,
|
|
marginBottom: Spacing.md,
|
|
},
|
|
testCodeText: {
|
|
fontSize: FontSizes.xs,
|
|
color: AppColors.primary,
|
|
textDecorationLine: 'underline',
|
|
},
|
|
modalButtons: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
gap: Spacing.md,
|
|
},
|
|
modalCancelButton: {
|
|
flex: 1,
|
|
padding: Spacing.md,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
borderRadius: BorderRadius.md,
|
|
borderWidth: 1,
|
|
borderColor: AppColors.border,
|
|
},
|
|
modalCancelText: {
|
|
fontSize: FontSizes.base,
|
|
color: AppColors.textSecondary,
|
|
},
|
|
modalApplyButton: {
|
|
flex: 1,
|
|
},
|
|
});
|