basic app

src/screens/Auth/RegisterScreen.js

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