update register page ui and api
This commit is contained in:
Samandar Turgunboyev
@@ -1,20 +1,112 @@
|
||||
import AuthHeader from '@/components/ui/AuthHeader';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { UserPlus } from 'lucide-react-native';
|
||||
import { Building2, ChevronRight, ShieldCheck, User } from 'lucide-react-native';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
import {
|
||||
Animated,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import RegisterForm from './RegisterForm';
|
||||
import { PersonType, useRegister } from './lib/useRegisterStore';
|
||||
|
||||
export default function RegisterScreen() {
|
||||
const PERSON_TYPES: {
|
||||
key: PersonType;
|
||||
label: string;
|
||||
description: string;
|
||||
icon: React.ReactNode;
|
||||
gradient: [string, string];
|
||||
}[] = [
|
||||
{
|
||||
key: 'yatt',
|
||||
label: 'YATT',
|
||||
description: "Yakka tartibdagi tadbirkor",
|
||||
icon: <User size={28} color="#fff" />,
|
||||
gradient: ['#10b981', '#059669'],
|
||||
},
|
||||
{
|
||||
key: 'band',
|
||||
label: "O'zini o'zi band qilgan",
|
||||
description: "O'z faoliyatini mustaqil yurituvchi",
|
||||
icon: <ShieldCheck size={28} color="#fff" />,
|
||||
gradient: ['#3b82f6', '#2563eb'],
|
||||
},
|
||||
{
|
||||
key: 'legal_entity',
|
||||
label: 'Yuridik shaxs',
|
||||
description: "Tashkilot yoki korxona",
|
||||
icon: <Building2 size={28} color="#fff" />,
|
||||
gradient: ['#f59e0b', '#d97706'],
|
||||
},
|
||||
];
|
||||
|
||||
function TypeCard({
|
||||
item,
|
||||
index,
|
||||
onPress,
|
||||
}: {
|
||||
item: (typeof PERSON_TYPES)[number];
|
||||
index: number;
|
||||
onPress: () => void;
|
||||
}) {
|
||||
const scale = React.useRef(new Animated.Value(1)).current;
|
||||
|
||||
const handlePressIn = () => {
|
||||
Animated.spring(scale, {
|
||||
toValue: 0.96,
|
||||
useNativeDriver: true,
|
||||
}).start();
|
||||
};
|
||||
|
||||
const handlePressOut = () => {
|
||||
Animated.spring(scale, {
|
||||
toValue: 1,
|
||||
friction: 4,
|
||||
useNativeDriver: true,
|
||||
}).start();
|
||||
};
|
||||
|
||||
return (
|
||||
<Animated.View style={{ transform: [{ scale }] }}>
|
||||
<TouchableOpacity
|
||||
style={styles.card}
|
||||
onPress={onPress}
|
||||
onPressIn={handlePressIn}
|
||||
onPressOut={handlePressOut}
|
||||
activeOpacity={1}
|
||||
testID={`person-type-${item.key}`}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={item.gradient}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.cardIcon}
|
||||
>
|
||||
{item.icon}
|
||||
</LinearGradient>
|
||||
<View style={styles.cardContent}>
|
||||
<Text style={styles.cardTitle}>{item.label}</Text>
|
||||
<Text style={styles.cardDescription}>{item.description}</Text>
|
||||
</View>
|
||||
<ChevronRight size={20} color="#94a3b8" />
|
||||
</TouchableOpacity>
|
||||
</Animated.View>
|
||||
);
|
||||
}
|
||||
|
||||
export default function PersonTypeScreen() {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation();
|
||||
const { setPersonType } = useRegister();
|
||||
|
||||
const handleSelect = (type: PersonType) => {
|
||||
setPersonType(type);
|
||||
router.push('/(auth)/register-form');
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
{/* Background Decorations */}
|
||||
<LinearGradient
|
||||
colors={['#0f172a', '#1e293b', '#334155']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
@@ -24,119 +116,54 @@ export default function RegisterScreen() {
|
||||
<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.')}
|
||||
<SafeAreaView style={styles.safeArea}>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.title}>Ro'yxatdan o'tish</Text>
|
||||
<Text style={styles.subtitle}>
|
||||
Faoliyat turingizni tanlang
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.cardList}>
|
||||
{PERSON_TYPES.map((item, index) => (
|
||||
<TypeCard
|
||||
key={item.key}
|
||||
item={item}
|
||||
index={index}
|
||||
onPress={() => handleSelect(item.key)}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<View style={styles.footer}>
|
||||
<TouchableOpacity onPress={() => router.back()} testID="go-to-login">
|
||||
<Text style={styles.footerText}>
|
||||
Hisobingiz bormi? <Text style={styles.footerLink}>Kirish</Text>
|
||||
</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>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: '#0f172a' },
|
||||
|
||||
// Header Navigatsiya qismi (LoginScreen kabi)
|
||||
languageHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#0f172a',
|
||||
},
|
||||
safeArea: {
|
||||
flex: 1,
|
||||
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,
|
||||
marginTop: 40,
|
||||
marginBottom: 36,
|
||||
},
|
||||
title: {
|
||||
fontSize: 28,
|
||||
fontWeight: '800',
|
||||
fontWeight: '800' as const,
|
||||
color: '#ffffff',
|
||||
marginBottom: 10,
|
||||
letterSpacing: 0.5,
|
||||
@@ -146,61 +173,54 @@ const styles = StyleSheet.create({
|
||||
color: '#94a3b8',
|
||||
textAlign: 'center',
|
||||
lineHeight: 22,
|
||||
paddingHorizontal: 10,
|
||||
},
|
||||
cardList: {
|
||||
gap: 14,
|
||||
},
|
||||
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,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.06)',
|
||||
borderRadius: 20,
|
||||
padding: 18,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||||
gap: 16,
|
||||
},
|
||||
dropdownOptionActive: { backgroundColor: '#eff6ff' },
|
||||
dropdownOptionText: { fontSize: 14, fontWeight: '600', color: '#475569' },
|
||||
dropdownOptionTextActive: { color: '#3b82f6' },
|
||||
checkmark: {
|
||||
width: 22,
|
||||
height: 22,
|
||||
borderRadius: 11,
|
||||
backgroundColor: '#3b82f6',
|
||||
cardIcon: {
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 16,
|
||||
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' },
|
||||
cardContent: {
|
||||
flex: 1,
|
||||
},
|
||||
cardTitle: {
|
||||
fontSize: 17,
|
||||
fontWeight: '700' as const,
|
||||
color: '#ffffff',
|
||||
marginBottom: 4,
|
||||
},
|
||||
cardDescription: {
|
||||
fontSize: 13,
|
||||
color: '#94a3b8',
|
||||
lineHeight: 18,
|
||||
},
|
||||
footer: {
|
||||
marginTop: 'auto' as const,
|
||||
paddingBottom: 20,
|
||||
alignItems: 'center',
|
||||
},
|
||||
footerText: {
|
||||
color: '#94a3b8',
|
||||
fontSize: 14,
|
||||
},
|
||||
footerLink: {
|
||||
color: '#3b82f6',
|
||||
fontWeight: '700' as const,
|
||||
},
|
||||
decorCircle1: {
|
||||
position: 'absolute',
|
||||
top: -150,
|
||||
|
||||
Reference in New Issue
Block a user