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;
|
||||
300
src/screens/Main/HomeScreen.js
Normal file
300
src/screens/Main/HomeScreen.js
Normal file
@@ -0,0 +1,300 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
SafeAreaView,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
} from 'react-native';
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
import { COLORS } from '../../constants/colors';
|
||||
|
||||
const HomeScreen = () => {
|
||||
const { user, logout } = useAuth();
|
||||
|
||||
const quickActions = [
|
||||
{ id: 1, title: 'Pul ugrat', icon: 'send', color: COLORS.primary },
|
||||
{ id: 2, title: 'Pul al', icon: 'download', color: COLORS.info },
|
||||
{ id: 3, title: 'Töleg et', icon: 'card', color: COLORS.warning },
|
||||
{ id: 4, title: 'Hasabat', icon: 'document-text', color: COLORS.success },
|
||||
];
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<StatusBar style="dark" />
|
||||
|
||||
<ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<View>
|
||||
<Text style={styles.greeting}>Salam,</Text>
|
||||
<Text style={styles.userName}>{user?.name || 'Ulanyjy'}</Text>
|
||||
</View>
|
||||
<TouchableOpacity style={styles.profileButton} onPress={logout}>
|
||||
<Ionicons name="person-circle" size={40} color={COLORS.primary} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Balance Card */}
|
||||
<View style={styles.balanceCard}>
|
||||
<View style={styles.balanceHeader}>
|
||||
<Text style={styles.balanceLabel}>Jemi balans</Text>
|
||||
<TouchableOpacity>
|
||||
<Ionicons name="eye" size={20} color={COLORS.white} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<Text style={styles.balanceAmount}>1,250.00 TMT</Text>
|
||||
<View style={styles.balanceFooter}>
|
||||
<Text style={styles.accountNumber}>Hasap: ****1234</Text>
|
||||
<View style={styles.cardChip} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Çalt hereketler</Text>
|
||||
<View style={styles.quickActionsGrid}>
|
||||
{quickActions.map((action) => (
|
||||
<TouchableOpacity key={action.id} style={styles.quickActionItem}>
|
||||
<View style={[styles.quickActionIcon, { backgroundColor: action.color }]}>
|
||||
<Ionicons name={action.icon} size={24} color={COLORS.white} />
|
||||
</View>
|
||||
<Text style={styles.quickActionText}>{action.title}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Recent Transactions */}
|
||||
<View style={styles.section}>
|
||||
<View style={styles.sectionHeader}>
|
||||
<Text style={styles.sectionTitle}>Soňky geleşikler</Text>
|
||||
<TouchableOpacity>
|
||||
<Text style={styles.seeAllText}>Hemmesini gör</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={styles.transactionsList}>
|
||||
{[1, 2, 3].map((transaction) => (
|
||||
<View key={transaction} style={styles.transactionItem}>
|
||||
<View style={styles.transactionIcon}>
|
||||
<Ionicons name="arrow-down" size={20} color={COLORS.success} />
|
||||
</View>
|
||||
<View style={styles.transactionDetails}>
|
||||
<Text style={styles.transactionTitle}>Girizen pul</Text>
|
||||
<Text style={styles.transactionDate}>Şu gün, 14:30</Text>
|
||||
</View>
|
||||
<Text style={styles.transactionAmount}>+500.00 TMT</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Services */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Hyzmatlar</Text>
|
||||
<View style={styles.servicesGrid}>
|
||||
<TouchableOpacity style={styles.serviceItem}>
|
||||
<Ionicons name="phone-portrait" size={24} color={COLORS.primary} />
|
||||
<Text style={styles.serviceText}>Telefon töleg</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.serviceItem}>
|
||||
<Ionicons name="flash" size={24} color={COLORS.warning} />
|
||||
<Text style={styles.serviceText}>Elektrik töleg</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.serviceItem}>
|
||||
<Ionicons name="water" size={24} color={COLORS.info} />
|
||||
<Text style={styles.serviceText}>Suw töleg</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.serviceItem}>
|
||||
<Ionicons name="wifi" size={24} color={COLORS.success} />
|
||||
<Text style={styles.serviceText}>Internet töleg</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: COLORS.backgroundSecondary,
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 24,
|
||||
paddingTop: 16,
|
||||
paddingBottom: 24,
|
||||
backgroundColor: COLORS.white,
|
||||
},
|
||||
greeting: {
|
||||
fontSize: 16,
|
||||
color: COLORS.textSecondary,
|
||||
},
|
||||
userName: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
color: COLORS.textPrimary,
|
||||
},
|
||||
profileButton: {
|
||||
padding: 4,
|
||||
},
|
||||
balanceCard: {
|
||||
backgroundColor: COLORS.primary,
|
||||
marginHorizontal: 24,
|
||||
marginBottom: 24,
|
||||
borderRadius: 16,
|
||||
padding: 24,
|
||||
shadowColor: COLORS.primary,
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 4,
|
||||
},
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 8,
|
||||
elevation: 8,
|
||||
},
|
||||
balanceHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 8,
|
||||
},
|
||||
balanceLabel: {
|
||||
fontSize: 14,
|
||||
color: COLORS.white,
|
||||
opacity: 0.8,
|
||||
},
|
||||
balanceAmount: {
|
||||
fontSize: 32,
|
||||
fontWeight: 'bold',
|
||||
color: COLORS.white,
|
||||
marginBottom: 24,
|
||||
},
|
||||
balanceFooter: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
accountNumber: {
|
||||
fontSize: 14,
|
||||
color: COLORS.white,
|
||||
opacity: 0.8,
|
||||
},
|
||||
cardChip: {
|
||||
width: 32,
|
||||
height: 24,
|
||||
backgroundColor: COLORS.white,
|
||||
borderRadius: 4,
|
||||
opacity: 0.8,
|
||||
},
|
||||
section: {
|
||||
backgroundColor: COLORS.white,
|
||||
marginHorizontal: 24,
|
||||
marginBottom: 16,
|
||||
borderRadius: 12,
|
||||
padding: 20,
|
||||
},
|
||||
sectionHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 16,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
color: COLORS.textPrimary,
|
||||
marginBottom: 16,
|
||||
},
|
||||
seeAllText: {
|
||||
fontSize: 14,
|
||||
color: COLORS.primary,
|
||||
fontWeight: '600',
|
||||
},
|
||||
quickActionsGrid: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
quickActionItem: {
|
||||
alignItems: 'center',
|
||||
flex: 1,
|
||||
},
|
||||
quickActionIcon: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 24,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 8,
|
||||
},
|
||||
quickActionText: {
|
||||
fontSize: 12,
|
||||
color: COLORS.textSecondary,
|
||||
textAlign: 'center',
|
||||
},
|
||||
transactionsList: {
|
||||
gap: 16,
|
||||
},
|
||||
transactionItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
transactionIcon: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
backgroundColor: COLORS.backgroundSecondary,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 12,
|
||||
},
|
||||
transactionDetails: {
|
||||
flex: 1,
|
||||
},
|
||||
transactionTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: COLORS.textPrimary,
|
||||
},
|
||||
transactionDate: {
|
||||
fontSize: 14,
|
||||
color: COLORS.textSecondary,
|
||||
},
|
||||
transactionAmount: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
color: COLORS.success,
|
||||
},
|
||||
servicesGrid: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
serviceItem: {
|
||||
width: '48%',
|
||||
padding: 16,
|
||||
backgroundColor: COLORS.backgroundSecondary,
|
||||
borderRadius: 12,
|
||||
alignItems: 'center',
|
||||
marginBottom: 12,
|
||||
},
|
||||
serviceText: {
|
||||
fontSize: 12,
|
||||
color: COLORS.textSecondary,
|
||||
textAlign: 'center',
|
||||
marginTop: 8,
|
||||
},
|
||||
});
|
||||
|
||||
export default HomeScreen;
|
||||
182
src/screens/Main/MenuScreen.js
Normal file
182
src/screens/Main/MenuScreen.js
Normal file
@@ -0,0 +1,182 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
SafeAreaView,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
} from 'react-native';
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { COLORS } from '../../constants/colors';
|
||||
|
||||
const MenuScreen = () => {
|
||||
const menuSections = [
|
||||
{
|
||||
title: 'Pul hereketleri',
|
||||
items: [
|
||||
{ id: 1, title: 'Pul ugrat', icon: 'send', description: 'Başga hasaplara pul ugrat' },
|
||||
{ id: 2, title: 'Pul al', icon: 'download', description: 'Pul al we hasabyňa geçir' },
|
||||
{ id: 3, title: 'Geleşikler taryhy', icon: 'time', description: 'Geçen geleşikleri gör' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Tölegler',
|
||||
items: [
|
||||
{ id: 4, title: 'Telefon töleg', icon: 'phone-portrait', description: 'Mobil telefon töleg' },
|
||||
{ id: 5, title: 'Elektrik töleg', icon: 'flash', description: 'Elektrik töleg et' },
|
||||
{ id: 6, title: 'Suw töleg', icon: 'water', description: 'Suw töleg et' },
|
||||
{ id: 7, title: 'Internet töleg', icon: 'wifi', description: 'Internet töleg et' },
|
||||
{ id: 8, title: 'Gaz töleg', icon: 'flame', description: 'Gaz töleg et' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Kartlar',
|
||||
items: [
|
||||
{ id: 9, title: 'Meniň kartlarym', icon: 'card', description: 'Kartlaryňyzy dolandyr' },
|
||||
{ id: 10, title: 'Täze kart sargyt', icon: 'add-circle', description: 'Täze kart sargyt ediň' },
|
||||
{ id: 11, title: 'Kart bloklat', icon: 'lock-closed', description: 'Karty blokla' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Karzlar',
|
||||
items: [
|
||||
{ id: 12, title: 'Meniň karzlarym', icon: 'document-text', description: 'Karzlaryňyzy gör' },
|
||||
{ id: 13, title: 'Täze karz sargyt', icon: 'trending-up', description: 'Täze karz al' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const handleMenuItemPress = (item) => {
|
||||
console.log('Menu item pressed:', item.title);
|
||||
// Handle navigation or action here
|
||||
};
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<StatusBar style="dark" />
|
||||
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.headerTitle}>Hyzmatlar</Text>
|
||||
</View>
|
||||
|
||||
<ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
|
||||
{menuSections.map((section, sectionIndex) => (
|
||||
<View key={sectionIndex} style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>{section.title}</Text>
|
||||
<View style={styles.sectionContent}>
|
||||
{section.items.map((item, itemIndex) => (
|
||||
<TouchableOpacity
|
||||
key={item.id}
|
||||
style={[
|
||||
styles.menuItem,
|
||||
itemIndex === section.items.length - 1 && styles.lastMenuItem,
|
||||
]}
|
||||
onPress={() => handleMenuItemPress(item)}
|
||||
>
|
||||
<View style={styles.menuItemLeft}>
|
||||
<View style={styles.menuItemIcon}>
|
||||
<Ionicons name={item.icon} size={24} color={COLORS.primary} />
|
||||
</View>
|
||||
<View style={styles.menuItemTextContainer}>
|
||||
<Text style={styles.menuItemTitle}>{item.title}</Text>
|
||||
<Text style={styles.menuItemDescription}>{item.description}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Ionicons name="chevron-forward" size={20} color={COLORS.gray[400]} />
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
|
||||
<View style={styles.bottomSpacing} />
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: COLORS.backgroundSecondary,
|
||||
},
|
||||
header: {
|
||||
backgroundColor: COLORS.white,
|
||||
paddingHorizontal: 24,
|
||||
paddingTop: 16,
|
||||
paddingBottom: 24,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: COLORS.gray[200],
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 28,
|
||||
fontWeight: 'bold',
|
||||
color: COLORS.textPrimary,
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
section: {
|
||||
marginTop: 24,
|
||||
marginHorizontal: 24,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
color: COLORS.textPrimary,
|
||||
marginBottom: 12,
|
||||
paddingHorizontal: 4,
|
||||
},
|
||||
sectionContent: {
|
||||
backgroundColor: COLORS.white,
|
||||
borderRadius: 12,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
menuItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 16,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: COLORS.gray[200],
|
||||
},
|
||||
lastMenuItem: {
|
||||
borderBottomWidth: 0,
|
||||
},
|
||||
menuItemLeft: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
flex: 1,
|
||||
},
|
||||
menuItemIcon: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 24,
|
||||
backgroundColor: COLORS.backgroundSecondary,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 16,
|
||||
},
|
||||
menuItemTextContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
menuItemTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: COLORS.textPrimary,
|
||||
marginBottom: 4,
|
||||
},
|
||||
menuItemDescription: {
|
||||
fontSize: 14,
|
||||
color: COLORS.textSecondary,
|
||||
lineHeight: 18,
|
||||
},
|
||||
bottomSpacing: {
|
||||
height: 24,
|
||||
},
|
||||
});
|
||||
|
||||
export default MenuScreen;
|
||||
304
src/screens/Main/ProfileScreen.js
Normal file
304
src/screens/Main/ProfileScreen.js
Normal file
@@ -0,0 +1,304 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
SafeAreaView,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
Alert,
|
||||
} from 'react-native';
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
import { COLORS } from '../../constants/colors';
|
||||
|
||||
const ProfileScreen = () => {
|
||||
const { user, logout } = useAuth();
|
||||
|
||||
const profileSections = [
|
||||
{
|
||||
title: 'Hasap maglumatlary',
|
||||
items: [
|
||||
{ id: 1, title: 'Şahsy maglumatlar', icon: 'person', hasArrow: true },
|
||||
{ id: 2, title: 'Habarlaşmak maglumatlary', icon: 'mail', hasArrow: true },
|
||||
{ id: 3, title: 'Paroly üýtget', icon: 'lock-closed', hasArrow: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Sazlamalar',
|
||||
items: [
|
||||
{ id: 4, title: 'Bildirişler', icon: 'notifications', hasArrow: true },
|
||||
{ id: 5, title: 'Howpsuzlyk', icon: 'shield-checkmark', hasArrow: true },
|
||||
{ id: 6, title: 'Dil', icon: 'language', value: 'Türkmençe', hasArrow: true },
|
||||
{ id: 7, title: 'Tema', icon: 'color-palette', value: 'Ýeňil', hasArrow: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Kömek',
|
||||
items: [
|
||||
{ id: 8, title: 'Kömek merkezi', icon: 'help-circle', hasArrow: true },
|
||||
{ id: 9, title: 'Habarlaş', icon: 'chatbubble', hasArrow: true },
|
||||
{ id: 10, title: 'Baha ber', icon: 'star', hasArrow: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Goşmaça',
|
||||
items: [
|
||||
{ id: 11, title: 'Ulanmak düzgünleri', icon: 'document-text', hasArrow: true },
|
||||
{ id: 12, title: 'Gizlinlik syýasaty', icon: 'lock-open', hasArrow: true },
|
||||
{ id: 13, title: 'Programma barada', icon: 'information-circle', value: 'v1.0.0', hasArrow: true },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const handleProfileItemPress = (item) => {
|
||||
console.log('Profile item pressed:', item.title);
|
||||
// Handle navigation or action here
|
||||
};
|
||||
|
||||
const handleLogout = () => {
|
||||
Alert.alert(
|
||||
'Çykmak',
|
||||
'Hasabdan çykjak bolýarsyňyzmy?',
|
||||
[
|
||||
{
|
||||
text: 'Ýok',
|
||||
style: 'cancel',
|
||||
},
|
||||
{
|
||||
text: 'Hawa',
|
||||
style: 'destructive',
|
||||
onPress: logout,
|
||||
},
|
||||
]
|
||||
);
|
||||
};
|
||||
|
||||
const formatPhoneNumber = (phone) => {
|
||||
if (!phone) return '';
|
||||
const phoneStr = phone.toString();
|
||||
return `+993 ${phoneStr.slice(0, 2)} ${phoneStr.slice(2, 5)} ${phoneStr.slice(5)}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<StatusBar style="dark" />
|
||||
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.headerTitle}>Profil</Text>
|
||||
</View>
|
||||
|
||||
<ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
|
||||
{/* User Info Card */}
|
||||
<View style={styles.userCard}>
|
||||
<View style={styles.userAvatar}>
|
||||
<Text style={styles.userInitials}>
|
||||
{user?.name ? user.name.split(' ').map(n => n[0]).join('').toUpperCase() : 'U'}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.userInfo}>
|
||||
<Text style={styles.userName}>{user?.name || 'Ulanyjy'}</Text>
|
||||
<Text style={styles.userPhone}>{formatPhoneNumber(user?.phone)}</Text>
|
||||
</View>
|
||||
<TouchableOpacity style={styles.editButton}>
|
||||
<Ionicons name="pencil" size={20} color={COLORS.primary} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Profile Sections */}
|
||||
{profileSections.map((section, sectionIndex) => (
|
||||
<View key={sectionIndex} style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>{section.title}</Text>
|
||||
<View style={styles.sectionContent}>
|
||||
{section.items.map((item, itemIndex) => (
|
||||
<TouchableOpacity
|
||||
key={item.id}
|
||||
style={[
|
||||
styles.profileItem,
|
||||
itemIndex === section.items.length - 1 && styles.lastProfileItem,
|
||||
]}
|
||||
onPress={() => handleProfileItemPress(item)}
|
||||
>
|
||||
<View style={styles.profileItemLeft}>
|
||||
<View style={styles.profileItemIcon}>
|
||||
<Ionicons name={item.icon} size={20} color={COLORS.primary} />
|
||||
</View>
|
||||
<Text style={styles.profileItemTitle}>{item.title}</Text>
|
||||
</View>
|
||||
<View style={styles.profileItemRight}>
|
||||
{item.value && (
|
||||
<Text style={styles.profileItemValue}>{item.value}</Text>
|
||||
)}
|
||||
{item.hasArrow && (
|
||||
<Ionicons name="chevron-forward" size={16} color={COLORS.gray[400]} />
|
||||
)}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
|
||||
{/* Logout Button */}
|
||||
<View style={styles.logoutSection}>
|
||||
<TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
|
||||
<Ionicons name="log-out" size={20} color={COLORS.error} />
|
||||
<Text style={styles.logoutText}>Hasabdan çyk</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={styles.bottomSpacing} />
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: COLORS.backgroundSecondary,
|
||||
},
|
||||
header: {
|
||||
backgroundColor: COLORS.white,
|
||||
paddingHorizontal: 24,
|
||||
paddingTop: 16,
|
||||
paddingBottom: 24,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: COLORS.gray[200],
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 28,
|
||||
fontWeight: 'bold',
|
||||
color: COLORS.textPrimary,
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
userCard: {
|
||||
backgroundColor: COLORS.white,
|
||||
marginHorizontal: 24,
|
||||
marginTop: 24,
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
shadowColor: COLORS.black,
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 2,
|
||||
},
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 4,
|
||||
},
|
||||
userAvatar: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderRadius: 30,
|
||||
backgroundColor: COLORS.primary,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 16,
|
||||
},
|
||||
userInitials: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
color: COLORS.white,
|
||||
},
|
||||
userInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
userName: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
color: COLORS.textPrimary,
|
||||
marginBottom: 4,
|
||||
},
|
||||
userPhone: {
|
||||
fontSize: 16,
|
||||
color: COLORS.textSecondary,
|
||||
},
|
||||
editButton: {
|
||||
padding: 8,
|
||||
},
|
||||
section: {
|
||||
marginTop: 24,
|
||||
marginHorizontal: 24,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
color: COLORS.textPrimary,
|
||||
marginBottom: 12,
|
||||
paddingHorizontal: 4,
|
||||
},
|
||||
sectionContent: {
|
||||
backgroundColor: COLORS.white,
|
||||
borderRadius: 12,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
profileItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 16,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: COLORS.gray[200],
|
||||
},
|
||||
lastProfileItem: {
|
||||
borderBottomWidth: 0,
|
||||
},
|
||||
profileItemLeft: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
flex: 1,
|
||||
},
|
||||
profileItemIcon: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 16,
|
||||
backgroundColor: COLORS.backgroundSecondary,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 12,
|
||||
},
|
||||
profileItemTitle: {
|
||||
fontSize: 16,
|
||||
color: COLORS.textPrimary,
|
||||
flex: 1,
|
||||
},
|
||||
profileItemRight: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
profileItemValue: {
|
||||
fontSize: 14,
|
||||
color: COLORS.textSecondary,
|
||||
marginRight: 8,
|
||||
},
|
||||
logoutSection: {
|
||||
marginTop: 24,
|
||||
marginHorizontal: 24,
|
||||
},
|
||||
logoutButton: {
|
||||
backgroundColor: COLORS.white,
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
logoutText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: COLORS.error,
|
||||
marginLeft: 8,
|
||||
},
|
||||
bottomSpacing: {
|
||||
height: 24,
|
||||
},
|
||||
});
|
||||
|
||||
export default ProfileScreen;
|
||||
Reference in New Issue
Block a user