283 lines
6.7 KiB
TypeScript
283 lines
6.7 KiB
TypeScript
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('/(auth)/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',
|
|
},
|
|
});
|