basic app

src/screens/Auth/VerificationScreen.js

@@ -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;