feat(mobile): improve login, profile, alerts screens and dark mode background
- Unify login/register into single screen with tab switcher, logo, and themed inputs - Redesign profile with header card, segmented theme toggle, icon-based menu, and bottom-sheet modals - Add auth guard to alerts screen showing login prompt instead of 401 error - Switch ImageBackground to explicit Image+View layering for reliable rendering - Add dark mode background image switching in root layout - Add dark mode override for recent-tag in PWA search view
This commit is contained in:
@@ -1,7 +1,9 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { View, Text, StyleSheet, FlatList, TouchableOpacity, Alert, useWindowDimensions } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { useThemeContext } from '../../components/ThemeProvider';
|
||||
import { useAuth } from '../../hooks/useAuth';
|
||||
import { spacing, borderRadius, shadows } from '../../constants/theme';
|
||||
import { LoadingSpinner } from '../../components/LoadingSpinner';
|
||||
import api from '../../services/api';
|
||||
@@ -20,17 +22,23 @@ interface NotificationItem {
|
||||
}
|
||||
|
||||
export default function AlertsScreen() {
|
||||
const router = useRouter();
|
||||
const { width } = useWindowDimensions();
|
||||
const isTablet = width >= TABLET_MIN_WIDTH;
|
||||
const { colors } = useThemeContext();
|
||||
const { isAuthenticated, isLoading: authLoading } = useAuth();
|
||||
const [items, setItems] = useState<NotificationItem[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [deletingId, setDeletingId] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadNotifications();
|
||||
}, []);
|
||||
if (!authLoading && isAuthenticated) {
|
||||
loadNotifications();
|
||||
} else if (!authLoading && !isAuthenticated) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [authLoading, isAuthenticated]);
|
||||
|
||||
async function loadNotifications() {
|
||||
setIsLoading(true);
|
||||
@@ -123,10 +131,28 @@ export default function AlertsScreen() {
|
||||
);
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
if (isLoading || authLoading) {
|
||||
return <LoadingSpinner message="Cargando notificaciones..." />;
|
||||
}
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return (
|
||||
<View style={[styles.container, styles.centered, { backgroundColor: colors.background }]}>
|
||||
<Ionicons name="lock-closed-outline" size={64} color={colors.border} />
|
||||
<Text style={[styles.loginTitle, { color: colors.text }]}>Inicia sesión para continuar</Text>
|
||||
<Text style={[styles.loginSubtitle, { color: colors.textSecondary }]}>
|
||||
Necesitas estar autenticado para ver tus notificaciones
|
||||
</Text>
|
||||
<TouchableOpacity
|
||||
style={[styles.loginButton, { backgroundColor: colors.primary }]}
|
||||
onPress={() => router.push('/auth/login')}
|
||||
>
|
||||
<Text style={[styles.loginButtonText, { color: colors.onPrimaryContainer }]}>Iniciar Sesión</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { backgroundColor: colors.background }]}>
|
||||
<View style={[styles.header, isTablet && styles.headerTablet]}>
|
||||
@@ -172,6 +198,32 @@ const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
centered: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingHorizontal: spacing.xl,
|
||||
gap: spacing.md,
|
||||
},
|
||||
loginTitle: {
|
||||
fontSize: 20,
|
||||
fontWeight: '600',
|
||||
textAlign: 'center',
|
||||
},
|
||||
loginSubtitle: {
|
||||
fontSize: 14,
|
||||
textAlign: 'center',
|
||||
lineHeight: 20,
|
||||
},
|
||||
loginButton: {
|
||||
paddingHorizontal: spacing.lg,
|
||||
paddingVertical: spacing.md,
|
||||
borderRadius: borderRadius.lg,
|
||||
marginTop: spacing.sm,
|
||||
},
|
||||
loginButtonText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
},
|
||||
header: {
|
||||
paddingHorizontal: spacing.lg,
|
||||
paddingTop: spacing.lg,
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,7 +1,7 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { Stack } from 'expo-router';
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import { ImageBackground, StyleSheet, View } from 'react-native';
|
||||
import { Image, StyleSheet, View } from 'react-native';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { GestureHandlerRootView } from 'react-native-gesture-handler';
|
||||
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
||||
@@ -11,6 +11,9 @@ import { ThemeProvider, useThemeContext } from '../components/ThemeProvider';
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
const bgLight = require('../assets/bg.png');
|
||||
const bgDark = require('../assets/bg_dark.png');
|
||||
|
||||
function RootLayoutInner() {
|
||||
const { checkAuth } = useAuthStore();
|
||||
const { colors, isDark } = useThemeContext();
|
||||
@@ -85,21 +88,23 @@ function ThemedBackground({ children }: { children: React.ReactNode }) {
|
||||
const { isDark } = useThemeContext();
|
||||
|
||||
return (
|
||||
<ImageBackground
|
||||
source={isDark ? require('../assets/bg_dark.png') : require('../assets/bg.png')}
|
||||
style={bgStyles.background}
|
||||
resizeMode="cover"
|
||||
imageStyle={bgStyles.backgroundImage}
|
||||
>
|
||||
<View style={[bgStyles.overlay, isDark && bgStyles.overlayDark]} />
|
||||
{children}
|
||||
</ImageBackground>
|
||||
<View style={styles.root}>
|
||||
<Image
|
||||
source={isDark ? bgDark : bgLight}
|
||||
style={styles.bgImage}
|
||||
resizeMode="cover"
|
||||
/>
|
||||
<View style={[styles.overlay, isDark && styles.overlayDark]} pointerEvents="none" />
|
||||
<View style={styles.content}>
|
||||
{children}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export default function RootLayout() {
|
||||
return (
|
||||
<GestureHandlerRootView style={{ flex: 1 }}>
|
||||
<GestureHandlerRootView style={styles.root}>
|
||||
<SafeAreaProvider>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<ThemeProvider>
|
||||
@@ -113,11 +118,12 @@ export default function RootLayout() {
|
||||
);
|
||||
}
|
||||
|
||||
const bgStyles = StyleSheet.create({
|
||||
background: {
|
||||
const styles = StyleSheet.create({
|
||||
root: {
|
||||
flex: 1,
|
||||
},
|
||||
backgroundImage: {
|
||||
bgImage: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
opacity: 0.55,
|
||||
},
|
||||
overlay: {
|
||||
@@ -127,4 +133,7 @@ const bgStyles = StyleSheet.create({
|
||||
overlayDark: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.25)',
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -7,34 +7,48 @@ import {
|
||||
StyleSheet,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
Alert
|
||||
Alert,
|
||||
Image,
|
||||
} from 'react-native';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
import { useThemeContext } from '../../components/ThemeProvider';
|
||||
import { spacing, borderRadius } from '../../constants/theme';
|
||||
import { register } from '../../services/auth';
|
||||
import { spacing, borderRadius, shadows } from '../../constants/theme';
|
||||
import {
|
||||
isBiometricsAvailable,
|
||||
authenticateWithBiometrics,
|
||||
saveBiometricCredentials,
|
||||
getBiometricUsername
|
||||
getBiometricUsername,
|
||||
} from '../../services/biometrics';
|
||||
|
||||
type Tab = 'login' | 'register';
|
||||
|
||||
export default function LoginScreen() {
|
||||
const router = useRouter();
|
||||
const { login } = useAuthStore();
|
||||
const { colors } = useThemeContext();
|
||||
const [tab, setTab] = useState<Tab>('login');
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [biometricsAvailable, setBiometricsAvailable] = useState(false);
|
||||
const [biometricUsername, setBiometricUsername] = useState<string | null>(null);
|
||||
|
||||
const isRegister = tab === 'register';
|
||||
|
||||
useEffect(() => {
|
||||
checkBiometrics();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setUsername('');
|
||||
setPassword('');
|
||||
setConfirmPassword('');
|
||||
}, [tab]);
|
||||
|
||||
const checkBiometrics = async () => {
|
||||
try {
|
||||
const available = await isBiometricsAvailable();
|
||||
@@ -48,21 +62,42 @@ export default function LoginScreen() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogin = async () => {
|
||||
if (!username || !password) {
|
||||
Alert.alert('Error', 'Por favor ingresa usuario y contraseña');
|
||||
const handleSubmit = async () => {
|
||||
if (!username.trim() || !password) {
|
||||
Alert.alert('Error', 'Por favor completa todos los campos');
|
||||
return;
|
||||
}
|
||||
|
||||
if (isRegister) {
|
||||
if (password.length < 8) {
|
||||
Alert.alert('Error', 'La contraseña debe tener al menos 8 caracteres');
|
||||
return;
|
||||
}
|
||||
if (password !== confirmPassword) {
|
||||
Alert.alert('Error', 'Las contraseñas no coinciden');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await login(username, password);
|
||||
if (biometricsAvailable) {
|
||||
await saveBiometricCredentials(username);
|
||||
if (isRegister) {
|
||||
await register(username.trim(), password);
|
||||
Alert.alert('Éxito', 'Cuenta creada correctamente', [
|
||||
{ text: 'OK', onPress: () => setTab('login') },
|
||||
]);
|
||||
} else {
|
||||
await login(username.trim(), password);
|
||||
if (biometricsAvailable) {
|
||||
await saveBiometricCredentials(username.trim());
|
||||
}
|
||||
router.replace('/(tabs)');
|
||||
}
|
||||
router.replace('/(tabs)');
|
||||
} catch (error) {
|
||||
Alert.alert('Error', 'Credenciales incorrectas');
|
||||
Alert.alert(
|
||||
'Error',
|
||||
isRegister ? 'No se pudo crear la cuenta' : 'Credenciales incorrectas'
|
||||
);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
@@ -95,61 +130,162 @@ export default function LoginScreen() {
|
||||
style={[styles.container, { backgroundColor: colors.background }]}
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||
>
|
||||
<View style={styles.form}>
|
||||
<Text style={[styles.title, { color: colors.text }]}>Iniciar Sesión</Text>
|
||||
<Text style={[styles.subtitle, { color: colors.textSecondary }]}>Ingresa tus credenciales para continuar</Text>
|
||||
|
||||
<View style={styles.inputContainer}>
|
||||
<Text style={[styles.label, { color: colors.text }]}>Usuario</Text>
|
||||
<TextInput
|
||||
style={[styles.input, { backgroundColor: colors.card, color: colors.text }]}
|
||||
value={username}
|
||||
onChangeText={setUsername}
|
||||
placeholder="Tu usuario"
|
||||
placeholderTextColor={colors.textSecondary}
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
<View style={styles.content}>
|
||||
{/* Logo */}
|
||||
<View style={styles.logoSection}>
|
||||
<Image
|
||||
source={require('../../assets/farmaclic_logo.png')}
|
||||
style={styles.logo}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
<Text style={[styles.brandName, { color: colors.text }]}>FarmaClic</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.inputContainer}>
|
||||
<Text style={[styles.label, { color: colors.text }]}>Contraseña</Text>
|
||||
<TextInput
|
||||
style={[styles.input, { backgroundColor: colors.card, color: colors.text }]}
|
||||
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>
|
||||
|
||||
{biometricsAvailable && biometricUsername && (
|
||||
{/* Tabs */}
|
||||
<View style={[styles.tabBar, { backgroundColor: colors.surfaceLow }]}>
|
||||
<TouchableOpacity
|
||||
style={[styles.biometricButton, { backgroundColor: colors.card, borderColor: colors.primary }]}
|
||||
onPress={handleBiometricLogin}
|
||||
style={[
|
||||
styles.tab,
|
||||
!isRegister && [styles.tabActive, { backgroundColor: colors.primary }],
|
||||
]}
|
||||
onPress={() => setTab('login')}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Ionicons name="finger-print" size={24} color={colors.primary} />
|
||||
<Text style={[styles.biometricText, { color: colors.primary }]}>Iniciar con biometría</Text>
|
||||
<Text
|
||||
style={[
|
||||
styles.tabText,
|
||||
{ color: isRegister ? colors.textSecondary : colors.onPrimaryContainer },
|
||||
!isRegister && styles.tabTextActive,
|
||||
]}
|
||||
>
|
||||
Iniciar Sesión
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.tab,
|
||||
isRegister && [styles.tabActive, { backgroundColor: colors.primary }],
|
||||
]}
|
||||
onPress={() => setTab('register')}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.tabText,
|
||||
{ color: !isRegister ? colors.textSecondary : colors.onPrimaryContainer },
|
||||
isRegister && styles.tabTextActive,
|
||||
]}
|
||||
>
|
||||
Crear Cuenta
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Card */}
|
||||
<View style={[styles.card, { backgroundColor: colors.card }, shadows.card]}>
|
||||
{/* Header */}
|
||||
<Text style={[styles.title, { color: colors.text }]}>
|
||||
{isRegister ? 'Crea tu cuenta' : 'Bienvenido de nuevo'}
|
||||
</Text>
|
||||
<Text style={[styles.subtitle, { color: colors.textSecondary }]}>
|
||||
{isRegister
|
||||
? 'Guarda tu dirección y recibe notificaciones cuando lleguen medicamentos.'
|
||||
: 'Inicia sesión para gestionar tu perfil y notificaciones.'}
|
||||
</Text>
|
||||
|
||||
{/* Username */}
|
||||
<View style={[styles.inputWrapper, { backgroundColor: colors.surfaceLow, borderColor: colors.border }]}>
|
||||
<Ionicons name="person-outline" size={20} color={colors.textSecondary} style={styles.inputIcon} />
|
||||
<TextInput
|
||||
style={[styles.input, { color: colors.text }]}
|
||||
value={username}
|
||||
onChangeText={setUsername}
|
||||
placeholder="Usuario"
|
||||
placeholderTextColor={colors.textSecondary}
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
autoComplete="username"
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Password */}
|
||||
<View style={[styles.inputWrapper, { backgroundColor: colors.surfaceLow, borderColor: colors.border }]}>
|
||||
<Ionicons name="lock-closed-outline" size={20} color={colors.textSecondary} style={styles.inputIcon} />
|
||||
<TextInput
|
||||
style={[styles.input, { color: colors.text }]}
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
placeholder="Contraseña"
|
||||
placeholderTextColor={colors.textSecondary}
|
||||
secureTextEntry
|
||||
autoComplete={isRegister ? 'new-password' : 'current-password'}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Confirm password (register only) */}
|
||||
{isRegister && (
|
||||
<View style={[styles.inputWrapper, { backgroundColor: colors.surfaceLow, borderColor: colors.border }]}>
|
||||
<Ionicons name="lock-closed-outline" size={20} color={colors.textSecondary} style={styles.inputIcon} />
|
||||
<TextInput
|
||||
style={[styles.input, { color: colors.text }]}
|
||||
value={confirmPassword}
|
||||
onChangeText={setConfirmPassword}
|
||||
placeholder="Confirmar contraseña"
|
||||
placeholderTextColor={colors.textSecondary}
|
||||
secureTextEntry
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Hints (register only) */}
|
||||
{isRegister && (
|
||||
<View style={styles.hints}>
|
||||
<Text style={[styles.hint, { color: colors.textSecondary }]}>
|
||||
<Ionicons name="information-circle-outline" size={14} color={colors.textSecondary} /> 3-32 caracteres para el usuario
|
||||
</Text>
|
||||
<Text style={[styles.hint, { color: colors.textSecondary }]}>
|
||||
<Ionicons name="information-circle-outline" size={14} color={colors.textSecondary} /> Mínimo 8 caracteres para la contraseña
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Submit button */}
|
||||
<TouchableOpacity
|
||||
style={[styles.button, { backgroundColor: colors.primary }, isLoading && styles.buttonDisabled]}
|
||||
onPress={handleSubmit}
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Ionicons name="hourglass" size={20} color={colors.onPrimaryContainer} />
|
||||
) : (
|
||||
<Text style={[styles.buttonText, { color: colors.onPrimaryContainer }]}>
|
||||
{isRegister ? 'Crear Cuenta' : 'Iniciar Sesión'}
|
||||
</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Biometrics (login only) */}
|
||||
{!isRegister && biometricsAvailable && biometricUsername && (
|
||||
<TouchableOpacity
|
||||
style={[styles.biometricButton, { borderColor: colors.primary }]}
|
||||
onPress={handleBiometricLogin}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Ionicons name="finger-print" size={22} color={colors.primary} />
|
||||
<Text style={[styles.biometricText, { color: colors.primary }]}>Iniciar con biometría</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Footer link */}
|
||||
<TouchableOpacity
|
||||
style={styles.linkButton}
|
||||
onPress={() => router.push('/auth/register')}
|
||||
onPress={() => setTab(isRegister ? 'login' : 'register')}
|
||||
>
|
||||
<Text style={[styles.linkText, { color: colors.primary }]}>¿No tienes cuenta? Regístrate</Text>
|
||||
<Text style={[styles.linkText, { color: colors.primary }]}>
|
||||
{isRegister ? '¿Ya tienes cuenta? Inicia sesión' : '¿No tienes cuenta? Regístrate'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
@@ -160,54 +296,102 @@ const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
form: {
|
||||
content: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
padding: spacing.xl,
|
||||
paddingHorizontal: spacing.lg,
|
||||
gap: spacing.lg,
|
||||
},
|
||||
title: {
|
||||
fontSize: 28,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: spacing.sm,
|
||||
logoSection: {
|
||||
alignItems: 'center',
|
||||
gap: spacing.sm,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 16,
|
||||
marginBottom: spacing.xl,
|
||||
logo: {
|
||||
width: 80,
|
||||
height: 80,
|
||||
},
|
||||
inputContainer: {
|
||||
marginBottom: spacing.md,
|
||||
brandName: {
|
||||
fontSize: 22,
|
||||
fontWeight: '700',
|
||||
letterSpacing: -0.3,
|
||||
},
|
||||
label: {
|
||||
tabBar: {
|
||||
flexDirection: 'row',
|
||||
borderRadius: borderRadius.lg,
|
||||
padding: 4,
|
||||
},
|
||||
tab: {
|
||||
flex: 1,
|
||||
paddingVertical: spacing.sm + 2,
|
||||
borderRadius: borderRadius.md,
|
||||
alignItems: 'center',
|
||||
},
|
||||
tabActive: {
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 2,
|
||||
},
|
||||
tabText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '500',
|
||||
},
|
||||
tabTextActive: {
|
||||
fontWeight: '700',
|
||||
},
|
||||
card: {
|
||||
borderRadius: borderRadius.xl,
|
||||
padding: spacing.lg,
|
||||
gap: spacing.sm,
|
||||
},
|
||||
title: {
|
||||
fontSize: 22,
|
||||
fontWeight: '700',
|
||||
marginBottom: spacing.xs,
|
||||
},
|
||||
input: {
|
||||
subtitle: {
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
marginBottom: spacing.sm,
|
||||
},
|
||||
inputWrapper: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderRadius: borderRadius.md,
|
||||
padding: spacing.md,
|
||||
borderWidth: 1,
|
||||
paddingHorizontal: spacing.md,
|
||||
},
|
||||
inputIcon: {
|
||||
marginRight: spacing.sm,
|
||||
},
|
||||
input: {
|
||||
flex: 1,
|
||||
paddingVertical: spacing.md,
|
||||
fontSize: 16,
|
||||
},
|
||||
hints: {
|
||||
gap: 2,
|
||||
marginTop: spacing.xs,
|
||||
},
|
||||
hint: {
|
||||
fontSize: 12,
|
||||
lineHeight: 18,
|
||||
},
|
||||
button: {
|
||||
backgroundColor: '#7fbf8f',
|
||||
borderRadius: borderRadius.md,
|
||||
padding: spacing.md,
|
||||
alignItems: 'center',
|
||||
marginTop: spacing.md,
|
||||
marginTop: spacing.sm,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
buttonDisabled: {
|
||||
opacity: 0.6,
|
||||
},
|
||||
buttonText: {
|
||||
color: '#ffffff',
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
},
|
||||
linkButton: {
|
||||
marginTop: spacing.lg,
|
||||
alignItems: 'center',
|
||||
},
|
||||
linkText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '700',
|
||||
},
|
||||
biometricButton: {
|
||||
flexDirection: 'row',
|
||||
@@ -215,12 +399,20 @@ const styles = StyleSheet.create({
|
||||
justifyContent: 'center',
|
||||
borderRadius: borderRadius.md,
|
||||
padding: spacing.md,
|
||||
marginTop: spacing.md,
|
||||
marginTop: spacing.xs,
|
||||
borderWidth: 1,
|
||||
gap: spacing.sm,
|
||||
},
|
||||
biometricText: {
|
||||
fontSize: 16,
|
||||
fontSize: 15,
|
||||
fontWeight: '600',
|
||||
},
|
||||
linkButton: {
|
||||
alignItems: 'center',
|
||||
paddingVertical: spacing.sm,
|
||||
},
|
||||
linkText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
marginLeft: spacing.sm,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,167 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
Alert
|
||||
} from 'react-native';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { register } from '../../services/auth';
|
||||
import { useThemeContext } from '../../components/ThemeProvider';
|
||||
import { spacing, borderRadius } from '../../constants/theme';
|
||||
import { Redirect } from 'expo-router';
|
||||
|
||||
export default function RegisterScreen() {
|
||||
const router = useRouter();
|
||||
const { colors } = useThemeContext();
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const handleRegister = async () => {
|
||||
if (!username || !password || !confirmPassword) {
|
||||
Alert.alert('Error', 'Por favor completa todos los campos');
|
||||
return;
|
||||
}
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
Alert.alert('Error', 'Las contraseñas no coinciden');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await register(username, password);
|
||||
router.replace('/(tabs)');
|
||||
} catch (error) {
|
||||
Alert.alert('Error', 'No se pudo crear la cuenta');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={[styles.container, { backgroundColor: colors.background }]}
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||
>
|
||||
<View style={styles.form}>
|
||||
<Text style={[styles.title, { color: colors.text }]}>Crear Cuenta</Text>
|
||||
<Text style={[styles.subtitle, { color: colors.textSecondary }]}>Regístrate para empezar</Text>
|
||||
|
||||
<View style={styles.inputContainer}>
|
||||
<Text style={[styles.label, { color: colors.text }]}>Usuario</Text>
|
||||
<TextInput
|
||||
style={[styles.input, { backgroundColor: colors.card, color: colors.text }]}
|
||||
value={username}
|
||||
onChangeText={setUsername}
|
||||
placeholder="Elige un usuario"
|
||||
placeholderTextColor={colors.textSecondary}
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.inputContainer}>
|
||||
<Text style={[styles.label, { color: colors.text }]}>Contraseña</Text>
|
||||
<TextInput
|
||||
style={[styles.input, { backgroundColor: colors.card, color: colors.text }]}
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
placeholder="Elige una contraseña"
|
||||
placeholderTextColor={colors.textSecondary}
|
||||
secureTextEntry
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.inputContainer}>
|
||||
<Text style={[styles.label, { color: colors.text }]}>Confirmar Contraseña</Text>
|
||||
<TextInput
|
||||
style={[styles.input, { backgroundColor: colors.card, color: colors.text }]}
|
||||
value={confirmPassword}
|
||||
onChangeText={setConfirmPassword}
|
||||
placeholder="Repite la contraseña"
|
||||
placeholderTextColor={colors.textSecondary}
|
||||
secureTextEntry
|
||||
/>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
style={[styles.button, isLoading && styles.buttonDisabled]}
|
||||
onPress={handleRegister}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Text style={styles.buttonText}>
|
||||
{isLoading ? 'Creando cuenta...' : 'Crear Cuenta'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.linkButton}
|
||||
onPress={() => router.back()}
|
||||
>
|
||||
<Text style={[styles.linkText, { color: colors.primary }]}>¿Ya tienes cuenta? Inicia sesión</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
export default function RegisterRedirect() {
|
||||
return <Redirect href="/auth/login" />;
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
form: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
padding: spacing.xl,
|
||||
},
|
||||
title: {
|
||||
fontSize: 28,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: spacing.sm,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 16,
|
||||
marginBottom: spacing.xl,
|
||||
},
|
||||
inputContainer: {
|
||||
marginBottom: spacing.md,
|
||||
},
|
||||
label: {
|
||||
fontSize: 14,
|
||||
fontWeight: '500',
|
||||
marginBottom: spacing.xs,
|
||||
},
|
||||
input: {
|
||||
borderRadius: borderRadius.md,
|
||||
padding: spacing.md,
|
||||
fontSize: 16,
|
||||
},
|
||||
button: {
|
||||
backgroundColor: '#7fbf8f',
|
||||
borderRadius: borderRadius.md,
|
||||
padding: spacing.md,
|
||||
alignItems: 'center',
|
||||
marginTop: spacing.md,
|
||||
},
|
||||
buttonDisabled: {
|
||||
opacity: 0.6,
|
||||
},
|
||||
buttonText: {
|
||||
color: '#ffffff',
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
},
|
||||
linkButton: {
|
||||
marginTop: spacing.lg,
|
||||
alignItems: 'center',
|
||||
},
|
||||
linkText: {
|
||||
fontSize: 14,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -149,6 +149,10 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .recent-tag {
|
||||
background: #2c3038;
|
||||
}
|
||||
|
||||
.recent-distance {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"cli": {
|
||||
"version": ">= 20.5.1",
|
||||
"appVersionSource": "remote"
|
||||
},
|
||||
"build": {
|
||||
"development": {
|
||||
"developmentClient": true,
|
||||
"distribution": "internal"
|
||||
},
|
||||
"preview": {
|
||||
"distribution": "internal"
|
||||
},
|
||||
"production": {
|
||||
"autoIncrement": true
|
||||
}
|
||||
},
|
||||
"submit": {
|
||||
"production": {}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user