Antoni Nuñez Romeu
156 lines
3.8 KiB
TypeScript
156 lines
3.8 KiB
TypeScript
import React, { useState } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
StyleSheet,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
Alert
|
|
} from 'react-native';
|
|
import { useRouter } from 'expo-router';
|
|
import { useAuthStore } from '../../store/authStore';
|
|
import { colors, spacing, borderRadius } from '../../constants/theme';
|
|
|
|
export default function LoginScreen() {
|
|
const router = useRouter();
|
|
const { login } = useAuthStore();
|
|
const [username, setUsername] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const handleLogin = async () => {
|
|
if (!username || !password) {
|
|
Alert.alert('Error', 'Por favor ingresa usuario y contraseña');
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
try {
|
|
await login(username, password);
|
|
router.replace('/(tabs)');
|
|
} catch (error) {
|
|
Alert.alert('Error', 'Credenciales incorrectas');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<KeyboardAvoidingView
|
|
style={styles.container}
|
|
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
|
>
|
|
<View style={styles.form}>
|
|
<Text style={styles.title}>Iniciar Sesión</Text>
|
|
<Text style={styles.subtitle}>Ingresa tus credenciales para continuar</Text>
|
|
|
|
<View style={styles.inputContainer}>
|
|
<Text style={styles.label}>Usuario</Text>
|
|
<TextInput
|
|
style={styles.input}
|
|
value={username}
|
|
onChangeText={setUsername}
|
|
placeholder="Tu usuario"
|
|
placeholderTextColor={colors.textSecondary}
|
|
autoCapitalize="none"
|
|
autoCorrect={false}
|
|
/>
|
|
</View>
|
|
|
|
<View style={styles.inputContainer}>
|
|
<Text style={styles.label}>Contraseña</Text>
|
|
<TextInput
|
|
style={styles.input}
|
|
value={password}
|
|
onChangeText={setPassword}
|
|
placeholder="Tu contraseña"
|
|
placeholderTextColor={colors.textSecondary}
|
|
secureTextEntry
|
|
/>
|
|
</View>
|
|
|
|
<TouchableOpacity
|
|
style={[styles.button, isLoading && styles.buttonDisabled]}
|
|
onPress={handleLogin}
|
|
disabled={isLoading}
|
|
>
|
|
<Text style={styles.buttonText}>
|
|
{isLoading ? 'Ingresando...' : 'Iniciar Sesión'}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={styles.linkButton}
|
|
onPress={() => router.push('/auth/register')}
|
|
>
|
|
<Text style={styles.linkText}>¿No tienes cuenta? Regístrate</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: colors.background,
|
|
},
|
|
form: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
padding: spacing.xl,
|
|
},
|
|
title: {
|
|
fontSize: 28,
|
|
fontWeight: 'bold',
|
|
color: colors.text,
|
|
marginBottom: spacing.sm,
|
|
},
|
|
subtitle: {
|
|
fontSize: 16,
|
|
color: colors.textSecondary,
|
|
marginBottom: spacing.xl,
|
|
},
|
|
inputContainer: {
|
|
marginBottom: spacing.md,
|
|
},
|
|
label: {
|
|
fontSize: 14,
|
|
fontWeight: '500',
|
|
color: colors.text,
|
|
marginBottom: spacing.xs,
|
|
},
|
|
input: {
|
|
backgroundColor: colors.card,
|
|
borderRadius: borderRadius.md,
|
|
padding: spacing.md,
|
|
fontSize: 16,
|
|
color: colors.text,
|
|
},
|
|
button: {
|
|
backgroundColor: colors.primary,
|
|
borderRadius: borderRadius.md,
|
|
padding: spacing.md,
|
|
alignItems: 'center',
|
|
marginTop: spacing.md,
|
|
},
|
|
buttonDisabled: {
|
|
opacity: 0.6,
|
|
},
|
|
buttonText: {
|
|
color: colors.textInverse,
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
},
|
|
linkButton: {
|
|
marginTop: spacing.lg,
|
|
alignItems: 'center',
|
|
},
|
|
linkText: {
|
|
color: colors.primary,
|
|
fontSize: 14,
|
|
},
|
|
});
|