From b56a96f0ff676b635e3e8dbfe12c72c2477a1d6b Mon Sep 17 00:00:00 2001
From: Nurmuhammet Allanov <nurmuhammet@mail.com>
Date: Thu, 3 Jul 2025 20:56:50 +0500
Subject: [PATCH] amazing design

---
 src/components/Input.js                |   9 +-
 src/navigation/AuthNavigator.js        |   3 +-
 src/screens/Auth/LoginScreen.js        | 103 +++++++++--------
 src/screens/Auth/RegisterScreen.js     | 147 ++++++++++++++-----------
 src/screens/Auth/VerificationScreen.js | 119 ++++++++++++--------
 5 files changed, 225 insertions(+), 156 deletions(-)

diff --git a/src/components/Input.js b/src/components/Input.js
index c949ca0..fc75bab 100644
--- a/src/components/Input.js
+++ b/src/components/Input.js
@@ -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: {
diff --git a/src/navigation/AuthNavigator.js b/src/navigation/AuthNavigator.js
index 82162b4..b4654da 100644
--- a/src/navigation/AuthNavigator.js
+++ b/src/navigation/AuthNavigator.js
@@ -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} />
diff --git a/src/screens/Auth/LoginScreen.js b/src/screens/Auth/LoginScreen.js
index 6de079a..fc689c6 100644
--- a/src/screens/Auth/LoginScreen.js
+++ b/src/screens/Auth/LoginScreen.js
@@ -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,
diff --git a/src/screens/Auth/RegisterScreen.js b/src/screens/Auth/RegisterScreen.js
index 1167c27..d403cb4 100644
--- a/src/screens/Auth/RegisterScreen.js
+++ b/src/screens/Auth/RegisterScreen.js
@@ -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,
diff --git a/src/screens/Auth/VerificationScreen.js b/src/screens/Auth/VerificationScreen.js
index 153f6d4..f6d7c97 100644
--- a/src/screens/Auth/VerificationScreen.js
+++ b/src/screens/Auth/VerificationScreen.js
@@ -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,24 +93,31 @@ const VerificationScreen = ({ navigation }) => {
     }
   };
 
-  const handleResendCode = () => {
+  const handleResendCode = async () => {
     if (!canResend) return;
     
     // Here you would call the API to resend the code
-    // For now, just restart the countdown
+    // For now, just restart the countdown 
     Alert.alert('Üstünlik', 'Täze tassyklama kody iberildi');
     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>
   );
 };