nurmuhammet/tbbank-react-native-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

amazing design

Browse Source
This commit is contained in:
Nurmuhammet Allanov
2025-07-03 20:56:50 +05:00
parent 2a597df2d3
commit b56a96f0ff
5 changed files with 225 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Input.js
View File

@@ -1,9 +1,9 @@
import React, { useState } from 'react';
import React, { useState, forwardRef } from 'react';
import { View, TextInput, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { COLORS } from '../constants/colors';
const Input = ({
const Input = forwardRef(({
label,
value,
onChangeText,
@@ -17,7 +17,7 @@ const Input = ({
returnKeyType = 'done',
onSubmitEditing,
...props
}) => {
}, ref) => {
const [isPasswordVisible, setIsPasswordVisible] = useState(false);
const [isFocused, setIsFocused] = useState(false);
@@ -40,6 +40,7 @@ const Input = ({
</View>
)}
<TextInput
ref={ref}
style={[styles.input, leftIcon && styles.inputWithLeftIcon]}
value={value}
onChangeText={onChangeText}
@@ -70,7 +71,7 @@ const Input = ({
{error && <Text style={styles.errorText}>{error}</Text>}
</View>
);
};
});
const styles = StyleSheet.create({
container: {

3
src/navigation/AuthNavigator.js
View File

@@ -15,6 +15,7 @@ const AuthNavigator = () => {
<Stack.Navigator
screenOptions={{
headerShown: false,
gestureEnabled: true,
cardStyleInterpolator: ({ current, layouts }) => {
return {
cardStyle: {
@@ -30,7 +31,7 @@ const AuthNavigator = () => {
};
},
}}
initialRouteName={pendingVerification ? 'Verification' : 'Login'}
initialRouteName={pendingVerification?.phone ? 'Verification' : 'Login'}
>
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Register" component={RegisterScreen} />

103
src/screens/Auth/LoginScreen.js
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState, useRef } from 'react';
import {
View,
Text,
@@ -24,6 +24,7 @@ const LoginScreen = ({ navigation }) => {
const [password, setPassword] = useState('');
const [errors, setErrors] = useState({});
const { login, isLoading } = useAuth();
const passwordInputRef = useRef(null);
const validateForm = () => {
const newErrors = {};
@@ -76,56 +77,65 @@ const LoginScreen = ({ navigation }) => {
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>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.content}>
<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>
<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="Telefon belgi"
value={phone}
onChangeText={setPhone}
placeholder="61909090"
keyboardType="numeric"
leftIcon="call"
error={errors.phone}
maxLength={8}
returnKeyType="next"
onSubmitEditing={() => passwordInputRef.current?.focus()}
/>
<Input
label="Parol"
value={password}
onChangeText={setPassword}
placeholder="Parolyňyzy giriziň"
secureTextEntry
leftIcon="lock-closed"
error={errors.password}
/>
<Input
ref={passwordInputRef}
label="Parol"
value={password}
onChangeText={setPassword}
placeholder="Parolyňyzy giriziň"
secureTextEntry
leftIcon="lock-closed"
error={errors.password}
returnKeyType="done"
onSubmitEditing={handleLogin}
/>
<Button
title="Gir"
onPress={handleLogin}
loading={isLoading}
style={styles.loginButton}
/>
<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 style={styles.registerContainer}>
<Text style={styles.registerText}>Hasabyňyz ýokmy? </Text>
<Button
title="Agza bol"
onPress={navigateToRegister}
variant="outline"
style={styles.registerButton}
/>
</View>
</View>
</View>
</View>
</TouchableWithoutFeedback>
</ScrollView>
</KeyboardAvoidingView>
</SafeAreaView>
@@ -144,6 +154,9 @@ const styles = StyleSheet.create({
flexGrow: 1,
paddingHorizontal: 24,
},
content: {
flex: 1,
},
logoContainer: {
alignItems: 'center',
paddingTop: 60,

147
src/screens/Auth/RegisterScreen.js
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState, useRef } from 'react';
import {
View,
Text,
@@ -8,6 +8,8 @@ import {
ScrollView,
Platform,
Alert,
TouchableWithoutFeedback,
Keyboard,
} from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { useAuth } from '../../contexts/AuthContext';
@@ -25,6 +27,9 @@ const RegisterScreen = ({ navigation }) => {
});
const [errors, setErrors] = useState({});
const { register, isLoading } = useAuth();
const nameInputRef = useRef(null);
const passwordInputRef = useRef(null);
const confirmPasswordInputRef = useRef(null);
const updateField = (field, value) => {
setFormData(prev => ({ ...prev, [field]: value }));
@@ -82,7 +87,7 @@ const RegisterScreen = ({ navigation }) => {
};
const navigateToLogin = () => {
navigation.navigate('Login');
navigation.replace('Login');
};
return (
@@ -97,74 +102,89 @@ const RegisterScreen = ({ navigation }) => {
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="handled"
>
<View style={styles.logoContainer}>
<Logo width={100} height={100} />
<Text style={styles.appName}>TBBANK ONLINE</Text>
</View>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.content}>
<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>
<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="Telefon belgi"
value={formData.phone}
onChangeText={(value) => updateField('phone', value)}
placeholder="61909090"
keyboardType="numeric"
leftIcon="call"
error={errors.phone}
maxLength={8}
returnKeyType="next"
onSubmitEditing={() => nameInputRef.current?.focus()}
/>
<Input
label="Ady"
value={formData.name}
onChangeText={(value) => updateField('name', value)}
placeholder="Doly adyňyzy giriziň"
leftIcon="person"
error={errors.name}
/>
<Input
ref={nameInputRef}
label="Ady"
value={formData.name}
onChangeText={(value) => updateField('name', value)}
placeholder="Doly adyňyzy giriziň"
leftIcon="person"
error={errors.name}
returnKeyType="next"
onSubmitEditing={() => passwordInputRef.current?.focus()}
/>
<Input
label="Parol"
value={formData.password}
onChangeText={(value) => updateField('password', value)}
placeholder="Parolyňyzy giriziň"
secureTextEntry
leftIcon="lock-closed"
error={errors.password}
/>
<Input
ref={passwordInputRef}
label="Parol"
value={formData.password}
onChangeText={(value) => updateField('password', value)}
placeholder="Parolyňyzy giriziň"
secureTextEntry
leftIcon="lock-closed"
error={errors.password}
returnKeyType="next"
onSubmitEditing={() => confirmPasswordInputRef.current?.focus()}
/>
<Input
label="Paroly tassyklaň"
value={formData.confirmPassword}
onChangeText={(value) => updateField('confirmPassword', value)}
placeholder="Paroly gaýtadan giriziň"
secureTextEntry
leftIcon="lock-closed"
error={errors.confirmPassword}
/>
<Input
ref={confirmPasswordInputRef}
label="Paroly tassyklaň"
value={formData.confirmPassword}
onChangeText={(value) => updateField('confirmPassword', value)}
placeholder="Paroly gaýtadan giriziň"
secureTextEntry
leftIcon="lock-closed"
error={errors.confirmPassword}
returnKeyType="done"
onSubmitEditing={handleRegister}
/>
<Button
title="Agza bol"
onPress={handleRegister}
loading={isLoading}
style={styles.registerButton}
/>
<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 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>
</View>
</View>
</TouchableWithoutFeedback>
</ScrollView>
</KeyboardAvoidingView>
</SafeAreaView>
@@ -183,6 +203,9 @@ const styles = StyleSheet.create({
flexGrow: 1,
paddingHorizontal: 24,
},
content: {
flex: 1,
},
logoContainer: {
alignItems: 'center',
paddingTop: 60,

117
src/screens/Auth/VerificationScreen.js
View File

@@ -6,8 +6,13 @@ import {
SafeAreaView,
Alert,
TouchableOpacity,
TouchableWithoutFeedback,
Keyboard,
BackHandler,
Platform,
} from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { useFocusEffect } from '@react-navigation/native';
import { useAuth } from '../../contexts/AuthContext';
import Button from '../../components/Button';
import Input from '../../components/Input';
@@ -35,6 +40,21 @@ const VerificationScreen = ({ navigation }) => {
};
}, []);
// Handle Android hardware back button
useFocusEffect(
React.useCallback(() => {
const onBackPress = () => {
handleGoBack();
return true; // Prevent default behavior
};
if (Platform.OS === 'android') {
BackHandler.addEventListener('hardwareBackPress', onBackPress);
return () => BackHandler.removeEventListener('hardwareBackPress', onBackPress);
}
}, [handleGoBack])
);
const startCountdown = () => {
setCountdown(60);
setCanResend(false);
@@ -73,7 +93,7 @@ const VerificationScreen = ({ navigation }) => {
}
};
const handleResendCode = () => {
const handleResendCode = async () => {
if (!canResend) return;
// Here you would call the API to resend the code
@@ -82,15 +102,22 @@ const VerificationScreen = ({ navigation }) => {
startCountdown();
};
const handleGoBack = () => {
const handleGoBack = React.useCallback(() => {
clearPendingVerification();
navigation.goBack();
};
// Check if we can go back, if not navigate to Login
if (navigation.canGoBack()) {
navigation.goBack();
} else {
navigation.navigate('Login');
}
}, [clearPendingVerification, navigation]);
const formatPhoneNumber = (phone) => {
if (!phone) return '';
const phoneStr = phone.toString();
return `+993 ${phoneStr.slice(0, 2)} ${phoneStr.slice(2, 5)} ${phoneStr.slice(5)}`;
return `+993 ${phoneStr.slice(0, 2)} ${phoneStr.slice(2, 4)}-${phoneStr.slice(4, 6)}-${phoneStr.slice(6)}`;
};
if (!pendingVerification) {
@@ -107,50 +134,54 @@ const VerificationScreen = ({ navigation }) => {
</TouchableOpacity>
</View>
<View style={styles.content}>
<View style={styles.logoContainer}>
<View style={styles.verificationIcon}>
<Text style={styles.verificationIconText}>✓</Text>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<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>
<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"
/>
<View style={styles.formContainer}>
<Input
label="Tassyklama kody"
value={code}
onChangeText={setCode}
placeholder="123456"
keyboardType="numeric"
maxLength={6}
style={styles.codeInput}
textAlign="center"
returnKeyType="done"
onSubmitEditing={handleVerify}
/>
<Button
title="Tassykla"
onPress={handleVerify}
loading={isLoading}
style={styles.verifyButton}
/>
<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 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>
</View>
</TouchableWithoutFeedback>
</SafeAreaView>
);
};