basic app
This commit is contained in:
195
src/screens/Auth/LoginScreen.js
Normal file
195
src/screens/Auth/LoginScreen.js
Normal file
@@ -0,0 +1,195 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
SafeAreaView,
|
||||
KeyboardAvoidingView,
|
||||
ScrollView,
|
||||
Platform,
|
||||
Alert,
|
||||
Image,
|
||||
TouchableWithoutFeedback,
|
||||
Keyboard,
|
||||
} from 'react-native';
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
import Button from '../../components/Button';
|
||||
import Input from '../../components/Input';
|
||||
import Logo from '../../components/Logo';
|
||||
import { COLORS } from '../../constants/colors';
|
||||
|
||||
const LoginScreen = ({ navigation }) => {
|
||||
const [phone, setPhone] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [errors, setErrors] = useState({});
|
||||
const { login, isLoading } = useAuth();
|
||||
|
||||
const validateForm = () => {
|
||||
const newErrors = {};
|
||||
|
||||
if (!phone.trim()) {
|
||||
newErrors.phone = 'Telefon belgisi gerek';
|
||||
} else if (!/^\d{8}$/.test(phone.trim())) {
|
||||
newErrors.phone = 'Telefon belgisi 8 sanly bolmaly (mysal: 61909090)';
|
||||
}
|
||||
|
||||
if (!password.trim()) {
|
||||
newErrors.password = 'Parol gerek';
|
||||
} else if (password.length < 6) {
|
||||
newErrors.password = 'Parol azyndan 6 harp bolmaly';
|
||||
}
|
||||
|
||||
if (!/^6[1-9]\d{6}$|^7[0-1]\d{6}$/.test(phone.trim())) {
|
||||
newErrors.phone = 'Telefon belgisi 61000000-71999999 aralygynda bolmaly';
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleLogin = async () => {
|
||||
if (!validateForm()) return;
|
||||
|
||||
const result = await login(phone.trim(), password);
|
||||
|
||||
if (result.success) {
|
||||
// Navigation will be handled by AuthContext
|
||||
} else {
|
||||
Alert.alert('Ýalňyşlyk', result.error);
|
||||
}
|
||||
};
|
||||
|
||||
const navigateToRegister = () => {
|
||||
navigation.navigate('Register');
|
||||
};
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<StatusBar style="dark" />
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||
style={styles.keyboardAvoid}
|
||||
>
|
||||
<ScrollView
|
||||
contentContainerStyle={styles.scrollContent}
|
||||
showsVerticalScrollIndicator={false}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
>
|
||||
<View style={styles.logoContainer}>
|
||||
<Logo width={100} height={100} />
|
||||
<Text style={styles.appName}>TBBANK ONLINE</Text>
|
||||
<Text style={styles.welcomeText}>Hoş geldiňiz</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.formContainer}>
|
||||
<Text style={styles.formTitle}>Giriş</Text>
|
||||
<Text style={styles.formSubtitle}>
|
||||
Hasabyňyza girmek üçin maglumatyňyzy giriziň
|
||||
</Text>
|
||||
|
||||
<Input
|
||||
label="Telefon belgi"
|
||||
value={phone}
|
||||
onChangeText={setPhone}
|
||||
placeholder="61909090"
|
||||
keyboardType="numeric"
|
||||
leftIcon="call"
|
||||
error={errors.phone}
|
||||
maxLength={8}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Parol"
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
placeholder="Parolyňyzy giriziň"
|
||||
secureTextEntry
|
||||
leftIcon="lock-closed"
|
||||
error={errors.password}
|
||||
/>
|
||||
|
||||
<Button
|
||||
title="Gir"
|
||||
onPress={handleLogin}
|
||||
loading={isLoading}
|
||||
style={styles.loginButton}
|
||||
/>
|
||||
|
||||
<View style={styles.registerContainer}>
|
||||
<Text style={styles.registerText}>Hasabyňyz ýokmy? </Text>
|
||||
<Button
|
||||
title="Agza bol"
|
||||
onPress={navigateToRegister}
|
||||
variant="outline"
|
||||
style={styles.registerButton}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: COLORS.background,
|
||||
},
|
||||
keyboardAvoid: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
flexGrow: 1,
|
||||
paddingHorizontal: 24,
|
||||
},
|
||||
logoContainer: {
|
||||
alignItems: 'center',
|
||||
paddingTop: 60,
|
||||
paddingBottom: 40,
|
||||
},
|
||||
|
||||
appName: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
color: COLORS.textPrimary,
|
||||
marginBottom: 8,
|
||||
},
|
||||
welcomeText: {
|
||||
fontSize: 16,
|
||||
color: COLORS.textSecondary,
|
||||
},
|
||||
formContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
formTitle: {
|
||||
fontSize: 28,
|
||||
fontWeight: 'bold',
|
||||
color: COLORS.textPrimary,
|
||||
marginBottom: 8,
|
||||
},
|
||||
formSubtitle: {
|
||||
fontSize: 16,
|
||||
color: COLORS.textSecondary,
|
||||
marginBottom: 32,
|
||||
lineHeight: 22,
|
||||
},
|
||||
loginButton: {
|
||||
marginTop: 8,
|
||||
marginBottom: 32,
|
||||
},
|
||||
registerContainer: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
registerText: {
|
||||
fontSize: 16,
|
||||
color: COLORS.textSecondary,
|
||||
marginBottom: 16,
|
||||
},
|
||||
registerButton: {
|
||||
width: '100%',
|
||||
},
|
||||
});
|
||||
|
||||
export default LoginScreen;
|
||||
230
src/screens/Auth/RegisterScreen.js
Normal file
230
src/screens/Auth/RegisterScreen.js
Normal file
@@ -0,0 +1,230 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
SafeAreaView,
|
||||
KeyboardAvoidingView,
|
||||
ScrollView,
|
||||
Platform,
|
||||
Alert,
|
||||
} from 'react-native';
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
import Button from '../../components/Button';
|
||||
import Input from '../../components/Input';
|
||||
import Logo from '../../components/Logo';
|
||||
import { COLORS } from '../../constants/colors';
|
||||
|
||||
const RegisterScreen = ({ navigation }) => {
|
||||
const [formData, setFormData] = useState({
|
||||
phone: '',
|
||||
name: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
});
|
||||
const [errors, setErrors] = useState({});
|
||||
const { register, isLoading } = useAuth();
|
||||
|
||||
const updateField = (field, value) => {
|
||||
setFormData(prev => ({ ...prev, [field]: value }));
|
||||
// Clear error when user starts typing
|
||||
if (errors[field]) {
|
||||
setErrors(prev => ({ ...prev, [field]: '' }));
|
||||
}
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
const newErrors = {};
|
||||
|
||||
if (!formData.phone.trim()) {
|
||||
newErrors.phone = 'Telefon belgisi gerek';
|
||||
} else if (!/^\d{8}$/.test(formData.phone.trim())) {
|
||||
newErrors.phone = 'Telefon belgisi 8 sanly bolmaly (mysal: 61909090)';
|
||||
}
|
||||
|
||||
if (!formData.name.trim()) {
|
||||
newErrors.name = 'Ady gerek';
|
||||
} else if (formData.name.trim().length < 2) {
|
||||
newErrors.name = 'Ady azyndan 2 harp bolmaly';
|
||||
}
|
||||
|
||||
if (!formData.password.trim()) {
|
||||
newErrors.password = 'Parol gerek';
|
||||
} else if (formData.password.length < 6) {
|
||||
newErrors.password = 'Parol azyndan 6 harp bolmaly';
|
||||
}
|
||||
|
||||
if (!formData.confirmPassword.trim()) {
|
||||
newErrors.confirmPassword = 'Paroly tassyklaň';
|
||||
} else if (formData.password !== formData.confirmPassword) {
|
||||
newErrors.confirmPassword = 'Parollar deň däl';
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleRegister = async () => {
|
||||
if (!validateForm()) return;
|
||||
|
||||
const result = await register(
|
||||
formData.phone.trim(),
|
||||
formData.name.trim(),
|
||||
formData.password
|
||||
);
|
||||
|
||||
if (result.success) {
|
||||
// Navigation will be handled by AuthContext
|
||||
} else {
|
||||
Alert.alert('Ýalňyşlyk', result.error);
|
||||
}
|
||||
};
|
||||
|
||||
const navigateToLogin = () => {
|
||||
navigation.navigate('Login');
|
||||
};
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<StatusBar style="dark" />
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||
style={styles.keyboardAvoid}
|
||||
>
|
||||
<ScrollView
|
||||
contentContainerStyle={styles.scrollContent}
|
||||
showsVerticalScrollIndicator={false}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
>
|
||||
<View style={styles.logoContainer}>
|
||||
<Logo width={100} height={100} />
|
||||
<Text style={styles.appName}>TBBANK ONLINE</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.formContainer}>
|
||||
<Text style={styles.formTitle}>Agza bol</Text>
|
||||
<Text style={styles.formSubtitle}>
|
||||
Täze hasap döretmek üçin maglumatyňyzy giriziň
|
||||
</Text>
|
||||
|
||||
<Input
|
||||
label="Telefon belgi"
|
||||
value={formData.phone}
|
||||
onChangeText={(value) => updateField('phone', value)}
|
||||
placeholder="61909090"
|
||||
keyboardType="numeric"
|
||||
leftIcon="call"
|
||||
error={errors.phone}
|
||||
maxLength={8}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Ady"
|
||||
value={formData.name}
|
||||
onChangeText={(value) => updateField('name', value)}
|
||||
placeholder="Doly adyňyzy giriziň"
|
||||
leftIcon="person"
|
||||
error={errors.name}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Parol"
|
||||
value={formData.password}
|
||||
onChangeText={(value) => updateField('password', value)}
|
||||
placeholder="Parolyňyzy giriziň"
|
||||
secureTextEntry
|
||||
leftIcon="lock-closed"
|
||||
error={errors.password}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Paroly tassyklaň"
|
||||
value={formData.confirmPassword}
|
||||
onChangeText={(value) => updateField('confirmPassword', value)}
|
||||
placeholder="Paroly gaýtadan giriziň"
|
||||
secureTextEntry
|
||||
leftIcon="lock-closed"
|
||||
error={errors.confirmPassword}
|
||||
/>
|
||||
|
||||
<Button
|
||||
title="Agza bol"
|
||||
onPress={handleRegister}
|
||||
loading={isLoading}
|
||||
style={styles.registerButton}
|
||||
/>
|
||||
|
||||
<View style={styles.loginContainer}>
|
||||
<Text style={styles.loginText}>Eýýäm hasabyňyz barmy? </Text>
|
||||
<Button
|
||||
title="Gir"
|
||||
onPress={navigateToLogin}
|
||||
variant="outline"
|
||||
style={styles.loginButton}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: COLORS.background,
|
||||
},
|
||||
keyboardAvoid: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
flexGrow: 1,
|
||||
paddingHorizontal: 24,
|
||||
},
|
||||
logoContainer: {
|
||||
alignItems: 'center',
|
||||
paddingTop: 60,
|
||||
paddingBottom: 40,
|
||||
},
|
||||
|
||||
appName: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
color: COLORS.textPrimary,
|
||||
marginBottom: 8,
|
||||
},
|
||||
formContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
formTitle: {
|
||||
fontSize: 28,
|
||||
fontWeight: 'bold',
|
||||
color: COLORS.textPrimary,
|
||||
marginBottom: 8,
|
||||
},
|
||||
formSubtitle: {
|
||||
fontSize: 16,
|
||||
color: COLORS.textSecondary,
|
||||
marginBottom: 32,
|
||||
lineHeight: 22,
|
||||
},
|
||||
registerButton: {
|
||||
marginTop: 8,
|
||||
marginBottom: 32,
|
||||
},
|
||||
loginContainer: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
loginText: {
|
||||
fontSize: 16,
|
||||
color: COLORS.textSecondary,
|
||||
marginBottom: 16,
|
||||
},
|
||||
loginButton: {
|
||||
width: '100%',
|
||||
},
|
||||
});
|
||||
|
||||
export default RegisterScreen;
|
||||
246
src/screens/Auth/VerificationScreen.js
Normal file
246
src/screens/Auth/VerificationScreen.js
Normal file
@@ -0,0 +1,246 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
SafeAreaView,
|
||||
Alert,
|
||||
TouchableOpacity,
|
||||
} from 'react-native';
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
import Button from '../../components/Button';
|
||||
import Input from '../../components/Input';
|
||||
import { COLORS } from '../../constants/colors';
|
||||
|
||||
const VerificationScreen = ({ navigation }) => {
|
||||
const [code, setCode] = useState('');
|
||||
const [countdown, setCountdown] = useState(60);
|
||||
const [canResend, setCanResend] = useState(false);
|
||||
const { verify, isLoading, pendingVerification, clearPendingVerification } = useAuth();
|
||||
const countdownRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!pendingVerification) {
|
||||
// If no pending verification, go back to login
|
||||
navigation.replace('Login');
|
||||
return;
|
||||
}
|
||||
|
||||
startCountdown();
|
||||
return () => {
|
||||
if (countdownRef.current) {
|
||||
clearInterval(countdownRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const startCountdown = () => {
|
||||
setCountdown(60);
|
||||
setCanResend(false);
|
||||
|
||||
countdownRef.current = setInterval(() => {
|
||||
setCountdown((prev) => {
|
||||
if (prev <= 1) {
|
||||
setCanResend(true);
|
||||
if (countdownRef.current) {
|
||||
clearInterval(countdownRef.current);
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
return prev - 1;
|
||||
});
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const handleVerify = async () => {
|
||||
if (!code.trim()) {
|
||||
Alert.alert('Ýalňyşlyk', 'Tassyklama koduny giriziň');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!/^\d{6}$/.test(code.trim())) {
|
||||
Alert.alert('Ýalňyşlyk', 'Tassyklama kody 6 sanly bolmaly');
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await verify(code.trim());
|
||||
|
||||
if (result.success) {
|
||||
// Navigation will be handled by AuthContext
|
||||
} else {
|
||||
Alert.alert('Ýalňyşlyk', result.error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleResendCode = () => {
|
||||
if (!canResend) return;
|
||||
|
||||
// Here you would call the API to resend the code
|
||||
// For now, just restart the countdown
|
||||
Alert.alert('Üstünlik', 'Täze tassyklama kody iberildi');
|
||||
startCountdown();
|
||||
};
|
||||
|
||||
const handleGoBack = () => {
|
||||
clearPendingVerification();
|
||||
navigation.goBack();
|
||||
};
|
||||
|
||||
const formatPhoneNumber = (phone) => {
|
||||
if (!phone) return '';
|
||||
const phoneStr = phone.toString();
|
||||
return `+993 ${phoneStr.slice(0, 2)} ${phoneStr.slice(2, 5)} ${phoneStr.slice(5)}`;
|
||||
};
|
||||
|
||||
if (!pendingVerification) {
|
||||
return null; // Will navigate away in useEffect
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<StatusBar style="dark" />
|
||||
|
||||
<View style={styles.header}>
|
||||
<TouchableOpacity onPress={handleGoBack} style={styles.backButton}>
|
||||
<Text style={styles.backButtonText}>← Yza</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={styles.content}>
|
||||
<View style={styles.logoContainer}>
|
||||
<View style={styles.verificationIcon}>
|
||||
<Text style={styles.verificationIconText}>✓</Text>
|
||||
</View>
|
||||
<Text style={styles.title}>Tassyklama</Text>
|
||||
<Text style={styles.subtitle}>
|
||||
{formatPhoneNumber(pendingVerification.phone)} belgisine iberilen
|
||||
6 sanly tassyklama koduny giriziň
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.formContainer}>
|
||||
<Input
|
||||
label="Tassyklama kody"
|
||||
value={code}
|
||||
onChangeText={setCode}
|
||||
placeholder="123456"
|
||||
keyboardType="numeric"
|
||||
maxLength={6}
|
||||
style={styles.codeInput}
|
||||
textAlign="center"
|
||||
/>
|
||||
|
||||
<Button
|
||||
title="Tassykla"
|
||||
onPress={handleVerify}
|
||||
loading={isLoading}
|
||||
style={styles.verifyButton}
|
||||
/>
|
||||
|
||||
<View style={styles.resendContainer}>
|
||||
{canResend ? (
|
||||
<TouchableOpacity onPress={handleResendCode}>
|
||||
<Text style={styles.resendText}>Kodu gaýtadan iber</Text>
|
||||
</TouchableOpacity>
|
||||
) : (
|
||||
<Text style={styles.countdownText}>
|
||||
Gaýtadan ibermek üçin {countdown} sekunt garaşyň
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: COLORS.background,
|
||||
},
|
||||
header: {
|
||||
paddingHorizontal: 24,
|
||||
paddingTop: 16,
|
||||
},
|
||||
backButton: {
|
||||
alignSelf: 'flex-start',
|
||||
},
|
||||
backButtonText: {
|
||||
fontSize: 16,
|
||||
color: COLORS.primary,
|
||||
fontWeight: '600',
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
paddingHorizontal: 24,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
logoContainer: {
|
||||
alignItems: 'center',
|
||||
marginBottom: 48,
|
||||
},
|
||||
verificationIcon: {
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 40,
|
||||
backgroundColor: COLORS.success,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 24,
|
||||
shadowColor: COLORS.success,
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 4,
|
||||
},
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 8,
|
||||
elevation: 8,
|
||||
},
|
||||
verificationIconText: {
|
||||
fontSize: 32,
|
||||
color: COLORS.white,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
title: {
|
||||
fontSize: 28,
|
||||
fontWeight: 'bold',
|
||||
color: COLORS.textPrimary,
|
||||
marginBottom: 16,
|
||||
textAlign: 'center',
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 16,
|
||||
color: COLORS.textSecondary,
|
||||
textAlign: 'center',
|
||||
lineHeight: 22,
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
formContainer: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
codeInput: {
|
||||
width: '100%',
|
||||
marginBottom: 32,
|
||||
},
|
||||
verifyButton: {
|
||||
width: '100%',
|
||||
marginBottom: 32,
|
||||
},
|
||||
resendContainer: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
resendText: {
|
||||
fontSize: 16,
|
||||
color: COLORS.primary,
|
||||
fontWeight: '600',
|
||||
},
|
||||
countdownText: {
|
||||
fontSize: 14,
|
||||
color: COLORS.textSecondary,
|
||||
textAlign: 'center',
|
||||
},
|
||||
});
|
||||
|
||||
export default VerificationScreen;
|
||||
Reference in New Issue
Block a user