mirror of
https://github.com/pezkuwichain/pezkuwi-mobile-app.git
synced 2026-06-14 05:51:00 +00:00
auto-commit for 9bf4365e-add8-46af-a6f3-d11e252c6ade
This commit is contained in:
emergent-agent-e1
@@ -0,0 +1,209 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
SafeAreaView,
|
||||
TextInput,
|
||||
ScrollView,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
|
||||
export default function AuthScreen({ navigation }: any) {
|
||||
const [isSignIn, setIsSignIn] = useState(true);
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [firstName, setFirstName] = useState('');
|
||||
const [lastName, setLastName] = useState('');
|
||||
const [phone, setPhone] = useState('');
|
||||
const [referralCode, setReferralCode] = useState('');
|
||||
|
||||
const handleAuth = () => {
|
||||
// TODO: Backend integration
|
||||
navigation.navigate('Home');
|
||||
};
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||
style={styles.keyboardView}
|
||||
>
|
||||
<ScrollView showsVerticalScrollIndicator={false}>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.title}>{isSignIn ? 'Welcome Back' : 'Create Account'}</Text>
|
||||
<Text style={styles.subtitle}>
|
||||
{isSignIn ? 'Sign in to continue' : 'Join PezkuwiChain today'}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.form}>
|
||||
{!isSignIn && (
|
||||
<>
|
||||
<View style={styles.row}>
|
||||
<View style={[styles.inputGroup, { flex: 1, marginRight: 8 }]}>
|
||||
<Text style={styles.label}>First Name *</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="John"
|
||||
value={firstName}
|
||||
onChangeText={setFirstName}
|
||||
/>
|
||||
</View>
|
||||
<View style={[styles.inputGroup, { flex: 1, marginLeft: 8 }]}>
|
||||
<Text style={styles.label}>Last Name *</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Doe"
|
||||
value={lastName}
|
||||
onChangeText={setLastName}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Phone Number *</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="+1234567890"
|
||||
value={phone}
|
||||
onChangeText={setPhone}
|
||||
keyboardType="phone-pad"
|
||||
/>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Email *</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="your@email.com"
|
||||
value={email}
|
||||
onChangeText={setEmail}
|
||||
keyboardType="email-address"
|
||||
autoCapitalize="none"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Password *</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="••••••••"
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
secureTextEntry
|
||||
/>
|
||||
</View>
|
||||
|
||||
{!isSignIn && (
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Referral Code (Optional)</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Enter referral code"
|
||||
value={referralCode}
|
||||
onChangeText={setReferralCode}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<TouchableOpacity style={styles.authButton} onPress={handleAuth}>
|
||||
<Text style={styles.authButtonText}>
|
||||
{isSignIn ? 'Sign In' : 'Create Account'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.switchButton}
|
||||
onPress={() => setIsSignIn(!isSignIn)}
|
||||
>
|
||||
<Text style={styles.switchText}>
|
||||
{isSignIn ? "Don't have an account? " : 'Already have an account? '}
|
||||
<Text style={styles.switchTextBold}>{isSignIn ? 'Sign Up' : 'Sign In'}</Text>
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#F8F9FA',
|
||||
},
|
||||
keyboardView: {
|
||||
flex: 1,
|
||||
},
|
||||
header: {
|
||||
padding: 20,
|
||||
paddingTop: 40,
|
||||
backgroundColor: '#FFF',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#E5E7EB',
|
||||
},
|
||||
title: {
|
||||
fontSize: 28,
|
||||
fontWeight: '700',
|
||||
color: '#1F2937',
|
||||
marginBottom: 4,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 14,
|
||||
color: '#6B7280',
|
||||
},
|
||||
form: {
|
||||
padding: 20,
|
||||
},
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
},
|
||||
inputGroup: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
label: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#374151',
|
||||
marginBottom: 8,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: '#FFF',
|
||||
padding: 12,
|
||||
borderRadius: 8,
|
||||
fontSize: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: '#E5E7EB',
|
||||
},
|
||||
authButton: {
|
||||
backgroundColor: '#EE2A35',
|
||||
padding: 16,
|
||||
borderRadius: 12,
|
||||
alignItems: 'center',
|
||||
marginTop: 8,
|
||||
},
|
||||
authButtonText: {
|
||||
color: '#FFF',
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
},
|
||||
switchButton: {
|
||||
marginTop: 20,
|
||||
alignItems: 'center',
|
||||
},
|
||||
switchText: {
|
||||
fontSize: 14,
|
||||
color: '#6B7280',
|
||||
},
|
||||
switchTextBold: {
|
||||
color: '#EE2A35',
|
||||
fontWeight: '600',
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,133 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
SafeAreaView,
|
||||
TextInput,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
|
||||
const CAPTCHA_QUESTION = {
|
||||
question: 'What is 5 + 3?',
|
||||
answer: '8',
|
||||
};
|
||||
|
||||
export default function HumanVerificationScreen({ navigation }: any) {
|
||||
const [answer, setAnswer] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const handleVerify = () => {
|
||||
if (answer.trim() === CAPTCHA_QUESTION.answer) {
|
||||
navigation.navigate('Auth');
|
||||
} else {
|
||||
setError('Incorrect answer. Please try again.');
|
||||
setAnswer('');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<View style={styles.content}>
|
||||
<View style={styles.iconContainer}>
|
||||
<Ionicons name="shield-checkmark" size={80} color="#00A651" />
|
||||
</View>
|
||||
|
||||
<Text style={styles.title}>Human Verification</Text>
|
||||
<Text style={styles.subtitle}>Please answer this simple question to continue</Text>
|
||||
|
||||
<View style={styles.questionBox}>
|
||||
<Text style={styles.question}>{CAPTCHA_QUESTION.question}</Text>
|
||||
</View>
|
||||
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Your answer"
|
||||
value={answer}
|
||||
onChangeText={setAnswer}
|
||||
keyboardType="number-pad"
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
{error ? <Text style={styles.error}>{error}</Text> : null}
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.verifyButton}
|
||||
onPress={handleVerify}
|
||||
>
|
||||
<Text style={styles.verifyText}>Verify</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#F8F9FA',
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
padding: 20,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
iconContainer: {
|
||||
alignItems: 'center',
|
||||
marginBottom: 30,
|
||||
},
|
||||
title: {
|
||||
fontSize: 24,
|
||||
fontWeight: '700',
|
||||
color: '#1F2937',
|
||||
textAlign: 'center',
|
||||
marginBottom: 8,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 14,
|
||||
color: '#6B7280',
|
||||
textAlign: 'center',
|
||||
marginBottom: 40,
|
||||
},
|
||||
questionBox: {
|
||||
backgroundColor: '#FFF',
|
||||
padding: 24,
|
||||
borderRadius: 12,
|
||||
marginBottom: 20,
|
||||
alignItems: 'center',
|
||||
borderWidth: 2,
|
||||
borderColor: '#00A651',
|
||||
},
|
||||
question: {
|
||||
fontSize: 20,
|
||||
fontWeight: '600',
|
||||
color: '#1F2937',
|
||||
},
|
||||
input: {
|
||||
backgroundColor: '#FFF',
|
||||
padding: 16,
|
||||
borderRadius: 12,
|
||||
fontSize: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: '#E5E7EB',
|
||||
marginBottom: 12,
|
||||
},
|
||||
error: {
|
||||
color: '#EE2A35',
|
||||
fontSize: 14,
|
||||
marginBottom: 12,
|
||||
textAlign: 'center',
|
||||
},
|
||||
verifyButton: {
|
||||
backgroundColor: '#00A651',
|
||||
padding: 16,
|
||||
borderRadius: 12,
|
||||
alignItems: 'center',
|
||||
},
|
||||
verifyText: {
|
||||
color: '#FFF',
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user