d453126c89
- Backend: Update Legacy API credentials to robster/rob2 - Frontend: ROOM_LOCATIONS with icons and legacyCode mapping - Device Settings: Modal picker for room selection - api.ts: Bidirectional conversion (code ↔ name) - Various UI/UX improvements across screens PRD-DEPLOYMENT.md completed (Score: 9/10) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
427 lines
11 KiB
TypeScript
427 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 || '';
|
|
|
|
// Invite code state
|
|
const [inviteCode, setInviteCode] = useState('');
|
|
const [inviteModalVisible, setInviteModalVisible] = useState(false);
|
|
const [tempInviteCode, setTempInviteCode] = 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);
|
|
|
|
const result = await requestOtp(email);
|
|
|
|
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
|
|
router.push({
|
|
pathname: '/(auth)/verify-otp',
|
|
params: { email, isNewUser: '1', inviteCode }
|
|
});
|
|
};
|
|
|
|
const handleBack = () => {
|
|
router.back();
|
|
};
|
|
|
|
const handleInviteCodeSubmit = () => {
|
|
setInviteCode(tempInviteCode);
|
|
setInviteModalVisible(false);
|
|
};
|
|
|
|
const openInviteModal = () => {
|
|
setTempInviteCode(inviteCode);
|
|
setInviteModalVisible(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>
|
|
|
|
{/* Invite Code */}
|
|
{inviteCode ? (
|
|
<TouchableOpacity style={styles.inviteBadge} onPress={openInviteModal}>
|
|
<Ionicons name="gift" size={16} color={AppColors.success} />
|
|
<Text style={styles.inviteBadgeText}>Invite code: {inviteCode}</Text>
|
|
<Ionicons name="pencil" size={14} color={AppColors.success} />
|
|
</TouchableOpacity>
|
|
) : (
|
|
<TouchableOpacity style={styles.inviteLink} onPress={openInviteModal}>
|
|
<Text style={styles.inviteLinkText}>Have an invite 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>
|
|
|
|
{/* Invite Code Modal */}
|
|
<Modal
|
|
visible={inviteModalVisible}
|
|
transparent
|
|
animationType="slide"
|
|
onRequestClose={() => setInviteModalVisible(false)}
|
|
>
|
|
<View style={styles.modalOverlay}>
|
|
<View style={styles.modalContent}>
|
|
<Text style={styles.modalTitle}>Enter Invite Code</Text>
|
|
<Text style={styles.modalSubtitle}>
|
|
If you received a referral code, enter it below
|
|
</Text>
|
|
|
|
<View style={styles.codeContainer}>
|
|
{[0, 1, 2, 3, 4, 5].map((index) => (
|
|
<View
|
|
key={index}
|
|
style={[
|
|
styles.codeCell,
|
|
tempInviteCode[index] && styles.codeCellFilled,
|
|
]}
|
|
>
|
|
<Text style={styles.codeCellText}>
|
|
{tempInviteCode[index] || ''}
|
|
</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
|
|
<TextInput
|
|
style={styles.hiddenInput}
|
|
value={tempInviteCode}
|
|
onChangeText={(text) => setTempInviteCode(text.replace(/[^0-9]/g, '').slice(0, 6))}
|
|
keyboardType="number-pad"
|
|
maxLength={6}
|
|
autoFocus
|
|
/>
|
|
|
|
<TouchableOpacity
|
|
style={styles.testCodeHint}
|
|
onPress={() => setTempInviteCode('123456')}
|
|
>
|
|
<Text style={styles.testCodeText}>For testing: tap to use 123456</Text>
|
|
</TouchableOpacity>
|
|
|
|
<View style={styles.modalButtons}>
|
|
<TouchableOpacity
|
|
style={styles.modalCancelButton}
|
|
onPress={() => setInviteModalVisible(false)}
|
|
>
|
|
<Text style={styles.modalCancelText}>Cancel</Text>
|
|
</TouchableOpacity>
|
|
|
|
<Button
|
|
title="Apply"
|
|
onPress={handleInviteCodeSubmit}
|
|
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,
|
|
},
|
|
inviteBadge: {
|
|
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,
|
|
},
|
|
inviteBadgeText: {
|
|
fontSize: FontSizes.sm,
|
|
color: AppColors.success,
|
|
fontWeight: '500',
|
|
},
|
|
inviteLink: {
|
|
alignItems: 'center',
|
|
paddingVertical: Spacing.md,
|
|
marginBottom: Spacing.sm,
|
|
},
|
|
inviteLinkText: {
|
|
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,
|
|
},
|
|
});
|