basic app

src/screens/Auth/LoginScreen.js

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