diff --git a/mobile/src/screens/VerifyHumanScreen.tsx b/mobile/src/screens/VerifyHumanScreen.tsx new file mode 100644 index 00000000..0c8a8048 --- /dev/null +++ b/mobile/src/screens/VerifyHumanScreen.tsx @@ -0,0 +1,261 @@ +import React, { useState } from 'react'; +import { + View, + Text, + StyleSheet, + TouchableOpacity, + SafeAreaView, + StatusBar, + Animated, +} from 'react-native'; +import { LinearGradient } from 'expo-linear-gradient'; +import { useTranslation } from 'react-i18next'; +import { KurdistanColors } from '../theme/colors'; +import AsyncStorage from '@react-native-async-storage/async-storage'; + +const HUMAN_VERIFIED_KEY = '@pezkuwi_human_verified'; + +interface VerifyHumanScreenProps { + onVerified: () => void; +} + +const VerifyHumanScreen: React.FC = ({ onVerified }) => { + const { t } = useTranslation(); + const [isChecked, setIsChecked] = useState(false); + const [scaleValue] = useState(new Animated.Value(1)); + + const handleVerify = async () => { + if (!isChecked) return; + + // Save verification status + try { + await AsyncStorage.setItem(HUMAN_VERIFIED_KEY, 'true'); + } catch (error) { + console.error('Failed to save verification:', error); + } + + // Animate and navigate + Animated.sequence([ + Animated.timing(scaleValue, { + toValue: 1.1, + duration: 100, + useNativeDriver: true, + }), + Animated.timing(scaleValue, { + toValue: 1, + duration: 100, + useNativeDriver: true, + }), + ]).start(() => { + setTimeout(() => onVerified(), 200); + }); + }; + + const toggleCheck = () => { + setIsChecked(!isChecked); + }; + + return ( + + + + + {/* Security Icon */} + + πŸ›‘οΈ + + + {/* Title */} + {t('verify.title', 'Security Verification')} + + {t('verify.subtitle', 'Please confirm you are human to continue')} + + + {/* Verification Box */} + + + {isChecked && βœ“} + + + {t('verify.checkbox', "I'm not a robot")} + + + + {/* Info Text */} + + {t('verify.info', 'This helps protect the Pezkuwi network from automated attacks')} + + + {/* Continue Button */} + + + + {t('verify.continue', 'Continue')} + + + + + {/* Footer */} + + + πŸ”’ {t('verify.secure', 'Secure & Private')} + + + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: KurdistanColors.kesk, + }, + gradient: { + flex: 1, + }, + content: { + flex: 1, + padding: 20, + justifyContent: 'center', + alignItems: 'center', + }, + iconContainer: { + width: 100, + height: 100, + borderRadius: 50, + backgroundColor: KurdistanColors.spi, + justifyContent: 'center', + alignItems: 'center', + marginBottom: 30, + boxShadow: '0 4px 8px rgba(0, 0, 0, 0.3)', + elevation: 8, + }, + iconText: { + fontSize: 50, + }, + title: { + fontSize: 28, + fontWeight: 'bold', + color: KurdistanColors.spi, + textAlign: 'center', + marginBottom: 10, + }, + subtitle: { + fontSize: 16, + color: KurdistanColors.spi, + textAlign: 'center', + opacity: 0.9, + marginBottom: 40, + }, + verificationBox: { + flexDirection: 'row', + alignItems: 'center', + backgroundColor: KurdistanColors.spi, + borderRadius: 12, + padding: 20, + marginBottom: 20, + boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)', + elevation: 4, + width: '100%', + maxWidth: 400, + }, + checkbox: { + width: 32, + height: 32, + borderRadius: 6, + borderWidth: 2, + borderColor: KurdistanColors.kesk, + marginRight: 15, + justifyContent: 'center', + alignItems: 'center', + }, + checkboxChecked: { + backgroundColor: KurdistanColors.kesk, + borderColor: KurdistanColors.kesk, + }, + checkmark: { + fontSize: 20, + color: KurdistanColors.spi, + fontWeight: 'bold', + }, + verificationText: { + fontSize: 18, + color: KurdistanColors.reş, + fontWeight: '500', + }, + infoText: { + fontSize: 13, + color: KurdistanColors.spi, + textAlign: 'center', + opacity: 0.8, + marginBottom: 40, + paddingHorizontal: 20, + }, + continueButton: { + backgroundColor: KurdistanColors.spi, + borderRadius: 12, + padding: 16, + alignItems: 'center', + width: '100%', + maxWidth: 400, + boxShadow: '0 4px 6px rgba(0, 0, 0, 0.3)', + elevation: 6, + }, + continueButtonDisabled: { + backgroundColor: 'rgba(255, 255, 255, 0.3)', + boxShadow: 'none', + elevation: 0, + }, + continueButtonText: { + fontSize: 18, + fontWeight: 'bold', + color: KurdistanColors.kesk, + }, + continueButtonTextDisabled: { + color: 'rgba(0, 0, 0, 0.3)', + }, + footer: { + position: 'absolute', + bottom: 30, + alignItems: 'center', + }, + footerText: { + fontSize: 14, + color: KurdistanColors.spi, + opacity: 0.8, + }, +}); + +export default VerifyHumanScreen; + +// Export helper to check verification status +export const checkHumanVerification = async (): Promise => { + try { + const verified = await AsyncStorage.getItem(HUMAN_VERIFIED_KEY); + return verified === 'true'; + } catch (error) { + console.error('Failed to check verification:', error); + return false; + } +};