Fix Git merge conflict in LoginScreen.tsx - combined beautiful design with theme support
This commit is contained in:
Bivekich
@ -1,11 +1,6 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
<<<<<<< HEAD
|
||||
import { View, StyleSheet, KeyboardAvoidingView, Platform, ScrollView, Dimensions, TouchableOpacity } from 'react-native';
|
||||
import { TextInput, Button, Text, Headline, HelperText, Surface } from 'react-native-paper';
|
||||
=======
|
||||
import { View, StyleSheet, KeyboardAvoidingView, Platform, ScrollView, Dimensions } from 'react-native';
|
||||
import { TextInput, Button, Text, Headline, HelperText, useTheme } from 'react-native-paper';
|
||||
>>>>>>> a3ad9832ae1663e2a76b50c417d43bcb23a0e03a
|
||||
import { TextInput, Button, Text, Headline, HelperText, Surface, useTheme } from 'react-native-paper';
|
||||
import { useMutation } from '@apollo/client';
|
||||
import { LOGIN } from '../graphql/mutations';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
@ -95,8 +90,6 @@ export const LoginScreen = ({ navigation }: any) => {
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
|
||||
const handleButtonPressIn = () => {
|
||||
buttonScale.value = withSpring(0.95);
|
||||
};
|
||||
@ -106,7 +99,6 @@ export const LoginScreen = ({ navigation }: any) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<<<<<<< HEAD
|
||||
<BackgroundDesign variant="login">
|
||||
<KeyboardAvoidingView
|
||||
style={styles.container}
|
||||
@ -116,118 +108,6 @@ export const LoginScreen = ({ navigation }: any) => {
|
||||
<Animated.View
|
||||
style={[styles.content, cardAnimatedStyle]}
|
||||
entering={FadeInDown.duration(800).springify()}
|
||||
=======
|
||||
<KeyboardAvoidingView
|
||||
style={[styles.container, { backgroundColor: theme.colors.background }]}
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||
>
|
||||
<ScrollView contentContainerStyle={styles.scrollContent}>
|
||||
<Animated.View style={[styles.content, containerAnimatedStyle]}>
|
||||
<Animated.View style={[styles.glowContainer, glowContainerStyle]}>
|
||||
<Headline style={styles.title}>Вход в Prism</Headline>
|
||||
<Text style={styles.subtitle}>Добро пожаловать обратно</Text>
|
||||
</Animated.View>
|
||||
|
||||
<AnimatedView style={inputStyle1}>
|
||||
<TextInput
|
||||
label="Имя пользователя"
|
||||
value={username}
|
||||
onChangeText={setUsername}
|
||||
mode="outlined"
|
||||
style={styles.input}
|
||||
autoCapitalize="none"
|
||||
disabled={loading}
|
||||
theme={{
|
||||
colors: {
|
||||
primary: theme.colors.primary,
|
||||
placeholder: theme.colors.secondary,
|
||||
text: theme.colors.onSurface,
|
||||
background: theme.colors.surface,
|
||||
outline: theme.colors.outline,
|
||||
}
|
||||
}}
|
||||
onFocus={() => {
|
||||
inputFocusAnimation1.value = withSpring(1);
|
||||
}}
|
||||
onBlur={() => {
|
||||
inputFocusAnimation1.value = withSpring(0);
|
||||
}}
|
||||
/>
|
||||
</AnimatedView>
|
||||
|
||||
<AnimatedView style={inputStyle2}>
|
||||
<TextInput
|
||||
label="Пароль"
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
mode="outlined"
|
||||
style={styles.input}
|
||||
secureTextEntry={!showPassword}
|
||||
disabled={loading}
|
||||
theme={{
|
||||
colors: {
|
||||
primary: theme.colors.primary,
|
||||
placeholder: theme.colors.secondary,
|
||||
text: theme.colors.onSurface,
|
||||
background: theme.colors.surface,
|
||||
outline: theme.colors.outline,
|
||||
}
|
||||
}}
|
||||
right={
|
||||
<TextInput.Icon
|
||||
icon={showPassword ? 'eye-off' : 'eye'}
|
||||
onPress={() => setShowPassword(!showPassword)}
|
||||
color="#a855f7"
|
||||
/>
|
||||
}
|
||||
onFocus={() => {
|
||||
inputFocusAnimation2.value = withSpring(1);
|
||||
}}
|
||||
onBlur={() => {
|
||||
inputFocusAnimation2.value = withSpring(0);
|
||||
}}
|
||||
/>
|
||||
</AnimatedView>
|
||||
|
||||
{error && (
|
||||
<HelperText type="error" visible={true} style={styles.errorText}>
|
||||
{error.message}
|
||||
</HelperText>
|
||||
)}
|
||||
|
||||
<AnimatedView style={buttonAnimatedStyle}>
|
||||
<Button
|
||||
mode="contained"
|
||||
onPress={handleLogin}
|
||||
onPressIn={handleButtonPressIn}
|
||||
onPressOut={handleButtonPressOut}
|
||||
loading={loading}
|
||||
disabled={loading || !username || !password}
|
||||
style={styles.button}
|
||||
contentStyle={styles.buttonContent}
|
||||
labelStyle={styles.buttonLabel}
|
||||
theme={{
|
||||
colors: {
|
||||
primary: '#9333ea',
|
||||
}
|
||||
}}
|
||||
>
|
||||
Войти
|
||||
</Button>
|
||||
</AnimatedView>
|
||||
|
||||
<Button
|
||||
mode="text"
|
||||
onPress={() => navigation.navigate('Register')}
|
||||
disabled={loading}
|
||||
style={styles.linkButton}
|
||||
labelStyle={styles.linkButtonLabel}
|
||||
theme={{
|
||||
colors: {
|
||||
primary: '#a855f7',
|
||||
}
|
||||
}}
|
||||
>>>>>>> a3ad9832ae1663e2a76b50c417d43bcb23a0e03a
|
||||
>
|
||||
<Animated.View style={[styles.loginCard, glowStyle]}>
|
||||
<LinearGradient
|
||||
@ -242,68 +122,68 @@ export const LoginScreen = ({ navigation }: any) => {
|
||||
style={styles.headerContainer}
|
||||
>
|
||||
<View style={styles.logoContainer}>
|
||||
<View style={styles.logoPlaceholder}>
|
||||
<Text style={styles.logoText}>P</Text>
|
||||
<View style={[styles.logoPlaceholder, { backgroundColor: theme.colors.surfaceVariant }]}>
|
||||
<Text style={[styles.logoText, { color: theme.colors.onSurface }]}>P</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Headline style={styles.title}>PRISM</Headline>
|
||||
<Headline style={[styles.title, { color: theme.colors.onSurface }]}>PRISM</Headline>
|
||||
</Animated.View>
|
||||
|
||||
<Animated.View
|
||||
entering={FadeIn.delay(400).duration(600)}
|
||||
style={styles.formContainer}
|
||||
>
|
||||
<TextInput
|
||||
label="Имя пользователя"
|
||||
value={username}
|
||||
onChangeText={setUsername}
|
||||
mode="flat"
|
||||
style={styles.input}
|
||||
autoCapitalize="none"
|
||||
disabled={loading}
|
||||
underlineColor="transparent"
|
||||
activeUnderlineColor="#ffffff"
|
||||
theme={{
|
||||
colors: {
|
||||
primary: '#ffffff',
|
||||
placeholder: '#808080',
|
||||
text: '#ffffff',
|
||||
background: 'rgba(255,255,255,0.05)',
|
||||
outline: '#666666',
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Пароль"
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
mode="flat"
|
||||
style={styles.input}
|
||||
secureTextEntry={!showPassword}
|
||||
disabled={loading}
|
||||
underlineColor="transparent"
|
||||
activeUnderlineColor="#ffffff"
|
||||
theme={{
|
||||
colors: {
|
||||
primary: '#ffffff',
|
||||
placeholder: '#808080',
|
||||
text: '#ffffff',
|
||||
background: 'rgba(255,255,255,0.05)',
|
||||
outline: '#666666',
|
||||
}
|
||||
}}
|
||||
right={
|
||||
<TextInput.Icon
|
||||
icon={showPassword ? 'eye-off' : 'eye'}
|
||||
onPress={() => setShowPassword(!showPassword)}
|
||||
color="#808080"
|
||||
/>
|
||||
<TextInput
|
||||
label="Имя пользователя"
|
||||
value={username}
|
||||
onChangeText={setUsername}
|
||||
mode="flat"
|
||||
style={[styles.input, { backgroundColor: theme.colors.surfaceVariant }]}
|
||||
autoCapitalize="none"
|
||||
disabled={loading}
|
||||
underlineColor="transparent"
|
||||
activeUnderlineColor={theme.colors.primary}
|
||||
theme={{
|
||||
colors: {
|
||||
primary: theme.colors.primary,
|
||||
placeholder: theme.colors.onSurfaceVariant,
|
||||
text: theme.colors.onSurface,
|
||||
background: 'transparent',
|
||||
outline: theme.colors.outline,
|
||||
}
|
||||
/>
|
||||
}}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Пароль"
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
mode="flat"
|
||||
style={[styles.input, { backgroundColor: theme.colors.surfaceVariant }]}
|
||||
secureTextEntry={!showPassword}
|
||||
disabled={loading}
|
||||
underlineColor="transparent"
|
||||
activeUnderlineColor={theme.colors.primary}
|
||||
theme={{
|
||||
colors: {
|
||||
primary: theme.colors.primary,
|
||||
placeholder: theme.colors.onSurfaceVariant,
|
||||
text: theme.colors.onSurface,
|
||||
background: 'transparent',
|
||||
outline: theme.colors.outline,
|
||||
}
|
||||
}}
|
||||
right={
|
||||
<TextInput.Icon
|
||||
icon={showPassword ? 'eye-off' : 'eye'}
|
||||
onPress={() => setShowPassword(!showPassword)}
|
||||
color={theme.colors.onSurfaceVariant}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
{error && (
|
||||
<HelperText type="error" visible={true} style={styles.errorText}>
|
||||
<HelperText type="error" visible={true} style={[styles.errorText, { color: theme.colors.error }]}>
|
||||
{error.message}
|
||||
</HelperText>
|
||||
)}
|
||||
@ -317,7 +197,7 @@ export const LoginScreen = ({ navigation }: any) => {
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={['#ffffff', '#e6e6e6']}
|
||||
colors={[theme.colors.primary, theme.colors.primaryContainer]}
|
||||
style={[
|
||||
styles.gradientButton,
|
||||
(loading || !username || !password) && styles.disabledButton
|
||||
@ -325,7 +205,7 @@ export const LoginScreen = ({ navigation }: any) => {
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 0 }}
|
||||
>
|
||||
<Text style={styles.buttonText}>
|
||||
<Text style={[styles.buttonText, { color: theme.colors.onPrimary }]}>
|
||||
{loading ? 'ВХОД...' : 'ВОЙТИ'}
|
||||
</Text>
|
||||
</LinearGradient>
|
||||
@ -333,9 +213,9 @@ export const LoginScreen = ({ navigation }: any) => {
|
||||
</Animated.View>
|
||||
|
||||
<View style={styles.dividerContainer}>
|
||||
<View style={styles.divider} />
|
||||
<Text style={styles.dividerText}>ИЛИ</Text>
|
||||
<View style={styles.divider} />
|
||||
<View style={[styles.divider, { backgroundColor: theme.colors.outlineVariant }]} />
|
||||
<Text style={[styles.dividerText, { color: theme.colors.onSurfaceVariant }]}>ИЛИ</Text>
|
||||
<View style={[styles.divider, { backgroundColor: theme.colors.outlineVariant }]} />
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
@ -344,10 +224,10 @@ export const LoginScreen = ({ navigation }: any) => {
|
||||
style={styles.linkButton}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={styles.linkButtonText}>
|
||||
<Text style={[styles.linkButtonText, { color: theme.colors.onSurfaceVariant }]}>
|
||||
Нет аккаунта?
|
||||
</Text>
|
||||
<Text style={styles.linkButtonTextBold}>
|
||||
<Text style={[styles.linkButtonTextBold, { color: theme.colors.primary }]}>
|
||||
{' Создать'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
@ -381,7 +261,6 @@ const styles = StyleSheet.create({
|
||||
backgroundColor: 'rgba(26, 26, 26, 0.8)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||||
// backdropFilter: 'blur(10px)', // не поддерживается в React Native
|
||||
// iOS тени
|
||||
shadowColor: '#ffffff',
|
||||
shadowOffset: {
|
||||
@ -412,7 +291,6 @@ const styles = StyleSheet.create({
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 20,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderWidth: 2,
|
||||
@ -421,23 +299,18 @@ const styles = StyleSheet.create({
|
||||
logoText: {
|
||||
fontSize: 40,
|
||||
fontWeight: 'bold',
|
||||
color: '#ffffff',
|
||||
},
|
||||
title: {
|
||||
fontSize: 36,
|
||||
fontWeight: '300',
|
||||
color: '#ffffff',
|
||||
letterSpacing: 4,
|
||||
marginBottom: 8,
|
||||
},
|
||||
|
||||
formContainer: {
|
||||
width: '100%',
|
||||
},
|
||||
|
||||
input: {
|
||||
marginBottom: 20,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.05)',
|
||||
fontSize: 16,
|
||||
borderRadius: 12,
|
||||
paddingHorizontal: 16,
|
||||
@ -445,7 +318,6 @@ const styles = StyleSheet.create({
|
||||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||||
},
|
||||
errorText: {
|
||||
color: '#ff6b6b',
|
||||
textAlign: 'center',
|
||||
marginBottom: 16,
|
||||
fontSize: 14,
|
||||
@ -457,7 +329,7 @@ const styles = StyleSheet.create({
|
||||
alignItems: 'center',
|
||||
marginTop: 8,
|
||||
// iOS тени
|
||||
shadowColor: '#ffffff',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 4,
|
||||
@ -471,7 +343,6 @@ const styles = StyleSheet.create({
|
||||
opacity: 0.5,
|
||||
},
|
||||
buttonText: {
|
||||
color: '#000000',
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
letterSpacing: 2,
|
||||
@ -484,10 +355,8 @@ const styles = StyleSheet.create({
|
||||
divider: {
|
||||
flex: 1,
|
||||
height: 1,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
},
|
||||
dividerText: {
|
||||
color: '#666666',
|
||||
paddingHorizontal: 16,
|
||||
fontSize: 12,
|
||||
letterSpacing: 1,
|
||||
@ -499,11 +368,9 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
linkButtonText: {
|
||||
fontSize: 14,
|
||||
color: '#808080',
|
||||
},
|
||||
linkButtonTextBold: {
|
||||
fontSize: 14,
|
||||
color: '#ffffff',
|
||||
fontWeight: '600',
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user