fitst commit
This commit is contained in:
Samandar Turgunboyev
239
screens/auth/confirm/ConfirmForm.tsx
Normal file
239
screens/auth/confirm/ConfirmForm.tsx
Normal file
@@ -0,0 +1,239 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Animated,
|
||||
Keyboard,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
|
||||
interface OtpFormProps {
|
||||
phone?: string;
|
||||
initialCode?: string;
|
||||
onSubmit?: (otp: string) => void;
|
||||
isLoading?: boolean;
|
||||
error?: string;
|
||||
onResendPress?: () => void;
|
||||
resendTimer: number;
|
||||
}
|
||||
|
||||
const ConfirmForm = ({
|
||||
initialCode,
|
||||
onSubmit,
|
||||
isLoading = false,
|
||||
error,
|
||||
onResendPress,
|
||||
resendTimer,
|
||||
}: OtpFormProps) => {
|
||||
const [otp, setOtp] = useState<string[]>(Array(4).fill(''));
|
||||
const [focusedIndex, setFocusedIndex] = useState<number>(0);
|
||||
const inputRefs = useRef<TextInput[]>([]);
|
||||
const shakeAnimation = useRef(new Animated.Value(0)).current;
|
||||
const { t } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
if (error) {
|
||||
Animated.sequence([
|
||||
Animated.timing(shakeAnimation, { toValue: 10, duration: 50, useNativeDriver: true }),
|
||||
Animated.timing(shakeAnimation, { toValue: -10, duration: 50, useNativeDriver: true }),
|
||||
Animated.timing(shakeAnimation, { toValue: 10, duration: 50, useNativeDriver: true }),
|
||||
Animated.timing(shakeAnimation, { toValue: 0, duration: 50, useNativeDriver: true }),
|
||||
]).start();
|
||||
}
|
||||
}, [error]);
|
||||
|
||||
useEffect(() => {
|
||||
if (initialCode && initialCode.length === 4 && /^\d{4}$/.test(initialCode)) {
|
||||
setOtp(initialCode.split(''));
|
||||
}
|
||||
}, [initialCode]);
|
||||
|
||||
// Raqam kiritilganda yoki o'chirilganda
|
||||
const handleChange = (value: string, index: number) => {
|
||||
const cleanValue = value.replace(/[^0-9]/g, '');
|
||||
const newOtp = [...otp];
|
||||
|
||||
// Agar qiymat bo'sh bo'lsa (o'chirilgan bo'lsa)
|
||||
if (value === '') {
|
||||
newOtp[index] = '';
|
||||
setOtp(newOtp);
|
||||
return;
|
||||
}
|
||||
|
||||
// Faqat oxirgi kiritilgan raqamni olish
|
||||
newOtp[index] = cleanValue.slice(-1);
|
||||
setOtp(newOtp);
|
||||
|
||||
// Keyingi katakka o'tish
|
||||
if (newOtp[index] !== '' && index < 3) {
|
||||
inputRefs.current[index + 1]?.focus();
|
||||
}
|
||||
|
||||
// Hamma raqam kiritilgan bo'lsa avtomat yuborish
|
||||
const fullCode = newOtp.join('');
|
||||
if (fullCode.length === 4) {
|
||||
Keyboard.dismiss();
|
||||
onSubmit?.(fullCode);
|
||||
}
|
||||
};
|
||||
|
||||
// Maxsus tugmalar (Backspace) uchun
|
||||
const handleKeyPress = ({ nativeEvent }: any, index: number) => {
|
||||
if (nativeEvent.key === 'Backspace') {
|
||||
// Agar katakda raqam bo'lsa, uni o'chiradi
|
||||
if (otp[index] !== '') {
|
||||
const newOtp = [...otp];
|
||||
newOtp[index] = '';
|
||||
setOtp(newOtp);
|
||||
}
|
||||
// Agar katak bo'sh bo'lsa, oldingisiga o'tib uni ham o'chiradi
|
||||
else if (index > 0) {
|
||||
const newOtp = [...otp];
|
||||
newOtp[index - 1] = '';
|
||||
setOtp(newOtp);
|
||||
inputRefs.current[index - 1]?.focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Animated.View style={[styles.otpContainer, { transform: [{ translateX: shakeAnimation }] }]}>
|
||||
{otp.map((digit, index) => (
|
||||
<TouchableOpacity
|
||||
key={index}
|
||||
activeOpacity={1}
|
||||
onPress={() => inputRefs.current[index]?.focus()}
|
||||
style={[
|
||||
styles.inputBox,
|
||||
focusedIndex === index && styles.inputBoxFocused,
|
||||
digit !== '' && styles.inputBoxFilled,
|
||||
error ? styles.inputBoxError : null,
|
||||
]}
|
||||
>
|
||||
<Text style={[styles.inputText, digit === '' && styles.placeholderText]}>
|
||||
{digit || '•'}
|
||||
</Text>
|
||||
|
||||
<TextInput
|
||||
ref={(ref) => {
|
||||
if (ref) inputRefs.current[index] = ref;
|
||||
}}
|
||||
value={digit}
|
||||
onChangeText={(v) => handleChange(v, index)}
|
||||
onKeyPress={(e) => handleKeyPress(e, index)}
|
||||
onFocus={() => setFocusedIndex(index)}
|
||||
onBlur={() => setFocusedIndex(-1)}
|
||||
keyboardType="number-pad"
|
||||
maxLength={1}
|
||||
style={styles.hiddenInput}
|
||||
caretHidden
|
||||
selectTextOnFocus // Bu 2 marta bosish muammosini oldini olishga yordam beradi
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</Animated.View>
|
||||
|
||||
{error && <Text style={styles.errorText}>{error}</Text>}
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={() => onSubmit?.(otp.join(''))}
|
||||
disabled={isLoading || otp.join('').length !== 4}
|
||||
activeOpacity={0.8}
|
||||
style={[
|
||||
styles.submitButton,
|
||||
(isLoading || otp.join('').length !== 4) && styles.submitButtonDisabled,
|
||||
]}
|
||||
>
|
||||
{isLoading ? (
|
||||
<ActivityIndicator color="#fff" size="small" />
|
||||
) : (
|
||||
<Text style={styles.submitText}>{t('Kodni tasdiqlash')}</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
||||
<View style={styles.resendContainer}>
|
||||
{resendTimer > 0 ? (
|
||||
<Text style={styles.timerText}>
|
||||
{t('Qayta yuborish vaqti')}: <Text style={styles.timerCount}>{resendTimer}s</Text>
|
||||
</Text>
|
||||
) : (
|
||||
<TouchableOpacity onPress={onResendPress} style={styles.resendButton}>
|
||||
<Text style={styles.resendText}>{t('Kodni qayta yuborish')}</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { width: '100%', paddingVertical: 10 },
|
||||
otpContainer: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 20,
|
||||
paddingHorizontal: 5,
|
||||
},
|
||||
inputBox: {
|
||||
width: 60,
|
||||
height: 65,
|
||||
borderRadius: 16,
|
||||
borderWidth: 1.5,
|
||||
borderColor: '#E2E8F0',
|
||||
backgroundColor: '#F8FAFC',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
elevation: 1,
|
||||
},
|
||||
inputBoxFocused: {
|
||||
borderColor: '#3B82F6',
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderWidth: 2,
|
||||
elevation: 4,
|
||||
},
|
||||
inputBoxFilled: {
|
||||
borderColor: '#3B82F6',
|
||||
backgroundColor: '#FFFFFF',
|
||||
},
|
||||
inputBoxError: {
|
||||
borderColor: '#EF4444',
|
||||
backgroundColor: '#FFF1F2',
|
||||
},
|
||||
inputText: { fontSize: 26, fontWeight: '700', color: '#1E293B' },
|
||||
placeholderText: { color: '#CBD5E1', fontSize: 18 },
|
||||
hiddenInput: { position: 'absolute', width: '100%', height: '100%', opacity: 0 },
|
||||
errorText: {
|
||||
color: '#EF4444',
|
||||
fontSize: 14,
|
||||
textAlign: 'center',
|
||||
marginBottom: 20,
|
||||
fontWeight: '500',
|
||||
},
|
||||
submitButton: {
|
||||
height: 56,
|
||||
backgroundColor: '#3B82F6',
|
||||
borderRadius: 16,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
elevation: 3,
|
||||
},
|
||||
submitButtonDisabled: { backgroundColor: '#94A3B8', elevation: 0 },
|
||||
submitText: { color: '#FFFFFF', fontSize: 16, fontWeight: '600' },
|
||||
resendContainer: { alignItems: 'center', marginTop: 25 },
|
||||
timerText: { color: '#64748B', fontSize: 14 },
|
||||
timerCount: { color: '#1E293B', fontWeight: '700' },
|
||||
resendButton: { paddingVertical: 5 },
|
||||
resendText: {
|
||||
color: '#3B82F6',
|
||||
fontSize: 15,
|
||||
fontWeight: '600',
|
||||
textDecorationLine: 'underline',
|
||||
},
|
||||
});
|
||||
|
||||
export default ConfirmForm;
|
||||
324
screens/auth/confirm/ConfirmScreen.tsx
Normal file
324
screens/auth/confirm/ConfirmScreen.tsx
Normal file
@@ -0,0 +1,324 @@
|
||||
import { useAuth } from '@/components/AuthProvider';
|
||||
import AuthHeader from '@/components/ui/AuthHeader';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import * as Haptics from 'expo-haptics';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { Redirect, useRouter } from 'expo-router';
|
||||
import { ArrowLeft, MessageCircle, ShieldCheck } from 'lucide-react-native';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Alert,
|
||||
Linking,
|
||||
Platform,
|
||||
StyleSheet,
|
||||
Text,
|
||||
ToastAndroid,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { auth_api } from '../login/lib/api';
|
||||
import ConfirmForm from './ConfirmForm';
|
||||
|
||||
const ConfirmScreen = () => {
|
||||
const router = useRouter();
|
||||
const [phoneOTP, setPhone] = useState<string | null>('');
|
||||
const [error, setError] = useState<string>('');
|
||||
const { login } = useAuth();
|
||||
|
||||
const [resendTimer, setResendTimer] = useState<number>(60);
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
const loadPhone = async () => {
|
||||
try {
|
||||
const storedPhone = await AsyncStorage.getItem('phone');
|
||||
if (storedPhone) setPhone(storedPhone);
|
||||
else setPhone(null);
|
||||
} catch (error) {
|
||||
console.log('AsyncStorage error:', error);
|
||||
}
|
||||
};
|
||||
loadPhone();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (resendTimer === 0) return;
|
||||
const timer = setTimeout(() => {
|
||||
setResendTimer((prev) => prev - 1);
|
||||
}, 1000);
|
||||
return () => clearTimeout(timer);
|
||||
}, [resendTimer]);
|
||||
|
||||
const { mutate, isPending } = useMutation({
|
||||
mutationFn: (body: { code: string; phone: string }) => auth_api.verify_otp(body),
|
||||
onSuccess: async (res) => {
|
||||
await AsyncStorage.removeItem('phone');
|
||||
await AsyncStorage.setItem('access_token', res.data.data.token.access);
|
||||
await login(res.data.data.token.access);
|
||||
await AsyncStorage.setItem('refresh_token', res.data.data.token.refresh);
|
||||
router.replace('/(dashboard)');
|
||||
},
|
||||
onError: (err: any) => {
|
||||
const errorMessage = err?.response?.data?.data?.detail || t("Kod noto'g'ri kiritildi");
|
||||
Alert.alert(t('Xatolik yuz berdi'), errorMessage);
|
||||
setError(errorMessage);
|
||||
},
|
||||
});
|
||||
|
||||
const resendMutation = useMutation({
|
||||
mutationFn: async (body: { phone: string }) => auth_api.resend_otp(body),
|
||||
onSuccess: () => {
|
||||
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
|
||||
setResendTimer(60);
|
||||
if (Platform.OS === 'android') {
|
||||
ToastAndroid.show(t('Kod qayta yuborildi'), ToastAndroid.SHORT);
|
||||
}
|
||||
},
|
||||
onError: () => {
|
||||
Alert.alert(t('Xatolik yuz berdi'), t('Kodni qayta yuborishda xatolik yuz berdi'));
|
||||
},
|
||||
});
|
||||
|
||||
const openBotLink = () => {
|
||||
const linkApp = `tg://resolve?domain=infotargetbot&start=register_${phoneOTP}`;
|
||||
Linking.openURL(linkApp).catch(() => {
|
||||
const webLink = `https://t.me/infotargetbot?start=register_${phoneOTP}`;
|
||||
Linking.openURL(webLink);
|
||||
});
|
||||
};
|
||||
|
||||
if (phoneOTP === null) {
|
||||
return <Redirect href={'/'} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<LinearGradient
|
||||
colors={['#0f172a', '#1e293b', '#334155']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
|
||||
<View style={styles.decorCircle1} />
|
||||
<View style={styles.decorCircle2} />
|
||||
<AuthHeader />
|
||||
<SafeAreaView style={{ flex: 1 }}>
|
||||
<KeyboardAwareScrollView
|
||||
contentContainerStyle={styles.scrollContent}
|
||||
showsVerticalScrollIndicator={false}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
>
|
||||
<View style={styles.header}>
|
||||
<View style={styles.iconContainer}>
|
||||
<LinearGradient colors={['#3b82f6', '#2563eb']} style={styles.iconGradient}>
|
||||
<ShieldCheck size={32} color="#ffffff" strokeWidth={2.2} />
|
||||
</LinearGradient>
|
||||
</View>
|
||||
|
||||
<Text style={styles.title}>{t('Kodni tasdiqlash')}</Text>
|
||||
<Text style={styles.subtitle}>
|
||||
{t("Tasdiqlash kodi sizning Telegram botingizga yuboriladi. Botni ko'rish")}
|
||||
</Text>
|
||||
|
||||
<View style={styles.phoneBadge}>
|
||||
<Text style={styles.phoneText}>+{phoneOTP}</Text>
|
||||
</View>
|
||||
|
||||
{/* Telegram Button */}
|
||||
<TouchableOpacity
|
||||
style={styles.telegramBanner}
|
||||
onPress={openBotLink}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={['#0088cc', '#00a2ed']}
|
||||
style={styles.telegramGradient}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 0 }}
|
||||
>
|
||||
<View style={styles.botIconCircle}>
|
||||
<MessageCircle size={20} color="#0088cc" fill="#fff" />
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.telegramTitle}>{t('Botni ochish')}</Text>
|
||||
<Text style={styles.telegramSub}>
|
||||
{t('Telegram botni ochish uchun tugmani bosing va kodni oling')}
|
||||
</Text>
|
||||
</View>
|
||||
<ArrowLeft size={20} color="#fff" style={{ transform: [{ rotate: '180deg' }] }} />
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={styles.card}>
|
||||
<ConfirmForm
|
||||
onSubmit={(otp) => mutate({ code: otp, phone: phoneOTP || '' })}
|
||||
isLoading={isPending}
|
||||
error={error}
|
||||
onResendPress={() => resendMutation.mutate({ phone: phoneOTP || '' })}
|
||||
resendTimer={resendTimer}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* <View style={styles.infoBox}>
|
||||
<Text style={styles.infoText}>
|
||||
<Text style={{ fontWeight: '700' }}>Eslatma:</Text> Kod SMS orqali kelmaydi. Agar
|
||||
botni ishga tushirmagan bo'lsangiz, yuqoridagi tugmani bosing.
|
||||
</Text>
|
||||
</View> */}
|
||||
</KeyboardAwareScrollView>
|
||||
</SafeAreaView>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: '#0f172a' },
|
||||
scrollContent: {
|
||||
paddingHorizontal: 24,
|
||||
paddingBottom: 40,
|
||||
flexGrow: 1,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
languageHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: 24,
|
||||
paddingVertical: 12,
|
||||
zIndex: 1000,
|
||||
},
|
||||
backButton: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
borderRadius: 12,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.15)',
|
||||
},
|
||||
languageButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.15)',
|
||||
},
|
||||
languageText: { fontSize: 14, fontWeight: '600', color: '#94a3b8' },
|
||||
header: { alignItems: 'center', marginBottom: 24 },
|
||||
iconContainer: { marginBottom: 20 },
|
||||
iconGradient: {
|
||||
width: 72,
|
||||
height: 72,
|
||||
borderRadius: 22,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
elevation: 8,
|
||||
shadowColor: '#3b82f6',
|
||||
shadowOpacity: 0.4,
|
||||
shadowRadius: 12,
|
||||
},
|
||||
title: { fontSize: 28, fontWeight: '800', color: '#ffffff', marginBottom: 8 },
|
||||
subtitle: {
|
||||
fontSize: 15,
|
||||
color: '#94a3b8',
|
||||
textAlign: 'center',
|
||||
lineHeight: 22,
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
highlightText: { color: '#38bdf8', fontWeight: '700' },
|
||||
phoneBadge: {
|
||||
marginTop: 16,
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(59, 130, 246, 0.2)',
|
||||
},
|
||||
phoneText: { color: '#60a5fa', fontWeight: '700', fontSize: 16 },
|
||||
telegramBanner: {
|
||||
marginTop: 24,
|
||||
width: '100%',
|
||||
borderRadius: 18,
|
||||
overflow: 'hidden',
|
||||
elevation: 6,
|
||||
shadowColor: '#0088cc',
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 10,
|
||||
},
|
||||
telegramGradient: { flexDirection: 'row', alignItems: 'center', padding: 14, gap: 12 },
|
||||
botIconCircle: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
backgroundColor: '#fff',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
telegramTitle: { color: '#ffffff', fontSize: 16, fontWeight: '700' },
|
||||
telegramSub: { color: 'rgba(255, 255, 255, 0.8)', fontSize: 12 },
|
||||
card: {
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: 28,
|
||||
padding: 24,
|
||||
elevation: 10,
|
||||
shadowColor: '#000',
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 15,
|
||||
},
|
||||
infoBox: {
|
||||
marginTop: 20,
|
||||
padding: 16,
|
||||
backgroundColor: 'rgba(245, 158, 11, 0.08)',
|
||||
borderRadius: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(245, 158, 11, 0.2)',
|
||||
},
|
||||
infoText: { fontSize: 13, color: '#fbbf24', textAlign: 'center', lineHeight: 20 },
|
||||
dropdown: {
|
||||
position: 'absolute',
|
||||
top: 55,
|
||||
right: 0,
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 16,
|
||||
padding: 8,
|
||||
minWidth: 170,
|
||||
elevation: 10,
|
||||
zIndex: 2000,
|
||||
},
|
||||
dropdownOption: { padding: 12, borderRadius: 10 },
|
||||
dropdownOptionActive: { backgroundColor: '#eff6ff' },
|
||||
dropdownOptionText: { fontSize: 14, color: '#475569', fontWeight: '600' },
|
||||
dropdownOptionTextActive: { color: '#3b82f6' },
|
||||
decorCircle1: {
|
||||
position: 'absolute',
|
||||
top: -100,
|
||||
right: -80,
|
||||
width: 300,
|
||||
height: 300,
|
||||
borderRadius: 150,
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
||||
},
|
||||
decorCircle2: {
|
||||
position: 'absolute',
|
||||
bottom: -50,
|
||||
left: -100,
|
||||
width: 250,
|
||||
height: 250,
|
||||
borderRadius: 125,
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.05)',
|
||||
},
|
||||
});
|
||||
|
||||
export default ConfirmScreen;
|
||||
55
screens/auth/login/lib/api.ts
Normal file
55
screens/auth/login/lib/api.ts
Normal file
@@ -0,0 +1,55 @@
|
||||
import httpClient from '@/api/httpClient';
|
||||
import { API_URLS } from '@/api/URLs';
|
||||
import axios, { AxiosResponse } from 'axios';
|
||||
|
||||
interface ConfirmBody {
|
||||
status: boolean;
|
||||
data: {
|
||||
detail: string;
|
||||
token: {
|
||||
access: string;
|
||||
refresh: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export const auth_api = {
|
||||
async login(body: { phone: string }) {
|
||||
const res = await httpClient.post(API_URLS.LOGIN, body);
|
||||
return res;
|
||||
},
|
||||
|
||||
async verify_otp(body: { code: string; phone: string }): Promise<AxiosResponse<ConfirmBody>> {
|
||||
const res = await httpClient.post(API_URLS.LoginConfirm, body);
|
||||
return res;
|
||||
},
|
||||
async resend_otp(body: { phone: string }) {
|
||||
const res = await httpClient.post(API_URLS.ResendOTP, body);
|
||||
return res;
|
||||
},
|
||||
|
||||
async get_info(inn: string) {
|
||||
const res = await axios.get(`https://devapi.goodsign.biz/v1/profile/${inn}`);
|
||||
return res;
|
||||
},
|
||||
|
||||
async register(body: {
|
||||
phone: string;
|
||||
stir: string;
|
||||
person_type: string;
|
||||
activate_types: number[];
|
||||
}) {
|
||||
const res = await httpClient.post(API_URLS.Register, body);
|
||||
return res;
|
||||
},
|
||||
|
||||
async register_confirm(body: { phone: string; code: string }) {
|
||||
const res = await httpClient.post(API_URLS.Register_Confirm, body);
|
||||
return res;
|
||||
},
|
||||
|
||||
async register_resend(body: { phone: string }) {
|
||||
const res = await httpClient.post(API_URLS.Register_Resend, body);
|
||||
return res;
|
||||
},
|
||||
};
|
||||
20
screens/auth/login/lib/storage.ts
Normal file
20
screens/auth/login/lib/storage.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import { create } from 'zustand';
|
||||
|
||||
type State = {
|
||||
phone: string | null;
|
||||
userType: string | null;
|
||||
};
|
||||
|
||||
type Actions = {
|
||||
savedPhone: (phone: string | null) => void;
|
||||
savedUserType: (userType: string | null) => void;
|
||||
};
|
||||
|
||||
const userInfoStore = create<State & Actions>((set) => ({
|
||||
phone: null,
|
||||
savedPhone: (phone: string | null) => set(() => ({ phone })),
|
||||
userType: null,
|
||||
savedUserType: (userType: string | null) => set(() => ({ userType })),
|
||||
}));
|
||||
|
||||
export default userInfoStore;
|
||||
242
screens/auth/login/ui/LoginForm.tsx
Normal file
242
screens/auth/login/ui/LoginForm.tsx
Normal file
@@ -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,
|
||||
},
|
||||
});
|
||||
282
screens/auth/login/ui/LoginScreens.tsx
Normal file
282
screens/auth/login/ui/LoginScreens.tsx
Normal file
@@ -0,0 +1,282 @@
|
||||
import AuthHeader from '@/components/ui/AuthHeader';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { Phone, UserPlus } from 'lucide-react-native';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
import LoginForm from './LoginForm';
|
||||
|
||||
export default function LoginScreen() {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<LinearGradient
|
||||
colors={['#0f172a', '#1e293b', '#334155']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
|
||||
<View style={styles.decorCircle1} />
|
||||
<View style={styles.decorCircle2} />
|
||||
<AuthHeader back={false} />
|
||||
<View style={styles.scrollContent}>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<View style={styles.iconContainer}>
|
||||
<LinearGradient
|
||||
colors={['#3b82f6', '#2563eb']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.iconGradient}
|
||||
>
|
||||
<Phone size={32} color="#ffffff" strokeWidth={2} />
|
||||
</LinearGradient>
|
||||
</View>
|
||||
|
||||
<Text style={styles.title}>{t('Kirish')}</Text>
|
||||
<Text style={styles.subtitle}>{t('Davom etish uchun tizimga kiring')}</Text>
|
||||
</View>
|
||||
|
||||
{/* Login Form */}
|
||||
<View style={styles.card}>
|
||||
<LoginForm />
|
||||
</View>
|
||||
|
||||
{/* Register bo'limi */}
|
||||
<View style={styles.registerSection}>
|
||||
<View style={styles.dividerContainer}>
|
||||
<View style={styles.divider} />
|
||||
<Text style={styles.dividerText}>{t('YOKI')}</Text>
|
||||
<View style={styles.divider} />
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.registerButton}
|
||||
onPress={() => router.push('/register')}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={['rgba(59, 130, 246, 0.1)', 'rgba(37, 99, 235, 0.15)']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.registerGradient}
|
||||
>
|
||||
<View style={styles.registerIconContainer}>
|
||||
<UserPlus size={20} color="#3b82f6" strokeWidth={2.5} />
|
||||
</View>
|
||||
<View style={styles.registerTextContainer}>
|
||||
<Text style={styles.registerTitle}>{t("Hisobingiz yo'qmi?")}</Text>
|
||||
<Text style={styles.registerSubtitle}>{t("Ro'yxatdan o'tish")}</Text>
|
||||
</View>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#0f172a',
|
||||
},
|
||||
decorCircle1: {
|
||||
position: 'absolute',
|
||||
top: -150,
|
||||
right: -100,
|
||||
width: 400,
|
||||
height: 400,
|
||||
borderRadius: 200,
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
||||
},
|
||||
decorCircle2: {
|
||||
position: 'absolute',
|
||||
bottom: -100,
|
||||
left: -150,
|
||||
width: 350,
|
||||
height: 350,
|
||||
borderRadius: 175,
|
||||
backgroundColor: 'rgba(16, 185, 129, 0.08)',
|
||||
},
|
||||
scrollContent: {
|
||||
flexGrow: 1,
|
||||
paddingHorizontal: 24,
|
||||
paddingBottom: 40,
|
||||
paddingTop: 10,
|
||||
},
|
||||
languageHeader: {
|
||||
alignItems: 'flex-end',
|
||||
marginBottom: 24,
|
||||
position: 'relative',
|
||||
zIndex: 1000,
|
||||
},
|
||||
languageButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.2)',
|
||||
},
|
||||
languageText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#94a3b8',
|
||||
},
|
||||
header: {
|
||||
alignItems: 'center',
|
||||
marginTop: 20,
|
||||
marginBottom: 40,
|
||||
},
|
||||
iconContainer: {
|
||||
marginBottom: 24,
|
||||
},
|
||||
iconGradient: {
|
||||
width: 72,
|
||||
height: 72,
|
||||
borderRadius: 20,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
shadowColor: '#3b82f6',
|
||||
shadowOffset: { width: 0, height: 8 },
|
||||
shadowOpacity: 0.4,
|
||||
shadowRadius: 16,
|
||||
elevation: 8,
|
||||
},
|
||||
title: {
|
||||
fontSize: 32,
|
||||
fontWeight: '800',
|
||||
color: '#ffffff',
|
||||
marginBottom: 12,
|
||||
letterSpacing: 0.3,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 15,
|
||||
color: '#94a3b8',
|
||||
textAlign: 'center',
|
||||
lineHeight: 22,
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
card: {
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: 24,
|
||||
padding: 24,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 10 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 20,
|
||||
elevation: 10,
|
||||
},
|
||||
registerSection: {
|
||||
marginTop: 32,
|
||||
},
|
||||
dividerContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 20,
|
||||
},
|
||||
divider: {
|
||||
flex: 1,
|
||||
height: 1,
|
||||
backgroundColor: 'rgba(148, 163, 184, 0.3)',
|
||||
},
|
||||
dividerText: {
|
||||
marginHorizontal: 16,
|
||||
fontSize: 13,
|
||||
color: '#94a3b8',
|
||||
fontWeight: '600',
|
||||
},
|
||||
registerButton: {
|
||||
borderRadius: 16,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
registerGradient: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: 16,
|
||||
paddingHorizontal: 20,
|
||||
borderWidth: 1.5,
|
||||
borderColor: 'rgba(59, 130, 246, 0.3)',
|
||||
borderRadius: 16,
|
||||
},
|
||||
registerIconContainer: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 12,
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.15)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 14,
|
||||
},
|
||||
registerTextContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
registerTitle: {
|
||||
fontSize: 15,
|
||||
fontWeight: '700',
|
||||
color: '#e2e8f0',
|
||||
marginBottom: 3,
|
||||
},
|
||||
registerSubtitle: {
|
||||
fontSize: 13,
|
||||
fontWeight: '600',
|
||||
color: '#3b82f6',
|
||||
},
|
||||
dropdown: {
|
||||
position: 'absolute',
|
||||
top: 50,
|
||||
right: 0,
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: 12,
|
||||
padding: 8,
|
||||
minWidth: 160,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.15,
|
||||
shadowRadius: 12,
|
||||
elevation: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.2)',
|
||||
},
|
||||
dropdownOption: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 12,
|
||||
borderRadius: 8,
|
||||
marginBottom: 4,
|
||||
},
|
||||
dropdownOptionActive: {
|
||||
backgroundColor: '#e0e7ff',
|
||||
},
|
||||
dropdownOptionText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#475569',
|
||||
},
|
||||
dropdownOptionTextActive: {
|
||||
color: '#3b82f6',
|
||||
},
|
||||
checkmark: {
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: 12,
|
||||
backgroundColor: '#3b82f6',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
checkmarkText: {
|
||||
color: '#ffffff',
|
||||
fontSize: 14,
|
||||
fontWeight: '700',
|
||||
},
|
||||
});
|
||||
34
screens/auth/login/ui/PhonePrefix.tsx
Normal file
34
screens/auth/login/ui/PhonePrefix.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet, Text, View } from 'react-native';
|
||||
|
||||
export default function PhonePrefix({ focused }: { focused: boolean }) {
|
||||
return (
|
||||
<View style={styles.prefixContainer}>
|
||||
<Text style={[styles.prefix, focused && styles.prefixFocused]}>+998</Text>
|
||||
<View style={styles.divider} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
prefixContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginRight: 12,
|
||||
},
|
||||
prefix: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#475569',
|
||||
letterSpacing: 0.3,
|
||||
},
|
||||
prefixFocused: {
|
||||
color: '#0f172a',
|
||||
},
|
||||
divider: {
|
||||
width: 1.5,
|
||||
height: 24,
|
||||
backgroundColor: '#e2e8f0',
|
||||
marginLeft: 12,
|
||||
},
|
||||
});
|
||||
72
screens/auth/login/ui/UseLoginForm.tsx
Normal file
72
screens/auth/login/ui/UseLoginForm.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { auth_api } from '../lib/api';
|
||||
|
||||
type Lang = 'uz' | 'ru' | 'en';
|
||||
|
||||
export function UseLoginForm() {
|
||||
const [phone, setPhone] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const router = useRouter();
|
||||
|
||||
const { t, i18n } = useTranslation();
|
||||
|
||||
const { mutate, isPending } = useMutation({
|
||||
mutationFn: (body: { phone: string }) => auth_api.login(body),
|
||||
onError: (err: any) => {
|
||||
const errorMessage =
|
||||
err?.response?.data?.data?.detail || err?.response?.data?.data?.phone?.[0];
|
||||
|
||||
setError(errorMessage || t('auth.error_general'));
|
||||
},
|
||||
});
|
||||
|
||||
const submit = () => {
|
||||
if (phone.length !== 9) {
|
||||
setError(t('auth.error_incomplete'));
|
||||
return;
|
||||
}
|
||||
|
||||
mutate(
|
||||
{ phone: `998${phone}` },
|
||||
{
|
||||
onSuccess: () => {
|
||||
setError('');
|
||||
router.push('/(auth)/confirm');
|
||||
},
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
// ✅ MUHIM: wrapper function
|
||||
const changeLanguage = async (lang: Lang) => {
|
||||
await i18n.changeLanguage(lang);
|
||||
};
|
||||
|
||||
const getLanguageName = () => {
|
||||
switch (i18n.language) {
|
||||
case 'uz':
|
||||
return 'O‘zbek';
|
||||
case 'ru':
|
||||
return 'Русский';
|
||||
case 'en':
|
||||
return 'English';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
phone,
|
||||
setPhone,
|
||||
submit,
|
||||
loading: isPending,
|
||||
error,
|
||||
t,
|
||||
language: i18n.language,
|
||||
changeLanguage, // ✅ endi undefined EMAS
|
||||
getLanguageName,
|
||||
};
|
||||
}
|
||||
239
screens/auth/register-confirm/ConfirmForm.tsx
Normal file
239
screens/auth/register-confirm/ConfirmForm.tsx
Normal file
@@ -0,0 +1,239 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Animated,
|
||||
Keyboard,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
|
||||
interface OtpFormProps {
|
||||
phone?: string;
|
||||
initialCode?: string;
|
||||
onSubmit?: (otp: string) => void;
|
||||
isLoading?: boolean;
|
||||
error?: string;
|
||||
onResendPress?: () => void;
|
||||
resendTimer: number;
|
||||
}
|
||||
|
||||
const RegisterConfirmForm = ({
|
||||
initialCode,
|
||||
onSubmit,
|
||||
isLoading = false,
|
||||
error,
|
||||
onResendPress,
|
||||
resendTimer,
|
||||
}: OtpFormProps) => {
|
||||
const [otp, setOtp] = useState<string[]>(Array(4).fill(''));
|
||||
const [focusedIndex, setFocusedIndex] = useState<number>(0);
|
||||
const inputRefs = useRef<TextInput[]>([]);
|
||||
const shakeAnimation = useRef(new Animated.Value(0)).current;
|
||||
const { t } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
if (error) {
|
||||
Animated.sequence([
|
||||
Animated.timing(shakeAnimation, { toValue: 10, duration: 50, useNativeDriver: true }),
|
||||
Animated.timing(shakeAnimation, { toValue: -10, duration: 50, useNativeDriver: true }),
|
||||
Animated.timing(shakeAnimation, { toValue: 10, duration: 50, useNativeDriver: true }),
|
||||
Animated.timing(shakeAnimation, { toValue: 0, duration: 50, useNativeDriver: true }),
|
||||
]).start();
|
||||
}
|
||||
}, [error]);
|
||||
|
||||
useEffect(() => {
|
||||
if (initialCode && initialCode.length === 4 && /^\d{4}$/.test(initialCode)) {
|
||||
setOtp(initialCode.split(''));
|
||||
}
|
||||
}, [initialCode]);
|
||||
|
||||
// Raqam kiritilganda yoki o'chirilganda
|
||||
const handleChange = (value: string, index: number) => {
|
||||
const cleanValue = value.replace(/[^0-9]/g, '');
|
||||
const newOtp = [...otp];
|
||||
|
||||
// Agar qiymat bo'sh bo'lsa (o'chirilgan bo'lsa)
|
||||
if (value === '') {
|
||||
newOtp[index] = '';
|
||||
setOtp(newOtp);
|
||||
return;
|
||||
}
|
||||
|
||||
// Faqat oxirgi kiritilgan raqamni olish
|
||||
newOtp[index] = cleanValue.slice(-1);
|
||||
setOtp(newOtp);
|
||||
|
||||
// Keyingi katakka o'tish
|
||||
if (newOtp[index] !== '' && index < 3) {
|
||||
inputRefs.current[index + 1]?.focus();
|
||||
}
|
||||
|
||||
// Hamma raqam kiritilgan bo'lsa avtomat yuborish
|
||||
const fullCode = newOtp.join('');
|
||||
if (fullCode.length === 4) {
|
||||
Keyboard.dismiss();
|
||||
onSubmit?.(fullCode);
|
||||
}
|
||||
};
|
||||
|
||||
// Maxsus tugmalar (Backspace) uchun
|
||||
const handleKeyPress = ({ nativeEvent }: any, index: number) => {
|
||||
if (nativeEvent.key === 'Backspace') {
|
||||
// Agar katakda raqam bo'lsa, uni o'chiradi
|
||||
if (otp[index] !== '') {
|
||||
const newOtp = [...otp];
|
||||
newOtp[index] = '';
|
||||
setOtp(newOtp);
|
||||
}
|
||||
// Agar katak bo'sh bo'lsa, oldingisiga o'tib uni ham o'chiradi
|
||||
else if (index > 0) {
|
||||
const newOtp = [...otp];
|
||||
newOtp[index - 1] = '';
|
||||
setOtp(newOtp);
|
||||
inputRefs.current[index - 1]?.focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Animated.View style={[styles.otpContainer, { transform: [{ translateX: shakeAnimation }] }]}>
|
||||
{otp.map((digit, index) => (
|
||||
<TouchableOpacity
|
||||
key={index}
|
||||
activeOpacity={1}
|
||||
onPress={() => inputRefs.current[index]?.focus()}
|
||||
style={[
|
||||
styles.inputBox,
|
||||
focusedIndex === index && styles.inputBoxFocused,
|
||||
digit !== '' && styles.inputBoxFilled,
|
||||
error ? styles.inputBoxError : null,
|
||||
]}
|
||||
>
|
||||
<Text style={[styles.inputText, digit === '' && styles.placeholderText]}>
|
||||
{digit || '•'}
|
||||
</Text>
|
||||
|
||||
<TextInput
|
||||
ref={(ref) => {
|
||||
if (ref) inputRefs.current[index] = ref;
|
||||
}}
|
||||
value={digit}
|
||||
onChangeText={(v) => handleChange(v, index)}
|
||||
onKeyPress={(e) => handleKeyPress(e, index)}
|
||||
onFocus={() => setFocusedIndex(index)}
|
||||
onBlur={() => setFocusedIndex(-1)}
|
||||
keyboardType="number-pad"
|
||||
maxLength={1}
|
||||
style={styles.hiddenInput}
|
||||
caretHidden
|
||||
selectTextOnFocus // Bu 2 marta bosish muammosini oldini olishga yordam beradi
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</Animated.View>
|
||||
|
||||
{error && <Text style={styles.errorText}>{error}</Text>}
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={() => onSubmit?.(otp.join(''))}
|
||||
disabled={isLoading || otp.join('').length !== 4}
|
||||
activeOpacity={0.8}
|
||||
style={[
|
||||
styles.submitButton,
|
||||
(isLoading || otp.join('').length !== 4) && styles.submitButtonDisabled,
|
||||
]}
|
||||
>
|
||||
{isLoading ? (
|
||||
<ActivityIndicator color="#fff" size="small" />
|
||||
) : (
|
||||
<Text style={styles.submitText}>{t('Kodni tasdiqlash')}</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
||||
<View style={styles.resendContainer}>
|
||||
{resendTimer > 0 ? (
|
||||
<Text style={styles.timerText}>
|
||||
{t('Qayta yuborish vaqti')}:<Text style={styles.timerCount}>{resendTimer}s</Text>
|
||||
</Text>
|
||||
) : (
|
||||
<TouchableOpacity onPress={onResendPress} style={styles.resendButton}>
|
||||
<Text style={styles.resendText}>{t('Kodni qayta yuborish')}</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { width: '100%', paddingVertical: 10 },
|
||||
otpContainer: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 20,
|
||||
paddingHorizontal: 5,
|
||||
},
|
||||
inputBox: {
|
||||
width: 60,
|
||||
height: 65,
|
||||
borderRadius: 16,
|
||||
borderWidth: 1.5,
|
||||
borderColor: '#E2E8F0',
|
||||
backgroundColor: '#F8FAFC',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
elevation: 1,
|
||||
},
|
||||
inputBoxFocused: {
|
||||
borderColor: '#3B82F6',
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderWidth: 2,
|
||||
elevation: 4,
|
||||
},
|
||||
inputBoxFilled: {
|
||||
borderColor: '#3B82F6',
|
||||
backgroundColor: '#FFFFFF',
|
||||
},
|
||||
inputBoxError: {
|
||||
borderColor: '#EF4444',
|
||||
backgroundColor: '#FFF1F2',
|
||||
},
|
||||
inputText: { fontSize: 26, fontWeight: '700', color: '#1E293B' },
|
||||
placeholderText: { color: '#CBD5E1', fontSize: 18 },
|
||||
hiddenInput: { position: 'absolute', width: '100%', height: '100%', opacity: 0 },
|
||||
errorText: {
|
||||
color: '#EF4444',
|
||||
fontSize: 14,
|
||||
textAlign: 'center',
|
||||
marginBottom: 20,
|
||||
fontWeight: '500',
|
||||
},
|
||||
submitButton: {
|
||||
height: 56,
|
||||
backgroundColor: '#3B82F6',
|
||||
borderRadius: 16,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
elevation: 3,
|
||||
},
|
||||
submitButtonDisabled: { backgroundColor: '#94A3B8', elevation: 0 },
|
||||
submitText: { color: '#FFFFFF', fontSize: 16, fontWeight: '600' },
|
||||
resendContainer: { alignItems: 'center', marginTop: 25 },
|
||||
timerText: { color: '#64748B', fontSize: 14 },
|
||||
timerCount: { color: '#1E293B', fontWeight: '700' },
|
||||
resendButton: { paddingVertical: 5 },
|
||||
resendText: {
|
||||
color: '#3B82F6',
|
||||
fontSize: 15,
|
||||
fontWeight: '600',
|
||||
textDecorationLine: 'underline',
|
||||
},
|
||||
});
|
||||
|
||||
export default RegisterConfirmForm;
|
||||
324
screens/auth/register-confirm/ConfirmScreen.tsx
Normal file
324
screens/auth/register-confirm/ConfirmScreen.tsx
Normal file
@@ -0,0 +1,324 @@
|
||||
import { useAuth } from '@/components/AuthProvider';
|
||||
import AuthHeader from '@/components/ui/AuthHeader';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import * as Haptics from 'expo-haptics';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { Redirect, useRouter } from 'expo-router';
|
||||
import { ArrowLeft, MessageCircle, ShieldCheck } from 'lucide-react-native';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Alert,
|
||||
Linking,
|
||||
Platform,
|
||||
StyleSheet,
|
||||
Text,
|
||||
ToastAndroid,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { auth_api } from '../login/lib/api';
|
||||
import ConfirmForm from './ConfirmForm';
|
||||
|
||||
const RegisterConfirmScreen = () => {
|
||||
const router = useRouter();
|
||||
const [phoneOTP, setPhone] = useState<string | null>('');
|
||||
const [error, setError] = useState<string>('');
|
||||
const { login } = useAuth();
|
||||
|
||||
const [resendTimer, setResendTimer] = useState<number>(60);
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
const loadPhone = async () => {
|
||||
try {
|
||||
const storedPhone = await AsyncStorage.getItem('phone');
|
||||
if (storedPhone) setPhone(storedPhone);
|
||||
else setPhone(null);
|
||||
} catch (error) {
|
||||
console.log('AsyncStorage error:', error);
|
||||
}
|
||||
};
|
||||
loadPhone();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (resendTimer === 0) return;
|
||||
const timer = setTimeout(() => {
|
||||
setResendTimer((prev) => prev - 1);
|
||||
}, 1000);
|
||||
return () => clearTimeout(timer);
|
||||
}, [resendTimer]);
|
||||
|
||||
const { mutate, isPending } = useMutation({
|
||||
mutationFn: (body: { code: string; phone: string }) => auth_api.register_confirm(body),
|
||||
onSuccess: async (res) => {
|
||||
await AsyncStorage.removeItem('phone');
|
||||
await AsyncStorage.setItem('access_token', res.data.data.token.access);
|
||||
await AsyncStorage.setItem('refresh_token', res.data.data.token.refresh);
|
||||
await login(res.data.data.token.access);
|
||||
router.replace('/(dashboard)');
|
||||
},
|
||||
onError: (err: any) => {
|
||||
const errorMessage = err?.response?.data?.data?.detail || t("Kod noto'g'ri kiritildi");
|
||||
Alert.alert(t('Xatolik yuz berdi'), errorMessage);
|
||||
setError(errorMessage);
|
||||
},
|
||||
});
|
||||
|
||||
const resendMutation = useMutation({
|
||||
mutationFn: async (body: { phone: string }) => auth_api.register_resend(body),
|
||||
onSuccess: () => {
|
||||
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
|
||||
setResendTimer(60);
|
||||
if (Platform.OS === 'android') {
|
||||
ToastAndroid.show(t('Kod qayta yuborildi'), ToastAndroid.SHORT);
|
||||
}
|
||||
},
|
||||
onError: () => {
|
||||
Alert.alert(t('Xatolik yuz berdi'), t('Kodni qayta yuborishda xatolik yuz berdi'));
|
||||
},
|
||||
});
|
||||
|
||||
const openBotLink = () => {
|
||||
const linkApp = `tg://resolve?domain=infotargetbot&start=register_${phoneOTP}`;
|
||||
Linking.openURL(linkApp).catch(() => {
|
||||
const webLink = `https://t.me/infotargetbot?start=register_${phoneOTP}`;
|
||||
Linking.openURL(webLink);
|
||||
});
|
||||
};
|
||||
|
||||
if (phoneOTP === null) {
|
||||
return <Redirect href={'/'} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<LinearGradient
|
||||
colors={['#0f172a', '#1e293b', '#334155']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
|
||||
<View style={styles.decorCircle1} />
|
||||
<View style={styles.decorCircle2} />
|
||||
<AuthHeader />
|
||||
<SafeAreaView style={{ flex: 1 }}>
|
||||
<KeyboardAwareScrollView
|
||||
contentContainerStyle={styles.scrollContent}
|
||||
showsVerticalScrollIndicator={false}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
>
|
||||
<View style={styles.header}>
|
||||
<View style={styles.iconContainer}>
|
||||
<LinearGradient colors={['#3b82f6', '#2563eb']} style={styles.iconGradient}>
|
||||
<ShieldCheck size={32} color="#ffffff" strokeWidth={2.2} />
|
||||
</LinearGradient>
|
||||
</View>
|
||||
|
||||
<Text style={styles.title}>{t('Kodni tasdiqlash')}</Text>
|
||||
<Text style={styles.subtitle}>
|
||||
{t("Tasdiqlash kodi sizning Telegram botingizga yuboriladi. Botni ko'rish")}
|
||||
</Text>
|
||||
|
||||
<View style={styles.phoneBadge}>
|
||||
<Text style={styles.phoneText}>+998 {phoneOTP}</Text>
|
||||
</View>
|
||||
|
||||
{/* Telegram Button */}
|
||||
<TouchableOpacity
|
||||
style={styles.telegramBanner}
|
||||
onPress={openBotLink}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={['#0088cc', '#00a2ed']}
|
||||
style={styles.telegramGradient}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 0 }}
|
||||
>
|
||||
<View style={styles.botIconCircle}>
|
||||
<MessageCircle size={20} color="#0088cc" fill="#fff" />
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.telegramTitle}>{t('Botni ochish')}</Text>
|
||||
<Text style={styles.telegramSub}>
|
||||
{t('Telegram botni ochish uchun tugmani bosing va kodni oling')}
|
||||
</Text>
|
||||
</View>
|
||||
<ArrowLeft size={20} color="#fff" style={{ transform: [{ rotate: '180deg' }] }} />
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={styles.card}>
|
||||
<ConfirmForm
|
||||
onSubmit={(otp) => mutate({ code: otp, phone: `998${phoneOTP}` || '' })}
|
||||
isLoading={isPending}
|
||||
error={error}
|
||||
onResendPress={() => resendMutation.mutate({ phone: `998${phoneOTP}` || '' })}
|
||||
resendTimer={resendTimer}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* <View style={styles.infoBox}>
|
||||
<Text style={styles.infoText}>
|
||||
<Text style={{ fontWeight: '700' }}>Eslatma:</Text> Kod SMS orqali kelmaydi. Agar
|
||||
botni ishga tushirmagan bo'lsangiz, yuqoridagi tugmani bosing.
|
||||
</Text>
|
||||
</View> */}
|
||||
</KeyboardAwareScrollView>
|
||||
</SafeAreaView>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: '#0f172a' },
|
||||
scrollContent: {
|
||||
paddingHorizontal: 24,
|
||||
paddingBottom: 40,
|
||||
flexGrow: 1,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
languageHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: 24,
|
||||
paddingVertical: 12,
|
||||
zIndex: 1000,
|
||||
},
|
||||
backButton: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
borderRadius: 12,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.15)',
|
||||
},
|
||||
languageButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.15)',
|
||||
},
|
||||
languageText: { fontSize: 14, fontWeight: '600', color: '#94a3b8' },
|
||||
header: { alignItems: 'center', marginBottom: 24 },
|
||||
iconContainer: { marginBottom: 20 },
|
||||
iconGradient: {
|
||||
width: 72,
|
||||
height: 72,
|
||||
borderRadius: 22,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
elevation: 8,
|
||||
shadowColor: '#3b82f6',
|
||||
shadowOpacity: 0.4,
|
||||
shadowRadius: 12,
|
||||
},
|
||||
title: { fontSize: 28, fontWeight: '800', color: '#ffffff', marginBottom: 8 },
|
||||
subtitle: {
|
||||
fontSize: 15,
|
||||
color: '#94a3b8',
|
||||
textAlign: 'center',
|
||||
lineHeight: 22,
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
highlightText: { color: '#38bdf8', fontWeight: '700' },
|
||||
phoneBadge: {
|
||||
marginTop: 16,
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(59, 130, 246, 0.2)',
|
||||
},
|
||||
phoneText: { color: '#60a5fa', fontWeight: '700', fontSize: 16 },
|
||||
telegramBanner: {
|
||||
marginTop: 24,
|
||||
width: '100%',
|
||||
borderRadius: 18,
|
||||
overflow: 'hidden',
|
||||
elevation: 6,
|
||||
shadowColor: '#0088cc',
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 10,
|
||||
},
|
||||
telegramGradient: { flexDirection: 'row', alignItems: 'center', padding: 14, gap: 12 },
|
||||
botIconCircle: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
backgroundColor: '#fff',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
telegramTitle: { color: '#ffffff', fontSize: 16, fontWeight: '700' },
|
||||
telegramSub: { color: 'rgba(255, 255, 255, 0.8)', fontSize: 12 },
|
||||
card: {
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: 28,
|
||||
padding: 24,
|
||||
elevation: 10,
|
||||
shadowColor: '#000',
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 15,
|
||||
},
|
||||
infoBox: {
|
||||
marginTop: 20,
|
||||
padding: 16,
|
||||
backgroundColor: 'rgba(245, 158, 11, 0.08)',
|
||||
borderRadius: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(245, 158, 11, 0.2)',
|
||||
},
|
||||
infoText: { fontSize: 13, color: '#fbbf24', textAlign: 'center', lineHeight: 20 },
|
||||
dropdown: {
|
||||
position: 'absolute',
|
||||
top: 55,
|
||||
right: 0,
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 16,
|
||||
padding: 8,
|
||||
minWidth: 170,
|
||||
elevation: 10,
|
||||
zIndex: 2000,
|
||||
},
|
||||
dropdownOption: { padding: 12, borderRadius: 10 },
|
||||
dropdownOptionActive: { backgroundColor: '#eff6ff' },
|
||||
dropdownOptionText: { fontSize: 14, color: '#475569', fontWeight: '600' },
|
||||
dropdownOptionTextActive: { color: '#3b82f6' },
|
||||
decorCircle1: {
|
||||
position: 'absolute',
|
||||
top: -100,
|
||||
right: -80,
|
||||
width: 300,
|
||||
height: 300,
|
||||
borderRadius: 150,
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
||||
},
|
||||
decorCircle2: {
|
||||
position: 'absolute',
|
||||
bottom: -50,
|
||||
left: -100,
|
||||
width: 250,
|
||||
height: 250,
|
||||
borderRadius: 125,
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.05)',
|
||||
},
|
||||
});
|
||||
|
||||
export default RegisterConfirmScreen;
|
||||
103
screens/auth/register/RegisterCategorySelection.tsx
Normal file
103
screens/auth/register/RegisterCategorySelection.tsx
Normal file
@@ -0,0 +1,103 @@
|
||||
// app/auth/register/category.tsx
|
||||
import { auth_api } from '@/screens/auth/login/lib/api';
|
||||
import { products_api } from '@/screens/home/lib/api';
|
||||
import { useMutation, useQuery } from '@tanstack/react-query';
|
||||
import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
|
||||
import { Check } from 'lucide-react-native';
|
||||
import React from 'react';
|
||||
import { ScrollView, StyleSheet, Text, TouchableOpacity } from 'react-native';
|
||||
|
||||
export default function CategorySelectScreen() {
|
||||
const router = useRouter();
|
||||
const { phone, stir, person_type } = useLocalSearchParams<{
|
||||
phone: string;
|
||||
stir: string;
|
||||
person_type: 'band' | 'ytt';
|
||||
}>();
|
||||
|
||||
const [selected, setSelected] = React.useState<number | null>(null);
|
||||
|
||||
const { data } = useQuery({
|
||||
queryKey: ['categories'],
|
||||
queryFn: () => products_api.getCategorys(),
|
||||
});
|
||||
|
||||
const { mutate, isPending } = useMutation({
|
||||
mutationFn: (body: {
|
||||
phone: string;
|
||||
stir: string;
|
||||
person_type: string;
|
||||
activate_types: number[];
|
||||
}) => auth_api.register(body),
|
||||
onSuccess: () => router.replace('/'),
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack.Screen options={{ title: 'Yo‘nalishni tanlang' }} />
|
||||
|
||||
<ScrollView contentContainerStyle={styles.container}>
|
||||
{data?.data?.data.map((c: any) => {
|
||||
const active = selected === c.id;
|
||||
return (
|
||||
<TouchableOpacity key={c.id} style={styles.item} onPress={() => setSelected(c.id)}>
|
||||
<Text style={styles.text}>{c.name}</Text>
|
||||
{active && <Check size={20} color="#2563eb" />}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</ScrollView>
|
||||
|
||||
<TouchableOpacity
|
||||
disabled={!selected || isPending}
|
||||
style={[styles.bottom, (!selected || isPending) && { opacity: 0.5 }]}
|
||||
onPress={() => {
|
||||
if (phone && stir && person_type && selected) {
|
||||
mutate({
|
||||
activate_types: [selected],
|
||||
person_type: person_type,
|
||||
phone: `998${phone}`,
|
||||
stir: stir,
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Text style={styles.bottomText}>{isPending ? 'Yuborilmoqda...' : 'Tasdiqlash'}</Text>
|
||||
</TouchableOpacity>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
padding: 16,
|
||||
paddingBottom: 120,
|
||||
},
|
||||
item: {
|
||||
paddingVertical: 18,
|
||||
borderBottomWidth: 1,
|
||||
borderColor: '#e2e8f0',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
text: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
},
|
||||
bottom: {
|
||||
position: 'absolute',
|
||||
bottom: 20,
|
||||
left: 16,
|
||||
right: 16,
|
||||
height: 54,
|
||||
borderRadius: 16,
|
||||
backgroundColor: '#2563eb',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
bottomText: {
|
||||
color: '#fff',
|
||||
fontWeight: '800',
|
||||
fontSize: 16,
|
||||
},
|
||||
});
|
||||
206
screens/auth/register/RegisterForm.tsx
Normal file
206
screens/auth/register/RegisterForm.tsx
Normal file
@@ -0,0 +1,206 @@
|
||||
import { formatPhone, normalizeDigits } from '@/constants/formatPhone';
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { Hash } from 'lucide-react-native';
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
KeyboardAvoidingView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import { auth_api } from '../login/lib/api';
|
||||
import PhonePrefix from '../login/ui/PhonePrefix';
|
||||
import { UseLoginForm } from '../login/ui/UseLoginForm';
|
||||
|
||||
export default function RegisterForm() {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation();
|
||||
const { phone, setPhone } = UseLoginForm();
|
||||
|
||||
const [stir, setStir] = useState('');
|
||||
const [info, setInfo] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const [directorTinInput, setDirectorTinInput] = useState('');
|
||||
|
||||
const { mutate } = useMutation({
|
||||
mutationFn: (stir: string) => auth_api.get_info(stir),
|
||||
onSuccess: (res) => {
|
||||
setInfo(res.data);
|
||||
setLoading(false);
|
||||
},
|
||||
onError: () => {
|
||||
setInfo(null);
|
||||
setLoading(false);
|
||||
},
|
||||
});
|
||||
|
||||
const hasDirectorTin = info?.directorTin && String(info.directorTin).length > 0;
|
||||
|
||||
const isDirectorTinValid = !hasDirectorTin || directorTinInput === String(info.directorTin);
|
||||
const hasValidName = Boolean(info?.name || info?.fullName);
|
||||
|
||||
const valid =
|
||||
phone.length === 9 &&
|
||||
(stir.length === 9 || stir.length === 14) &&
|
||||
info &&
|
||||
hasValidName &&
|
||||
isDirectorTinValid;
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView behavior="position">
|
||||
<View style={{ gap: 16 }}>
|
||||
{/* STIR */}
|
||||
<View>
|
||||
<Text style={styles.label}>{t('STIR')}</Text>
|
||||
<View style={styles.input}>
|
||||
<Hash size={18} color="#94a3b8" />
|
||||
<TextInput
|
||||
value={stir}
|
||||
keyboardType="numeric"
|
||||
placeholder={t('STIR')}
|
||||
placeholderTextColor="#94a3b8"
|
||||
style={{ flex: 1 }}
|
||||
onChangeText={(text) => {
|
||||
const v = normalizeDigits(text).slice(0, 14);
|
||||
setStir(v);
|
||||
|
||||
if (v.length === 9 || v.length === 14) {
|
||||
setLoading(true);
|
||||
mutate(v);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{loading && <ActivityIndicator size="small" />}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* PHONE */}
|
||||
<View>
|
||||
<Text style={styles.label}>{t('Telefon raqami')}</Text>
|
||||
<View style={styles.input}>
|
||||
<PhonePrefix focused={false} />
|
||||
<TextInput
|
||||
value={formatPhone(phone)}
|
||||
placeholder="90 123 45 67"
|
||||
placeholderTextColor="#94a3b8"
|
||||
keyboardType="phone-pad"
|
||||
style={{ flex: 1 }}
|
||||
onChangeText={(t) => setPhone(normalizeDigits(t))}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* DIRECTOR TIN */}
|
||||
{hasDirectorTin && (
|
||||
<View>
|
||||
<Text style={styles.label}>{t('Direktor STIR')}</Text>
|
||||
<View style={styles.input}>
|
||||
<Hash size={18} color="#94a3b8" />
|
||||
<TextInput
|
||||
value={directorTinInput}
|
||||
keyboardType="numeric"
|
||||
placeholder={t('Direktor STIR')}
|
||||
placeholderTextColor="#94a3b8"
|
||||
style={{ flex: 1 }}
|
||||
onChangeText={(t) => setDirectorTinInput(normalizeDigits(t))}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{directorTinInput.length > 0 && !isDirectorTinValid && (
|
||||
<Text style={styles.error}>{t('Direktor STIR noto‘g‘ri')}</Text>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* INFO */}
|
||||
{info &&
|
||||
(hasValidName ? (
|
||||
<Text style={styles.info}>{info.fullName || info.name}</Text>
|
||||
) : (
|
||||
<Text style={styles.notFound}>{t('Foydalanuvchi topilmadi')}</Text>
|
||||
))}
|
||||
|
||||
{/* BUTTON */}
|
||||
<TouchableOpacity
|
||||
disabled={!valid}
|
||||
style={[styles.btn, !valid && styles.disabled]}
|
||||
onPress={() =>
|
||||
router.push({
|
||||
pathname: '/(auth)/select-category',
|
||||
params: {
|
||||
phone,
|
||||
company_name: info?.fullname,
|
||||
address: info?.fullAddress,
|
||||
director_full_name: info?.director,
|
||||
stir,
|
||||
person_type: stir.length === 9 ? 'legal_entity' : info?.company ? 'ytt' : 'band',
|
||||
},
|
||||
})
|
||||
}
|
||||
>
|
||||
<Text style={styles.btnText}>{t('Davom etish')}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
label: {
|
||||
fontWeight: '700',
|
||||
color: '#475569',
|
||||
},
|
||||
notFound: {
|
||||
backgroundColor: '#fef2f2',
|
||||
padding: 12,
|
||||
borderRadius: 12,
|
||||
fontWeight: '700',
|
||||
color: '#dc2626',
|
||||
borderWidth: 1,
|
||||
borderColor: '#fecaca',
|
||||
},
|
||||
input: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#f8fafc',
|
||||
borderRadius: 12,
|
||||
paddingHorizontal: 12,
|
||||
height: 50,
|
||||
borderWidth: 1,
|
||||
borderColor: '#e2e8f0',
|
||||
gap: 8,
|
||||
},
|
||||
info: {
|
||||
backgroundColor: '#f1f5f9',
|
||||
padding: 12,
|
||||
borderRadius: 12,
|
||||
fontWeight: '700',
|
||||
},
|
||||
btn: {
|
||||
height: 52,
|
||||
backgroundColor: '#2563eb',
|
||||
borderRadius: 16,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
disabled: {
|
||||
opacity: 0.5,
|
||||
},
|
||||
btnText: {
|
||||
color: '#fff',
|
||||
fontWeight: '800',
|
||||
fontSize: 16,
|
||||
},
|
||||
error: {
|
||||
color: '#dc2626',
|
||||
fontSize: 12,
|
||||
marginTop: 4,
|
||||
fontWeight: '600',
|
||||
},
|
||||
});
|
||||
222
screens/auth/register/RegisterScreen.tsx
Normal file
222
screens/auth/register/RegisterScreen.tsx
Normal file
@@ -0,0 +1,222 @@
|
||||
import AuthHeader from '@/components/ui/AuthHeader';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { UserPlus } from 'lucide-react-native';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import RegisterForm from './RegisterForm';
|
||||
|
||||
export default function RegisterScreen() {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
{/* Background Decorations */}
|
||||
<LinearGradient
|
||||
colors={['#0f172a', '#1e293b', '#334155']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
<View style={styles.decorCircle1} />
|
||||
<View style={styles.decorCircle2} />
|
||||
|
||||
<AuthHeader />
|
||||
<SafeAreaView style={{ flex: 1 }}>
|
||||
<ScrollView
|
||||
contentContainerStyle={styles.scrollContent}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* Header Section */}
|
||||
<View style={styles.header}>
|
||||
<View style={styles.iconContainer}>
|
||||
<LinearGradient
|
||||
colors={['#10b981', '#059669']}
|
||||
style={styles.iconGradient}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
>
|
||||
<UserPlus size={32} color="#ffffff" />
|
||||
</LinearGradient>
|
||||
</View>
|
||||
<Text style={styles.title}>{t("Ro'yxatdan o'tish")}</Text>
|
||||
<Text style={styles.subtitle}>
|
||||
{t('Tizimdan foydalanish uchun STIR raqami yoki JSHSHR kiritishingiz kerak.')}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Form Card */}
|
||||
<View style={styles.card}>
|
||||
<RegisterForm />
|
||||
</View>
|
||||
|
||||
{/* Footer */}
|
||||
<View style={styles.footer}>
|
||||
<TouchableOpacity onPress={() => router.push('/')}>
|
||||
<Text style={styles.footerText}>
|
||||
{t('Hisobingiz bormi?')} <Text style={styles.footerLink}>{t('Kirish')}</Text>
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: '#0f172a' },
|
||||
|
||||
// Header Navigatsiya qismi (LoginScreen kabi)
|
||||
languageHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 24,
|
||||
paddingVertical: 12,
|
||||
zIndex: 1000,
|
||||
},
|
||||
backButton: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
borderRadius: 12,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.15)',
|
||||
},
|
||||
languageButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.15)',
|
||||
},
|
||||
languageText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#94a3b8',
|
||||
},
|
||||
|
||||
// Scroll va Forma joylashuvi
|
||||
scrollContent: {
|
||||
flexGrow: 1,
|
||||
paddingHorizontal: 24,
|
||||
paddingBottom: 40,
|
||||
paddingTop: 10,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
|
||||
header: {
|
||||
alignItems: 'center',
|
||||
marginBottom: 32,
|
||||
},
|
||||
iconContainer: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
iconGradient: {
|
||||
width: 72,
|
||||
height: 72,
|
||||
borderRadius: 22,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
shadowColor: '#10b981',
|
||||
shadowOffset: { width: 0, height: 8 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 12,
|
||||
elevation: 8,
|
||||
},
|
||||
title: {
|
||||
fontSize: 28,
|
||||
fontWeight: '800',
|
||||
color: '#ffffff',
|
||||
marginBottom: 10,
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 15,
|
||||
color: '#94a3b8',
|
||||
textAlign: 'center',
|
||||
lineHeight: 22,
|
||||
paddingHorizontal: 10,
|
||||
},
|
||||
card: {
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: 28,
|
||||
padding: 24,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 10 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 20,
|
||||
elevation: 10,
|
||||
},
|
||||
|
||||
// Dropdown (LoginScreen bilan bir xil)
|
||||
dropdown: {
|
||||
position: 'absolute',
|
||||
top: 55,
|
||||
right: 0,
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: 16,
|
||||
padding: 8,
|
||||
minWidth: 180,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 10 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 20,
|
||||
elevation: 15,
|
||||
borderWidth: 1,
|
||||
borderColor: '#f1f5f9',
|
||||
},
|
||||
dropdownOption: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 16,
|
||||
borderRadius: 12,
|
||||
marginBottom: 4,
|
||||
},
|
||||
dropdownOptionActive: { backgroundColor: '#eff6ff' },
|
||||
dropdownOptionText: { fontSize: 14, fontWeight: '600', color: '#475569' },
|
||||
dropdownOptionTextActive: { color: '#3b82f6' },
|
||||
checkmark: {
|
||||
width: 22,
|
||||
height: 22,
|
||||
borderRadius: 11,
|
||||
backgroundColor: '#3b82f6',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
checkmarkText: { color: '#ffffff', fontSize: 12, fontWeight: 'bold' },
|
||||
|
||||
footer: { marginTop: 24, alignItems: 'center' },
|
||||
footerText: { color: '#94a3b8', fontSize: 14 },
|
||||
footerLink: { color: '#3b82f6', fontWeight: '700' },
|
||||
decorCircle1: {
|
||||
position: 'absolute',
|
||||
top: -150,
|
||||
right: -100,
|
||||
width: 400,
|
||||
height: 400,
|
||||
borderRadius: 200,
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
||||
},
|
||||
decorCircle2: {
|
||||
position: 'absolute',
|
||||
bottom: -100,
|
||||
left: -150,
|
||||
width: 350,
|
||||
height: 350,
|
||||
borderRadius: 175,
|
||||
backgroundColor: 'rgba(16, 185, 129, 0.08)',
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user