130 lines
3.1 KiB
TypeScript
130 lines
3.1 KiB
TypeScript
import { View, Text, StyleSheet, TouchableOpacity, TextInput } from 'react-native';
|
|
import { router, useLocalSearchParams } from 'expo-router';
|
|
import { useState } from 'react';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { useAuthStore } from '@stores/auth.store';
|
|
|
|
export default function VerifyOtpScreen() {
|
|
const { phone } = useLocalSearchParams<{ phone: string }>();
|
|
const [otp, setOtp] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const { verifyOtp } = useAuthStore();
|
|
|
|
const handleVerify = async () => {
|
|
if (!otp || !password || !phone) return;
|
|
|
|
setLoading(true);
|
|
try {
|
|
await verifyOtp(phone, otp, password);
|
|
router.replace('/(tabs)');
|
|
} catch (error) {
|
|
console.error('Verification error:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<SafeAreaView style={styles.container}>
|
|
<View style={styles.content}>
|
|
<Text style={styles.title}>Verificar Codigo</Text>
|
|
<Text style={styles.subtitle}>
|
|
Ingresa el codigo enviado a {phone}
|
|
</Text>
|
|
|
|
<View style={styles.form}>
|
|
<TextInput
|
|
style={styles.input}
|
|
placeholder="Codigo OTP"
|
|
value={otp}
|
|
onChangeText={setOtp}
|
|
keyboardType="number-pad"
|
|
maxLength={6}
|
|
/>
|
|
<TextInput
|
|
style={styles.input}
|
|
placeholder="Crear Contrasena"
|
|
value={password}
|
|
onChangeText={setPassword}
|
|
secureTextEntry
|
|
/>
|
|
|
|
<TouchableOpacity
|
|
style={[styles.button, loading && styles.buttonDisabled]}
|
|
onPress={handleVerify}
|
|
disabled={loading}
|
|
>
|
|
<Text style={styles.buttonText}>
|
|
{loading ? 'Verificando...' : 'Verificar y Crear Cuenta'}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<TouchableOpacity style={styles.resendButton}>
|
|
<Text style={styles.resendText}>Reenviar codigo</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#fff',
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
padding: 24,
|
|
justifyContent: 'center',
|
|
},
|
|
title: {
|
|
fontSize: 32,
|
|
fontWeight: 'bold',
|
|
textAlign: 'center',
|
|
marginBottom: 8,
|
|
color: '#1a1a1a',
|
|
},
|
|
subtitle: {
|
|
fontSize: 16,
|
|
textAlign: 'center',
|
|
marginBottom: 32,
|
|
color: '#666',
|
|
},
|
|
form: {
|
|
gap: 16,
|
|
},
|
|
input: {
|
|
borderWidth: 1,
|
|
borderColor: '#ddd',
|
|
borderRadius: 12,
|
|
padding: 16,
|
|
fontSize: 16,
|
|
textAlign: 'center',
|
|
},
|
|
button: {
|
|
backgroundColor: '#2563eb',
|
|
padding: 16,
|
|
borderRadius: 12,
|
|
alignItems: 'center',
|
|
marginTop: 8,
|
|
},
|
|
buttonDisabled: {
|
|
opacity: 0.6,
|
|
},
|
|
buttonText: {
|
|
color: '#fff',
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
},
|
|
resendButton: {
|
|
alignItems: 'center',
|
|
marginTop: 24,
|
|
},
|
|
resendText: {
|
|
color: '#2563eb',
|
|
fontSize: 14,
|
|
},
|
|
});
|