import React, { useState, useRef } from 'react'; import { View, Text, StyleSheet, SafeAreaView, ActivityIndicator, Alert, Platform, } from 'react-native'; import { WebView } from 'react-native-webview'; import { API_ENDPOINTS } from '../config/api'; const TURNSTILE_SITE_KEY = '1x00000000000000000000AA'; export default function HumanVerificationScreen({ navigation }: any) { const [loading, setLoading] = useState(true); const [verifying, setVerifying] = useState(false); const [error, setError] = useState(null); const webViewRef = useRef(null); console.log('HumanVerificationScreen mounted'); const handleTurnstileToken = async (token: string) => { setVerifying(true); try { // Verify token with backend const response = await fetch(API_ENDPOINTS.VERIFY_TURNSTILE, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ token }), }); const result = await response.json(); if (result.success) { navigation.navigate('Auth'); } else { Alert.alert('Verification Failed', 'Please try again'); // Reload Turnstile webViewRef.current?.reload(); } } catch (error) { console.error('Verification error:', error); Alert.alert('Error', 'Verification failed. Please try again.'); } finally { setVerifying(false); } }; const handleMessage = (event: any) => { const data = JSON.parse(event.nativeEvent.data); if (data.type === 'turnstile-success') { handleTurnstileToken(data.token); } else if (data.type === 'turnstile-error') { Alert.alert('Error', 'Verification failed. Please try again.'); setLoading(false); } }; const turnstileHTML = `

🛡️

Human Verification

Please complete the security check to continue

`; return ( {verifying && ( Verifying... )} console.log('WebView started loading')} onLoadEnd={() => { console.log('WebView finished loading'); setLoading(false); }} onError={(syntheticEvent) => { const { nativeEvent } = syntheticEvent; console.error('WebView error:', nativeEvent); setError(`WebView Error: ${nativeEvent.description}`); }} style={styles.webview} javaScriptEnabled={true} domStorageEnabled={true} originWhitelist={['*']} /> {loading && ( Loading verification... )} {error && ( {error} )} ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F8F9FA', }, webview: { flex: 1, backgroundColor: '#F8F9FA', }, loadingOverlay: { ...StyleSheet.absoluteFillObject, backgroundColor: '#F8F9FA', justifyContent: 'center', alignItems: 'center', }, overlay: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(0, 0, 0, 0.7)', justifyContent: 'center', alignItems: 'center', zIndex: 999, }, verifyingText: { marginTop: 16, fontSize: 16, fontWeight: '600', color: '#FFF', }, loadingText: { marginTop: 16, fontSize: 14, color: '#6B7280', }, errorOverlay: { position: 'absolute', bottom: 20, left: 20, right: 20, backgroundColor: '#FEE2E2', padding: 16, borderRadius: 12, borderWidth: 1, borderColor: '#EE2A35', }, errorText: { color: '#991B1B', fontSize: 14, }, });