fitst commit

screens/auth/login/ui/LoginForm.tsx

@@ -0,0 +1,242 @@
+import { formatPhone, normalizeDigits } from '@/constants/formatPhone';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { Check } from 'lucide-react-native';
+import { useCallback, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  ActivityIndicator,
+  Animated,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import PhonePrefix from './PhonePrefix';
+import { UseLoginForm } from './UseLoginForm';
+
+export default function LoginForm() {
+  const [focused, setFocused] = useState(false);
+  const scaleAnim = useRef(new Animated.Value(1)).current;
+  const { phone, setPhone, submit, loading, error } = UseLoginForm();
+  console.log(error);
+  const { t } = useTranslation();
+
+  const handleChange = useCallback(
+    (text: string) => {
+      setPhone(normalizeDigits(text));
+    },
+    [setPhone]
+  );
+
+  const handlePressIn = () => {
+    Animated.spring(scaleAnim, {
+      toValue: 0.96,
+      friction: 7,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const handlePressOut = () => {
+    Animated.spring(scaleAnim, {
+      toValue: 1,
+      friction: 7,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const isComplete = phone.length === 9;
+  const hasError = !!error;
+
+  return (
+    <View style={styles.form}>
+      <Text style={styles.label}>{t('Telefon raqami')}</Text>
+
+      <View
+        style={[
+          styles.inputContainer,
+          focused && styles.inputFocused,
+          hasError && styles.inputError,
+          isComplete && styles.inputComplete,
+        ]}
+      >
+        <PhonePrefix focused={focused} />
+
+        <TextInput
+          value={formatPhone(phone)}
+          onChangeText={handleChange}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          keyboardType="phone-pad"
+          placeholder="90 123 45 67"
+          placeholderTextColor="#94a3b8"
+          style={styles.input}
+          maxLength={12}
+        />
+
+        {isComplete && (
+          <View style={styles.iconCheck}>
+            <Check size={18} color="#10b981" strokeWidth={3} />
+          </View>
+        )}
+      </View>
+
+      {phone.length > 0 && (
+        <View style={styles.progressContainer}>
+          <View style={styles.progressBar}>
+            <View
+              style={[
+                styles.progressFill,
+                { width: `${Math.min((phone.length / 9) * 100, 100)}%` },
+              ]}
+            />
+          </View>
+          <Text style={styles.progressText}>{phone.length}/9</Text>
+        </View>
+      )}
+
+      {error && (
+        <View style={styles.errorContainer}>
+          <Text style={styles.errorText}>{error}</Text>
+        </View>
+      )}
+
+      <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
+        <TouchableOpacity
+          activeOpacity={0.9}
+          disabled={loading || !isComplete}
+          onPress={async () => {
+            const fullPhone = `998${phone}`;
+            await AsyncStorage.setItem('phone', fullPhone);
+            await AsyncStorage.setItem('userType', 'legal_entity');
+            submit();
+          }}
+          onPressIn={handlePressIn}
+          onPressOut={handlePressOut}
+          style={[styles.button, (loading || !isComplete) && styles.buttonDisabled]}
+        >
+          {loading ? (
+            <ActivityIndicator color="#ffffff" size="small" />
+          ) : (
+            <Text style={styles.buttonText}>{t('Tasdiqlash kodini yuborish')}</Text>
+          )}
+        </TouchableOpacity>
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  form: {
+    gap: 16,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#475569',
+    marginBottom: 4,
+    letterSpacing: 0.2,
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#ffffff',
+    borderRadius: 14,
+    borderWidth: 2,
+    borderColor: '#e2e8f0',
+    paddingHorizontal: 16,
+    height: 56,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 8,
+    elevation: 2,
+  },
+  inputFocused: {
+    borderColor: '#3b82f6',
+    shadowColor: '#3b82f6',
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    elevation: 4,
+  },
+  inputError: {
+    borderColor: '#ef4444',
+    backgroundColor: '#fef2f2',
+  },
+  inputComplete: {
+    borderColor: '#10b981',
+    backgroundColor: '#f0fdf4',
+  },
+  input: {
+    flex: 1,
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#0f172a',
+    letterSpacing: 0.5,
+  },
+  iconCheck: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: '#d1fae5',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  progressContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+  progressBar: {
+    flex: 1,
+    height: 3,
+    backgroundColor: '#e2e8f0',
+    borderRadius: 2,
+    overflow: 'hidden',
+  },
+  progressFill: {
+    height: '100%',
+    backgroundColor: '#3b82f6',
+    borderRadius: 2,
+  },
+  progressText: {
+    fontSize: 12,
+    color: '#64748b',
+    fontWeight: '600',
+  },
+  errorContainer: {
+    marginTop: -8,
+  },
+  errorText: {
+    color: '#ef4444',
+    fontSize: 13,
+    fontWeight: '500',
+  },
+  button: {
+    height: 56,
+    backgroundColor: '#3b82f6',
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#3b82f6',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 12,
+    elevation: 6,
+  },
+  buttonDisabled: {
+    opacity: 0.5,
+    shadowOpacity: 0.1,
+  },
+  buttonText: {
+    color: '#ffffff',
+    fontSize: 16,
+    fontWeight: '700',
+    letterSpacing: 0.5,
+  },
+  scrollContent: {
+    flexGrow: 1,
+    paddingHorizontal: 24,
+    paddingBottom: 40,
+  },
+});