130 lines
4.1 KiB
TypeScript
130 lines
4.1 KiB
TypeScript
import React, { useState } from 'react';
|
|
import {
|
|
TextInput,
|
|
TouchableOpacity,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
ScrollView,
|
|
Alert,
|
|
} from 'react-native';
|
|
import { useRouter } from 'expo-router';
|
|
import { Text, View } from '@/components/Themed';
|
|
import { useAuth } from '@/lib/auth';
|
|
import { useColorScheme } from '@/components/useColorScheme';
|
|
import Colors from '@/constants/Colors';
|
|
|
|
export default function AuthScreen() {
|
|
|
|
const [isLogin, setIsLogin] = useState(true);
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [name, setName] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const { signIn, signUp } = useAuth();
|
|
const router = useRouter();
|
|
const colorScheme = useColorScheme();
|
|
const colors = Colors[colorScheme ?? 'light'];
|
|
|
|
const handleSubmit = async () => {
|
|
if (!email || !password) {
|
|
Alert.alert('Ошибка', 'Заполните все поля');
|
|
return;
|
|
}
|
|
|
|
if (!isLogin && !name) {
|
|
Alert.alert('Ошибка', 'Введите имя');
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
try {
|
|
if (isLogin) {
|
|
await signIn(email, password);
|
|
} else {
|
|
await signUp(email, password, name);
|
|
}
|
|
router.replace('/(tabs)');
|
|
} catch (error: any) {
|
|
Alert.alert('Ошибка', error.message || 'Произошла ошибка');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<KeyboardAvoidingView
|
|
className="flex-1"
|
|
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
|
>
|
|
<ScrollView
|
|
contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}
|
|
keyboardShouldPersistTaps="handled"
|
|
>
|
|
<View className="flex-1 p-5 justify-center">
|
|
<Text className='text-2xl font-bold mb-6 text-center text-black'>
|
|
{isLogin ? 'Вход' : 'Регистрация'}
|
|
</Text>
|
|
|
|
{!isLogin && (
|
|
<TextInput
|
|
className="h-12 border rounded-lg px-4 mb-4 text-base"
|
|
style={{ color: colors.text, borderColor: colors.tabIconDefault }}
|
|
placeholder="Имя"
|
|
placeholderTextColor={colors.tabIconDefault}
|
|
value={name}
|
|
onChangeText={setName}
|
|
autoCapitalize="words"
|
|
/>
|
|
)}
|
|
|
|
<TextInput
|
|
className="h-12 border rounded-lg px-4 mb-4 text-base"
|
|
style={{ color: colors.text, borderColor: colors.tabIconDefault }}
|
|
placeholder="Email"
|
|
placeholderTextColor={colors.tabIconDefault}
|
|
value={email}
|
|
onChangeText={setEmail}
|
|
keyboardType="email-address"
|
|
autoCapitalize="none"
|
|
autoComplete="email"
|
|
/>
|
|
|
|
<TextInput
|
|
className="h-12 border rounded-lg px-4 mb-4 text-base"
|
|
style={{ color: colors.text, borderColor: colors.tabIconDefault }}
|
|
placeholder="Пароль"
|
|
placeholderTextColor={colors.tabIconDefault}
|
|
value={password}
|
|
onChangeText={setPassword}
|
|
secureTextEntry
|
|
autoCapitalize="none"
|
|
/>
|
|
|
|
<TouchableOpacity
|
|
className="h-12 rounded-lg justify-center items-center mt-2"
|
|
style={{ backgroundColor: colors.tint }}
|
|
onPress={handleSubmit}
|
|
disabled={loading}
|
|
>
|
|
<Text className="text-base font-semibold" style={{ color: '#fff' }}>
|
|
{loading ? 'Загрузка...' : isLogin ? 'Войти' : 'Зарегистрироваться'}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
className="mt-5 items-center"
|
|
onPress={() => setIsLogin(!isLogin)}
|
|
>
|
|
<Text className="text-sm" style={{ color: colors.tint }}>
|
|
{isLogin
|
|
? 'Нет аккаунта? Зарегистрироваться'
|
|
: 'Уже есть аккаунт? Войти'}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</ScrollView>
|
|
</KeyboardAvoidingView>
|
|
);
|
|
}
|
|
|